首页接口

ZZJ

2022-04-02 45faaf27722588e92050e2e3eace9b3704377048

 src/views/index/index.vue

@@ -3,12 +3,21 @@
    <!-- 表头 -->
    <IndexHeader></IndexHeader>
    <!-- 轮播图 -->
    <Banner ref="Banner"></Banner>
    <Banner ref="Banner" :bannerList="bannerList"></Banner>

    <div class="bannerLink" @click="jump"></div>

    <!-- 轮播图控制器 -->
    <ul class="bannerControl">
      <li v-for="i in 4" :key="i" @click="toggleBanner(i)">
        <button class="inner" :class="{ active: activeBanner == i }"></button>
      <li
        v-for="(item, index) in bannerList"
        :key="index"
        @click="toggleBanner(index + 1)"
      >
        <button
          class="inner"
          :class="{ active: activeBanner == index + 1 }"
        ></button>
      </li>
    </ul>

@@ -27,8 +36,8 @@
      <div class="tabs">
        <div
          class="tabItem"
          :class="{ active: activeCommend === 0 }"
          @click="activeCommend = 0"
          :class="{ active: activeCommend === 3 }"
          @click="selecTab(3)"
        >
          <img src="/images/index/算法.png" alt="" />
          <div class="label">算法</div>
@@ -36,8 +45,8 @@

        <div
          class="tabItem"
          :class="{ active: activeCommend === 1 }"
          @click="activeCommend = 1"
          :class="{ active: activeCommend === 4 }"
          @click="selecTab(4)"
        >
          <img src="/images/index/应用.png" alt="" />
          <div class="label">应用</div>
@@ -46,7 +55,10 @@
    </div>
    <!-- tab内容 -->
    <div class="commendTabsContent">
      <commendContent :commendData="commendData"></commendContent>
      <commendContent
        :commendData="commendData"
        @refresh="getRecommend"
      ></commendContent>
    </div>

    <!-- 热门产品 -->
@@ -56,16 +68,28 @@
        class="productItem"
        v-for="(item, index) in productData"
        :key="index"
        :class="{ short: item.type == 1 || item.type == 2 }"
        :class="{ short: item.typeId == 4 || item.typeId == 1 }"
      >
        <productLeft :data="item"></productLeft>
        <rightRrid v-if="item.type == 0" :data="item"></rightRrid>
        <rightColumn v-if="item.type == 1" :data="item"></rightColumn>
        <rightForm v-if="item.type == 2" :data="item"></rightForm>
        <rightTabs v-if="item.type == 3" :data="item"></rightTabs>
        <rightRrid v-if="item.typeId == 3" :data="item"></rightRrid>
        <rightColumn v-if="item.typeId == 4" :data="item"></rightColumn>
        <rightForm v-if="item.typeId == 1" :data="item"></rightForm>
        <rightTabs v-if="item.typeId == 2" :data="item"></rightTabs>
      </div>

      <div
        class="productItem"
        v-for="(item, index) in productData1"
        :key="index"
        :class="{ short: item.typeId == 4 || item.typeId == 1 }"
      >
        <productLeft :data="item"></productLeft>
        <rightForm v-if="item.typeId == 1" :data="item"></rightForm>
        <rightTabs v-if="item.typeId == 2" :data="item"></rightTabs>
      </div>
    </div>
    <Connect></Connect>

    <Connect v-if="showConnect"></Connect>

    <!-- 页尾 -->
    <Footer></Footer>
@@ -86,6 +110,12 @@
import Connect from "@/components/Connect";
import Footer from "@/components/Footer";

import {
  getIndexPics,
  getIndexModelRecommend,
  getModelList,
} from "@/api/product";

export default {
  name: "Index",
  components: {
@@ -102,7 +132,15 @@
    Connect,
    Footer,
  },

  created() {
    this.getBanner();
    this.getRecommend();
    this.getModule();
    window.addEventListener("scroll", this.scrollListener);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollListener);
  },
  data() {
    return {
      commendCardData: [
@@ -126,140 +164,16 @@
        },
      ], //推荐卡片数据
      activeBanner: 1, //选中的banner
      activeCommend: 0, //选中的推荐tabs
      commendData: [
        {
          img: "/images/index/15戴口罩.png",
          title: "戴口罩",
          des: "对火车驾驶舱的监控视频进行检测，当驾驶人员出现趴伏现象时，将结果记录下来",
          priceNew: "540.00",
          priceOld: "900.00",
        },
        {
          img: "/images/index/1仰卧检测.png",
          title: "仰卧检测",
          des: "对火车驾驶舱的监控视频进行检测，当驾驶人员出现趴伏现象时，将结果记录下来",
          priceNew: "540.00",
          priceOld: "900.00",
        },
        {
          img: "/images/index/11滞留.png",
          title: "滞留",
          des: "对火车驾驶舱的监控视频进行检测，当驾驶人员出现趴伏现象时，将结果记录下来",
          priceNew: "540.00",
          priceOld: "900.00",
        },
        {
          img: "/images/index/34跌倒.png",
          title: "跌倒",
          des: "对火车驾驶舱的监控视频进行检测，当驾驶人员出现趴伏现象时，将结果记录下来",
          priceNew: "540.00",
          priceOld: "900.00",
        },
      ], //推荐tab的数据
      productData: [
        {
          router: "/product",
          type: 0,
          img: "/images/index/AI爆款.png",
          title: "AI爆款",
          des: "精心挑选的热门算法及应用，总有一款适合你",
          product: [
            {
              icon: "/images/index/20睡岗.png",
              title: "睡岗",
              des: "对火车驾驶舱的监控视频进行检测，当驾驶人员出现趴伏现象时，将结果记录下来",
              priceNew: "540.00",
              priceOld: "900.00",
            },
            {
              icon: "/images/index/13滞留.png",
              title: "滞留",
              des: "对火车驾驶舱的监控视频进行检测，当驾驶人员出现趴伏现象时，将结果记录下来",
              priceNew: "540.00",
              priceOld: "900.00",
            },
            {
              icon: "/images/index/1仰卧检测.png",
              title: "仰卧检测",
              des: "对火车驾驶舱的监控视频进行检测，当驾驶人员出现趴伏现象时，将结果记录下来",
              priceNew: "540.00",
              priceOld: "900.00",
            },
            {
              icon: "/images/index/34跌倒.png",
              title: "跌倒",
              des: "对火车驾驶舱的监控视频进行检测，当驾驶人员出现趴伏现象时，将结果记录下来",
              priceNew: "540.00",
              priceOld: "900.00",
            },
            {
              icon: "/images/index/15戴口罩.png",
              title: "戴口罩",
              des: "对火车驾驶舱的监控视频进行检测，当驾驶人员出现趴伏现象时，将结果记录下来",
              priceNew: "540.00",
              priceOld: "900.00",
            },
            {
              icon: "/images/index/28玩手机.png",
              title: "玩手机",
              des: "对火车驾驶舱的监控视频进行检测，当驾驶人员出现趴伏现象时，将结果记录下来",
              priceNew: "540.00",
              priceOld: "900.00",
            },
          ],
        },

      activeCommend: 3, //选中的推荐tabs
      commendData: [], //推荐tab的数据
      productData: [],
      productData1: [
        {
          router: "/",
          type: 1,
          img: "/images/index/管理中心.png",
          title: "管理中心",
          des: "性价比超高的管理中心，刚需产品一键购齐，不仅省钱还省心",
          product: [
            {
              icon: "/images/index/比对库管理.png",
              title: "比对库管理",
              des: "对所有联网的设备进行全方位管理",
              menu: [
                "支持设备的基本信息、硬件信息、资源情况、安装的算法/应用等功能监管",
                "支持对设备进行重启、系统清理等操作",
              ],
              priceNew: "540.00",
              priceOld: "900.00",
            },
            {
              icon: "/images/index/数据推送.png",
              title: "数据推送",
              des: "对所有联网的设备进行全方位管理",
              menu: [
                "支持设备的基本信息、硬件信息、资源情况、安装的算法/应用等功能监管",
                "支持对设备进行重启、系统清理等操作",
                "支持对设备进行重启、系统清理等操作",
              ],
              priceNew: "540.00",
              priceOld: "900.00",
            },
            {
              icon: "/images/index/统计查询.png",
              title: "统计查询",
              des: "对所有联网的设备进行全方位管理",
              menu: [
                "支持设备的基本信息、硬件信息、资源情况、安装的算法/应用等功能监管",
                "支持对设备进行重启、系统清理等操作",
              ],
              priceNew: "540.00",
              priceOld: "900.00",
            },
          ],
        },

        {
          router: "/",
          type: 2,
          img: "/images/index/云服务.png",
          title: "云服务",
          des: "一键购买，开启AI应用之旅",
          typeId: 1,
          pic: "/images/index/云服务.png",
          name: "云服务",
          desc: "一键购买，开启AI应用之旅",
          product: {
            title: "AI-0",
            menu: [
@@ -296,10 +210,10 @@

        {
          router: "/",
          type: 3,
          img: "/images/index/边缘计算设备.png",
          title: "边缘计算设备",
          des: "一种部署在近场侧的高可用的软硬一体产品，提升应用程序的快速响应能力、节省带宽流量成本",
          typeId: 2,
          pic: "/images/index/边缘计算设备.png",
          name: "边缘计算设备",
          desc: "一种部署在近场侧的高可用的软硬一体产品，提升应用程序的快速响应能力、节省带宽流量成本",
          product: [
            {
              name: "边缘计算设备1",
@@ -450,6 +364,8 @@
      ], // 热门产品数据
      timer: null, //向上回滚动画
      ConnectTimer: null, // 控制弹层的定时器
      bannerList: [],
      showConnect: false, //显示联系我们与回到顶部
    };
  },
  methods: {
@@ -457,6 +373,46 @@
    toggleBanner(i) {
      this.activeBanner = i;
      this.$refs["Banner"].toggleBanner(i);
    },
    //获取轮播图
    async getBanner() {
      const res = await getIndexPics();
      if (res.success) {
        this.bannerList = res.data.lists;
      }
    },
    //轮播图跳转连接
    jump() {
      window.open(this.bannerList[this.activeBanner - 1].url);
    },
    //获取推荐列表
    async getRecommend() {
      const res = await getIndexModelRecommend({ typeId: this.activeCommend });
      this.commendData = res.data.productList;
    },
    // 获取产品列表
    async getModule() {
      const res = await getModelList();
      if (res && res.success) {
        this.productData = res.data.modelList;
      }
    },
    //选择推荐tab
    selecTab(id) {
      this.activeCommend = id;
      this.getRecommend();
    },
    //添加滚动监听
    scrollListener() {
      //页面滑动触发事件 (滚动条移动则调用是否显示返回顶部按钮事件)

      if (document.documentElement.scrollTop < 1100) {
        this.showConnect = false;
      } else {
        this.showConnect = true;
      }

      //检查滚动条是否在顶部，控制返回顶部按钮的隐藏和显示
    },
  },
};
@@ -505,6 +461,14 @@
    }
  }

  .bannerLink {
    top: 60px;
    position: absolute;
    width: 100%;
    height: 410px;
    cursor: pointer;
  }

  .overCard {
    position: absolute;
    top: 394px;