dingdong-mall/components/multi-level-nav/multiselect-vertical-nav.vue

<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> -->
		<!-- height 64rpx -->
		<view class="flex flex-wrap justify-center" style="padding-bottom: 6rpx;">
			<button class="cu-btn long-btn shadow bg-main-color" style="width: 200rpx;margin-left: 20rpx;" @click="chooseAll()">全选</button>
			<button class="cu-btn long-btn shadow bg-main-color light" style="width: 200rpx;margin-left: 20rpx;" @click="cancelAll()">取消全选</button>
		</view>
		<view class="VerticalBox" :style="'height:calc(' + containerHeight + ')'">
			<scroll-view class="VerticalNav nav" scroll-y="true">
				<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" scroll-y="true">
				<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
			},
			allLevel3CategoryIds: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				tabCur: 0,
				chosenCategoryIds: []
			}
		},
		onReady() {
			this.loadData();
		},
		methods: {
			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);
			// }
			clearChosenItem() {
				this.chosenCategoryIds = [];
				uni.$emit(this.$globalFun.VERTICAL_NAV_GET_ITEM, this.chosenCategoryIds);
			},
			setChooseItems(arr) {
				this.chosenCategoryIds = [...arr]
				uni.$emit(this.$globalFun.VERTICAL_NAV_GET_ITEM, this.chosenCategoryIds);
			},
			chooseAll() {
				this.chosenCategoryIds = [...this.allLevel3CategoryIds]
				uni.$emit(this.$globalFun.VERTICAL_NAV_GET_ITEM, this.chosenCategoryIds);
			},
			cancelAll() {
				this.chosenCategoryIds = []
				uni.$emit(this.$globalFun.VERTICAL_NAV_GET_ITEM, this.chosenCategoryIds);
			}
		}
	}
</script>

<style scoped>
	.VerticalNav.nav {
		width: 200upx;
		height: 100%;
		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; */
		height: 100%;
	}
	
	.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>