heyujie
2022-07-15 a0b5604fcefa0c7900ecc50830b718f77bba8f39
src/views/index/index.vue
@@ -12,11 +12,11 @@
      <li
        v-for="(item, index) in bannerList"
        :key="index"
        @click="toggleBanner(index + 1)"
        @click="toggleBanner(index)"
      >
        <button
          class="inner"
          :class="{ active: activeBanner == index + 1 }"
          :class="{ active: activeBanner == index }"
        ></button>
      </li>
    </ul>
@@ -26,7 +26,7 @@
        <!-- 推荐卡片 -->
        <commendCard :commendCardData="commendCardData"></commendCard>
        <!-- 用户card -->
        <userCard></userCard>
        <userCard :userCardArr="userCardArr"></userCard>
      </div>
    </div>
@@ -80,7 +80,7 @@
      <div
        class="productItem"
        v-for="(item, index) in productData1"
        :key="index"
        :key="index + '1'"
        :class="{ short: item.typeId == 4 || item.typeId == 1 }"
      >
        <productLeft :data="item"></productLeft>
@@ -89,7 +89,7 @@
      </div>
    </div>
    <Connect v-if="showConnect"></Connect>
    <Connect></Connect>
    <!-- 页尾 -->
    <Footer></Footer>
@@ -115,6 +115,7 @@
  getIndexModelRecommend,
  getModelList,
} from "@/api/product";
import { getUserOrderInfo } from "@/api/order";
export default {
  name: "Index",
@@ -136,10 +137,7 @@
    this.getBanner();
    this.getRecommend();
    this.getModule();
    window.addEventListener("scroll", this.scrollListener);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollListener);
    this.getUserBuyInfo();
  },
  data() {
    return {
@@ -163,10 +161,11 @@
          router: "/trialCenter",
        },
      ], //推荐卡片数据
      activeBanner: 1, //选中的banner
      activeBanner: 0, //选中的banner
      activeCommend: 3, //选中的推荐tabs
      commendData: [], //推荐tab的数据
      productData: [],
      userCardArr: [],
      productData1: [
        {
          router: "/",
@@ -213,12 +212,14 @@
          typeId: 2,
          pic: "/images/index/边缘计算设备.png",
          name: "边缘计算设备",
          desc: "一种部署在近场侧的高可用的软硬一体产品,提升应用程序的快速响应能力、节省带宽流量成本",
          desc:
            "一种部署在近场侧的高可用的软硬一体产品,提升应用程序的快速响应能力、节省带宽流量成本",
          product: [
            {
              name: "边缘计算设备1",
              title: "LE-V-S003 高性能边缘计算主机",
              des: "专为高性能视频应用打造,强悍的双志强处理器,轻松应对高算力应用场景的需求。",
              des:
                "专为高性能视频应用打造,强悍的双志强处理器,轻松应对高算力应用场景的需求。",
              content: [
                {
                  key: "特点",
@@ -242,7 +243,8 @@
            {
              name: "边缘计算设备2",
              title: "LE-V-S003 高性能边缘计算主机",
              des: "专为高性能视频应用打造,强悍的双志强处理器,轻松应对高算力应用场景的需求。",
              des:
                "专为高性能视频应用打造,强悍的双志强处理器,轻松应对高算力应用场景的需求。",
              content: [
                {
                  key: "特点",
@@ -266,7 +268,8 @@
            {
              name: "边缘计算设备3",
              title: "LE-V-S003 高性能边缘计算主机",
              des: "专为高性能视频应用打造,强悍的双志强处理器,轻松应对高算力应用场景的需求。",
              des:
                "专为高性能视频应用打造,强悍的双志强处理器,轻松应对高算力应用场景的需求。",
              content: [
                {
                  key: "特点",
@@ -290,7 +293,8 @@
            {
              name: "边缘计算设备4",
              title: "LE-V-S003 高性能边缘计算主机",
              des: "专为高性能视频应用打造,强悍的双志强处理器,轻松应对高算力应用场景的需求。",
              des:
                "专为高性能视频应用打造,强悍的双志强处理器,轻松应对高算力应用场景的需求。",
              content: [
                {
                  key: "特点",
@@ -314,7 +318,8 @@
            {
              name: "边缘计算设备5",
              title: "LE-V-S003 高性能边缘计算主机",
              des: "专为高性能视频应用打造,强悍的双志强处理器,轻松应对高算力应用场景的需求。",
              des:
                "专为高性能视频应用打造,强悍的双志强处理器,轻松应对高算力应用场景的需求。",
              content: [
                {
                  key: "特点",
@@ -338,7 +343,8 @@
            {
              name: "边缘计算设备6",
              title: "LE-V-S003 高性能边缘计算主机",
              des: "专为高性能视频应用打造,强悍的双志强处理器,轻松应对高算力应用场景的需求。",
              des:
                "专为高性能视频应用打造,强悍的双志强处理器,轻松应对高算力应用场景的需求。",
              content: [
                {
                  key: "特点",
@@ -365,10 +371,27 @@
      timer: null, //向上回滚动画
      ConnectTimer: null, // 控制弹层的定时器
      bannerList: [],
      showConnect: false, //显示联系我们与回到顶部
    };
  },
  methods: {
    getUserBuyInfo() {
      getUserOrderInfo({}).then((res) => {
        this.userCardArr = [
          {
            num: res.data.needPay,
            label: "待付款",
          },
          {
            num: res.data.needRenewal,
            label: "待续费",
          },
          {
            num: "_",
            label: "消息中心",
          },
        ];
      });
    },
    // 切换banner
    toggleBanner(i) {
      this.activeBanner = i;
@@ -402,18 +425,19 @@
      this.activeCommend = id;
      this.getRecommend();
    },
    //添加滚动监听
    scrollListener() {
      //页面滑动触发事件 (滚动条移动则调用是否显示返回顶部按钮事件)
      if (document.documentElement.scrollTop < 1100) {
        this.showConnect = false;
      } else {
        this.showConnect = true;
      }
      //检查滚动条是否在顶部,控制返回顶部按钮的隐藏和显示
    },
  },
  beforeRouteLeave(to, from, next) {
    let userInfo = sessionStorage.getItem("userInfo");
    if (
      !userInfo &&
      to.path !== "/login" &&
      to.path !== "/register" &&
      to.path !== "/connectUs"
    ) {
      next({ path: "/login" });
    } else {
      next();
    }
  },
};
</script>