阶段性提交

2024-06-06 15:06:04 +08:00
parent ae7971a71e
commit b295b7ef4a
19 changed files with 1382 additions and 165 deletions
--- a/pages.json
+++ b/pages.json
@@ -252,7 +252,8 @@
 			"path" : "pages/course/courseDetail",
 			"style" : 
 			{
-				"navigationBarTitleText" : "课程详细"
+				"navigationBarTitleText" : "课程详细",
+				"enablePullDownRefresh": true
 			}
 		},
 		{
@@ -266,7 +267,15 @@
 			"path" : "pages/course/illustrate",			
 			"style" : 
 			{
-				"navigationBarTitleText" : "课程说明"
+				"navigationBarTitleText" : "课程说明",
+				"enablePullDownRefresh": true
+			}
+		},
+		{
+			"path" : "pages/course/outline",
+			"style" : 
+			{
+				"navigationBarTitleText" : "课程大纲"
 			}
 		}		
 	],
--- a/pages/course/courseSet.vue
+++ b/pages/course/courseSet.vue
@@ -2,17 +2,85 @@
 	<view>
 		<!-- 公共组件-每个页面必须引入 -->
 		<public-module></public-module>
-		<z-nav-bar title="课程设置"></z-nav-bar>
+		<z-nav-bar :title="courseInfo.id ? courseTitle : '课程说明'">			
+				<uni-icons type="bars" class="topRight" slot="right" @click="showDrawer('showRight')"   size="22"></uni-icons> 
+		</z-nav-bar>
+		<view class="containerBg">
+			<view class="example-body">
+				<!-- <button type="primary" @click="showDrawer('showRight')"><text class="word-btn-white">全部课程</text>
+				</button> -->
+				<uni-drawer ref="showRight" mode="right" :width="320" @change="changeD($event,'showRight')">
+					<!-- <view class="close">
+							<button @click="closeDrawer('showRight')"><text
+									class="word-btn-white">关闭Drawer</text></button>
+						</view> -->
+					<view class="proTitle">
+						<text>点击课程名称即可查看对应的课程说明</text>
+					</view>
+					<uni-collapse accordion v-model="accordionVal"  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',curId == item1.id ? 'active' : '']"
+										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',curId == item2.id ? 'active' : '']"
+												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',curId == item3.id ? 'active' : '']"
+														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>
+			<view class="infoBox" v-if="courseInfo.id">
+				<uni-section :title="courseTitle" type="line" titleFontSize="16px">
+					<rich-text v-if="courseInfo.content" class="content"
+						:nodes="formatRichText(courseInfo.content)"></rich-text>
+					<!-- <text>超强树选择器、树组件、树插件、无限级联树、单选树、多选树、自定义样式树、树形选择 </text> -->
+					<view class="audio" v-if="courseInfo.mediaType == 2 && courseInfo.media != ''">
+						<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name"
+							:author="current.author" :action="audioAction" controls></audio>
+					</view>

-		
-		<public-module></public-module>
+					<view>
+						<view v-if="courseInfo.mediaType ==1 && courseInfo.media != ''" style="width: 100%;height: 100%;text-align: center;" v-html="videoHTML">		
+							</view>
+						<!-- 视频播放器样式 -->
+						<!-- <view class="videoTemp" v-show="showTemp">
+							<u-icon name="play-circle" color="#fff" size="40" @click="clickToPlay"></u-icon>
+							<image src="../../static/video.jpg" mode="aspectFit"></image>							
+						</view> -->
+						<!-- <view class="" v-if="!showTemp">	 -->
+						<!-- <video ref="myVideo" id="myVideo" poster="../../static/videoF.jpg" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
+							enable-danmu danmu-btn controls @ended="playEnd"></video> -->
+						<!-- </view> -->
+					</view>
+				</uni-section>
+			</view>
+		</view>
 		<z-navigation></z-navigation>
 		<!-- <music-play :playData="playData"></music-play> -->
 	</view>
 </template>

 <script>
-	import musicPlay from '@/components/music.vue'
+	// import musicPlay from '@/components/music.vue'
 	import $http from '@/config/requestConfig.js';
 	var clear;
 	import {
@@ -22,94 +90,311 @@
 		data() {
 			return {
 				playData: {},				
+				accordionVal: '',
+				// extraIcon:{
+				// 	color: '#4cd964',
+				// 	size: '100',		
+				// }
+				treeList: [],
 				tagId: null,
+				pid: null,

-				// status:0, // 0 不显示, 1 加载中，2 加载全部完成，3 暂无数据
-				// page:1,
-				// flag:true, // 函数是否执行完
+				courseInfo: {},
+				poster:'../../static/videoF.jpg', //封面图
+				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'
+				},
+				curId: null,
+				courseTitle: '',
+				showTemp:true,
+				videoContext:null,
+				videoUrl:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'
 			};
 		},
 		//第一次加载
 		onLoad(e) {
 			// 隐藏原生的tabbar
 			uni.hideTabBar();
-			// this.tagId = e.id
-			// this.pageTitle = e.title
-			// console.log(e, '传入分类id')
-			this.getData();
-		},
-		onReachBottom() {
-			if(this.status != 2){
-			this.page ++
-			this.getData()	}		
-			console.log('触底加载',this.page)
+			this.pid = e.pid
+			this.tagId = e.id
+			console.log(e, '------')
+			this.videoContext = uni.createVideoContext('myVideo')
 		},
 		computed: {
-			...mapState(['userInfo'])
-		},
+			...mapState(['userInfo']),
+			videoHTML() {
+							return `<video class="video-box" poster="http://ehh-public-01.oss-cn-beijing.aliyuncs.com/wumenyishu-image/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240606110049.jpg" src="${this.videoUrl}"  enable-danmu danmu-btn controls style="width:100%;height:320rpx"></video>`
+						}
+			},
 		//页面显示
 		onShow() {
 			// 隐藏原生的tabbar
 			uni.hideTabBar();
-			
-
+			this.getData()			
+		},
+		onUnload() {
+			// #ifdef APP-PLUS
+			plus.screen.lockOrientation('portrait-primary'); // 清除横屏			
+			// #endif
+			this.showTemp = true
+			this.videoContext = null
+		},
+		onPullDownRefresh(){
+			uni.stopPullDownRefresh()
 		},
 		components: {
-			musicPlay
+			// musicPlay
 		},
 		//方法
 		methods: {
-			getData() {
-				if(!this.flag){
-					console.log('正在执行，未完成')
-					return
+			showDrawer(e) {
+				this.$refs[e].open()
+				this.videoContext.pause()
+				this.showTemp = true
+				console.log(5555)
+			},
+			// 关闭窗口
+			closeDrawer(e) {
+				this.$refs[e].close()	
+			},
+			collapseChange(e){
+				console.log(e,'折叠面板点击');
+				if(e){
+					this.tagId = this.treeList[e].id
+					this.getCourseInfo(this.tagId)
+					this.closeDrawer('showRight')
 				}
-				this.status = 1
-				this.flag = false
+			},
+			changeD(e, type) {
+				// console.log((type === 'showRight' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
+				this[type] = e
+				if(!e){
+					this.showTemp = false
+					console.log('关闭弹窗')
+					this.videoContext.play()
+				}
+				
+			},
+			formatRichText(html) { //控制图片大小
+				let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
+					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
+					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
+					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
+					return match;
+				});
+				newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) {
+					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
+						'max-width:100%;');
+					return match;
+				});				
+				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
+				newContent = newContent.replace(/\<img/gi,
+					'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
+				return newContent;
+			},
+			getData() {
+				this.$http
+					.post('medical/home/getCourseMedicalTree')
+					.then(res => {
+						if (res.code == 0 && res.labels.length > 0) {
+							this.treeList = res.labels
+							this.getCourseInfo(this.treeList[0].id)
+							this.showDrawer('showRight')
+						} else {
+							this.treeList = []
+						}
+					}).catch(e => {
+						console.log(e, '报错')
+					});
+			},
+			// 获取课程详情
+			getCourseInfo(id) {
 				$http.request({
-						url: "medical/home/getMarketCourseList",
+						url: "medical/home/getCourseMedicalDetail",
 						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
 						data: {
-							"id": this.tagId,
-							"limit": 12,
-							"page": this.page
+							id: id
 						},
 						header: { //默认 无 说明：请求头
 							'Content-Type': 'application/json'
 						},
 					})
 					.then(res => {
-						if (res.code == 0) {
-							if (res.courseList.records.length > 0) {
-								var list = res.courseList.records
-								this.courseList = this.courseList.concat(list)
-								if(res.courseList.pages > this.page){
-									this.status = 0
-								}else{
-									this.status = 2
-								}
-							} else if(this.page > 1){
-								this.status = 2 // 加载完成
-								
+						if (res.code == 0 && res.course.id) {
+							this.courseInfo = res.course
+							this.courseTitle = this.courseInfo.title + '课程说明'
+							this.curId = id
+							if(this.courseInfo.mediaType == 1 && this.courseInfo.media != ''){
+								// this.videoUrl = this.courseInfo.media
+								// this.poster = this.videoUrl +
+								// 	"?x-oss-process=video/snapshot,t_0,f_jpg" 
 							}else{
-							
-								this.status = 3 // 暂无数据
+								// this.videoUrl = ''
+								this.poster = ''
 							}	
-							console.log('status',this.status)
+							
+							// console.log(id, 'id')
+						} else {
+							this.courseInfo = {}
+							this.videoUrl = ''
+							this.poster = ''
 						}
-						this.flag = true
 					}).catch(e => {
-						console.log(e,'数据报错')
+						this.courseInfo = {}
+						this.courseTitle = ''
+						this.curId = null
+						this.poster = ''
+						this.videoUrl = ''
+						console.log(e, '课程详情报错')
 					});
+			},
+			clickCourseInfo(item) {
+				
+				this.getCourseInfo(item.id)
+				this.closeDrawer('showRight')
+			},
+			playEnd(){
+				this.showTemp = true
+			},
+			clickToPlay(){
+				this.showTemp = false
+				this.videoContext.play()
 			}
+
 		},
 	};
 </script>
 <style lang="scss" scoped>
 	@import '@/style/mixin.scss';
-	.flexbox{display: flex; }
-	.imgcontainer {
-		background-color: $imgBg;
+
+	::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;
+		// 	}
+		// }
+		#myVideo {
+			width: 100% !important;		
+		}
+		video{width: 100% !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;
+	}
+
+	.videoTemp {
+		position: relative;
+
+		.u-icon {
+			position: absolute;
+			z-index: 2;
+			left: calc(50% - 40rpx);
+			top: calc(50% - 40rpx);
+		}
+
+		image {
+			width: 100%;
+		}
+	}
+
+	.videoTemp:before {
+		content: '';
+		display: block;
+		width: 100%;
+		position: absolute;
+		left: 0;
+		top: 0;
+		height: 100%;
+		background-color: rgba(0, 0, 0, .5);
+		z-index: 1;
+	}
+	
+
+	.proTitle {
+		text-align: center;
+		padding: 20rpx 0;
+		margin-top: 60rpx;
+		// margin-bottom: 20rpx;
+		color: #666;
+		font-size: 26rpx;
+	}
+
+	.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;}
+		}
+	}	
+	// .textss:last-child{
+	// 			border-bottom: 0;
+	// 		}
+	.topRight{margin-right: 20rpx; font-size: 28rpx; display: flex;}
+	
+
+	audio {
+		width: 100% !important;
+	}
 </style>
--- a/pages/course/illustrate
+++ b/pages/course/illustrate
@@ -0,0 +1,226 @@
+<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>
--- a/pages/course/illustrate.vue
+++ b/pages/course/illustrate.vue
@@ -2,73 +2,78 @@
 	<view>
 		<!-- 公共组件-每个页面必须引入 -->
 		<public-module></public-module>
-		<z-nav-bar title="课程说明"></z-nav-bar>
+		<z-nav-bar :title="courseInfo.id ? courseTitle : '课程说明'">			
+				<uni-icons type="bars" class="topRight" slot="right" @click="showDrawer('showRight')"   size="22"></uni-icons> 
+		</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 class="example-body">
+				<!-- <button type="primary" @click="showDrawer('showRight')"><text class="word-btn-white">全部课程</text>
+				</button> -->
+				<uni-drawer ref="showRight" mode="right" :width="320" @change="changeD($event,'showRight')">
+					<!-- <view class="close">
+							<button @click="closeDrawer('showRight')"><text
+									class="word-btn-white">关闭Drawer</text></button>
+						</view> -->
+					<view class="proTitle">
+						<text>点击课程名称即可查看对应的课程说明</text>
+					</view>
+					<uni-collapse accordion v-model="accordionVal"  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',curId == item1.id ? 'active' : '']"
+										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',curId == item2.id ? 'active' : '']"
+												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',curId == item3.id ? 'active' : '']"
+														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>
-
-						</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>
+						</uni-collapse-item>
+					</uni-collapse>
+				</uni-drawer>
 			</view>
+			<view class="infoBox" v-if="courseInfo.id">
+				<uni-section :title="courseTitle" type="line" titleFontSize="16px">
+					<rich-text v-if="courseInfo.content" class="content"
+						:nodes="formatRichText(courseInfo.content)"></rich-text>
+					<!-- <text>超强树选择器、树组件、树插件、无限级联树、单选树、多选树、自定义样式树、树形选择 </text> -->
+					<view class="audio" v-if="courseInfo.mediaType == 2 && courseInfo.media != ''">
+						<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name"
+							:author="current.author" :action="audioAction" controls></audio>
+					</view>

-		</u-popup>
+					<view>
+						<view v-if="courseInfo.mediaType ==1 && courseInfo.media != ''"  style="width: 100%;height: 100%;text-align: center;" v-html="videoHTML">		
+							</view>
+						<!-- 视频播放器样式 -->
+						<!-- <view class="videoTemp" v-show="showTemp">
+							<u-icon name="play-circle" color="#fff" size="40" @click="clickToPlay"></u-icon>
+							<image src="../../static/video.jpg" mode="aspectFit"></image>							
+						</view> -->
+						<!-- <view class="" v-if="!showTemp">	 -->
+						<!-- <video ref="myVideo" id="myVideo" poster="../../static/videoF.jpg" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
+							enable-danmu danmu-btn controls @ended="playEnd"></video> -->
+						<!-- </view> -->
+					</view>
+				</uni-section>
+			</view>
+		</view>
 		<z-navigation></z-navigation>
 		<!-- <music-play :playData="playData"></music-play> -->
 	</view>
@@ -92,9 +97,11 @@
 				// 	size: '100',		
 				// }
 				treeList: [],
+				tagId: null,
 				pid: null,
-				infopop: false,
-				pupContent: {},
+
+				courseInfo: {},
+				poster:'../../static/videoF.jpg', //封面图
 				current: {
 					poster: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png',
 					name: '致爱丽丝',
@@ -103,7 +110,12 @@
 				},
 				audioAction: {
 					method: 'pause'
-				}
+				},
+				curId: null,
+				courseTitle: '',
+				showTemp:true,
+				videoContext:null,
+				videoUrl:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'
 			};
 		},
 		//第一次加载
@@ -111,23 +123,84 @@
 			// 隐藏原生的tabbar
 			uni.hideTabBar();
 			this.pid = e.pid
+			this.tagId = e.id
 			console.log(e, '------')
+			this.videoContext = uni.createVideoContext('myVideo')
 		},
 		computed: {
-			...mapState(['userInfo'])
-		},
+			...mapState(['userInfo']),
+			videoHTML() {
+							return `<video class="video-box" poster="http://ehh-public-01.oss-cn-beijing.aliyuncs.com/wumenyishu-image/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240606110049.jpg" src="${this.videoUrl}"  enable-danmu danmu-btn controls style="width:100%;height:320rpx"></video>`
+						}
+			},
 		//页面显示
 		onShow() {
 			// 隐藏原生的tabbar
 			uni.hideTabBar();
 			this.getData()
+			this.getCourseInfo(this.tagId)
+		},
+		onUnload() {
+			// #ifdef APP-PLUS
+			plus.screen.lockOrientation('portrait-primary'); // 清除横屏			
+			// #endif
+			this.showTemp = true
+			this.videoContext = null
+		},
+		onPullDownRefresh(){
+			uni.stopPullDownRefresh()
 		},
 		components: {
 			// musicPlay
 		},
 		//方法
 		methods: {
-			change() {},
+			showDrawer(e) {
+				this.$refs[e].open()
+				this.videoContext.pause()
+				this.showTemp = true
+				console.log(5555)
+			},
+			// 关闭窗口
+			closeDrawer(e) {
+				this.$refs[e].close()				
+				
+			},
+			changeD(e, type) {
+				// console.log((type === 'showRight' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
+				this[type] = e
+				if(!e){
+					this.showTemp = false
+					console.log('关闭弹窗')
+					this.videoContext.play()
+				}
+				
+			},
+			formatRichText(html) { //控制图片大小
+				let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
+					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
+					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
+					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
+					return match;
+				});
+				newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) {
+					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
+						'max-width:100%;');
+					return match;
+				});				
+				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
+				newContent = newContent.replace(/\<img/gi,
+					'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
+				return newContent;
+			},
+			collapseChange(e){
+				console.log(e,'折叠面板点击');
+				if(e){
+					this.tagId = this.treeList[e].id
+					this.getCourseInfo(this.tagId)
+					this.closeDrawer('showRight')
+				}
+			},
 			getData() {
 				this.$http
 					.post('medical/home/getCourseMedicalTree')
@@ -141,24 +214,58 @@
 						console.log(e, '报错')
 					});
 			},
-			closePup() {
-				this.infopop = false
-			},
-			courseInfo(item) {
-				this.$http
-					.post('medical/home/getCourseMedicalDetail', {
-						"id": item.id
+			// 获取课程详情
+			getCourseInfo(id) {
+				$http.request({
+						url: "medical/home/getCourseMedicalDetail",
+						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+						data: {
+							id: id
+						},
+						header: { //默认 无 说明：请求头
+							'Content-Type': 'application/json'
+						},
 					})
 					.then(res => {
 						if (res.code == 0 && res.course.id) {
-							this.pupContent = res.course
+							this.courseInfo = res.course
+							this.courseTitle = this.courseInfo.title + '课程说明'
+							this.curId = id
+							if(this.courseInfo.mediaType == 1 && this.courseInfo.media != ''){
+								// this.videoUrl = this.courseInfo.media
+								// this.poster = this.videoUrl +
+								// 	"?x-oss-process=video/snapshot,t_0,f_jpg" 
+							}else{
+								// this.videoUrl = ''
+								this.poster = ''
+							}	
+							
+							// console.log(id, 'id')
 						} else {
-							this.pupContent = {}
+							this.courseInfo = {}
+							this.videoUrl = ''
+							this.poster = ''
 						}
 					}).catch(e => {
-						console.log(e, '报错')
+						this.courseInfo = {}
+						this.courseTitle = ''
+						this.curId = null
+						this.poster = ''
+						this.videoUrl = ''
+						console.log(e, '课程详情报错')
 					});
-				this.infopop = true
+			},
+			clickCourseInfo(item) {
+				
+				this.getCourseInfo(item.id)
+				this.closeDrawer('showRight')
+			},
+			playEnd(){
+				this.showTemp = true
+			},
+			clickToPlay(){
+				this.showTemp = false
+				this.videoContext.play()
 			}

 		},
@@ -168,19 +275,22 @@
 	@import '@/style/mixin.scss';

 	::v-deep .containerBg {
-		.uni-collapse-item__title-box {
-			background-color: transparent !important;
+		// .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;
+		// 	}
+		// }
+		#myVideo {
+			width: 100% !important;		
 		}
-
-		.uni-collapse-item__title {
-			background-image: linear-gradient(90deg, #258feb 0%, #00e1ec 100%) !important;
-
-			text {
-				color: #fff !important;
-				font-size: 28rpx !important;
-			}
-		}
-
+		video{width: 100% !important;	}
 	}

 	.infoBox {
@@ -201,24 +311,89 @@
 	.uni-collapse-item__title-text {
 		font-size: 30rpx;
 	}
-	.proTitle{text-align: center; padding:20rpx 0 ; margin-bottom: 20rpx; color: #666; font-size: 28rpx;}
+
+	.videoTemp {
+		position: relative;
+
+		.u-icon {
+			position: absolute;
+			z-index: 2;
+			left: calc(50% - 40rpx);
+			top: calc(50% - 40rpx);
+		}
+
+		image {
+			width: 100%;
+		}
+	}
+
+	.videoTemp:before {
+		content: '';
+		display: block;
+		width: 100%;
+		position: absolute;
+		left: 0;
+		top: 0;
+		height: 100%;
+		background-color: rgba(0, 0, 0, .5);
+		z-index: 1;
+	}
+	
+
+	.proTitle {
+		text-align: center;
+		padding: 20rpx 0;
+		margin-top: 60rpx;
+		// margin-bottom: 20rpx;
+		color: #666;
+		font-size: 26rpx;
+	}
+
 	.sub1List {
 		background-color: #f7f7f7;
-		padding-left: 20rpx;
+		// padding-left: 20rpx;
 	}

 	.content {
 		.item {
+			background-color: #fff;
 			line-height: 80rpx;
-			font-size: 28rpx;
+			font-size: 26rpx;
 			color: #497387;
-			border-bottom: 1px solid #dae8f0;
+			// 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;}
 		}
 	}	
+	// .textss:last-child{
+	// 			border-bottom: 0;
+	// 		}
+	.topRight{margin-right: 20rpx; font-size: 28rpx; display: flex;}
 	
-	#myVideo {
-		width: 100%;
-	}

 	audio {
 		width: 100% !important;
--- a/pages/course/index.vue
+++ b/pages/course/index.vue
@@ -2,7 +2,7 @@
 	<view>
 		<!-- 公共组件-每个页面必须引入 -->
 		<public-module></public-module>
-		<z-nav-bar :title="pageTitle"><view class="curseSet" slot="right" @click="shuomingPage('/pages/course/illustrate',tagId,pid)">课程说明</view></z-nav-bar>
+		<z-nav-bar :title="pageTitle"><view class="curseSet" slot="right" @click="shuomingPage('/pages/course/illustrate',tagId,pid)"><uni-icons type="info" size="24"></uni-icons> 课程说明</view></z-nav-bar>
 		<view class="tabsBox" :class="[fixed ? 'fixed' : '' ]">
 			<u-tabs v-if="tabList.length > 0" :class="['tabList']" @click="fatherClick" :current="curTagId"
 				:activeStyle="activeStyle" :scrollable="scrollable" :list="tabList"
@@ -42,7 +42,8 @@
 							</view>
 							<view class="tag-view">
 								<uni-tag v-if="item.level != 0" style="margin-right: 10rpx;" :text="item.level == 1 ? '初级':'高级'" type="primary" size="small" />
-								<uni-tag v-if="item.selective != 0" style="margin-right: 10rpx;" :text="item.selective == 1 ? '必修':'选修'" size="small" type="success" />
+								<uni-tag v-if="item.selective != 0 && item.selective == 1" style="margin-right: 10rpx;" text="必修" size="small" type="error" />
+								<uni-tag v-if="item.selective != 0 && item.selective == 2" style="margin-right: 10rpx;" text="选修" size="small" type="success" />
 							</view>
 							<view class="btn_box">
 								<text>了解课程</text>
@@ -301,7 +302,7 @@
 		padding: 0 20rpx;

 	}
-	.curseSet{margin-right: 20rpx; font-size: 26rpx;}
+	.curseSet{margin-right: 20rpx; font-size: 28rpx; display: flex; align-items: center;}
 	.fixed {
 		position: fixed;
 		z-index: 1; width: 100%; background-color: #fff;
--- a/pages/course/outline.vue
+++ b/pages/course/outline.vue
@@ -0,0 +1,183 @@
+<template>
+	<view>
+		<!-- 公共组件-每个页面必须引入 -->
+		<public-module></public-module>
+		<z-nav-bar title="课程大纲"></z-nav-bar>
+		<view class="container flexbox">
+
+			<view class="box">
+				<view class="item flexbox" @click="itemClick('jiage')">
+
+					<view class="logo">
+						<image class="" src="@/static/logo.png" mode="aspectFill"></image>
+					</view>
+					<view class="flexbox tt">
+						<view class="type">
+							<image src="/static/priceIcon.png" mode="widthFix"></image>
+						</view>
+						<text>课程价格</text>
+					</view>
+
+				</view>
+				<view class="item flexbox" @click="itemClick('shuoming')">
+					<view class="logo">
+						<image class="" src="@/static/logo.png" mode="aspectFill"></image>
+					</view>
+					<view class="flexbox tt">
+						<view class="type">
+							<image src="/static/shuomingIcon.png" mode="aspectFill"></image>
+						</view>
+						<text>课程说明</text>
+					</view>
+				</view>
+				<view class="item flexbox" @click="itemClick('jianjie')">
+					<view class="logo">
+						<image class="" src="@/static/logo.png" mode="aspectFill"></image>
+					</view>
+					<view class="flexbox tt">
+						<view class="type">
+							<image src="/static/jianjieIcon.png" mode="widthFix"></image>
+						</view>
+						<text>平台简介</text>
+					</view>
+				</view>
+			</view>
+		</view>
+		<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: {},
+			};
+		},
+		//第一次加载
+		onLoad(e) {
+			// 隐藏原生的tabbar
+			uni.hideTabBar();
+			// console.log(e, '------')
+		},
+		computed: {
+			...mapState(['userInfo'])
+		},
+		//页面显示
+		onShow() {
+			// 隐藏原生的tabbar
+			uni.hideTabBar();
+		},
+		onPullDownRefresh() {
+			uni.stopPullDownRefresh()
+		},
+		components: {
+			// musicPlay
+		},
+		//方法
+		methods: {
+			itemClick(op){
+				var path = ''
+				switch(op){
+					case "jiage":
+						path = '/'
+						break
+					case "shuoming":
+						path = '/pages/course/illustrate';
+						break;
+					case "jianjie":
+						path = '/pages/course/outline';
+						break;
+				}
+				uni.navigateTo({
+					url:path
+				})
+			},
+		},
+	};
+</script>
+<style lang="scss" scoped>
+	@import '@/style/mixin.scss';
+
+	.flexbox {
+		display: flex;
+	}
+
+	.container {
+		align-items: center;
+		min-height: calc(100vh - 270rpx);
+		@include pleft_right(10px);
+		background: url(@/static/pageBg.jpg) center no-repeat;
+		background-size: cover;
+
+	}
+
+	.box {
+		width: 100%;
+		justify-content: space-between;
+		
+		.item {
+			width: 100%;
+			justify-content: space-between;
+			// background-image: linear-gradient(-90deg, #e4edff 0%, #fff 100%);
+			background: url(@/static/bg2.jpg) center no-repeat;
+			border-radius: 20rpx;
+			margin: 20rpx 0;
+			position: relative;
+			padding: 16rpx;
+			@include mshadow(10px, 1);
+			.tt{
+				align-items: center;
+			}
+			.logo {
+				
+				image {
+					width: 150rpx;
+					height: 150rpx;
+				}
+			}
+		}
+
+		.logo {
+			// width: 100%;
+		}
+
+		.type {
+
+			// position: absolute; right: 0;
+			image {
+				width: 50rpx;
+				height: 60rpx;
+			}
+		}
+
+		text { padding-left: 20rpx;
+			width: 100%;
+			font-size: 40rpx;
+			color: #fff;
+			line-height: 150rpx;
+			text-align: right;
+			padding-right: 20rpx;
+		}
+	}
+
+	.title {
+		font-size: 32rpx;
+		font-weight: bold;
+		display: block;
+		text-align: center;
+	}
+
+	.content {
+		font-size: 26rpx;
+		line-height: 48rpx;
+		margin-top: 10rpx;
+	}
+</style>
--- a/pages/peanut/home.vue
+++ b/pages/peanut/home.vue
@@ -4,7 +4,7 @@
 			<view class="" style=" ">
 				<view style="height: 60rpx"></view>
 				<view class="icon_hua">
-					<image src="../../static/logo.png" mode="aspectFit" class="icon_hua_1"></image>
+					<image src="../../static/homeLogo.png" mode="aspectFit" class="icon_hua_1"></image>
 				</view>
 				<view class="topSearch_box">
 					<image src="../../static/search.png" mode="aspectFit"
@@ -18,6 +18,10 @@
 					<image src="../../static/my_02.png" mode="aspectFit"></image>
 					<text>我的课程</text>
 				</div>
+				<div class="item flexbox" @click="onPageJump('/pages/course/outline')">
+					<image src="../../static/my_01.png" mode="aspectFit"></image>
+					<text>学习大纲</text>
+				</div>
 				<div class="item flexbox" @click="onPageJump()">
 					<image src="../../static/my_03.png" mode="aspectFit"></image>
 					<text>太湖讲堂</text>
@@ -26,10 +30,6 @@
 					<image src="../../static/my_04.png" mode="aspectFit"></image>
 					<text>吴门医述</text>
 				</div>				
-				<div class="item flexbox" @click="onPageJump('/pages/course/courseSet')">
-					<image src="../../static/my_01.png" mode="aspectFit"></image>
-					<text>学习大纲</text>
-				</div>
 			</view>
 		</view>
 		<view class="home_nar ">
--- a/static/bg2.jpg
+++ b/static/bg2.jpg
--- a/static/homeLogo.png
+++ b/static/homeLogo.png
--- a/static/jianjieIcon.png
+++ b/static/jianjieIcon.png
--- a/static/pageBg.jpg
+++ b/static/pageBg.jpg
--- a/static/priceIcon.png
+++ b/static/priceIcon.png
--- a/static/shuomingIcon.png
+++ b/static/shuomingIcon.png
--- a/static/videoF.jpg
+++ b/static/videoF.jpg
--- a/uni_modules/uni-drawer/changelog.md
+++ b/uni_modules/uni-drawer/changelog.md
@@ -0,0 +1,13 @@
+## 1.2.1（2021-11-22）
+- 修复 vue3中个别scss变量无法找到的问题
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-drawer](https://uniapp.dcloud.io/component/uniui/uni-drawer)
+## 1.1.1（2021-07-30）
+- 优化 vue3下事件警告的问题
+## 1.1.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.7（2021-05-12）
+- 新增 组件示例地址
+## 1.0.6（2021-02-04）
+- 调整为uni_modules目录规范
--- a/uni_modules/uni-drawer/components/uni-drawer/keypress.js
+++ b/uni_modules/uni-drawer/components/uni-drawer/keypress.js
@@ -0,0 +1,45 @@
+// #ifdef H5
+export default {
+  name: 'Keypress',
+  props: {
+    disable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {
+    const keyNames = {
+      esc: ['Esc', 'Escape'],
+      tab: 'Tab',
+      enter: 'Enter',
+      space: [' ', 'Spacebar'],
+      up: ['Up', 'ArrowUp'],
+      left: ['Left', 'ArrowLeft'],
+      right: ['Right', 'ArrowRight'],
+      down: ['Down', 'ArrowDown'],
+      delete: ['Backspace', 'Delete', 'Del']
+    }
+    const listener = ($event) => {
+      if (this.disable) {
+        return
+      }
+      const keyName = Object.keys(keyNames).find(key => {
+        const keyName = $event.key
+        const value = keyNames[key]
+        return value === keyName || (Array.isArray(value) && value.includes(keyName))
+      })
+      if (keyName) {
+        // 避免和其他按键事件冲突
+        setTimeout(() => {
+          this.$emit(keyName, {})
+        }, 0)
+      }
+    }
+    document.addEventListener('keyup', listener)
+    // this.$once('hook:beforeDestroy', () => {
+    //   document.removeEventListener('keyup', listener)
+    // })
+  },
+	render: () => {}
+}
+// #endif
--- a/uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue
+++ b/uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue
@@ -0,0 +1,183 @@
+<template>
+	<view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer" @touchmove.stop.prevent="clear">
+		<view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close('mask')" />
+		<view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}" :style="{width:drawerWidth+'px'}">
+			<slot />
+		</view>
+		<!-- #ifdef H5 -->
+		<keypress @esc="close('mask')" />
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+	// #ifdef H5
+	import keypress from './keypress.js'
+	// #endif
+	/**
+	 * Drawer 抽屉
+	 * @description 抽屉侧滑菜单
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=26
+	 * @property {Boolean} mask = [true | false] 是否显示遮罩
+	 * @property {Boolean} maskClick = [true | false] 点击遮罩是否关闭
+	 * @property {Boolean} mode = [left | right] Drawer 滑出位置
+	 * 	@value left 从左侧滑出
+	 * 	@value right 从右侧侧滑出
+	 * @property {Number} width 抽屉的宽度 ，仅 vue 页面生效
+	 * @event {Function} close 组件关闭时触发事件
+	 */
+	export default {
+		name: 'UniDrawer',
+		components: {
+			// #ifdef H5
+			keypress
+			// #endif
+		},
+		emits:['change'],
+		props: {
+			/**
+			 * 显示模式（左、右），只在初始化生效
+			 */
+			mode: {
+				type: String,
+				default: ''
+			},
+			/**
+			 * 蒙层显示状态
+			 */
+			mask: {
+				type: Boolean,
+				default: true
+			},
+			/**
+			 * 遮罩是否可点击关闭
+			 */
+			maskClick:{
+				type: Boolean,
+				default: true
+			},
+			/**
+			 * 抽屉宽度
+			 */
+			width: {
+				type: Number,
+				default: 220
+			}
+		},
+		data() {
+			return {
+				visibleSync: false,
+				showDrawer: false,
+				rightMode: false,
+				watchTimer: null,
+				drawerWidth: 220
+			}
+		},
+		created() {
+			// #ifndef APP-NVUE
+			this.drawerWidth = this.width
+			// #endif
+			this.rightMode = this.mode === 'right'
+		},
+		methods: {
+			clear(){},
+			close(type) {
+				// fixed by mehaotian 抽屉尚未完全关闭或遮罩禁止点击时不触发以下逻辑
+				if((type === 'mask' && !this.maskClick) || !this.visibleSync) return
+				this._change('showDrawer', 'visibleSync', false)
+			},
+			open() {
+				// fixed by mehaotian 处理重复点击打开的事件
+				if(this.visibleSync) return
+				this._change('visibleSync', 'showDrawer', true)
+			},
+			_change(param1, param2, status) {
+				this[param1] = status
+				if (this.watchTimer) {
+					clearTimeout(this.watchTimer)
+				}
+				this.watchTimer = setTimeout(() => {
+					this[param2] = status
+					this.$emit('change',status)
+				}, status ? 50 : 300)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	$uni-mask: rgba($color: #000000, $alpha: 0.4) ;
+	// 抽屉宽度
+	$drawer-width: 220px;
+
+	.uni-drawer {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		overflow: hidden;
+		z-index: 999;
+	}
+
+	.uni-drawer__content {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		position: absolute;
+		top: 0;
+		width: $drawer-width;
+		bottom: 0;
+		background-color: $uni-bg-color;
+		transition: transform 0.3s ease;
+	}
+
+	.uni-drawer--left {
+		left: 0;
+		/* #ifdef APP-NVUE */
+		transform: translateX(-$drawer-width);
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		transform: translateX(-100%);
+		/* #endif */
+	}
+
+	.uni-drawer--right {
+		right: 0;
+		/* #ifdef APP-NVUE */
+		transform: translateX($drawer-width);
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		transform: translateX(100%);
+		/* #endif */
+	}
+
+	.uni-drawer__content--visible {
+		transform: translateX(0px);
+	}
+
+
+	.uni-drawer__mask {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		opacity: 0;
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		background-color: $uni-mask;
+		transition: opacity 0.3s;
+	}
+
+	.uni-drawer__mask--visible {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		opacity: 1;
+	}
+</style>
--- a/uni_modules/uni-drawer/package.json
+++ b/uni_modules/uni-drawer/package.json
@@ -0,0 +1,87 @@
+{
+  "id": "uni-drawer",
+  "displayName": "uni-drawer 抽屉",
+  "version": "1.2.1",
+  "description": "抽屉式导航，用于展示侧滑菜单，侧滑导航。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "drawer",
+    "抽屉",
+    "侧滑导航"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
--- a/uni_modules/uni-drawer/readme.md
+++ b/uni_modules/uni-drawer/readme.md
@@ -0,0 +1,10 @@
+
+
+## Drawer 抽屉
+> **组件名：uni-drawer**
+> 代码块： `uDrawer`
+
+抽屉侧滑菜单。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-drawer)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839