调整服务列表首页样式；调整可选地区；增加展示其他城市服务列表

2022-12-17 00:16:28 +08:00 · 2022-12-17 00:16:28 +08:00 · cc229f3cfb
parent 6cc1c3c754
commit cc229f3cfb
5 changed files with 168 additions and 74 deletions
--- a/components/goods-card/flow-goods-card.vue
+++ b/components/goods-card/flow-goods-card.vue
@ -1,24 +1,37 @@
 <template>
-	<view>
+	<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 class="padding bg-white card-text-container flex-column-around">
+			<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>
+						<text>/</text>
+						<text>{{product.goodsUnit}}</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>
+						<text>/</text>
+						<text>{{product.goodsUnit}}</text>
+					</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 v-if="product.deptGoodsCategoryName">
+					<view class='cu-tag light bg-blue'>
+						<text v-if="product.parGoodsCategoryName">
+							{{product.parGoodsCategoryName}}
+							<text>/</text>
+						</text>
+						<text>{{product.deptGoodsCategoryName}}</text>
+					</view>
+				</view>
+			</view>
+			<view class="text-black one-line-ellipsis">{{product.goodsName}}</view>
+			<view class="text-sm two-line-ellipsis">{{product.goodsDesc}}</view>
+			<view v-if="product.goodsAreaList && product.goodsAreaList.length" class="two-line-ellipsis">
 				<view class="cu-capsule">
 					<view class='cu-tag bg-main-color sm'>
 						<text class='cuIcon-locationfill'></text>
@ -26,9 +39,10 @@
 					<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>
+				</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>
@ -45,8 +59,7 @@
 			}
 		},
 		data() {
-			return {
-			}
+			return {}
 		}
 	}
 </script>
@ -58,10 +71,15 @@
 		height: 28rpx;
 		font-size: 16rpx;
 		line-height: 32rpx;
-	}
-	.img-box {
-		padding-bottom: 100%;
-		width: 100%;
-		height: 0;
+	}
+
+	.img-box {
+		padding-bottom: 100%;
+		width: 100%;
+		height: 0;
+	}
+
+	.card-text-container {
+		height: 270rpx;
 	}
 </style>
--- a/pages/index/home.vue
+++ b/pages/index/home.vue
@ -89,13 +89,24 @@
 				<vertical-card :list="hotServCategory" :multiPicMode="true" title="大家都在买"></vertical-card>
 			</view>
 			<!-- 当前城市服务列表 -->
+			<view class="text-gray text-lg text-center margin">————当前城市————</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>
+				<load-status-bar ref="loadStatusBar1" @loadMore="loadProductPage"></load-status-bar>
+			</view>
+			<!-- 其他城市服务列表 -->
+			<view class="text-gray text-lg text-center margin">————其他城市————</view>
+			<view>
+				<view class="margin-top-sm margin-lr-sm waterfall-grid">
+					<view @click="showDetails(item)" v-for="(item, index) in otherCityProductList" class="waterfall-grid-item">
+						<flow-goods-card :product="item"></flow-goods-card>
+					</view>
+				</view>
+				<load-status-bar ref="loadStatusBar2" @loadMore="loadOtherCityProductPage"></load-status-bar>
 			</view>
 		</view>
 	</view>
@ -129,8 +140,11 @@
 				areaList: [],
 				areaMultiIndex: [0, 0, 0],
 				productList: [],
+				otherCityProductList: [],
 				pageNum: 0,
-				pageSize: 0
+				pageSize: 0,
+				otherCityProductPageNum: 0,
+				otherCityProductPageSize: 0
 			}
 		},
 		mounted() {
@ -146,9 +160,10 @@
 		methods: {
 			async loadData() {
 				this.initBasicData();
-				// 加载区域信息
+				// 加载区域信息
 				await this.loadRegionList();
 				await this.getCurAreaArr();
+				await this.loadRegionList();
 				// 加载服务商城热门类目
 				let hotServCategoryRes = await this.$request.getHotCategory({
 					type: 1
@ -162,7 +177,9 @@
 				// 加载品类
 				this.loadCategoryList();
 				// 加载当前定位城市的服务列表
-				this.loadProductPage();
+				this.loadProductPage();
+				// 加载其他城市的服务列表
+				this.loadOtherCityProductPage();

 				this.swiperList = await this.$api.data('swiperList');
 				// this.categories = await this.$api.data('categories');
@ -181,25 +198,38 @@
 				let areaArr = await this.$request.getCurArea();
 				if (areaArr) {
 					this.searchInfo.area = areaArr;
-				} else {
-					// 默认选中第一个
-					this.searchInfo.area = [this.areaList[0][0], this.areaList[1][0], this.areaList[2][0]];
 				}
+				// else {
+				// 	// 默认选中第一个
+				// 	this.searchInfo.area = [this.areaList[0][0], this.areaList[1][0], this.areaList[2][0]];
+				// }
 			},
 			async loadCategoryList() {
 				let res = await this.$request.getProductCategories();
 				this.categories = res[1].data.data;
 				this.tabSelect(null, this.categories[0]);
 			},
-			async loadRegionList() {
-				let regionList = await this.$request.areaListByStep();
+			async loadRegionList() {
+				let area = this.searchInfo.area && this.searchInfo.area.length ? this.searchInfo.area : null
+				let regionList = await this.$request.areaListByStep({
+					areaId: area == null ? null : area[0].areaId
+				});
 				regionList = regionList.data;
 				let subRegionList = [];
 				let subSubRegionList = [];
-				if (regionList && regionList.length > 0) {
-					subRegionList = await this.$request.areaListByStep({
-						parentCode: regionList[0].areaCode
-					});
+				if (regionList && regionList.length > 0) {
+					let params = {};
+					if (area != null) {
+						params = {
+							areaId: area[1].areaId,
+							parentCode: area[0].areaId
+						}
+					} else {
+						params = {
+							parentCode: regionList[0].areaCode
+						}
+					}
+					subRegionList = await this.$request.areaListByStep(params);
 					subRegionList = subRegionList.data;
 				}
 				if (subRegionList && subRegionList.length > 0) {
@ -207,7 +237,8 @@
 						parentCode: subRegionList[0].areaCode
 					});
 					subSubRegionList = subSubRegionList.data;
-				}
+				}
+				this.areaList = [];
 				this.areaList.push(regionList);
 				this.areaList.push(subRegionList);
 				this.areaList.push(subSubRegionList);
@ -318,7 +349,10 @@
 			initBasicData() {
 				this.pageNum = this.$globalData.initPageNum;
 				this.pageSize = this.$globalData.initPageSize;
+				this.otherCityProductPageNum = this.$globalData.initPageNum;
+				this.otherCityProductPageSize = this.$globalData.initPageSize;
 				this.productList = [];
+				this.otherCityProductList = [];
 			},
 			showDetails(productItem) {
 				let params = {
@ -331,31 +365,40 @@
 			async reloadProductPage() {
 				this.initBasicData();
 				this.loadProductPage();
+				this.loadOtherCityProductPage();
 			},
-			async loadProductPage(params = {}) {
-				params.pageNum = this.pageNum;
-				params.pageSize = this.pageSize;
+			async loadProductPage(params = {
+				areaId: this.searchInfo.area && this.searchInfo.area.length ? this.searchInfo.area[this.searchInfo.area.length - 1].areaId : null
+			}, loadStatusBarRefName = "loadStatusBar1", resContainer = "productList", pageNumName = "pageNum", pageSizeName = "pageSize") {
+				params.pageNum = this[pageNumName];
+				params.pageSize = this[pageSizeName];
 				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();
+				this.$refs[loadStatusBarRefName].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();
+						this[resContainer] = this[resContainer].concat(res[1].data.rows);
+						this[pageNumName]++;
+						if (rowsLength === this[pageSizeName]) {
+							this.$refs[loadStatusBarRefName].showLoadMore();
 							return;
 						}
 					}
-					this.$refs.loadStatusBar.showLoadOver();
+					this.$refs[loadStatusBarRefName].showLoadOver();
 				} catch (e) {
 					console.error(e)
-					this.$refs.loadStatusBar.showLoadErr();
+					this.$refs[loadStatusBarRefName].showLoadErr();
 				}
+			},
+			/* 底部当前城市服务列表 end */
+			/* 其他城市服务列表 start */
+			loadOtherCityProductPage() {
+				this.loadProductPage({
+					exceptParentAreaId: this.searchInfo.area && this.searchInfo.area.length ? this.searchInfo.area[1].areaId : null
+				}, "loadStatusBar2", "otherCityProductList", "otherCityProductPageNum", "otherCityProductPageSize")
 			}
-			/* 底部当前城市服务列表 end */
+			/* 其他城市服务列表 end */
 		}
 	}
 </script>
--- a/pages/index/my-home.vue
+++ b/pages/index/my-home.vue
@ -274,7 +274,7 @@
 		<view class="cu-modal" :class="appShareQrcodeModal?'show':''">
 			<view class="cu-dialog bg-white">
 				<view class="cu-bar bg-white justify-end">
-					<view class="content">小程序邀请二维码</view>
+					<view class="content">小程序线下邀请码</view>
 					<view class="action" @click="hideModal" data-modal="appShareQrcodeModal">
 						<text class="cuIcon-close text-red"></text>
 					</view>
@ -284,11 +284,12 @@
 					</image>
 				</view>
 				<view class="text-center padding">
-					<view class="padding-bottom-sm text-lg">请通过扫码或分享链接给好友进行邀请</view>
-					<button class="cu-btn bg-main-color shadow-blur" open-type="share">
+					<!-- <view class="padding-bottom-sm text-lg">请通过扫码或分享链接给好友进行邀请</view> -->
+					<!-- <button class="cu-btn bg-main-color shadow-blur" open-type="share">
 						<text class="cuIcon-share"></text>
 						<text>分享链接给好友</text>
-					</button>
+					</button> -->
+					<view class="padding-bottom-sm text-lg">点击二维码，长按保存图片</view>
 				</view>
 			</view>
 		</view>
--- a/pages/index/worker-home.vue
+++ b/pages/index/worker-home.vue
@ -138,6 +138,7 @@
 				await this.loadRegionList();
 				// 获取当前定位
 				await this.getCurAreaArr();
+				await this.loadRegionList();
 				this.loadCategoryList();
 				this.searchGoods();
 			},
@ -205,14 +206,26 @@
 				this.categoryList.push(subSubTypeList);
 			},
 			async loadRegionList() {
-				let regionList = await this.$request.areaListByStep();
+				let area = this.searchInfo.area && this.searchInfo.area.length ? this.searchInfo.area : null
+				let regionList = await this.$request.areaListByStep({
+					areaId: area == null ? null : area[0].areaId
+				});
 				regionList = regionList.data;
 				let subRegionList = [];
 				let subSubRegionList = [];
 				if (regionList && regionList.length > 0) {
-					subRegionList = await this.$request.areaListByStep({
-						parentCode: regionList[0].areaCode
-					});
+					let params = {};
+					if (area != null) {
+						params = {
+							areaId: area[1].areaId,
+							parentCode: area[0].areaId
+						}
+					} else {
+						params = {
+							parentCode: regionList[0].areaCode
+						}
+					}
+					subRegionList = await this.$request.areaListByStep(params);
 					subRegionList = subRegionList.data;
 				}
 				if (subRegionList && subRegionList.length > 0) {
@ -221,6 +234,7 @@
 					});
 					subSubRegionList = subSubRegionList.data;
 				}
+				this.areaList = [];
 				this.areaList.push(regionList);
 				this.areaList.push(subRegionList);
 				this.areaList.push(subSubRegionList);
--- a/style/default.css
+++ b/style/default.css
@ -1,4 +1,4 @@
-.margin-bottom-with-bar {
+.margin-bottom-with-bar {
 	margin-bottom: calc(120rpx + constant(safe-area-inset-bottom) / 2);
 	margin-bottom: calc(120rpx + env(safe-area-inset-bottom) / 2);
 }
@ -8,9 +8,11 @@
 	width: 100% !important;
 	bottom: 0 !important;
 	margin-bottom: 0 !important;
-	z-index: 98;
-	padding-bottom: constant(safe-area-inset-bottom / 2) !important;/*兼容 IOS<11.2*/
-	padding-bottom: env(safe-area-inset-bottom / 2) !important;/*兼容 IOS>11.2*/
+	z-index: 98;
+	padding-bottom: constant(safe-area-inset-bottom / 2) !important;
+	/*兼容 IOS<11.2*/
+	padding-bottom: env(safe-area-inset-bottom / 2) !important;
+	/*兼容 IOS>11.2*/
 }

 .cu-bar.tabbar.border .action checkbox {
@ -92,23 +94,39 @@
 }

 .cu-form-group textarea {
-	margin: 0 0 20rpx 0 !important;
+	margin: 0 0 20rpx 0 !important;
 	padding: 20rpx !important;
-}
-
+}
+
 .flex-column-start {
 	display: flex;
 	flex-direction: column;
 	justify-content: flex-start;
-}
-
+}
+
 .radius-input {
 	border: 1rpx solid rgba(0, 0, 0, 0.1);
 	border-radius: 10rpx;
 	padding: 11rpx;
 	box-sizing: content-box;
-}
-
+}
+
 .big-icon {
 	font-size: 111rpx !important;
-}
+}
+
+.one-line-ellipsis {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 1;
+	-webkit-box-orient: vertical;
+}
+
+.two-line-ellipsis {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+}