修改打包配置/修复视频未看完视频禁止拖拽进度条问题

h5_web/common/config.js

@@ -1,16 +1,31 @@
 /**
  * 配置通用 
  */
-const baseUrl = 'https://wx.hw.hongweisoft.com/veterans' // 测试环境地址
+// const baseUrl = 'https://wx.hw.hongweisoft.com/veterans' // 测试环境地址
 // const baseUrl = 'http://api.veterans.hongweisoft.com' // 正式环境地址
+const node_dev = process.env.H_NODE_ENV
+let {
+	baseUrl,
+	timChatUrl,
+	viewInterviewUrl
+} = {
+	baseUrl: 'https://wx.hw.hongweisoft.com/veterans',
+	timChatUrl: 'https://veterh5.hw.hongweisoft.com/chat/pages/login/login',
+	viewInterviewUrl: 'https://veterhwebchat.hw.hongweisoft.com/#/'
+}
+console.log(node_dev);
+if (node_dev) {
+	baseUrl = process.env.H_BASE_URL
+	timChatUrl = process.env.H_TIM_CHAT_URL
+	viewInterviewUrl = process.env.H_VIDEO_CHAT_URL
+}
 const config = {
-	baseUrl: `${baseUrl}/app` ,// 201服务器地址
+	baseUrl: `${baseUrl}/app`, // 201服务器地址
 	uploadUrl: `${baseUrl}/file/upload/single/minio`, // 测试环境上传地址
-	timChatUrl: 'http://mobile.veterans.hongweisoft.com/chat/pages/login/login', // 线上退役军人聊天TIM
-	// timChatUrl: 'http://localhost:8081/chat/pages/login/login', // 本地聊天TIM
-	viewInterviewUrl: 'https://veterhwebchat.hw.hongweisoft.com/#/', // 视频聊天地址
+	timChatUrl, // 线上退役军人聊天TIM
+	viewInterviewUrl, // 视频聊天地址
 	version: '1.0.2'
 }
 export {
 	config
-}
+}

h5_web/package.json

@@ -1,5 +1,31 @@
 {
-  "dependencies": {
-    "xgplayer": "^2.31.6"
-  }
+	"dependencies": {
+		"xgplayer": "^2.31.6"
+	},
+	"uni-app": {
+		"scripts": {
+			"build:test": {
+				"title": "build:test",
+				"env": {
+					"UNI_PLATFORM": "h5",
+					"H_NODE_ENV": "development",
+					"H_BASE_URL": "https://wx.hw.hongweisoft.com/veterans",
+					"H_TIM_CHAT_URL": "https://veterh5.hw.hongweisoft.com/chat/pages/login/login",
+					"H_VIDEO_CHAT_URL": "https://veterhwebchat.hw.hongweisoft.com/#/",
+					"DESCRIBE": "测试环境"
+				}
+			},
+			"build:pro": {
+				"title": "build:pro",
+				"env": {
+					"UNI_PLATFORM": "h5",
+					"H_NODE_ENV": "production",
+					"H_BASE_URL": "http://api.veterans.hongweisoft.com",
+					"H_TIM_CHAT_URL": "http://mobile.veterans.hongweisoft.com/chat/pages/login/login",
+					"H_VIDEO_CHAT_URL": "https://chat.veterans.hongweisoft.com/#/",
+					"DESCRIBE": "正式环境"
+				}
+			}
+		}
+	}
 }

h5_web/pages/skillsTraining/courseDetailed/courseDetailed.vue

@@ -3,15 +3,31 @@
 		<u-navbar back-text="" title="" back-icon-color="#FFFFFF" :background="{ background: '#3D5D4C' }" :border-bottom="false"></u-navbar>
 		<!-- 视频 -->
 		<view class="details-video" v-if="isPlay">
-			<video class="details-video-con" id="myVideo" @timeupdate="timeUpdate" :src="videoInfo.videoUrl" controls
-				:initial-time="initial_time" object-fit="fill" play-btn-position="center" @tap="videoClick" @loadedmetadata="loadedmetadata">
+			<video
+				class="details-video-con"
+				id="myVideo"
+				@timeupdate="timeUpdate"
+				:src="videoInfo.videoUrl"
+				controls
+				:initial-time="initial_time"
+				object-fit="fill"
+				play-btn-position="center"
+				@ended="ended"
+				@tap="videoClick"
+				@loadedmetadata="loadedmetadata"
+			>
 				<cover-view class="video-control">
 					<cover-view class="multi rate" @tap.stop="showSwitchRate">x {{ currentRate }}</cover-view>
 				</cover-view>
 				<cover-view class="multi-list rate" :class="{ active: rateShow }">
-					<cover-view v-for="(item, index) in ['0.5', '1.0', '1.5', '2.0']" :key="index"
-						class="multi-item rate" :data-rate="item" @tap="switchRate"
-						:class="{ active: item == currentRate }">
+					<cover-view
+						v-for="(item, index) in ['0.5', '1.0', '1.5', '2.0']"
+						:key="index"
+						class="multi-item rate"
+						:data-rate="item"
+						@tap="switchRate"
+						:class="{ active: item == currentRate }"
+					>
 						{{ item }}
 					</cover-view>
 				</cover-view>
@@ -20,8 +36,7 @@
 		<!-- 介绍 -->
 		<view class="details-content">
 			<view class="details-content-title">{{ videoInfo.chapterName }}</view>
-			<view class="details-content-progress">本课程
-				共{{ info.amount }}课，已学完{{ info.finishCount }}课，共进度{{ info.finishPercent || 0 }}%</view>
+			<view class="details-content-progress">本课程 共{{ info.amount }}课，已学完{{ info.finishCount }}课，共进度{{ info.finishPercent || 0 }}%</view>
 			<view class="details-content-teacher">主讲老师：{{ info.presenter }}</view>
 			<view class="details-content-info">{{ videoInfo.chapterInfo }}</view>
 		</view>
@@ -30,21 +45,19 @@
 		<view class="details-classes">
 			<view class="details-classes-header">
 				<view>精选课程</view>
-				<view>更多
+				<view>
+					更多
 					<u-icon name="arrow-right" size="22" color="#A3A3A3" />
 				</view>
 			</view>
 			<view class="details-classes-list">
-				<view class="details-classes-list-item" v-for="(item, index) in info.chapterList" :key="index"
-					:class="{'active': index === videoIndex }" @click="classesClick(index)">
+				<view class="details-classes-list-item" v-for="(item, index) in info.chapterList" :key="index" :class="{ active: index === videoIndex }" @click="classesClick(index)">
 					<view>{{ index + 1 }}</view>
-					<view>{{ item.flag === 2 ? '已学' : (item.finishPercent + '%') }}</view>
+					<view>{{ item.flag === 2 ? '已学' : item.finishPercent + '%' }}</view>
 				</view>
 			</view>
 		</view>
-		<view class="details-line">
-			<view></view>
-		</view>
+		<view class="details-line"><view></view></view>
 		<!-- 评论 -->
 		<view class="details-comment">
 			<view class="details-comment-header">
@@ -53,36 +66,30 @@
 			</view>
 			<view class="details-comment-list">
 				<view class="details-comment-list-item" v-for="(item, index) in commentList" :key="index">
-					<view class="left">
-						<u-avatar :src="item.createByAvatar" size="96" mode="square"></u-avatar>
-					</view>
+					<view class="left"><u-avatar :src="item.createByAvatar" size="96" mode="square"></u-avatar></view>
 					<view class="right">
 						<view>{{ item.createBy }}</view>
 						<view>
-							<u-rate :count="5" size="28" disabled="" active-color="#FFBC00" v-model="item.starLevel">
-							</u-rate>
+							<u-rate :count="5" size="28" disabled="" active-color="#FFBC00" v-model="item.starLevel"></u-rate>
 							<text>{{ item.createTime }}</text>
 						</view>
 						<view>{{ item.content }}</view>
 					</view>
 				</view>
 			</view>
-			<view class="details-comment-page" v-if="total">
-				<wyb-pagination :padding="0" :totalItems="total" :current="query.pageNum" @change="pageChange" />
-			</view>
+			<view class="details-comment-page" v-if="total"><wyb-pagination :padding="0" :totalItems="total" :current="query.pageNum" @change="pageChange" /></view>
 
-			<view class="details-comment-mine">
-				<text>我的评论</text>
-			</view>
+			<view class="details-comment-mine"><text>我的评论</text></view>
 
 			<view class="details-comment-conent">
-				<view class="details-comment-conent-star">
-					<u-rate :count="5" size="40" active-color="#FFBC00" v-model="form.starLevel"></u-rate>
-				</view>
+				<view class="details-comment-conent-star"><u-rate :count="5" size="40" active-color="#FFBC00" v-model="form.starLevel"></u-rate></view>
 				<view class="details-comment-content-textarea">
-					<u-input v-model="form.content" placeholder="请输入您的评价" type="textarea"
-						:custom-style="{ backgroundColor: '#F5F5F5', padding: '30rpx', borderRadius: '10rpx', minHeight: '280rpx' }">
-					</u-input>
+					<u-input
+						v-model="form.content"
+						placeholder="请输入您的评价"
+						type="textarea"
+						:custom-style="{ backgroundColor: '#F5F5F5', padding: '30rpx', borderRadius: '10rpx', minHeight: '280rpx' }"
+					></u-input>
 				</view>
 				<view class="details-comment-conent-button" @click="submitCommet">提交</view>
 			</view>
@@ -92,286 +99,281 @@
 </template>
 
 <script>
-	import wybPagination from '@/components/wyb-pagination/wyb-pagination.vue'
-	export default {
-		data() {
-			return {
-				info: {},
-				videoContext: uni.createVideoContext('myVideo', this),
-				videoInfo: {},
-				videoIndex: 0,
-				// 视频实时时间
-				initial_time: 0,
-				// 视频已经播放时间
-				playedTime: 0,
-				rateShow: false, // 倍速浮层
-				currentRate: 1.0, // 默认倍速
-				// 视频实际时间
-				video_real_time: 0,
-				classesId: '',
-				isPlay: true,
-				query: {
-					pageNum: 1,
-					pageSize: 5,
-					tabId: ''
-				},
-				total: 0,
-				commentList: [],
-				form: {
-					tabId: '',
-					starLevel: 0,
-					content: ''
-				},
-				currentDuration: 0,
-				duration: 0
-			}
-		},
-		onLoad(page) {
-			if (page.id) {
-				this.getClassesDetails(page.id);
-				this.classesId = page.id
-			}
-		},
-		beforeDestroy() {
-			let playDuration = this.video_real_time;
-			if (this.videoInfo.playDuration > this.video_real_time) {
-				this.currentDuration = this.video_real_time;
-				playDuration = this.videoInfo.playDuration
-			} else {
-				this.currentDuration = this.video_real_time
-			}
-			this.submitTimeLong({
+import wybPagination from '@/components/wyb-pagination/wyb-pagination.vue';
+export default {
+	data() {
+		return {
+			info: {},
+			videoContext: uni.createVideoContext('myVideo', this),
+			videoInfo: {},
+			videoIndex: 0,
+			// 视频实时时间
+			initial_time: 0,
+			// 视频已经播放时间
+			playedTime: 0,
+			rateShow: false, // 倍速浮层
+			currentRate: 1.0, // 默认倍速
+			// 视频实际时间
+			video_real_time: 0,
+			classesId: '',
+			isPlay: true,
+			query: {
+				pageNum: 1,
+				pageSize: 5,
+				tabId: ''
+			},
+			total: 0,
+			commentList: [],
+			form: {
+				tabId: '',
+				starLevel: 0,
+				content: ''
+			},
+			currentDuration: 0,
+			duration: 0
+		};
+	},
+	onLoad(page) {
+		if (page.id) {
+			this.getClassesDetails(page.id);
+			this.classesId = page.id;
+		}
+	},
+	beforeDestroy() {
+		let playDuration = this.video_real_time;
+		if (this.videoInfo.playDuration > this.video_real_time) {
+			this.currentDuration = this.video_real_time;
+			playDuration = this.videoInfo.playDuration;
+		} else {
+			this.currentDuration = this.video_real_time;
+		}
+		this.submitTimeLong(
+			{
 				tabId: this.videoInfo.id,
 				playDuration: playDuration,
 				currentDuration: this.currentDuration,
 				duration: this.duration
-			}, 0, true)
-		},
-		methods: {
-			/**
-			 * 获取视频总时长
-			 * @param {Object} data
-			 */
-			loadedmetadata(data) {
-				console.log(data);
-				this.duration = data.detail.duration
 			},
-			/**
-			 * 显示倍速浮层
-			 * @param {Object} rate
-			 */
-			showSwitchRate(rate) {
-				let that = this;
-				that.rateShow = true;
-			},
-			/**
-			 * 切换倍速
-			 * @param {Object} e
-			 */
-			switchRate(e) {
-				let that = this;
-				let rate = Number(e.currentTarget.dataset.rate);
-				that.currentRate = rate;
-				that.rateShow = false;
-				this.videoContext.playbackRate(rate);
-			},
-			/**
-			 * 视频点击
-			 * @param {Object} e
-			 */
-			videoClick(e) {
-				this.rateShow = false;
-			},
-			/**
-			 * 获取课程详情
-			 * @param {Object} id
-			 */
-			getClassesDetails(id) {
-				this.$u.api.school.getPackageCourseDetail({
+			0,
+			true
+		);
+	},
+	methods: {
+		/**
+		 * 获取视频总时长
+		 * @param {Object} data
+		 */
+		loadedmetadata(data) {
+			this.duration = data.detail.duration;
+		},
+		/**
+		 * 显示倍速浮层
+		 * @param {Object} rate
+		 */
+		showSwitchRate(rate) {
+			let that = this;
+			that.rateShow = true;
+		},
+		/**
+		 * 切换倍速
+		 * @param {Object} e
+		 */
+		switchRate(e) {
+			let that = this;
+			let rate = Number(e.currentTarget.dataset.rate);
+			that.currentRate = rate;
+			that.rateShow = false;
+			this.videoContext.playbackRate(rate);
+		},
+		/**
+		 * 视频点击
+		 * @param {Object} e
+		 */
+		videoClick(e) {
+			this.rateShow = false;
+		},
+		/**
+		 * 获取课程详情
+		 * @param {Object} id
+		 */
+		getClassesDetails(id) {
+			this.$u.api.school
+				.getPackageCourseDetail({
 					id
-				}).then(res => {
+				})
+				.then(res => {
 					if (res.code === 200) {
-						console.log(res)
 						this.info = res.data;
 						this.videoInfo = res.data.chapterList[this.videoIndex];
-						this.initial_time = Number(res.data.chapterList[this.videoIndex].currentDuration)
-						this.video_real_time = Number(res.data.chapterList[this.videoIndex].playDuration)
-						this.playedTime = Number(res.data.chapterList[this.videoIndex].playDuration)
-						this.query.tabId = res.data.chapterList[this.videoIndex].id
-						this.form.tabId = res.data.chapterList[this.videoIndex].id
+						this.initial_time = Number(res.data.chapterList[this.videoIndex].currentDuration);
+						this.video_real_time = Number(res.data.chapterList[this.videoIndex].playDuration);
+						this.playedTime = Number(res.data.chapterList[this.videoIndex].playDuration);
+						this.query.tabId = res.data.chapterList[this.videoIndex].id;
+						this.form.tabId = res.data.chapterList[this.videoIndex].id;
 						this.query.pageNum = 1;
-						this.isPlay = true
+						this.isPlay = true;
 						this.getCommentList();
 					}
-				})
-			},
-			/**
-			 * 课程章节点击
-			 * @param {Object} index
-			 */
-			classesClick(index) {
-				this.isPlay = false;
-				let playDuration = this.video_real_time;
-				if (this.videoInfo.playDuration > this.video_real_time) {
-					this.currentDuration = this.video_real_time;
-					playDuration = this.videoInfo.playDuration
-				} else {
-					this.currentDuration = this.video_real_time
-				}
-				this.submitTimeLong ({
+				});
+		},
+		/**
+		 * 课程章节点击
+		 * @param {Object} index
+		 */
+		classesClick(index) {
+			this.isPlay = false;
+			let playDuration = this.video_real_time;
+			if (this.videoInfo.playDuration > this.video_real_time) {
+				this.currentDuration = this.video_real_time;
+				playDuration = this.videoInfo.playDuration;
+			} else {
+				this.currentDuration = this.video_real_time;
+			}
+			this.submitTimeLong(
+				{
 					tabId: this.videoInfo.id,
 					playDuration: playDuration,
 					duration: this.duration,
 					currentDuration: this.currentDuration
-				}, index);
-			},
-			/**
-			 * 控制视频不能快进
-			 * @param {Object} e
-			 */
-			timeUpdate(e) {
-				let isReady = 1; // 是否开启可以视频快进 1 禁止开启
-				if (this.videoInfo.finishPercent === 100) {
-					isReady = 3;
-				}
-				//跳转到指定播放位置 initial-time 时间为秒
-				let that = this;
-				//播放的总时长
-				let duration = e.detail.duration
-				//实时播放进度 秒数
-				let currentTime = parseInt(e.detail.currentTime)
-				//当前视频进度
-				let jump_time = 0
-				if (that.video_real_time == 0) {
-					jump_time = parseInt(that.initial_time) + parseInt(that.video_real_time)
-				} else {
-					jump_time = parseInt(that.video_real_time)
-				}
-				console.log('jump_time', jump_time)
-				console.log('that.initial_time', that.initial_time)
-				console.log('this.playedTime', this.playedTime)
-				console.log('that.video_real_time', that.video_real_time)
-				if (jump_time > this.playedTime) {
-					isReady = 1;
-				} else {
-					isReady = 3;
-				}
-				if(isReady === 1){
-					if (currentTime > jump_time && currentTime - jump_time > 3) {
-						let videoContext = wx.createVideoContext('myVideo')
-						videoContext.seek(that.video_real_time)
-						wx.showToast({
-							title: '未完整看完该视频，不能快进',
-							icon: 'none',
-							duration: 2000,
-						})
-					}
+				},
+				index
+			);
+		},
+		/**
+		 * 控制视频不能快进
+		 * @param {Object} e
+		 */
+		timeUpdate(e) {
+			//播放的总时长
+			let duration = e.detail.duration;
+			//实时播放进度 秒数
+			let jumpTime = parseInt(e.detail.currentTime);
+			//当前视频进度
+			if (jumpTime - this.playedTime > 3) {
+				// 差别过大，调用seek方法跳转到实际观看时间
+				this.videoContext.seek(this.playedTime);
+				wx.showToast({
+					title: '未完整看完该视频，不能快进',
+					icon: 'none',
+					duration: 2000
+				});
+			} else {
+				this.video_real_time = parseInt(e.detail.currentTime);
+				if (this.video_real_time > this.playedTime) {
+					this.playedTime = this.video_real_time;
 				}
-				that.video_real_time = currentTime //实时播放进度
-			},
-			/**
-			 * 提交课程时长
-			 */
-			submitTimeLong({
-				tabId,
-				playDuration,
-				currentDuration,
-				duration
-			}, index, flag) {
-				if (tabId) {
-					this.$u.api.training.videoTimeLongApi({
+			}
+		},
+		/**
+		 * 视频结束
+		 */
+		ended() {
+			// 用户把进度条拉到最后，但是实际观看时间不够，跳转回去会自动暂停。
+			// 这里加个判断。
+			if (this.playedTime < this.duration) {
+				this.videoContext.play();
+			}
+		},
+		/**
+		 * 提交课程时长
+		 */
+		submitTimeLong({ tabId, playDuration, currentDuration, duration }, index, flag) {
+			if (tabId) {
+				this.$u.api.training
+					.videoTimeLongApi({
 						tabId,
 						playDuration,
 						currentDuration,
 						duration
-					}).then(res => {
+					})
+					.then(res => {
 						if (res.code === 200) {
 							if (!flag) {
 								this.$refs.uToast.show({
 									title: '已记录章节时长!',
 									type: 'success'
-								})
-								this.videoInfo = this.info.chapterList[index]
-								this.form.tabId = this.videoInfo.id
-								this.query.tabId = this.videoInfo.id
-								this.videoIndex = index
+								});
+								this.videoInfo = this.info.chapterList[index];
+								this.form.tabId = this.videoInfo.id;
+								this.query.tabId = this.videoInfo.id;
+								this.videoIndex = index;
 								this.getClassesDetails(this.classesId);
 							}
 						} else {
 							this.$refs.uToast.show({
 								title: res.msg,
 								type: 'error'
-							})
+							});
 						}
-					})
-				}
-			},
-			/**
-			 * 获取评论列表
-			 */
-			getCommentList() {
-				if (this.query.tabId) {
-					this.$u.api.training.getClassesCommentApi(this.query).then(res => {
+					});
+			}
+		},
+		/**
+		 * 获取评论列表
+		 */
+		getCommentList() {
+			if (this.query.tabId) {
+				this.$u.api.training.getClassesCommentApi(this.query).then(res => {
+					if (res.code === 200) {
+						this.total = Number(res.total);
+						this.commentList = res.rows;
+					}
+				});
+			}
+		},
+		/**
+		 * @param {Object} e 分页触发
+		 */
+		pageChange(e) {
+			this.query.pageNum = e.current;
+			this.getCommentList();
+		},
+		/**
+		 * 提交评论
+		 */
+		submitCommet() {
+			if (this.form.tabId) {
+				if (this.form.starLevel && this.form.content) {
+					this.$u.api.training.addClassesCommentApi(this.form).then(res => {
 						if (res.code === 200) {
-							this.total = Number(res.total);
-							this.commentList = res.rows
+							this.$refs.uToast.show({
+								title: '评论成功!',
+								type: 'success'
+							});
+							this.form.content = '';
+							this.form.starLevel = 0;
+							this.getCommentList();
+						} else {
+							this.$refs.uToast.show({
+								title: res.msg,
+								type: 'error'
+							});
 						}
-					})
+					});
 				}
-			},
-			/**
-			 * @param {Object} e 分页触发
-			 */
-			pageChange(e) {
-				this.query.pageNum = e.current
-				this.getCommentList()
-			},
-			/**
-			 * 提交评论
-			 */
-			submitCommet() {
-				if (this.form.tabId) {
-					if (this.form.starLevel && this.form.content) {
-						this.$u.api.training.addClassesCommentApi(this.form).then(res => {
-							if (res.code === 200) {
-								this.$refs.uToast.show({
-									title: '评论成功!',
-									type: 'success'
-								})
-								this.form.content = ''
-								this.form.starLevel = 0
-								this.getCommentList();
-							} else {
-								this.$refs.uToast.show({
-									title: res.msg,
-									type: 'error'
-								})
-							}
-						})
-					}
-					if (!this.form.starLevel) {
-						this.$refs.uToast.show({
-							title: '请选择星级',
-							type: 'warning'
-						})
-					}
-					if (!this.form.content) {
-						this.$refs.uToast.show({
-							title: '请输入评论内容',
-							type: 'warning'
-						})
-					}
-				} else {
+				if (!this.form.starLevel) {
 					this.$refs.uToast.show({
-						title: '未找到课程章节,无法提交评论!',
+						title: '请选择星级',
 						type: 'warning'
-					})
+					});
 				}
+				if (!this.form.content) {
+					this.$refs.uToast.show({
+						title: '请输入评论内容',
+						type: 'warning'
+					});
+				}
+			} else {
+				this.$refs.uToast.show({
+					title: '未找到课程章节,无法提交评论!',
+					type: 'warning'
+				});
 			}
 		}
 	}
+};
 </script>
 
 <style lang="scss" scoped>
-	@import './courseDetailed.scss';
+@import './courseDetailed.scss';
 </style>