197 lines
4.6 KiB
Vue
197 lines
4.6 KiB
Vue
<template>
|
|
<view>
|
|
<uni-drawer ref="showRight" mode="right" :width="320" @change="changeD($event,'showRight')">
|
|
|
|
<view class="close">
|
|
<view class="zhan" style="width: 100%;"></view>
|
|
<u-icon name="close" @click="closeDrawer('showRight')" color="#2979ff" size="28"></u-icon>
|
|
</view>
|
|
<view class="proTitle">
|
|
<text>请选择课程分类</text>
|
|
</view>
|
|
<scroll-view class="warp" scroll-y="true" style="max-height: 80vh;">
|
|
<uni-collapse accordion v-if="treeList.length > 0" @change="collapseChange">
|
|
<uni-collapse-item v-for="(item, index) in treeList" :key="index" :title="item.title"
|
|
:show-animation="true">
|
|
<view class="content" >
|
|
<!-- <text class="text">{{item.title}}</text> -->
|
|
<view class="sub1List">
|
|
<view class="item leve2" @click.stop="clickCourseInfo(item)" v-if="item.isLast == 1">
|
|
<text class="textss"> 本目录下全部课程</text>
|
|
</view>
|
|
<view :class="['item', 'leve2']"
|
|
v-for="(item1, index1) in item.children" :key="index1"
|
|
@click.stop="clickCourseInfo(item1)">
|
|
<text class="textss"> {{item1.title}}</text>
|
|
<view class="sub2List" v-if="item1.children">
|
|
<view :class="['item', 'leve3']"
|
|
v-for="(item2, index2) in item1.children" :key="index2"
|
|
@click.stop="clickCourseInfo(item2)">
|
|
<text class="textss">{{item2.title}}</text>
|
|
<view class="sub3List" v-if="item2.isLast == 0 && item2.children && item2.children.length > 0">
|
|
<!-- <view :class="['item', 'leve4']" -->
|
|
<!-- <template> -->
|
|
<text class="textss" v-for="(item3, index3) in item2.children"
|
|
:key="index3"
|
|
@click.stop="clickCourseInfo(item3)">{{item3.title}}</text>
|
|
<!-- </view> -->
|
|
<!-- </template> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-collapse-item>
|
|
</uni-collapse>
|
|
</scroll-view>
|
|
</uni-drawer>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name:"tagTree",
|
|
// props:['treeList'],
|
|
data() {
|
|
return {
|
|
treeList:[]
|
|
};
|
|
},methods:{
|
|
showDrawer(e) {
|
|
this.$refs[e].open()
|
|
// this.videoContext.pause()
|
|
// this.showTemp = true
|
|
console.log('打开抽屉')
|
|
},
|
|
getData() {
|
|
this.$http
|
|
.post('medical/home/getCourseMedicalTree')
|
|
.then(res => {
|
|
if (res.code == 0 && res.labels.length > 0) {
|
|
this.treeList = res.labels
|
|
} else {
|
|
this.treeList = []
|
|
}
|
|
this.showDrawer('showRight')
|
|
}).catch(e => {
|
|
console.log(e, '报错')
|
|
uni.showToast({
|
|
title:"获取课程分类失败",
|
|
icon:"none"
|
|
})
|
|
});
|
|
},
|
|
clickCourseInfo(val){
|
|
this.$emit('clickCourseInfo',val)
|
|
this.closeDrawer('showRight')
|
|
},
|
|
closeDrawer(e) {
|
|
this.$refs[e].close()
|
|
},
|
|
changeD(e, type) {
|
|
// console.log((type === 'showRight' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
|
|
this[type] = e
|
|
if (!e) {
|
|
console.log('关闭弹窗')
|
|
}
|
|
|
|
},
|
|
collapseChange(e) {
|
|
// console.log(e, '折叠面板点击');
|
|
// if (e) {
|
|
// this.tagId = this.treeList[e].id
|
|
// }
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
// ::v-deep uni-drawer{ height: 50vh !important;
|
|
// .uni-drawer__content{
|
|
// overflow-y: scroll !important;
|
|
// }
|
|
// }
|
|
.sub1List {
|
|
background-color: #f7f7f7;
|
|
// padding-left: 20rpx;
|
|
}
|
|
|
|
.content {
|
|
|
|
.item {
|
|
background-color: #fff;
|
|
line-height: 80rpx;
|
|
font-size: 28rpx;
|
|
color: #1b2a32;
|
|
// border-bottom: 1px solid #dae8f0;
|
|
|
|
text {
|
|
padding-left: 20rpx;
|
|
}
|
|
|
|
.item:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.item.active {
|
|
// background-color: #aed1ec;
|
|
color: #fff;
|
|
background-image: linear-gradient(90deg, #258feb 0%, #00e1ec 100%) !important;
|
|
}
|
|
|
|
.textss {
|
|
display: inline-block;
|
|
width: 100%;
|
|
border-bottom: 1px solid #ebeef5;
|
|
}
|
|
|
|
.leve2 {
|
|
.textss {
|
|
padding-left: 20rpx;
|
|
}
|
|
}
|
|
|
|
.leve2 {
|
|
.textss {
|
|
padding-left: 40rpx;
|
|
}
|
|
}
|
|
|
|
.leve3 {
|
|
|
|
.sub3List{
|
|
border-bottom: 1px solid #ebeef5; padding-left: 60rpx;
|
|
.textss{background-color: #ebeef5; border-radius: 20rpx; padding: 10rpx 14rpx !important;}
|
|
}
|
|
.textss {
|
|
padding-left: 60rpx; display: inline; margin-right: 20rpx; border:none !important;
|
|
}
|
|
}
|
|
|
|
.leve4 {
|
|
.textss {
|
|
padding-left: 80rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
.proTitle {
|
|
text-align: center;
|
|
padding: 20rpx 0;
|
|
margin-top: 60rpx;
|
|
// margin-bottom: 20rpx;
|
|
color: #888;
|
|
font-size: 28rpx;
|
|
}
|
|
.close {
|
|
display: flex;
|
|
justify-content: right;
|
|
padding-top: 60rpx;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
</style> |