This commit is contained in:
唐明明
2021-10-26 17:26:01 +08:00
parent 422427f549
commit 89cb4bea28
17 changed files with 1540 additions and 16452 deletions

View File

@@ -1,105 +1,105 @@
<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>
<view class="second-item" v-for="(item, index) in category[stairIndex].children" :key="index" @click="onCategory(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 { managesCategory } from '@/apis/interfaces/goods'
export default {
data() {
return {
loding : true,
category : [],
stairIndex : 0,
secondIndex : 0
};
},
created() {
managesCategory().then(res => {
this.loding = false
this.category = res
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
},
methods:{
// 选择分类
onCategory(cid){
this.$Router.push({name: 'goodsAdd', params: {cid, id: this.category[this.stairIndex].category_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: $text-price;
font-weight: bold;
&::before{
position: absolute;
height: 40rpx;
width: 5rpx;
background: $text-price;
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>
<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>
<view class="second-item" v-for="(item, index) in category[stairIndex].children" :key="index" @click="onCategory(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 { managesCategory } from '@/apis/interfaces/goods'
export default {
data() {
return {
loding : true,
category : [],
stairIndex : 0,
secondIndex : 0
};
},
created() {
managesCategory().then(res => {
this.loding = false
this.category = res
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
},
methods:{
// 选择分类
onCategory(cid){
this.$Router.push({name: 'goodsAdd', params: {cid, id: this.category[this.stairIndex].category_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: $text-price;
font-weight: bold;
&::before{
position: absolute;
height: 40rpx;
width: 5rpx;
background: $text-price;
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>