From 0a40ca57bdf34b5ac551664b1d484fa6a7e6197c Mon Sep 17 00:00:00 2001
From: donqi <ydq0308@qq.com>
Date: Thu, 11 Aug 2022 17:01:45 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E7=83=AD=E9=97=A8=E7=B1=BB?=
 =?UTF-8?q?=E7=9B=AE=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common/js/request.js                          |   8 ++
 components/common-card/vertical-card.vue      | 103 ++++++++++++++++++
 components/goods-card/vertical-goods-card.vue |  84 --------------
 pages/index/home.vue                          |  38 +++----
 4 files changed, 129 insertions(+), 104 deletions(-)
 create mode 100644 components/common-card/vertical-card.vue
 delete mode 100644 components/goods-card/vertical-goods-card.vue

diff --git a/common/js/request.js b/common/js/request.js
index 5fff12e..264348a 100644
--- a/common/js/request.js
+++ b/common/js/request.js
@@ -485,6 +485,14 @@ export default {
 			}
 		})
 		return res[1].data;
+	},
+	async getHotCategory(params = {}) {
+		let res = await uni.request({
+			url: '/goods/deptcategory/app/hot/category',
+			method: 'POST',
+			data: params
+		})
+		return res[1].data;
 	},
 	async getOrderMasterDetail(params = {}) {
 		let res = await uni.request({
diff --git a/components/common-card/vertical-card.vue b/components/common-card/vertical-card.vue
new file mode 100644
index 0000000..dd341f8
--- /dev/null
+++ b/components/common-card/vertical-card.vue
@@ -0,0 +1,103 @@
+<template>
+	<view>
+		<view class="cu-bar bg-white solid-bottom margin-top-sm">
+			<view class="action">
+				<text class="cuIcon-titles text-main-color"></text> {{title}}
+			</view>
+		</view>
+		<view class="cu-card case no-card solid-bottom bg-white padding-top-xs" v-for="(item, index) in list" :key="index" @click="clickCard(item)">
+			<view class="cu-item shadow">
+				<view v-if="item.imgs && item.imgs.length > 2" class="flex justify-between align-center multi-pic-container">
+					<view class="left-view"><image class="radius" :src="item.imgs[0]" mode="aspectFill"></image></view>
+					<view class="flex-column-between align-center right-view">
+						<image class="radius" :src="item.imgs[1]" mode="aspectFill"></image>
+						<image class="radius" :src="item.imgs[2]" mode="aspectFill"></image>
+					</view>
+				</view>
+				<view v-else-if="item.imgs && item.imgs.length > 1" class="flex justify-between align-center multi-pic-container">
+					<view class="left-view"><image class="radius" :src="item.imgs[0]" mode="aspectFill"></image></view>
+					<view class="left-view"><image class="radius" :src="item.imgs[1]" mode="aspectFill"></image></view>
+				</view>
+				<view v-else-if="item.imgs && item.imgs.length" class="flex justify-between align-center multi-pic-container">
+					<view class="whole-view"><image class="radius" :src="item.imgs[0]" mode="aspectFill"></image></view>
+				</view>
+				<view class="cu-item item-margin-custom">					
+					<view class="content flex-sub">
+						<view class="text-xl">{{item.name}}</view>
+						<view class="text-sm text-gray margin-tb-xs">{{item.desc == null ? "" : item.desc}}</view>
+						<view class="flex justify-between align-end">
+							<view class="text-red text-sm">自营直选，不满意重新服务，全程上险</view>
+							<!-- <view class="text-red text-price text-xl">{{item.goodsStandardList[0].goodsPrice}}</view> -->
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "vertical-card",
+		props: {
+			title: '',
+			list: {
+				type: Array,
+				default: []
+			},
+			multiPicMode: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {};
+		},
+		methods: {
+			clickCard(item) {
+				uni.$emit('clickCard', item)
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.item-margin-custom {
+		margin: 10rpx 30rpx 30rpx 30rpx;
+	}
+	
+	.multi-pic-container {
+		height: 450rpx;
+		overflow: hidden;
+	}
+	
+	.multi-pic-container > .whole-view {
+		width: 100%;
+		height: 100%;
+	}
+	
+	.multi-pic-container > .whole-view > image {
+		width: 100%;
+		height: 100%;
+	}
+	
+	.multi-pic-container > .left-view {
+		width: calc(50% - 5rpx);
+		height: 100%;
+	}
+	
+	.multi-pic-container > .left-view > image {
+		height: 100%;
+		width: 100%;
+	}
+	
+	.multi-pic-container > .right-view {
+		width: calc(50% - 5rpx);
+		height: 100%;
+	}
+	
+	.multi-pic-container > .right-view > image {
+		height: calc(50% - 5rpx);
+		width: 100%;
+	}
+</style>
diff --git a/components/goods-card/vertical-goods-card.vue b/components/goods-card/vertical-goods-card.vue
deleted file mode 100644
index fec5c0f..0000000
--- a/components/goods-card/vertical-goods-card.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-	<view>
-		<view class="cu-bar bg-white solid-bottom margin-top-sm">
-			<view class="action">
-				<text class="cuIcon-titles text-main-color"></text> {{title}}
-			</view>
-		</view>
-		<view class="cu-card case no-card solid-bottom bg-white padding-top-xs" v-for="(item, index) in goodsInfos" :key="index" @click="showDetails(item)">
-			<view class="cu-item shadow">
-				<view v-if="multiPicMode" class="flex justify-between align-center multi-pic-container">
-					<view class="left-view"><image class="radius" :src="item.goodsImgsMap[0][0].imgUrl" mode="aspectFill"></image></view>
-					<view class="flex-column-between align-center right-view">
-						<image class="radius" :src="item.goodsImgsMap[0][1].imgUrl" mode="aspectFill"></image>
-						<image class="radius" :src="item.goodsImgsMap[0][2].imgUrl" mode="aspectFill"></image>
-					</view>
-				</view>
-				<view v-else>
-					<image :src="item.goodsImgUrl" mode="aspectFill"></image>
-				</view>
-				<view class="cu-item item-margin-custom">					
-					<view class="content flex-sub">
-						<view class="text-xl">{{item.goodsName}}</view>
-						<view class="text-sm text-gray margin-tb-xs">{{item.goodsDesc}}</view>
-						<view class="flex justify-between align-end">
-							<view class="text-red text-sm">自营直选，不满意重新服务，全程上险</view>
-							<view class="text-red text-price text-xl">{{item.goodsStandardList[0].goodsPrice}}</view>
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		name: "vertical-goods-card",
-		props: {
-			title: '',
-			goodsInfos: {
-				type: Array,
-				default: []
-			},
-			multiPicMode: {
-				type: Boolean,
-				default: false
-			}
-		},
-		data() {
-			return {};
-		},
-		methods: {
-			showDetails(productItem) {
-				uni.$emit('index_showProductDetail', productItem)
-			}
-		}
-	}
-</script>
-
-<style scoped>
-	.item-margin-custom {
-		margin: 10rpx 30rpx 30rpx 30rpx;
-	}
-	
-	.multi-pic-container {
-		height: 450rpx;
-		overflow: hidden;
-	}
-	
-	.multi-pic-container > view {
-		width: calc(50% - 5rpx);
-		height: 100%;
-	}
-	
-	.multi-pic-container > .left-view > image {
-		height: 100%;
-		width: 100%;
-	}
-	
-	.multi-pic-container > .right-view > image {
-		height: calc(50% - 5rpx);
-		width: 100%;
-	}
-</style>
diff --git a/pages/index/home.vue b/pages/index/home.vue
index 177cc2e..02f3f64 100644
--- a/pages/index/home.vue
+++ b/pages/index/home.vue
@@ -77,19 +77,18 @@
 			<!-- <vertical-goods-card ref="discountGoodsCard" :goodsInfos="discountGoods.goodsInfos"
 				:title="discountGoods.title"></vertical-goods-card> -->
 			<!-- 热门服务 -->
-			<vertical-goods-card :goodsInfos="hotGoods" :multiPicMode="true" title="大家都在买">
-			</vertical-goods-card>
+			<vertical-card :list="hotCategory" :multiPicMode="true" title="大家都在买"></vertical-card>
 		</view>
 	</view>
 </template>
 
 <script>
-	import verticalGoodsCard from '@/components/goods-card/vertical-goods-card.vue';
+	import verticalCard from '@/components/common-card/vertical-card.vue';
 
 	export default {
 		name: 'index',
 		components: {
-			verticalGoodsCard
+			verticalCard
 		},
 		data() {
 			return {
@@ -99,7 +98,7 @@
 				tabCur: 0,
 				categories: [],
 				subCategories: [],
-				hotGoods: [],
+				hotCategory: [],
 				discountGoods: {},
 				InputBottom: 0,
 				searchInfo: {},
@@ -122,13 +121,11 @@
 				// 加载区域信息
 				this.loadRegionList();
 				this.getCurAreaArr();
-				// 加载热门商品
-				let hotGoodsRes = await this.$request.getHotGoods({
-					pageNum: 1,
-					pageSize: 50,
-					status: 0
+				// 加载热门类目
+				let hotCategoryRes = await this.$request.getHotCategory({
+					type: 1
 				});
-				this.hotGoods = hotGoodsRes.rows;
+				this.hotCategory = hotCategoryRes.data;
 				// 加载品类
 				this.loadCategoryList();
 
@@ -140,10 +137,10 @@
 				// this.discountGoods = await this.$api.data('discountGoods');
 			},
 			bindEvent() {
-				uni.$on('index_showProductDetail', this.showDetails);
+				uni.$on('clickCard', this.clickHotCategory);
 			},
 			offBindEvent() {
-				uni.$off('index_showProductDetail');
+				uni.$off('clickCard');
 			},
 			async getCurAreaArr() {
 				let areaArr = await this.$request.getCurArea();
@@ -267,13 +264,14 @@
 					url: '/pages/product/filtered-products?params=' + encodeURIComponent(JSON.stringify(params))
 				})
 			},
-			showDetails(productItem) {
-				let params = {
-					goodsId: productItem.goodsId
-				}
-				uni.navigateTo({
-					url: '/pages/product/product-detail?params=' + encodeURIComponent(JSON.stringify(params))
-				});
+			clickHotCategory(item) {
+				console.log(item)
+				let params = {
+					category: item
+				};
+				uni.navigateTo({
+					url: '/pages/product/filtered-products?params=' + encodeURIComponent(JSON.stringify(params))
+				})
 			},
 			showProductCategories() {
 				uni.navigateTo({