From 45faaf27722588e92050e2e3eace9b3704377048 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期六, 02 四月 2022 18:44:30 +0800
Subject: [PATCH] 首页接口
---
src/views/index/index.vue | 266 +++++++++++++++++++++++------------------------------
1 files changed, 115 insertions(+), 151 deletions(-)
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index 179814f..2c7a273 100644
--- a/src/views/index/index.vue
+++ b/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, //閫変腑鐨刡anner
- activeCommend: 0, //閫変腑鐨勬帹鑽恡abs
- 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, //閫変腑鐨勬帹鑽恡abs
+ 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: "涓�閿喘涔帮紝寮�鍚疉I搴旂敤涔嬫梾",
+ typeId: 1,
+ pic: "/images/index/浜戞湇鍔�.png",
+ name: "浜戞湇鍔�",
+ desc: "涓�閿喘涔帮紝寮�鍚疉I搴旂敤涔嬫梾",
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;
--
Gitblit v1.8.0