tijiao
This commit is contained in:
256
components/tagTree.vue
Normal file
256
components/tagTree.vue
Normal file
@@ -0,0 +1,256 @@
|
||||
<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="#117e4c"
|
||||
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"
|
||||
>
|
||||
<view v-for="(item, index) in treeList" @click.stop="clickCourseInfo(item)" style=" padding: 20rpx;box-sizing: border-box;border-bottom: 1px solid #ebeef5;"> {{ item.title}}</view>
|
||||
|
||||
<!-- <uni-collapse-item
|
||||
v-for="(item, index) in treeList"
|
||||
:key="index"
|
||||
:title="item.title"
|
||||
:show-animation="true"
|
||||
@click.stop="clickCourseInfo(item)"
|
||||
>
|
||||
<view class="content">
|
||||
|
||||
<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
|
||||
"
|
||||
>
|
||||
|
||||
<text
|
||||
class="textss"
|
||||
v-for="(item3, index3) in item2.children"
|
||||
:key="index3"
|
||||
@click.stop="clickCourseInfo(item3)"
|
||||
>{{ item3.title }}</text
|
||||
>
|
||||
|
||||
</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() {
|
||||
var data = { id: 0 };
|
||||
this.$http
|
||||
.request({
|
||||
url: "sociology/home/getSociologyLabels",
|
||||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||||
data,
|
||||
header: {
|
||||
//默认 无 说明：请求头
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
|
||||
.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,
|
||||
#3ab3ae 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;
|
||||
}.uni-collapse-item .uni-collapse-item-header .uni-collapse-item-arrow {
|
||||
display: none; /* 隐藏右箭头 */
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user