90 lines
1.5 KiB
Vue
90 lines
1.5 KiB
Vue
<template>
|
|
<view class="type">
|
|
<view class="type_left">
|
|
<ul>
|
|
<li :class="index == currentIndex ? 'active' : '' "
|
|
v-for="(item,index ) in leftData" :key="index"
|
|
@click="renderRight(index)">{{item.title}}</li>
|
|
</ul>
|
|
</view>
|
|
<view class="type_right">
|
|
<ul>
|
|
<li v-for="(item,index) in rightData" :key="index" @click="turnToclassify(item.cid)">{{item.text}}</li>
|
|
</ul>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
currentIndex: 0,
|
|
leftData: [],
|
|
rightData: [],
|
|
pid:''
|
|
}
|
|
},
|
|
onLoad() {},
|
|
created(){
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
async getData () {
|
|
let Data = await this.$http.getClass({ data:{} });
|
|
// console.log(Data)
|
|
this.leftData = Data
|
|
this.renderRight(0)
|
|
},
|
|
renderRight(index) {
|
|
this.currentIndex = index;
|
|
this.rightData = this.leftData[index].child;
|
|
this.pid = this.leftData[index].pid
|
|
// console.log(this.pid)
|
|
},
|
|
turnToclassify(cid){
|
|
uni.navigateTo({
|
|
url: `./classify?pid=${this.pid}&cid=${cid}`
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.type {
|
|
.active {
|
|
color: red;
|
|
}
|
|
.type_left {
|
|
float: left;
|
|
width: 20%;
|
|
position: fixed;
|
|
height: 100%;
|
|
border-right: 1px solid #e6e6e6;
|
|
overflow-y: scroll;
|
|
ul {
|
|
padding-bottom: 88px;
|
|
li {
|
|
text-align: center;
|
|
padding: 10px 0;
|
|
}
|
|
}
|
|
}
|
|
.type_right {
|
|
float: left;
|
|
width: 80%;
|
|
position: relative;
|
|
left: 20%;
|
|
|
|
ul {
|
|
li {
|
|
float: left;
|
|
margin: 10px;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|