Index.vue

<template>
    <section class="news">
        <Header bgcolor="#fff" :title="title" :meaushow="meaushow" :download="loginCheck"></Header>
        <div class="new-head boxsiz">
            <a class="logo" href="/">
                <img src="../../assets/images/download/logo.png" alt="猎芯网">
            </a>
            <span class="t1">猎芯网</span>
        </div>
        <template v-if="getfileuploadbanner.length > 0">
            <van-swipe :autoplay="3000" :height="bannerHeight" class="a">
                <van-swipe-item v-for="(item, index) in getfileuploadbanner" :key="index">
                    <a :href="item.url" :target="item.window_open > 0 ?'_blank':'_self'">
                        <img :src="item.images" height="100%" width="100%"/>
                    </a>
                </van-swipe-item>
            </van-swipe>
        </template>
        <div class="nav-tab">
            <ul>
                <li @click="handleSelect(index,item.class_id)" :class="{'curr':active==index}" v-for="(item, index) in  showClass" :key="index">{{item.class_name}}</li>
            </ul>
        </div>
        <div class="down-list">
            <ul class="boxsiz">
                <li class="boxsiz" v-for="(item, index) in  articleShowData" :key="index">
                    <template v-if="loginCheck">
                        <p class="t1">{{item.title}}</p>
                    </template>
                    <template v-else>
                        <p class="t1">{{item.title}}</p>
                    </template>
                    <div class="bar">
                        <p class="t2">已下载{{item.download_num}}次</p>
                        <template v-if="loginCheck">
                            <a class="btn" @click="download(item.data_id,1)">下载</a>
                        </template>
                        <template v-else>
                            <a class="btn" @click="toUrl">下载</a>
                        </template>
                    </div>
                </li>
            </ul>
            <p class="txt-tip">
                法律声明：本资料库的文档为网络收集，仅供学习使用，勿做商用
            </p>
        </div>
        <template v-if="!loginCheck">
            <div class="islogin" @click="toUrl">
                <img src="../../assets/images/download/loading.png" alt="">
                <a href="javascript:;">登录查看更多哦</a>
            </div>
        </template>
        <div class="slide-bar" v-backTopWindow style="cursor: pointer;">
            <div class="backtop" v-if="navListfixed">
                <i class="iconfont icon-xiangshang1"></i>
            </div>
        </div>
    </section>
</template>

<script>
  import Vue from "vue";
  import {mapState} from "vuex";
  import {Swipe, SwipeItem, Toast} from "vant";
  import Header from "@/views/common/Header.vue";

  Vue.use(Swipe).use(SwipeItem).use(Toast);

  export default {
    name: "news",
    data() {
      return {
        title: "资料下载",
        p: 1,
        active: 0,
        meaushow: true,
        bannerHeight: 200,
        navListfixed: false
      };
    },
    computed: {
      ...mapState({
        getfileuploadbanner: state => state.download.getfileuploadbanner,
        articleShowData: state => state.download.articleShowData,
        loginCheck: state => state.common.loginCheck,
        showClass: state => state.download.showClass
      })
    },
    created() {
      this.getData();
    },
    mounted() {
      this.scrollFns();
    },
    methods: {
      getData() {
        this.$store.dispatch({
          type: "getfileuploadbanner"
        });
        this.$store.dispatch({
          type: "showClass"
        });
        this.$store.dispatch({
          type: "articleShowData"
        });
        this.$store.dispatch({
          type: "loginCheck",
          is_jump: false
        });
      },
      handleSelect(index, id) {
        this.active = index;

        this.$store.dispatch({
          type: "articleShowData",
          class_id: id
        });
      },
      download(id, download) {
        this.$store.dispatch({
          type: "downloadFile",
          id: id,
          download, download
        });
      },
      toUrl() {
        Toast({
          message: "请登录后下载",
          duration: 1000
        });

        setTimeout(() => {
          window.location.href = '/v3/login?referer=%2fh5%2fview%2f%23%2fdownload&from=download'
        }, 1000)

      },
      scrollFns() {
        var self = this;
        window.onscroll = function () {
          var t = document.documentElement.scrollTop || document.body.scrollTop;
          if (t >= 300) {
            self.navListfixed = true;
          } else {
            self.navListfixed = false;
          }
        };
      }
    },
    components: {
      Header
    }
  };
</script>


<style scoped>
    @import "../../assets/css/news/down.css";
</style>