dingdong-mall/components/multi-level-nav/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> -->
		<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"
					: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="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">
						<view class="action" @click="chooseNavItem(type)">
							<text class="cuIcon-title text-main-color"></text>{{type.goodsCategoryName}}
						</view>
						<view class="text-main-color text-xl padding-sm text-bold" @click="triggerTypeCollapse(tabCur, index1)">
							<text :class="isShowParentNode[tabCur][index1] == true ? 'cuIcon-fold' : 'cuIcon-unfold'"></text>
						</view>
					</view>
					<view class="cu-list menu" :class="isShowParentNode[tabCur][index1] == true ? 'showlist' : 'hidelist'">
						<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)">
							<view class="content">
								<text>{{subType.goodsCategoryName}}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'vertical-nav',
		props: {
			navList: {
				type: Array,
				default: []
			},
			list: {
				type: Array,
				default: []
			},
			containerHeight: {
				type: String,
				default: '100vh'
			},
			isClick2ShowProducts: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				tabCur: 0,
				navTabCur: 0,
				isShowParentNode: [],
				// mainCur: 0,
				// load: true,
				// verticalNavTop: 0,
				curNavItem: {},
				scrollLeft: 0
			}
		},
		onReady() {
			this.loadData();
		},
		methods: {
			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;
				// this.mainCur = e.currentTarget.dataset.mainCur;
			},
			chooseNavItem(curNavItem) {
				this.curNavItem = curNavItem;
				uni.$emit(this.$globalFun.VERTICAL_NAV_GET_ITEM, curNavItem);
			},
			searchGoods(e) {
				uni.$emit(this.$globalFun.VERTICAL_NAV_SEARCH, e.detail.value);
			},
			triggerTypeCollapse(index1, index2) {
				if (this.isShowParentNode[index1] == null || this.isShowParentNode[index1] == undefined) {
					this.isShowParentNode[index1] = [];
					this.isShowParentNode[index1][index2] = true;
				} else if (!this.isShowParentNode[index1][index2]) {
					this.isShowParentNode[index1][index2] = true;
				} else {
					this.isShowParentNode[index1][index2] = false;
				}
				this.isShowParentNode = [].concat(this.isShowParentNode);
			}
		}
	}
</script>

<style scoped>
	/* .fixed {
		position: fixed;
		z-index: 99;
	} */

	.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);
	}
	
	.hidelist {
		display: none;
	}
	
	.showlist {
		display: block;
	}
</style>