更新
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user