From 9e8e906ece911df87ae42f888fc17d4459cde395 Mon Sep 17 00:00:00 2001
From: donqi <ydq0308@qq.com>
Date: Fri, 26 Aug 2022 16:06:42 +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=9B=BE=E7=89=87=E5=A4=A7=E5=B0=8F=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=EF=BC=9B=E5=A2=9E=E5=8A=A0=E5=B1=95=E7=A4=BA=E5=BD=93=E5=89=8D?=
 =?UTF-8?q?=E5=AE=9A=E4=BD=8D=E5=9F=8E=E5=B8=82=E7=9A=84=E6=9C=8D=E5=8A=A1?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/common-card/vertical-card.vue  |   2 +-
 components/goods-card/flow-goods-card.vue |  67 ++++++++
 pages/index/home.vue                      | 180 +++++++++++++++-------
 3 files changed, 195 insertions(+), 54 deletions(-)
 create mode 100644 components/goods-card/flow-goods-card.vue

diff --git a/components/common-card/vertical-card.vue b/components/common-card/vertical-card.vue
index 24e44e1..f5df284 100644
--- a/components/common-card/vertical-card.vue
+++ b/components/common-card/vertical-card.vue
@@ -67,7 +67,7 @@
 	}
 	
 	.multi-pic-container {
-		height: 350rpx;
+		height: 246rpx;
 		overflow: hidden;
 	}
 	
diff --git a/components/goods-card/flow-goods-card.vue b/components/goods-card/flow-goods-card.vue
new file mode 100644
index 0000000..fb6cbdc
--- /dev/null
+++ b/components/goods-card/flow-goods-card.vue
@@ -0,0 +1,67 @@
+<template>
+	<view>
+		<view class="bg-img img-box bg-gray" :style="'background-image:url(' + product.goodsImgUrl + ');'"></view>
+		<view class="padding bg-white">
+			<view class="flex justify-between align-center">
+				<view v-if="product.goodsStandardList && product.goodsStandardList.length > 0">
+					<view v-if="product.goodsStandardList[0].discountPrice" class="flex justify-start align-center">
+						<text class="text-price text-red text-bold text-xl">{{product.goodsStandardList[0].discountPrice}}</text>
+						<text class="text-del" v-if="product.goodsPrice">¥{{product.goodsStandardList[0].goodsPrice}}</text>
+					</view>
+					<view v-else-if="product.goodsStandardList[0].goodsPrice" class="flex justify-start align-center">
+						<text class="text-price text-red text-bold text-xl">{{product.goodsStandardList[0].goodsPrice}}</text>
+					</view>
+				</view>
+				<view class="padding-xs" v-if="product.type">
+					<view class='cu-tag light bg-blue'>{{product.type}}</view>
+				</view>
+			</view>
+			<view class="text-black">{{product.goodsName}}</view>
+			<view class="text-sm">{{product.goodsDesc}}</view>
+			<view v-if="product.goodsAreaList && product.goodsAreaList.length">
+				<view class="cu-capsule">
+					<view class='cu-tag bg-main-color sm'>
+						<text class='cuIcon-locationfill'></text>
+					</view>
+					<view class="cu-tag line-main-color sm">
+						服务区域
+					</view>
+				</view>
+				<text v-for="(item,index) in product.goodsAreaList">
+					<text class="margin-lr-xs text-sm">{{item.areaName}}<text v-if="index != product.goodsAreaList.length - 1">,</text></text>
+				</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'flow-goods-card',
+		props: {
+			product: {
+				type: Object,
+				default: {}
+			}
+		},
+		data() {
+			return {
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.cu-list.menu-avatar>.cu-item .content .cu-tag.sm {
+		display: inline-block;
+		margin-left: 0;
+		height: 28rpx;
+		font-size: 16rpx;
+		line-height: 32rpx;
+	}
+	.img-box {
+		padding-bottom: 100%;
+		width: 100%;
+		height: 0;
+	}
+</style>
diff --git a/pages/index/home.vue b/pages/index/home.vue
index 02f3f64..1f2b280 100644
--- a/pages/index/home.vue
+++ b/pages/index/home.vue
@@ -32,63 +32,78 @@
 				</picker>
 			</view>
 		</view>
-		<view class="margin-lr-sm margin-bottom-with-bar">
-			<!-- 大类 -->
-			<view class="flex justify-between text-black">
-				<view class="padding text-lg" @click="showProductCategories">
-					<text>分类</text>
-					<text class="cuIcon-apps text-main-color"></text>
-					<text class="cuIcon-triangledownfill"></text>
-				</view>
-				<view class="flex-twice">
-					<scroll-view scroll-x class="nav text-right" :scroll-with-animation="true" :scroll-left="scrollLeft">
-						<view class="cu-item" :class="index==tabCur?'text-main-color cur':''" v-if="index < 2"
-							v-for="(item,index) in categories" :key="item.goodsCategoryId" @tap="tabSelect($event, item)" :data-index="index">
-							{{item.goodsCategoryName}}
-						</view>
-					</scroll-view>
-				</view>
+		<view class="margin-bottom-with-bar">
+			<view class="margin-lr-sm">
+				<!-- 大类 -->
+				<view class="flex justify-between text-black">
+					<view class="padding text-lg" @click="showProductCategories">
+						<text>分类</text>
+						<text class="cuIcon-apps text-main-color"></text>
+						<text class="cuIcon-triangledownfill"></text>
+					</view>
+					<view class="flex-twice">
+						<scroll-view scroll-x class="nav text-right" :scroll-with-animation="true" :scroll-left="scrollLeft">
+							<view class="cu-item" :class="index==tabCur?'text-main-color cur':''" v-if="index < 2"
+								v-for="(item,index) in categories" :key="item.goodsCategoryId" @tap="tabSelect($event, item)" :data-index="index">
+								{{item.goodsCategoryName}}
+							</view>
+						</scroll-view>
+					</view>
+				</view>
+				<!-- 热门细类 -->
+				<view class="cu-list grid no-border hot-sub-category" :class="['col-5']">
+					<view class="cu-item" v-for="(item,index) in subCategories" :key="index" v-if="index < 5"
+						@click="chooseCategory(item)">
+						<view class="hot-sub-category-icon" :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
+							<!-- <view class="cu-tag badge" v-if="item.badge!=0">
+								<block v-if="item.badge!=1">{{item.badge}}</block>
+							</view> -->
+						</view>
+						<text>{{item.goodsCategoryName}}</text>
+					</view>
+				</view>
+				<!-- 细类 -->
+				<view class="cu-list grid no-border" :class="['col-5']" v-if="subCategories.length > 5">
+					<view class="cu-item" v-for="(item,index) in subCategories" :key="index"
+						v-if="index < subCategories.length && index > 4" @click="chooseCategory(item)">
+						<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
+							<!-- <view class="cu-tag badge" v-if="item.badge!=0">
+								<block v-if="item.badge!=1">{{item.badge}}</block>
+							</view> -->
+						</view>
+						<text>{{item.goodsCategoryName}}</text>
+					</view>
+				</view>
+				<!-- 超值服务 -->
+				<!-- <vertical-goods-card ref="discountGoodsCard" :goodsInfos="discountGoods.goodsInfos"
+					:title="discountGoods.title"></vertical-goods-card> -->
+				<!-- 热门服务 -->
+				<vertical-card :list="hotCategory" :multiPicMode="true" title="大家都在买"></vertical-card>
+			</view>
+			<!-- 当前城市服务列表 -->
+			<view>
+				<view class="margin-top-sm margin-lr-sm waterfall-grid">
+					<view @click="showDetails(item)" v-for="(item, index) in productList" class="waterfall-grid-item">
+						<flow-goods-card :product="item"></flow-goods-card>
+					</view>
+				</view>
+				<load-status-bar ref="loadStatusBar" @loadMore="loadProductPage"></load-status-bar>
 			</view>
-			<!-- 热门细类 -->
-			<view class="cu-list grid no-border hot-sub-category" :class="['col-5']">
-				<view class="cu-item" v-for="(item,index) in subCategories" :key="index" v-if="index < 5"
-					@click="chooseCategory(item)">
-					<view class="hot-sub-category-icon" :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
-						<!-- <view class="cu-tag badge" v-if="item.badge!=0">
-							<block v-if="item.badge!=1">{{item.badge}}</block>
-						</view> -->
-					</view>
-					<text>{{item.goodsCategoryName}}</text>
-				</view>
-			</view>
-			<!-- 细类 -->
-			<view class="cu-list grid no-border" :class="['col-5']" v-if="subCategories.length > 5">
-				<view class="cu-item" v-for="(item,index) in subCategories" :key="index"
-					v-if="index < subCategories.length && index > 4" @click="chooseCategory(item)">
-					<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
-						<!-- <view class="cu-tag badge" v-if="item.badge!=0">
-							<block v-if="item.badge!=1">{{item.badge}}</block>
-						</view> -->
-					</view>
-					<text>{{item.goodsCategoryName}}</text>
-				</view>
-			</view>
-			<!-- 超值服务 -->
-			<!-- <vertical-goods-card ref="discountGoodsCard" :goodsInfos="discountGoods.goodsInfos"
-				:title="discountGoods.title"></vertical-goods-card> -->
-			<!-- 热门服务 -->
-			<vertical-card :list="hotCategory" :multiPicMode="true" title="大家都在买"></vertical-card>
 		</view>
 	</view>
 </template>
 
 <script>
-	import verticalCard from '@/components/common-card/vertical-card.vue';
+	import verticalCard from '@/components/common-card/vertical-card.vue';
+	import loadStatusBar from '@/components/custom-bar/load-status-bar.vue';
+	import flowGoodsCard from '@/components/goods-card/flow-goods-card.vue';
 
 	export default {
 		name: 'index',
 		components: {
-			verticalCard
+			verticalCard,
+			loadStatusBar,
+			flowGoodsCard
 		},
 		data() {
 			return {
@@ -103,7 +118,10 @@
 				InputBottom: 0,
 				searchInfo: {},
 				areaList: [],
-				areaMultiIndex: [0, 0, 0],
+				areaMultiIndex: [0, 0, 0],
+				productList: [],
+				pageNum: 0,
+				pageSize: 0
 			}
 		},
 		mounted() {
@@ -117,17 +135,20 @@
 			await this.loadData();
 		},
 		methods: {
-			async loadData() {
+			async loadData() {
+				this.initBasicData();
 				// 加载区域信息
 				this.loadRegionList();
-				this.getCurAreaArr();
+				await this.getCurAreaArr();
 				// 加载热门类目
 				let hotCategoryRes = await this.$request.getHotCategory({
 					type: 1
 				});
 				this.hotCategory = hotCategoryRes.data;
 				// 加载品类
-				this.loadCategoryList();
+				this.loadCategoryList();
+				// 加载当前定位城市的服务列表
+				this.loadProductPage();
 
 				this.swiperList = await this.$api.data('swiperList');
 				// this.categories = await this.$api.data('categories');
@@ -183,7 +204,8 @@
 				for (let i = 0; i < this.areaList.length; i++) {
 					chosenArea.push(this.areaList[i][this.areaMultiIndex[i]]);
 				}
-				this.searchInfo.area = chosenArea;
+				this.searchInfo.area = chosenArea;
+				this.reloadProductPage();
 			},
 			async regionColChange(e) {
 				let colObj = e.detail;
@@ -277,7 +299,49 @@
 				uni.navigateTo({
 					url: '/pages/product/product-category'
 				})
-			}
+			},
+			/* 底部当前城市服务列表 start */
+			initBasicData() {
+				this.pageNum = this.$globalData.initPageNum;
+				this.pageSize = this.$globalData.initPageSize;
+				this.productList = [];
+			},
+			showDetails(productItem) {
+				let params = {
+					goodsId: productItem.goodsId
+				}
+				uni.navigateTo({
+					url: '/pages/product/product-detail?params=' + encodeURIComponent(JSON.stringify(params))
+				});
+			},
+			async reloadProductPage() {
+				this.initBasicData();
+				this.loadProductPage();
+			},
+			async loadProductPage(params = {}) {
+				params.pageNum = this.pageNum;
+				params.pageSize = this.pageSize;
+				params.status = 0;
+				params.areaId = this.searchInfo.area && this.searchInfo.area.length ? this.searchInfo.area[this.searchInfo.area.length - 1].areaId : null;
+				this.$refs.loadStatusBar.showLoading();
+				try {
+					let res = await this.$request.qryProductPage(params);
+					let rowsLength = res[1].data.rows.length;
+					if (rowsLength > 0) {
+						this.productList = this.productList.concat(res[1].data.rows);
+						this.pageNum++;
+						if (rowsLength === this.pageSize) {
+							this.$refs.loadStatusBar.showLoadMore();
+							return;
+						}
+					}
+					this.$refs.loadStatusBar.showLoadOver();
+				} catch (e) {
+					console.error(e)
+					this.$refs.loadStatusBar.showLoadErr();
+				}
+			}
+			/* 底部当前城市服务列表 end */
 		}
 	}
 </script>
@@ -304,5 +368,15 @@
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
+	}
+	
+	.waterfall-grid {
+		column-count: 2;
+		column-gap: 15rpx;
+	}
+	
+	.waterfall-grid-item {
+		break-inside: avoid;
+		margin-bottom: 15rpx;
 	}
 </style>