视频播放和bug修改

pages.json

@@ -530,6 +530,13 @@
 				"enablePullDownRefresh": false
 			}
 		},
+		{
+			"path": "pages/medicaldes/video",
+			"style": {
+				"navigationBarTitleText": "医述详情",
+				"enablePullDownRefresh": false
+			}
+		},
 		{
 			"path": "pages/luck/luck",
 			"style": {

pages/medicaldes/medicaldes.vue

@@ -168,6 +168,9 @@
 			},
 			// 详情
 			gotoDetail(item) {
+				console.log('111',item)
+				console.log('this.curOneCateIndex',this.curOneCateIndex)
+				console.log('this.curTwoCateIndex',this.curTwoCateIndex)
                 if(this.curOneCateIndex==0){
                     uni.navigateTo({
                         url: '../bookShop/commodityDetail?id=' + item.id
@@ -180,6 +183,13 @@
                     })
                     return
                 }
+				if(this.curOneCateIndex == 2){
+					console.log('111',item)
+					uni.navigateTo({
+                        url: './video?title=' + item.name +'&src='+ item.url
+                    })
+                    return
+				}
 			},
 			// 获取名称
 			getTitles(dictType) {

pages/medicaldes/medicaldesDetail.vue

@@ -20,36 +20,11 @@
 						{{prescriptDetail.name}}
 					</view>
 				</uni-section>
-				<uni-section class="mb-10" titleFontSize="18px" title="职务" type="line" v-if="prescriptDetail.content && prescriptDetail.content != ''" >
+				<uni-section class="mb-10" titleFontSize="18px" title="详细介绍" type="line" v-if="prescriptDetail.content && prescriptDetail.content != ''" >
 					<view class="item" v-html="prescriptDetail.content">
 					</view>
 				</uni-section>
 				
-				<uni-section class="mb-10" titleFontSize="18px" title="古代计量" type="line" v-if="prescriptDetail.doseOld && prescriptDetail.doseOld != ''" >
-					<view class="item" v-html="prescriptDetail.doseOld">
-					</view>
-				</uni-section>
-				
-				<uni-section class="mb-10" titleFontSize="18px" title="现代计量（仅供参考）" type="line" v-if="prescriptDetail.doseNow && prescriptDetail.doseNow != ''" >
-					<view class="item" v-html="prescriptDetail.doseNow">
-					</view>
-				</uni-section>
-				
-				<uni-section class="mb-10" titleFontSize="18px" title="煎服法" type="line" v-if="prescriptDetail.preUsage && prescriptDetail.preUsage != ''">
-					<view class="item" v-html="prescriptDetail.preUsage">
-					</view>
-				</uni-section>
-				
-				<uni-section class="mb-10" titleFontSize="18px" title="方歌" type="line" v-if="prescriptDetail.preSong && prescriptDetail.preSong != ''">
-					<view class="item" v-html="prescriptDetail.preSong">
-					</view>
-				</uni-section>
-
-				<uni-section class="mb-10" titleFontSize="18px" title="主治" type="line" v-if="prescriptDetail.indications && prescriptDetail.indications != ''">
-					<view class="item" v-html="prescriptDetail.indications">
-					</view>
-				</uni-section>
-				
 				<!-- <uni-section class="mb-10" titleFontSize="18px" title="配伍" type="line">
 					<view class="item" v-if="prescriptDetail.compatibility && prescriptDetail.compatibility != ''" v-html="prescriptDetail.compatibility">
 					</view>

pages/medicaldes/video.vue

@@ -0,0 +1,200 @@
+<template>
+	<view class="container">
+		<!-- 公共组件-每个页面必须引入 -->
+		<public-module></public-module>
+		<z-nav-bar :title="title"></z-nav-bar>
+		<view class="contentBox">
+			<!-- <view class="video_box" :style="{ height: screenHeight + 'px'}"> -->
+				<video
+					class="video_file"
+					:id="`video_${objId}`"
+					:ref="`video_${objId}`"
+					:src="src"
+					:poster="poster"
+					loop
+					object-fit="contain"
+					:show-play-btn="false"
+					:show-center-play-btn="false"
+					:controls="false"
+					:enable-progress-gesture="false"
+					:autoplay="videoPlayId == objId"
+					:style="'height: '+screenHeight + 'px'"
+					@timeupdate="onScheduleChange"
+					@waiting="onWaiting"
+				></video>
+				<!-- <view class="bottom_mask"></view> -->
+				<!-- 播放按钮 -->
+				<view class="play_btn" @click="onPlay">
+					<image class="icon_play" v-if="playState == 1000" src="http://qn.kemean.cn/upload/202103/08/1615183536616rn7yfe5g.png" mode="aspectFit"></image>
+				</view>
+				<view class="play_schedule" :style="{bottom: progressBottom + 'rpx'}">
+					<view class="schedule_bg"></view>
+					<view class="schedule" :style="{ width: schedule + 'rpx' }"></view>
+					<view class="progress_drag_dot" v-if="progressDrag"></view>
+				</view>
+			<!-- </view> -->
+		</view>
+	</view>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex';
+export default {
+	data() {
+		return {
+			schedule: 0,
+			// 1000 待播放
+			// 2000 播放中
+			// 3000 播放缓冲中
+			playState: 1000,
+			// 是否拖动进度
+			progressDrag: false,
+			// 视频总长度
+			duration: 0,
+			videoCtx: null
+		};
+	},
+	onLoad(e) {
+		console.log('1111',e)
+		this.src = e.src
+		this.title = e.title
+	},
+	computed: {
+		...mapState(['videoPlayId'])
+	},
+	watch: {
+		videoPlayId(val) {
+			if (val == this.objId) {
+				setTimeout(() => {
+					this.videoCtx.play();
+					this.playState = 2000;
+				}, 200);
+			} else {
+				setTimeout(() => {
+					this.videoCtx.pause();
+					this.videoCtx.seek(0);
+					this.playState = 1000;
+					this.schedule = 0;
+				},100);
+			}
+		}
+	},
+	mounted() {
+		console.log('src', this.src)
+		this.videoCtx = uni.createVideoContext(`video_${this.objId}`, this);
+		if(this.videoPlayId == this.objId){
+			setTimeout(() => {
+				this.videoCtx.play();
+				this.playState = 2000;
+			}, 200);
+		}
+		let throttling = true;
+		uni.$on("videoProgress", res => {
+			if(throttling){
+				throttling = false;
+				setTimeout(() => {
+					throttling = true;
+					if (res.progress == 1) {
+						this.progressDrag = true;
+					} else {
+						this.progressDrag = false;
+					}
+					if (this.videoPlayId == this.objId && res.progressValue) {
+						this.schedule = res.progressValue * 750;
+						this.videoCtx.seek(this.duration * res.progressValue);
+					}
+				}, 100);
+			}
+		});
+	},
+	methods: {
+		onScheduleChange(e) {
+			this.duration = e.detail.duration;
+			if (!this.progressDrag) {
+				this.schedule = (parseFloat(e.detail.currentTime) / e.detail.duration) * 750;
+			}
+		},
+		onPlay() {
+			if (this.playState == 2000) {
+				this.videoCtx.pause();
+				this.playState = 1000;
+			} else if (this.playState == 1000) {
+				this.videoCtx.play();
+				this.playState = 2000;
+			} else if (this.playState == 3000) {
+				this.videoCtx.play();
+				this.playState = 2000;
+			}
+		},
+		// 视频进入缓冲中
+		onWaiting() {
+			this.playState = 3000;
+		},
+		onError(e){
+			console.log("视频播放出错", e);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@/style/mixin.scss';
+.video_box {
+	position: relative;
+	width: 750rpx;
+}
+.bottom_mask {
+	position: absolute;
+	left: 0rpx;
+	bottom: 0rpx;
+	right: 0rpx;
+	height: 300rpx;
+	width: 750rpx;
+	background-image: linear-gradient(to bottom, rgba(0,0,0,0) , rgba(0,0,0,0.7)); 
+}
+.video_file {
+	width: 750rpx;
+}
+.play_schedule {
+	position: absolute;
+	bottom: 6rpx;
+	left: 0;
+	height: 16rpx;
+	width: 750rpx;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+}
+.schedule_bg {
+	position: absolute;
+	top: 7rpx;
+	left: 0;
+	right: 0;
+	height: 2rpx;
+	background-color: rgba(255, 255, 255, 0.3);
+}
+.schedule {
+	background-color: #fff;
+	height: 2rpx;
+	position: relative;
+}
+.progress_drag_dot {
+	width: 16rpx;
+	height: 16rpx;
+	border-radius: 50%;
+	background-color: #fff;
+}
+.play_btn {
+	position: absolute;
+	top: 50%;
+	left: 45%;
+	right: 0;
+	bottom: 0;
+	justify-content: center;
+	align-items: center;
+}
+.icon_play {
+	width: 90rpx;
+	height: 90rpx;
+}
+</style>