From a26f1f3cf4d0ca03a0ada80f59e7db01b48ad278 Mon Sep 17 00:00:00 2001
From: donqi <ydq0308@qq.com>
Date: Mon, 21 Nov 2022 01:00:21 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=89=E5=93=81=E5=B9=BF=E5=9C=BA=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=BC=80=E5=8F=91=EF=BC=9B=E6=88=91=E7=9A=84=E5=88=86?=
 =?UTF-8?q?=E9=94=80=E6=88=90=E5=91=98=E5=88=97=E8=A1=A8=E7=AD=9B=E9=80=89?=
 =?UTF-8?q?=E9=80=9A=E8=BF=87=E5=88=86=E9=94=80=E7=94=B3=E8=AF=B7=E7=9A=84?=
 =?UTF-8?q?=EF=BC=9B=E6=88=91=E7=9A=84=E5=88=86=E9=94=80=E6=88=90=E5=91=98?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=8E=BB=E6=8E=89=E7=AC=AC=E4=B8=80=E6=A0=8F?=
 =?UTF-8?q?=E7=BB=91=E5=AE=9A=E5=AE=A2=E6=88=B7=EF=BC=8C=E5=9B=A2=E9=98=9F?=
 =?UTF-8?q?=E6=95=B0=E9=87=8F=E7=9A=84=E7=BB=9F=E8=AE=A1=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../multiselect-vertical-nav.vue              | 149 +++++++++++++++++
 pages/my/my-operator.vue                      | 156 +++++++++++++++---
 pages/my/my-team-member.vue                   |   7 +-
 3 files changed, 284 insertions(+), 28 deletions(-)
 create mode 100644 components/multi-level-nav/multiselect-vertical-nav.vue

diff --git a/components/multi-level-nav/multiselect-vertical-nav.vue b/components/multi-level-nav/multiselect-vertical-nav.vue
new file mode 100644
index 0000000..a01c8d1
--- /dev/null
+++ b/components/multi-level-nav/multiselect-vertical-nav.vue
@@ -0,0 +1,149 @@
+<template>
+	<view>
+		<!-- 搜索栏 -->
+		<!-- <view class="cu-bar search bg-white">
+			<view class="search-form round">
+				<text class="cuIcon-search"></text>
+				<input @confirm="searchGoods" :adjust-position="true" type="text" placeholder="输入搜索内容"
+					confirm-type="search"></input>
+			</view>
+		</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"
+					:key="index" @tap="tabSelect" :data-index="index" :data-id="item.goodsCategoryId"
+					:data-main-cur="item.child && item.child.length > 0 ? item.child[0].goodsCategoryId : -1">
+					{{item.goodsCategoryName}}
+				</view>
+			</scroll-view>
+			<scroll-view class="VerticalMain">
+				<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>
+					<view class="cu-list menu">
+						<view class="cu-item" 
+						:class="chosenCategoryIds.indexOf(subType.goodsCategoryId) >= 0 ? 'bg-main-color light' : ''" 
+						v-for="(subType,index2) in type.child" :key="index2" @click="chooseNavItem(subType)">
+							<view class="content">
+								<text>{{subType.goodsCategoryName}}</text>
+							</view>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'multiselect-vertical-nav',
+		props: {
+			list: {
+				type: Array,
+				default: []
+			},
+			containerHeight: {
+				type: String,
+				default: '100vh'
+			},
+			isClick2ShowProducts: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				tabCur: 0,
+				chosenCategoryIds: []
+			}
+		},
+		onReady() {
+			this.loadData();
+		},
+		methods: {
+			loadData() {
+			},
+			tabSelect(e) {
+				this.tabCur = e.currentTarget.dataset.index;
+			},
+			chooseNavItem(curNavItem) {
+				let index = this.chosenCategoryIds.indexOf(curNavItem.goodsCategoryId);
+				if (index >= 0) {
+					this.chosenCategoryIds.splice(index, 1);
+				} else {
+					this.chosenCategoryIds.push(curNavItem.goodsCategoryId);
+				}
+				uni.$emit(this.$globalFun.VERTICAL_NAV_GET_ITEM, this.chosenCategoryIds);
+			},
+			// searchGoods(e) {
+			// 	uni.$emit(this.$globalFun.VERTICAL_NAV_SEARCH, e.detail.value);
+			// }
+		}
+	}
+</script>
+
+<style scoped>
+	.VerticalNav.nav {
+		width: 200upx;
+		white-space: initial;
+	}
+
+	.VerticalNav.nav .cu-item {
+		width: 100%;
+		text-align: center;
+		background-color: #fff;
+		margin: 0;
+		border: none;
+		height: 50px;
+		position: relative;
+	}
+
+	.VerticalNav.nav .cu-item.cur {
+		background-color: #f1f1f1;
+	}
+
+	.VerticalNav.nav .cu-item.cur::after {
+		content: "";
+		width: 8upx;
+		height: 30upx;
+		border-radius: 10upx 0 0 10upx;
+		position: absolute;
+		background-color: currentColor;
+		top: 0;
+		right: 0upx;
+		bottom: 0;
+		margin: auto;
+	}
+
+	.VerticalBox {
+		display: flex;
+	}
+
+	.VerticalMain {
+		background-color: #f1f1f1;
+		flex: 1;
+	}
+	
+	.cu-list>.cu-item {
+	    transition: all 0.2s ease-in-out 0s;
+	    -webkit-transform: translateX(0.5px);
+	    transform: translateX(0rpx);
+	}
+	
+	.cu-list.menu-avatar>.cu-item:after, .cu-list.menu>.cu-item:after {
+		border: none;
+	}
+	
+	.cu-list>.cu-item:last-child:after, .cu-list.menu>.cu-item:last-child:after {
+		border: none;
+	}
+	
+	.bottom-border {
+		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
+	}
+</style>
diff --git a/pages/my/my-operator.vue b/pages/my/my-operator.vue
index 853fcc7..b91e8fa 100644
--- a/pages/my/my-operator.vue
+++ b/pages/my/my-operator.vue
@@ -75,21 +75,40 @@
 			</view>
 		</view>
 		<!-- 屏蔽设置 模态框 -->
-		<view class="cu-modal" :class="isShowShieldSet?'show':''">
+		<view class="cu-modal" :class="modalName=='shieldSetModal'?'show':''">
 			<view class="cu-dialog">
 				<view class="cu-bar bg-white justify-end">
-					<view class="content">屏蔽设置</view>
+					<view class="content">选品广场设置</view>
 					<view class="action" @tap="hideModal">
 						<text class="cuIcon-close text-bold text-red"></text>
 					</view>
 				</view>
-				<view class="padding-xl">
-					<view class="margin-bottom">对所有客户屏蔽有竞争关系区域的服务和商品类目</view>
-					<view>
-						<text class="margin-right">屏蔽请勾选: </text>
-						<checkbox style="transform:scale(0.7)" class="round sm main-color" :value="agreeShield" :checked="agreeShield"
-							@click="changeAgreeShield">
-						</checkbox>
+				<view class="padding-xl">
+					<view class="flex align-start margin-bottom-xl padding-lr">
+						<view class="margin-right">选品广场：</view>
+						<view class="margin-right">
+							<view class="margin-bottom-sm">
+								<text class="margin-right-xs">全选</text>
+								<checkbox style="transform:scale(0.9)" class="main-color" :value="agreeShield" :checked="agreeShield === 0"
+									@click="changeAgreeShield(0)">
+								</checkbox>
+							</view>
+							<view>
+								<text class="margin-right-xs">反选</text>
+								<checkbox style="transform:scale(0.9)" class="main-color" :value="agreeShield" :checked="agreeShield === 1"
+									@click="changeAgreeShield(1)">
+								</checkbox>
+							</view>
+						</view>
+						<view class="text-left">
+							<view>逐条选品</view>
+							<view class="text-main-color" @tap="showModal('categoryModal')">去选品</view>
+						</view>
+					</view>
+					<view class="padding-top-lg text-left text-sm">
+						<view class="margin-bottom-xs">全选：全部勾选供应链的服务及商品/运营代理所有类目</view>
+						<view class="margin-bottom-xs">反选：把与我提供的服务和商品有冲突的区域范围不勾选</view>
+						<view class="text-main-color">(注：你所提供的服务及类目以你同手机号上架或入驻为准)</view>
 					</view>
 				</view>
 				<view class="cu-bar bg-white">
@@ -99,22 +118,32 @@
 				</view>
 			</view>
 		</view>
+		<!-- 类目抽屉 -->
+		<view class="DrawerClose" :class="modalName=='categoryModal'?'show':''" @tap="showModal('shieldSetModal')">
+			<view class="cuIcon-roundcheckfill text-main-color"></view>
+			<view class="cuIcon-roundclosefill"></view>
+		</view>
+		<scroll-view scroll-y class="DrawerWindow bg-gray" :class="modalName=='categoryModal'?'show':''">
+			<multiselect-vertical-nav :list="categoryList" :containerHeight="'calc(100vh - 200rpx)'"></multiselect-vertical-nav>
+		</scroll-view>
 	</view>
 </template>
 
 <script>
-	import horizontalNameCard from '@/components/common-card/horizontal-name-card.vue';
+	import horizontalNameCard from '@/components/common-card/horizontal-name-card.vue';
+	import multiselectVerticalNav from '@/components/multi-level-nav/multiselect-vertical-nav.vue';
 
 	export default {
 		components: {
-			horizontalNameCard
+			horizontalNameCard,
+			multiselectVerticalNav
 		},
 		data() {
 			return {
 				myOperator: {},
 				operBtn: [{
 					code: 'ShieldSet',
-					name: '屏蔽设置'
+					name: '选品广场'
 				}, {
 					code: '',
 					name: '加价申请'
@@ -129,14 +158,20 @@
 					name: '添加团队'
 				}, {
 					code: '',
-					name: '审批团队'
+					name: '组建/审批区域团队'
 				}],
-				agreeShield: false,
-				isShowShieldSet: false
+				agreeShield: 0,
+				modalName: null,
+				categoryList: [],
+				chosenCategoryIds: []
 			}
-		},
-		onLoad() {
-			this.loadData();
+		},
+		onLoad() {
+			this.loadData();
+			this.bindEvent();
+		},
+		onUnload() {
+			this.offBindEvent();
 		},
 		methods: {
 			async loadData() {
@@ -145,7 +180,8 @@
 				this.loadMyInfo({
 					customerId: this.curUserInfo.customerId,
 					isDistributor: true
-				});
+				});
+				this.loadCategory();
 			},
 			async loadMyInfo(params) {
 				let res = await this.$request.qryCustomerList(params);
@@ -156,15 +192,33 @@
 						desc: '合伙人'
 					}];
 				}
-			},
-			hideModal(e) {
-				this.isShowShieldSet = false
+			},
+			async loadCategory(params) {
+				let res = await this.$request.getProductCategories(params);
+				res = res[1].data.data;
+				res.forEach(firstCategory => {
+					if (firstCategory.child && firstCategory.child.length) {
+						this.categoryList = this.categoryList.concat(firstCategory.child)
+					}
+				})
+			},
+			showModal(modalName) {
+				this.modalName = modalName;
+			},
+			hideModal() {
+				this.modalName = null
+			},
+			bindEvent() {
+				uni.$on(this.$globalFun.VERTICAL_NAV_GET_ITEM, this.tmpChooseCategory);
+			},
+			offBindEvent() {
+				uni.$off(this.$globalFun.VERTICAL_NAV_GET_ITEM);
 			},
 			doSomething(e) {
 				const cur = e.currentTarget.dataset.cur;
 				switch (cur) {
 					case 'ShieldSet':
-						this.isShowShieldSet = !this.isShowShieldSet;
+						this.showModal('shieldSetModal')
 						break;
 					case 'showTeamMembers':
 						uni.navigateTo({
@@ -175,8 +229,12 @@
 						break;
 				}
 			},
-			changeAgreeShield() {
-				this.agreeShield = !this.agreeShield;
+			changeAgreeShield(agreeShield) {
+				this.agreeShield = agreeShield;
+			},
+			tmpChooseCategory(chosenCategoryIds) {
+				this.chosenCategoryIds = chosenCategoryIds;
+				console.log("chosenCategoryIds=" + JSON.stringify(this.chosenCategoryIds))
 			},
 			confirmShield(e) {},
 			showCertificationForm() {
@@ -211,5 +269,53 @@
 		width: 90%;
 		margin-left: 5%;
 		margin-right: 5%;
+	}
+	
+	.DrawerWindow {
+		z-index: 9999;
+		position: absolute;
+		width: 85vw;
+		height: 100vh;
+		left: 0;
+		top: 0;
+		transform: scale(0.9, 0.9) translateX(-100%);
+		opacity: 0;
+		pointer-events: none;
+		transition: all 0.4s;
+		padding: 100upx 0;
+	}
+	
+	.DrawerWindow.show {
+		transform: scale(1, 1) translateX(0%);
+		opacity: 1;
+		pointer-events: all;
+	}
+	
+	.DrawerClose {
+		position: absolute;
+		width: 40vw;
+		height: 100vh;
+		right: 0;
+		top: 0;
+		color: transparent;
+		padding-bottom: 30upx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: flex-end;
+		background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
+		letter-spacing: 5px;
+		font-size: 60upx;
+		opacity: 0;
+		pointer-events: none;
+		transition: all 0.4s;
+		z-index: 9999;
+	}
+	
+	.DrawerClose.show {
+		opacity: 1;
+		pointer-events: all;
+		width: 15vw;
+		color: #fff;
 	}
 </style>
diff --git a/pages/my/my-team-member.vue b/pages/my/my-team-member.vue
index 0315709..c48efff 100644
--- a/pages/my/my-team-member.vue
+++ b/pages/my/my-team-member.vue
@@ -27,7 +27,7 @@
 				</view>
 			</view>
 			<!-- 人员下辖团队统计 -->
-			<view class="cu-list grid no-border col-4 solid-top margin-top-sm">
+			<!-- <view class="cu-list grid no-border col-4 solid-top margin-top-sm">
 				<view class="cu-item" :class="index == 2 ? 'solid-left' : ''" v-for="(item, index) in member.analyseItems" v-if="index < 4 && item.type === 'common'">
 					<view class="margin-bottom-xs">{{item.title}}</view>
 					<view class="text-red" v-if="item.unit === 'yuan'">
@@ -37,8 +37,8 @@
 						{{item.value}}{{item.unit}}
 					</view>
 				</view>
-			</view>
-			<view class="cu-list grid no-border col-4 solid-top">
+			</view> -->
+			<view class="cu-list grid no-border col-4 solid-top margin-top-sm">
 				<view class="cu-item" v-for="(item, index) in member.analyseItems" v-if="index >= 4 && item.type === 'common'">
 					<view class="margin-bottom-xs">{{item.title}}</view>
 					<view class="text-red" v-if="item.unit === 'yuan'">
@@ -96,6 +96,7 @@
 				params.pageSize = this.pageSize;
 				params.customerPlace = this.curUserInfo.customerId;
 				params.isDistributor = true;
+				params.placeStatus = 2;
 				params.status = 0;
 				this.$refs.loadStatusBar.showLoading();
 				try {