web/saas-web.git

<template>
  <div class="index">
    <!-- 表头 -->
    <IndexHeader></IndexHeader>
    <!-- 轮播图 -->
    <Banner ref="Banner" :bannerList="bannerList"></Banner>
 
    <div class="bannerLink" @click="jump"></div>
 
    <!-- 轮播图控制器 -->
    <div class="bannerControl">
      <ul>
        <li
          v-for="(item, index) in bannerList"
          :key="index"
          @click="toggleBanner(index)"
        >
          <button
            class="inner"
            :class="{ active: activeBanner == index }"
          ></button>
        </li>
      </ul>
    </div>
 
    <div class="overCard">
      <div class="heart">
        <!-- 推荐卡片 -->
        <commendCard :commendCardData="commendCardData"></commendCard>
        <!-- 用户card -->
        <userCard :userCardArr="userCardArr"></userCard>
      </div>
    </div>
 
    <!-- 推荐tabs -->
    <div class="commendTabs">
      <div class="title">为您推荐</div>
      <div class="tabs">
        <div
          class="tabItem"
          :class="{ active: activeCommend === 3 }"
          @click="selecTab(3)"
        >
          <img src="/images/index/sdk.png" alt="" />
          <div class="label">算法</div>
        </div>
 
        <div
          class="tabItem"
          :class="{ active: activeCommend === 4 }"
          @click="selecTab(4)"
        >
          <img src="/images/index/app.png" alt="" />
          <div class="label">应用</div>
        </div>
      </div>
    </div>
    <!-- tab内容 -->
    <div class="commendTabsContent">
      <commendContent
        :commendData="commendData"
        @refresh="getRecommend"
      ></commendContent>
    </div>
 
    <!-- 热门产品 -->
    <div class="product">
      <div class="title">热门产品</div>
      <div
        class="productItem"
        v-for="(item, index) in productData"
        :key="index"
        :class="{ short: item.typeId == 4 || item.typeId == 1 }"
      >
        <productLeft :data="item"></productLeft>
        <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 + '1'"
        :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>
 
    <!-- 页尾 -->
    <Footer></Footer>
  </div>
</template>
 
<script>
import Banner from "@/views/index/components/banner";
import IndexHeader from "@/components/IndexHeader";
import commendCard from "@/views/index/components/commendCard";
import userCard from "@/views/index/components/userCard";
import commendContent from "@/views/index/components/commendContent";
import productLeft from "@/views/index/components/productLeft";
import rightRrid from "@/views/index/components/rightRrid";
import rightColumn from "@/views/index/components/rightColumn";
import rightForm from "@/views/index/components/rightForm";
import rightTabs from "@/views/index/components/rightTabs";
import Connect from "@/components/Connect";
import Footer from "@/components/Footer";
 
import {
  getIndexPics,
  getIndexModelRecommend,
  getModelList,
} from "@/api/product";
import { getUserOrderInfo } from "@/api/order";
 
export default {
  name: "Index",
  components: {
    Banner,
    IndexHeader,
    commendCard,
    userCard,
    commendContent,
    productLeft,
    rightRrid,
    rightColumn,
    rightForm,
    rightTabs,
    Connect,
    Footer,
  },
  created() {
    this.getBanner();
    this.getRecommend();
    this.getModule();
    this.getUserBuyInfo();
  },
  data() {
    return {
      commendCardData: [
        {
          img: "/images/index/compute.png",
          title: "全民云计算",
          des: "云服务特惠，限时3折起",
          router: "/",
        },
        {
          img: "/images/index/beforeSell.png",
          title: "售前咨询",
          des: "致电0315-2233066，领取您的专属权益",
          router: "/",
        },
        {
          img: "/images/index/trialCenter.png",
          title: "试用中心",
          des: "算法免费试用，为您提供 0 门槛实践机会",
          router: "/trialCenter",
        },
      ], //推荐卡片数据
      activeBanner: 0, //选中的banner
      activeCommend: 3, //选中的推荐tabs
      commendData: [], //推荐tab的数据
      productData: [],
      userCardArr: [],
      productData1: [
        {
          router: "/",
          typeId: 1,
          pic: "/images/index/modelbgc2.png",
          name: "云服务",
          desc: "一键购买，开启AI应用之旅",
          product: {
            title: "AI-0",
            menu: [
              "几十种算法免费使用",
              "不限流量",
              "录像云端存储，砸不坏，偷不走",
              "金融级加密技术，保障数据安全",
              "告警数据实时提醒",
              "支持循环存储最近 30 天的活动录像",
              "弹性可伸缩的计算服务",
            ],
            price: [
              {
                year: 1,
                priceNew: "540.00",
                priceOld: "900.00",
                discount: "",
              },
              {
                year: 2,
                priceNew: "1000.00",
                priceOld: "1800.00",
                discount: "8",
              },
              {
                year: 3,
                priceNew: "1400.00",
                priceOld: "2700.00",
                discount: "7",
              },
            ],
          },
        },
 
        {
          router: "/",
          typeId: 2,
          pic: "/images/index/modelbgc.png",
          name: "边缘计算设备",
          desc:
            "一种部署在近场侧的高可用的软硬一体产品，提升应用程序的快速响应能力、节省带宽流量成本",
          product: [
            {
              name: "边缘计算设备1",
              title: "LE-V-S003 高性能边缘计算主机",
              des:
                "专为高性能视频应用打造，强悍的双志强处理器，轻松应对高算力应用场景的需求。",
              content: [
                {
                  key: "特点",
                  value: [
                    "搭载两颗高性能志强处理器，可提供高达64T的凶猛算力",
                    "Server系列，具备单台与集群服务",
                    "支持算力虚拟化管控，高稳定性单机热备",
                  ],
                },
 
                {
                  key: "配置",
                  value: [
                    "英特尔 志强 Silver 4114 10核处理器 x 2",
                    "64GB 内存 (16GB x 4) + 480GB SSD 存储 + 8TB HDD 存储 千兆 LAN x 4",
                  ],
                },
              ],
              img: "/images/index/equipment.png",
            },
            {
              name: "边缘计算设备2",
              title: "LE-V-S003 高性能边缘计算主机",
              des:
                "专为高性能视频应用打造，强悍的双志强处理器，轻松应对高算力应用场景的需求。",
              content: [
                {
                  key: "特点",
                  value: [
                    "搭载两颗高性能志强处理器，可提供高达64T的凶猛算力",
                    "Server系列，具备单台与集群服务",
                    "支持算力虚拟化管控，高稳定性单机热备",
                  ],
                },
 
                {
                  key: "配置",
                  value: [
                    "英特尔 志强 Silver 4114 10核处理器 x 2",
                    "64GB 内存 (16GB x 4) + 480GB SSD 存储 + 8TB HDD 存储 千兆 LAN x 4",
                  ],
                },
              ],
              img: "/images/index/equipment.png",
            },
            {
              name: "边缘计算设备3",
              title: "LE-V-S003 高性能边缘计算主机",
              des:
                "专为高性能视频应用打造，强悍的双志强处理器，轻松应对高算力应用场景的需求。",
              content: [
                {
                  key: "特点",
                  value: [
                    "搭载两颗高性能志强处理器，可提供高达64T的凶猛算力",
                    "Server系列，具备单台与集群服务",
                    "支持算力虚拟化管控，高稳定性单机热备",
                  ],
                },
 
                {
                  key: "配置",
                  value: [
                    "英特尔 志强 Silver 4114 10核处理器 x 2",
                    "64GB 内存 (16GB x 4) + 480GB SSD 存储 + 8TB HDD 存储 千兆 LAN x 4",
                  ],
                },
              ],
              img: "/images/index/equipment.png",
            },
            {
              name: "边缘计算设备4",
              title: "LE-V-S003 高性能边缘计算主机",
              des:
                "专为高性能视频应用打造，强悍的双志强处理器，轻松应对高算力应用场景的需求。",
              content: [
                {
                  key: "特点",
                  value: [
                    "搭载两颗高性能志强处理器，可提供高达64T的凶猛算力",
                    "Server系列，具备单台与集群服务",
                    "支持算力虚拟化管控，高稳定性单机热备",
                  ],
                },
 
                {
                  key: "配置",
                  value: [
                    "英特尔 志强 Silver 4114 10核处理器 x 2",
                    "64GB 内存 (16GB x 4) + 480GB SSD 存储 + 8TB HDD 存储 千兆 LAN x 4",
                  ],
                },
              ],
              img: "/images/index/equipment.png",
            },
            {
              name: "边缘计算设备5",
              title: "LE-V-S003 高性能边缘计算主机",
              des:
                "专为高性能视频应用打造，强悍的双志强处理器，轻松应对高算力应用场景的需求。",
              content: [
                {
                  key: "特点",
                  value: [
                    "搭载两颗高性能志强处理器，可提供高达64T的凶猛算力",
                    "Server系列，具备单台与集群服务",
                    "支持算力虚拟化管控，高稳定性单机热备",
                  ],
                },
 
                {
                  key: "配置",
                  value: [
                    "英特尔 志强 Silver 4114 10核处理器 x 2",
                    "64GB 内存 (16GB x 4) + 480GB SSD 存储 + 8TB HDD 存储 千兆 LAN x 4",
                  ],
                },
              ],
              img: "/images/index/equipment.png",
            },
            {
              name: "边缘计算设备6",
              title: "LE-V-S003 高性能边缘计算主机",
              des:
                "专为高性能视频应用打造，强悍的双志强处理器，轻松应对高算力应用场景的需求。",
              content: [
                {
                  key: "特点",
                  value: [
                    "搭载两颗高性能志强处理器，可提供高达64T的凶猛算力",
                    "Server系列，具备单台与集群服务",
                    "支持算力虚拟化管控，高稳定性单机热备",
                  ],
                },
 
                {
                  key: "配置",
                  value: [
                    "英特尔 志强 Silver 4114 10核处理器 x 2",
                    "64GB 内存 (16GB x 4) + 480GB SSD 存储 + 8TB HDD 存储 千兆 LAN x 4",
                  ],
                },
              ],
              img: "/images/index/equipment.png",
            },
          ],
        },
      ], // 热门产品数据
      timer: null, //向上回滚动画
      ConnectTimer: null, // 控制弹层的定时器
      bannerList: [],
    };
  },
  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;
      this.$refs["Banner"].toggleBanner(i);
    },
    //获取轮播图
    async getBanner() {
      const res = await getIndexPics();
      if (res.success) {
        this.bannerList = res.data.lists;
      }
    },
    //轮播图跳转连接
    jump() {
      if (this.bannerList[this.activeBanner].url) {
        window.open(this.bannerList[this.activeBanner].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();
    },
  },
  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>
 
<style scoped lang="scss">
.index {
  position: relative;
 
  .bannerControl {
    position: absolute;
    width: 1280px;
    height: calc(28.18vw - 92px);
    min-height: 278px;
    bottom: 80px;
    top: 62px;
    left: 0;
    right: 0;
    transform: none;
    margin: 0 auto;
    z-index: 2;
 
    ul {
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;
    }
 
    li {
      display: inline-block;
      padding: 12px 4px;
      background-color: transparent;
      cursor: pointer;
 
      .inner {
        display: block;
        opacity: 0.48;
        width: 30px;
        height: 2px;
        background-color: #fff;
        border: none;
        outline: none;
        padding: 0;
        margin: 0;
        cursor: pointer;
        transition: 0.3s;
 
        &.active {
          background-color: #0065ff;
          opacity: 1;
        }
      }
    }
  }
 
  .bannerLink {
    top: 60px;
    position: absolute;
    width: 100%;
    height: calc(28.18vw - 132px);
    min-height: 236px;
    cursor: pointer;
    z-index: 3;
  }
 
  .overCard {
    position: absolute;
    height: calc(28.18vw + 38px);
    min-height: 408px;
    width: 100%;
    top: 62px;
 
    .heart {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      width: 1280px;
      margin: 0 auto;
      justify-content: space-between;
    }
  }
 
  .commendTabs {
    overflow: hidden;
    height: 258px;
    min-width: 1280px;
    background: #ffffff;
    box-shadow: 0px 4px 4px rgba(0, 43, 106, 0.12);
 
    .title {
      margin-top: 82px;
      font-size: 28px;
      text-align: center;
    }
 
    .tabs {
      width: 320px;
      margin: 0 auto;
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
 
      .tabItem {
        text-align: center;
        cursor: pointer;
 
        img {
          width: 60px;
          margin-bottom: 6px;
        }
 
        .label {
          margin-bottom: 27px;
          font-size: 16px;
        }
 
        &.active {
          border-bottom: 2px solid #0065ff;
          .label {
            color: #0065ff;
            font-weight: 700;
          }
        }
      }
    }
  }
 
  .commendTabsContent {
    padding: 80px 0;
    background-color: rgb(243, 245, 248);
    min-width: 1280px;
  }
 
  .product {
    background: url("/images/index/background.png");
    overflow: hidden;
    min-width: 1280px;
 
    .title {
      margin: 80px 0 60px 0;
      padding-top: 20px;
      min-width: 1280px;
      text-align: center;
      font-size: 28px;
    }
 
    .productItem {
      margin: 0 auto;
      margin-bottom: 60px;
      height: 462px;
      width: 1280px;
      display: flex;
 
      &.short {
        height: 400px;
      }
    }
  }
}
</style>