33

components/tagTree.vue

@@ -0,0 +1,179 @@
+<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>
+			<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)">
+								<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.children">
+											<view :class="['item', 'leve4']"
+												v-for="(item3, index3) in item2.children" :key="index3"
+												@click.stop="clickCourseInfo(item3)">
+												<text class="textss">{{item3.title}}33</text>
+											</view>
+										</view>
+									</view>
+								</view>
+							</view>
+						</view>
+					</view>
+				</uni-collapse-item>
+			</uni-collapse>
+		</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>
+	.sub1List {
+		background-color: #f7f7f7;
+		// padding-left: 20rpx;
+	}
+	
+	.content {
+		.item {
+			background-color: #fff;
+			line-height: 80rpx;
+			font-size: 26rpx;
+			color: #497387;
+			// 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 {
+			.textss {
+				padding-left: 60rpx;
+			}
+		}
+	
+		.leve4 {
+			.textss {
+				padding-left: 80rpx;
+			}
+		}
+	}
+	.proTitle {
+		text-align: center;
+		padding: 20rpx 0;
+		margin-top: 60rpx;
+		// margin-bottom: 20rpx;
+		color: #666;
+		font-size: 26rpx;
+	}
+.close {
+		display: flex;
+		justify-content: right;
+		padding-top: 60rpx;
+		padding-right: 20px;
+	}
+
+</style>