产品分类页面增加一级类目tab，二级类目需要可选；

产品列表页面增加展示其他城市产品；师傅圈选择了区域筛选条件的，展示的当前城市师傅列表只展示该区域条件下的服务范围；
2023-01-02 16:33:37 +08:00 · 2023-01-02 16:33:37 +08:00 · b830e060eb
parent dbf467b928
commit b830e060eb
5 changed files with 138 additions and 21 deletions
--- a/common/js/glogalFun.js
+++ b/common/js/glogalFun.js
@ -3,5 +3,6 @@ export default {
 	CANCEL: 'cancelCallback',
 	VERTICAL_NAV_GET_ITEM: 'verticalNavGetItem',
 	VERTICAL_NAV_SEARCH: 'verticalNavSearch',
+	VERTICAL_NAV_CHANGE_MAIN_NAV_ITEM: 'verticalNavChangeMainNavItem',
 	CHOOSE_ADDRESS: 'chooseAddress'
 }
--- a/components/multi-level-nav/vertical-nav.vue
+++ b/components/multi-level-nav/vertical-nav.vue
@ -7,7 +7,13 @@
 				<input @confirm="searchGoods" :adjust-position="true" type="text" placeholder="输入搜索内容"
 					confirm-type="search"></input>
 			</view>
-		</view> -->
+		</view> -->
+		<scroll-view scroll-x class="bg-white nav text-center" :scroll-with-animation="true" :scroll-left="scrollLeft">
+			<view class="cu-item" :class="index==navTabCur?'text-main-color cur':''" v-for="(item,index) in navList"
+				:key="index" @tap="navTabSelect" :data-index="index" :data-id="item.goodsCategoryId">
+				<text class="margin-right-xs">{{item.goodsCategoryName}}</text>
+			</view>
+		</scroll-view>
 		<view class="VerticalBox" :style="'height:calc(' + containerHeight + ')'">
 			<scroll-view class="VerticalNav nav">
 				<view class="cu-item" :class="index==tabCur?'text-main-color cur':''" v-for="(item,index) in list"
@ -16,13 +22,19 @@
 					{{item.goodsCategoryName}}
 				</view>
 			</scroll-view>
-			<scroll-view class="VerticalMain">
+			<scroll-view class="VerticalMain">
+				<view class="cu-bar bg-white" @click="chooseNavItem(list[tabCur])" v-if="list[tabCur].child && list[tabCur].child.length">
+					<view class="action">
+						<!-- {{list[tabCur].goodsCategoryName}} -->全部
+					</view>
+				</view>
 				<view class="padding-top padding-lr" v-for="(type, index1) in list[tabCur].child" :key="index1"
 					:id="'main-'+type.goodsCategoryId">
-					<view class="cu-bar bg-white bottom-border" @click="chooseNavItem(type)">
-						<view class="action">
-							<text class="cuIcon-title text-main-color"></text>{{type.goodsCategoryName}}
-						</view>
+					
+					<view class="cu-bar bg-white bottom-border" @click="chooseNavItem(type)">
+						<view class="action">
+							<text class="cuIcon-title text-main-color"></text>{{type.goodsCategoryName}}
+						</view>
 					</view>
 					<view class="cu-list menu">
 						<view class="cu-item" :class="curNavItem.goodsCategoryId === subType.goodsCategoryId ? 'bg-main-color light' : ''" v-for="(subType,index2) in type.child" :key="index2" @click="chooseNavItem(subType)">
@ -40,7 +52,11 @@
 <script>
 	export default {
 		name: 'vertical-nav',
-		props: {
+		props: {
+			navList: {
+				type: Array,
+				default: []
+			},
 			list: {
 				type: Array,
 				default: []
@ -56,11 +72,13 @@
 		},
 		data() {
 			return {
-				tabCur: 0,
+				tabCur: 0,
+				navTabCur: 0,
 				// mainCur: 0,
 				// load: true,
 				// verticalNavTop: 0,
-				curNavItem: {}
+				curNavItem: {},
+				scrollLeft: 0
 			}
 		},
 		onReady() {
@ -70,6 +88,12 @@
 			loadData() {
 				// this.list = await this.$api.data('categoryList');
 				// this.tabCur = this.list[0].goodsCategoryId;
+			},
+			navTabSelect(e) {
+				this.navTabCur = e.currentTarget.dataset.index;
+				this.scrollLeft = (e.currentTarget.dataset.index - 1) * 60;
+				this.tabCur = 0;
+				uni.$emit(this.$globalFun.VERTICAL_NAV_CHANGE_MAIN_NAV_ITEM, this.navList[this.navTabCur]);
 			},
 			tabSelect(e) {
 				this.tabCur = e.currentTarget.dataset.index;
--- a/pages/index/worker-home.vue
+++ b/pages/index/worker-home.vue
@ -247,6 +247,7 @@
 				}
 				params.pageNum = this.pageNum;
 				params.pageSize = this.pageSize;
+				params.justShowCurWorkerArea = true;
 				this.$refs.loadStatusBar1.showLoading();
 				try {
 					let res = await this.$request.getWorkerList(params);
--- a/pages/product/filtered-products.vue
+++ b/pages/product/filtered-products.vue
@ -64,6 +64,26 @@
 				<text class="text-bold cuIcon-unfold"></text>
 			</view>
 			<view class="cu-load" :class="loadMoreStatus"></view>
+		</view>
+		<!-- 其他城市服务列表 -->
+		<view class="text-gray text-lg text-center margin flex align-center">
+			<view class="divider"/>
+			<text class="margin-lr-sm" style="flex-basis: 50%;">其他城市</text>
+			<view class="divider"/>
+		</view>
+		<!-- 其他城市产品列表 -->
+		<view class="padding-lr padding-top bg-white solid-top">
+			<view class="solid-bottom margin-bottom-sm padding-bottom-sm" @click="showDetails(item)"
+				v-for="(item, index) in otherCityProductList">
+				<horizontal-goods-card :ifShowServArea="true" :product="item"></horizontal-goods-card>
+			</view>
+		</view>
+		<view class="margin-bottom-lg">
+			<view v-if="hasMoreOtherCityData" class="text-center bg-main-color light padding-tb-sm" @click="loadOtherCityProductData({})">
+				<text class="margin-right-xs">查看更多</text>
+				<text class="text-bold cuIcon-unfold"></text>
+			</view>
+			<view class="cu-load" :class="loadMoreStatusOfOtherCityPage"></view>
 		</view>
 	</view>
 </template>
@ -81,7 +101,11 @@
 				loadMoreStatus: '',
 				hasMoreData: false,
 				pageNum: this.$globalData.initPageNum,
-				pageSize: this.$globalData.initPageSize,
+				pageSize: this.$globalData.initPageSize,
+				otherCityProductList: [],
+				loadMoreStatusOfOtherCityPage: '',
+				hasMoreOtherCityData: false,
+				pageNumOfOtherCityPage: this.$globalData.initPageNum,
 				stickyTop: this.CustomBar,
 				// type: 0=升降序，1=功能按钮，2=选择器；order: 0=升序，1=降序；
 				tabCur: 0,
@ -169,12 +193,17 @@
 		methods: {
 			async loadData() {
 				this.pageNum = this.$globalData.initPageNum;
-				this.pageSize = this.$globalData.initPageSize;
-				this.loadCategoryList();
+				this.pageSize = this.$globalData.initPageSize;
+				let type;
+				if (this.chosenCategory[2]) {
+					type = this.chosenCategory[2].type;
+				}
+				this.loadCategoryList(type);
 				// 获取当前定位
 				await this.getCurAreaArr();
 				await this.loadRegionList();
-				this.loadProductData();
+				this.loadProductData();
+				this.loadOtherCityProductData();
 			},
 			async getCurAreaArr() {
 				let areaArr = await this.$request.getCurArea();
@ -209,10 +238,39 @@
 					this.loadMoreStatus = 'erro bg-red'
 				}
 			},
+			async loadOtherCityProductData(params = {}) {
+				params.pageNum = this.pageNumOfOtherCityPage;
+				params.pageSize = this.pageSize;
+				params.goodsName = this.inputGoodsName;
+				params.status = 0;
+				this.taskConditions.forEach((condition) => {
+					if (condition.type === 2) {
+						params[condition.code] = condition.value;
+					} else if (condition.type === 0) {
+						params.params = params.params ? params.params : {};
+						params.params[condition.code] = condition.value === 1 ? 'desc' : 'asc';
+					}
+				})
+				params.areaId = null;
+				params.exceptParentAreaId = this.chosenArea[this.chosenArea.length - 1].areaId;
+				
+				this.loadMoreStatusOfOtherCityPage = 'loading bg-main-color light';
+				this.hasMoreOtherCityData = false;
+				try {
+					await this.loadOtherCityProductPage(params);
+					this.loadMoreStatusOfOtherCityPage = this.hasMoreOtherCityData ? '' : 'over bg-grey';
+				} catch (e) {
+					this.loadMoreStatusOfOtherCityPage = 'erro bg-red'
+				}
+			},
 			reloadProductPage() {
 				this.pageNum = this.$globalData.initPageNum;
 				this.pageSize = this.$globalData.initPageSize;
+				this.pageNumOfOtherCityPage = this.$globalData.initPageNum;
+				this.productList = [];
+				this.otherCityProductList = [];
 				this.loadProductData();
+				this.loadOtherCityProductData();
 			},
 			async loadProductPage(params) {
 				// let shopInfo = await this.$api.data('shopInfo');
@ -228,15 +286,30 @@
 					this.productList = this.productList.concat(res[1].data.rows);
 				}
 				this.pageNum++;
+			},
+			async loadOtherCityProductPage(params) {
+				// let shopInfo = await this.$api.data('shopInfo');
+				// this.productList = shopInfo.productList;
+				let res = await this.$request.qryProductPage(params);
+				let rowsLength = res[1].data.rows.length;
+				if (rowsLength === this.pageSize) {
+					this.hasMoreOtherCityData = true;
+				}
+				if (this.pageNumOfOtherCityPage === this.$globalData.initPageNum) {
+					this.otherCityProductList = res[1].data.rows;
+				} else {
+					this.otherCityProductList = this.otherCityProductList.concat(res[1].data.rows);
+				}
+				this.pageNumOfOtherCityPage++;
 			},
-			async loadCategoryList(idArr) {
+			async loadCategoryList(type = 1) {
 				let res = await this.$request.listByStep({
-					type: 1
+					type: type
 				});
 				res = res.data;
 				let typeList = await this.$request.listByStepWithAllNode({
 					goodsCategoryId: res[0].goodsCategoryId,
-					type: 1
+					type: type
 				});
 				typeList = typeList.data;
 				let subTypeList = [];
@ -301,7 +374,8 @@
 				for(let i = 0; i < this.originTaskConditions.length; i++) {
 					this.taskConditions[i].value = this.originTaskConditions[i].value;
 				}
-				this.chosenArea = [];
+				this.chosenArea = [this.areaList[0][0], this.areaList[1][0]];
+				this.taskConditions[0].value = this.chosenArea[this.chosenArea.length - 1].areaId;
 				this.chosenCategory = [];
 				// this.$forceUpdate();
 				this.reloadProductPage();
--- a/pages/product/product-category.vue
+++ b/pages/product/product-category.vue
@ -5,7 +5,7 @@
 			<block slot="backText">返回</block>
 			<block slot="content">产品分类</block>
 		</cu-custom>
-		<vertical-nav v-if="categoryList" :containerHeight="containerHeight" :list="categoryList" :isClick2ShowProducts="true"></vertical-nav>
+		<vertical-nav v-if="categoryList" :containerHeight="containerHeight" :navList="level0CategoryList" :list="categoryList" :isClick2ShowProducts="true"></vertical-nav>
 	</view>
 </template>

@ -18,7 +18,8 @@
 		},
 		data() {
 			return {
-				containerHeight: '100vh - ' + this.CustomBar + 'px',
+				containerHeight: '100vh - ' + this.CustomBar + 'px - 46px',
+				level0CategoryList: [],
 				categoryList: []
 			}
 		},
@ -30,9 +31,20 @@
 			this.offBindEvent();
 		},
 		methods: {
-			async loadData(params = {}) {
+			async loadData(params = {}, type = 1) {
+				let res0 = await this.$request.listByStep({
+					level: 0
+				});
+				this.level0CategoryList = res0.data;
+				this.loadTargetTypeCategoryList(params, type);
+			},
+			async loadTargetTypeCategoryList(params = {}, type = 1) {
+				this.categoryList = [];
 				// this.categoryList = await this.$api.data('categoryList');
-				let res = await this.$request.getProductCategories(params);
+				let res = await this.$request.getProductCategories({
+					...params,
+					type: type
+				});
 				res = res[1].data.data;
 				res.forEach(firstCategory => {
 					if (firstCategory.child && firstCategory.child.length) {
@ -43,10 +55,12 @@
 			bindEvent() {
 				uni.$on(this.$globalFun.VERTICAL_NAV_GET_ITEM, this.chooseSubType);
 				uni.$on(this.$globalFun.VERTICAL_NAV_SEARCH, this.searchType);
+				uni.$on(this.$globalFun.VERTICAL_NAV_CHANGE_MAIN_NAV_ITEM, this.changeLevel0Category);
 			},
 			offBindEvent() {
 				uni.$off(this.$globalFun.VERTICAL_NAV_GET_ITEM);
 				uni.$off(this.$globalFun.VERTICAL_NAV_SEARCH);
+				uni.$off(this.$globalFun.VERTICAL_NAV_CHANGE_MAIN_NAV_ITEM);
 			},
 			chooseSubType(item) {
 				let params = {
@ -60,6 +74,9 @@
 				this.loadData({
 					goodsCategoryName: keyWords
 				});
+			},
+			changeLevel0Category(category) {
+				this.loadTargetTypeCategoryList({}, category.type);
 			}
 		}
 	}