154 lines
3.7 KiB
Vue
154 lines
3.7 KiB
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> -->
|
|
<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="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: {
|
|
list: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
containerHeight: {
|
|
type: String,
|
|
default: '100vh'
|
|
},
|
|
isClick2ShowProducts: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
tabCur: 0,
|
|
// mainCur: 0,
|
|
// load: true,
|
|
// verticalNavTop: 0,
|
|
curNavItem: {}
|
|
}
|
|
},
|
|
onReady() {
|
|
this.loadData();
|
|
},
|
|
methods: {
|
|
loadData() {
|
|
// this.list = await this.$api.data('categoryList');
|
|
// this.tabCur = this.list[0].goodsCategoryId;
|
|
},
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
</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);
|
|
}
|
|
</style>
|