medicine_app/pages/course/illustrate - 副本.vue

<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-nav-bar title="课程说明"></z-nav-bar>
		<view class="containerBg">
			<view class="proTitle">
				<text>点击课程名称即可查看对应的课程说明</text>
			</view>
			<uni-collapse accordion v-model="accordionVal" @change="change" v-if="treeList.length > 0">
				<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" v-for="(item1, index1) in item.children" :key="index1"
								@click="courseInfo(item1)">
								<text> --- {{item1.title}}</text>
								<view class="sub2List" v-if="item1.children">
									<view class="item leve3" v-for="(item2, index2) in item1.children" :key="index2"
										@click="courseInfo(item2)">
										--- --- {{item2.title}}
										<view class="sub3List" v-if="item2.children">
											<view class="item leve4" v-for="(item3, index3) in item2.children"
												:key="index3" @click="courseInfo(item3)">
												--- --- --- {{item3.title}}
											</view>
										</view>
									</view>

								</view>
							</view>

						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
		<u-popup :show="infopop" :round="10" @close="closePup">
			<!-- {{pupContent}} -->
			<view class="infoBox">
				<text>超强树选择器、树组件、树插件、无限级联树、单选树、多选树、自定义样式树、树形选择 </text>
				<view class="audio">
					<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name"
						:author="current.author" :action="audioAction" controls></audio>
					<!-- <view class="audiobox">
						<view class="audioinfo">
							<image class="audioimg" :src="bookInfo.images" mode="aspectFit"></image>
							<image class="audioimgstart" v-if="!this.paused" mode="aspectFit"
								src="../../static/audiostart.png" @click="start"></image>
							<image class="audioimgstart" v-else mode="aspectFit" src="../../static/audiostop.png"
								@click="start"></image>
							<view>
								<view class="audiotitle">talkBookDetail.title</view>
								<view class="audioauthor">bookInfo.author.authorName</view>
								<view class="audioauthor">currentTime+'/'+duration秒</view>
								<slider class="audioslider" block-size="12" v-model="currentTime" :max="duration"
									@change="changeTime"></slider>
								<!-- <view @click="start">点击播放/暂停</view> -->
							<!-- </view>
						</view>
					</view> --> 
				</view>

				<view>
					<video id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
						enable-danmu danmu-btn controls></video>
				</view>
			</view>

		</u-popup>
		<z-navigation></z-navigation>
		<!-- <music-play :playData="playData"></music-play> -->
	</view>
</template>

<script>
	// import musicPlay from '@/components/music.vue'
	import $http from '@/config/requestConfig.js';
	var clear;
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				playData: {},
				value: ['0'],
				accordionVal: '0',
				// extraIcon:{
				// 	color: '#4cd964',
				// 	size: '100',		
				// }
				treeList: [],
				pid: null,
				infopop: false,
				pupContent: {},
				current: {
					poster: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png',
					name: '致爱丽丝',
					author: '暂无',
					src: 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3',
				},
				audioAction: {
					method: 'pause'
				}
			};
		},
		//第一次加载
		onLoad(e) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			this.pid = e.pid
			console.log(e, '------')
		},
		computed: {
			...mapState(['userInfo'])
		},
		//页面显示
		onShow() {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			this.getData()
		},
		components: {
			// musicPlay
		},
		//方法
		methods: {
			change() {},
			getData() {
				this.$http
					.post('medical/home/getCourseMedicalTree')
					.then(res => {
						if (res.code == 0 && res.labels.length > 0) {
							this.treeList = res.labels
						} else {
							this.treeList = []
						}
					}).catch(e => {
						console.log(e, '报错')
					});
			},
			closePup() {
				this.infopop = false
			},
			courseInfo(item) {
				this.$http
					.post('medical/home/getCourseMedicalDetail', {
						"id": item.id
					})
					.then(res => {
						if (res.code == 0 && res.course.id) {
							this.pupContent = res.course
						} else {
							this.pupContent = {}
						}
					}).catch(e => {
						console.log(e, '报错')
					});
				this.infopop = true
			}

		},
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	::v-deep .containerBg {
		.uni-collapse-item__title-box {
			background-color: transparent !important;
		}

		.uni-collapse-item__title {
			background-image: linear-gradient(90deg, #258feb 0%, #00e1ec 100%) !important;

			text {
				color: #fff !important;
				font-size: 28rpx !important;
			}
		}

	}

	.infoBox {
		padding: 20rpx;
		font-size: 26rpx;
	}

	// 	  .leve2{background-color: #71a5ff; }
	// 	  .leve3{background-color: #9bbeff; }
	// .leve4{background-color: #b6d0ff; }
	.containerBg {
		// background-color: $containerColor;
		background-color: #fff;
		padding: 0 20rpx;
		min-height: calc(100vh - 270rpx);
	}

	.uni-collapse-item__title-text {
		font-size: 30rpx;
	}
	.proTitle{text-align: center; padding:20rpx 0 ; margin-bottom: 20rpx; color: #666; font-size: 28rpx;}
	.sub1List {
		background-color: #f7f7f7;
		padding-left: 20rpx;
	}

	.content {
		.item {
			line-height: 80rpx;
			font-size: 28rpx;
			color: #497387;
			border-bottom: 1px solid #dae8f0;
		}
	}

	#myVideo {
		width: 100%;
	}

	audio {
		width: 100% !important;
	}
</style>