117 lines
2.3 KiB
Vue
117 lines
2.3 KiB
Vue
<template>
|
|
<view class="content-flex" v-if="!loding">
|
|
<scroll-view class="stair" scroll-y>
|
|
<view class="stair-item" :class="{'show': stairIndex == index}" v-for="(item, index) in category"
|
|
:key="index" @click="stairIndex = index">{{item.name}}</view>
|
|
<view class="ios-bottom"></view>
|
|
</scroll-view>
|
|
<scroll-view class="second" scroll-y>
|
|
<!-- @click="goList(item.category_id)" -->
|
|
<!-- @click="$Router.push({name:'goodsList',query:{id:item.category_id}})" -->
|
|
<view class="second-item" v-for="(item, index) in category[stairIndex].children" :key="index" @click="goList(item.category_id)">
|
|
{{item.name}}
|
|
<uni-icons class="arrow-icon" type="arrowright" color="#999" size="14"></uni-icons>
|
|
</view>
|
|
<view class="ios-bottom"></view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
goodsCategory
|
|
} from '@/apis/interfaces/goods'
|
|
export default {
|
|
data() {
|
|
return {
|
|
loding: true,
|
|
category: [],
|
|
stairIndex: 0,
|
|
secondIndex: 0
|
|
};
|
|
},
|
|
created() {
|
|
goodsCategory().then(res => {
|
|
this.loding = false
|
|
this.category = res
|
|
})
|
|
},
|
|
methods: {
|
|
// 跳转列表页面
|
|
goList(id) {
|
|
uni.navigateTo({
|
|
url: `/pages/goods/lists?id=${id}`
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content-flex {
|
|
background-color: white;
|
|
height: 100vh;
|
|
display: flex;
|
|
font-size: $title-size-m;
|
|
|
|
.stair {
|
|
background: #F5F5F5;
|
|
width: 240rpx;
|
|
|
|
.stair-item {
|
|
text-align: center;
|
|
padding: 0 $padding;
|
|
line-height: 90rpx;
|
|
color: $text-gray;
|
|
@extend .nowrap;
|
|
&.show {
|
|
position: relative;
|
|
background: white;
|
|
color: $mian-color;
|
|
font-weight: bold;
|
|
|
|
&::before {
|
|
position: absolute;
|
|
height: 40rpx;
|
|
width: 5rpx;
|
|
background: $mian-color;
|
|
content: " ";
|
|
left: 0;
|
|
top: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.second {
|
|
width: calc(100% - 240rpx);
|
|
|
|
.second-item {
|
|
position: relative;
|
|
padding: 0 ($padding + 80) 0 $padding;
|
|
line-height: 90rpx;
|
|
color: $text-gray;
|
|
|
|
.arrow-icon {
|
|
position: absolute;
|
|
right: $padding;
|
|
}
|
|
|
|
&::after {
|
|
position: absolute;
|
|
height: 1rpx;
|
|
content: ' ';
|
|
background: $border-color;
|
|
left: $padding;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
|
|
&:first-child::after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|