ylrz_scrm_company_h5/pages_course/course/courseVideo.vue

<template>
	<view class="column">
		<view class="video-box" >
			<video id="myVideo" :src='listdetail.videoUrl' show-mute-btn='false'
			vslide-gesture-in-fullscreen='true'   loop='true' enable-progress-gesture='true'
			 enable-danmu controls='true'  autoplay="true" object-fit='contain' show-center-play-btn='true'
			class="videotop" :playback-rate="playbackRate"></video> 
			
		</view>
		<view class="speed-controls">
			<view @click="changeSpeed(item.value,index)" v-for="(item,index) in speadvideo" 
			:key="index" :class="actTime==index?'actstyle':''">{{item.name}}</view>
		</view>
		<view class="title-content" id="title-content">
			<!-- 课程标题 -->
			<view >
				{{listdetail.title}} 
			</view>
			<view class="fs24" style="color: #666;font-weight: normal;">
				{{listdetail.description?listdetail.description:""}}
			</view>
			<view class="fs24" style="color: #999;font-weight: normal;">课程视频时长：{{formatSeconds(listdetail.duration)}}</view>
		</view>
		<!-- 问题 -->
		<view class="ques-content ">
			<view class="ques-content-tit">问答题</view>
			<view class="center fs32" v-if="listdetail.questionBankList.length<1" style="color: #666;">暂无问答题</view>
			<view v-for="(item,index) in listdetail.questionBankList" :key="index">
				<view class="ques-title">
					<text>{{index + 1}}.</text>
					<view class="ques-type" v-show="item.type == 1 || item.type == 2">
						{{item.type == 1 ? '单选' : item.type == 2 ? '多选' : ''}}
					</view>
					<text >{{item.title}}</text>
				</view>
				<view :class="option.isAnswer== 1 ?'ques-option ques-option-active':'ques-option'"
					v-for="(option,idx) in item.question" :key="idx">
					<view>
						{{numberToLetter(idx)}}.
					</view>
					<view>{{option.name}}</view>
				</view>
			</view>
		</view>
		<view class="footer" v-if="!viewload">
			<view class="justify-between" >
				<!--#ifdef MP-WEIXIN-->
				<button open-type="share" class="copybtn flex-1">分享课程</button>
				<!-- <view class="copybtn flex-1" @click="showShare=!showShare">分享卡片</view> -->
				<!--#endif-->
				<!--#ifdef H5-->
				<view class="copybtn flex-1" @click="copyshareLink()">复制分享链接</view>
				<!--#endif-->
			</view>
		</view>
		<u-loading-page :loading="viewload" iconSize="32" loadingColor="#3c9cff" fontSize="20"
		:loading-text="loadingtext" ></u-loading-page>
	</view>
</template>

<script>
	import {
		getcourseDetail,
		sharecourselink
	} from '@/api/courseManage'
	import {
		numberToLetter
	} from "@/utils/tools.js"
	export default {
		data() {
			return {
				viewload:true,
				loadingtext:"数据加载中...",
				videoId:'',
				listdetail:[],
				user:{},
				copylink:'',
				id:'',
				periodId:'',
				imgs:this.$store.state.imgpath+'/app/image/logo.png',
				playbackRate: 1.0, // 默认1倍速
				videoContext: null,
				actTime:0,
				speadvideo:[
					{
					name:'1.0倍速',
					value:1
					},
					{
					name:'1.5倍速',
					value:1.5
					},
					{
					name:'2.0倍速',
					value:2
					}
				]
			}
		},
		mounted() {
			// 创建视频上下文
			    this.videoContext = uni.createVideoContext('myVideo', this);
		},
		onLoad(option) {
			this.videoId=option.videoId
			this.id=option.id
			this.periodId=option.periodId
		},
		onShow() {
			this.getdetail()
			this.user = uni.getStorageSync("companyUserInfo") ? JSON.parse(uni.getStorageSync("companyUserInfo")) : {}
		},
		computed: {
		    imgPath() {
		      // 处理空值，返回默认路径或空字符串
		      // if (!this.$store.state.imgpath) {
		      //   return '' // 本地默认图
		      // }
		      return this.$store.state.imgpath
		    }
		  },
		onShareAppMessage() {
			const course={
				companyId:this.user.companyId,
				companyUserId:this.user.userId,
				id:this.id,
				courseId:this.listdetail.courseId,
				videoId:this.videoId,
				periodId:this.periodId
			}
			console.log(course)
			return {
				title: this.listdetail.title, // 分享卡片标题
				path: 'pages_course/videovip' + "?course=" +JSON.stringify(course) , // 目标页面路径
				// 携带参数：将当前页面的数据拼接到路径中
				imageUrl: this.listdetail.thumbnail||this.imgs, // 分享卡片封面图（可选）
				success: (res) => {
					console.log("分享成功", res);
				},
				fail: (err) => {
					console.log("分享失败", err);
				},
			}
		},
		methods: {
			changeSpeed(rate,index) {
				console.log(rate,index)
				this.actTime=index
			      this.playbackRate = rate;
			      // 更新播放速率
			      if (this.videoContext) {
			        this.videoContext.playbackRate(rate);
			      }
			},
			numberToLetter(num) {
				// 将数字转换为字母的 ASCII 码
				let letterCode = num + 65;
				// 将 ASCII 码转换为大写字母
				let letter = String.fromCharCode(letterCode);
				return letter;
			},
			//转化时间格式
			 formatSeconds(seconds) {
			  const hours = Math.floor(seconds / 3600);
			  const minutes = Math.floor((seconds % 3600) / 60);
			  const remainingSeconds = seconds % 60;
			  
			  // 补零函数：确保两位数显示
			  const pad = (num) => num.toString().padStart(2, '0');
			  
			  return `${pad(hours)}:${pad(minutes)}:${pad(remainingSeconds)}`;
			},
			// 获取视频详情
			getdetail() {
				const param = {
					videoId:this.videoId
				}
				getcourseDetail(param).then(res => {
					if(res.code==200){
						this.viewload=false
						this.listdetail=res.data
						this.listdetail.questionBankList= this.listdetail.questionBankList.map(item => ({
							...item,
							question: JSON.parse(item.question),
							answer: '',
						}))
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
						});
					}
				})
			},
			copyshareLink(){
				const params = {
					companyId: this.user.companyId,
					companyUserId: this.user.userId,
					courseId: this.listdetail.courseId,
					time: this.time,
					videoId: this.listdetail.videoId,
					id: Number(this.id),
				}
				sharecourselink(params).then(res => {
					if (res.code == 200) {
						this.copylink = res.url
						// if (this.copylink.startsWith('http://')) {
						// 	this.copylink = this.copylink.replace('http://', 'https://');
						//   }
						// console.log(this.copylink)
						setTimeout(() => {
							uni.setClipboardData({
								data: this.copylink,
								success: () => {
									uni.showToast({
										title: '链接已复制',
										icon: 'none',
										duration: 2000
									});
								},
								fail: () => {
									uni.showToast({
										title: '复制失败',
										icon: 'none'
									});
								}
							});
						}, 100)
				
						console.log(this.copylink)
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
				console.log(123)
			}
		}
	}
</script>

<style scoped lang="scss">
	.actstyle{
		background-color: #FF5C03;
		color: #fff;
		border: 2rpx solid #FF5C03 !important;
	}
	.speed-controls {
	  margin-top: 20rpx;
	  display: flex;
	  justify-content: space-around;
	  margin-bottom: 16rpx;
	  view{
		  height: 50rpx;
		  line-height: 46rpx; 
		  width: 120rpx;
		  font-size: 24rpx;
		  border-radius: 30rpx;
		  text-align: center;
		  border: 2rpx solid #a5a5a5;
	  }
	}
.video-box {
	width: 100%;
	height: 420rpx;
	overflow: hidden;
	position: relative;

	#myVideo {
		width: 100%;
		height: 100%;
	}
}
.title-content {
	padding: 20rpx 32rpx;
	background-color: #fff;
	font-size: 28rpx;
	font-weight: bold;
	line-height: 1.6;
	
}
.ques-content-tit {
	font-family: PingFang SC, PingFang SC;
	font-weight: 600;
	font-size: 36rpx;
	color: #222222;
}
.ques-content {
	background-color: #fff;
	margin-top: 20rpx;
	padding: 32rpx 32rpx;
	padding-bottom: 140rpx;
	box-sizing: border-box;
	ont-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 28rpx;
	color: #222222;
}
.ques-title {
	margin: 32rpx 0 34rpx 0;
	font-weight: 500;
	font-size: 32rpx;
	white-space: normal;
}
.ques-type {
	flex-shrink: 0;
	min-width: 72rpx;
	height: 40rpx;
	padding: 0 12rpx;
	margin: 0 12rpx;
	box-sizing: border-box;
	background: #ff8901;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	line-height: 40rpx;
	text-align: center;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #FFFFFF;
	display: inline-block;
}

.ques-option {
	min-height: 88rpx;
	padding: 24rpx 32rpx;
	box-sizing: border-box;
	margin-bottom: 24rpx;
	background: #F5F7FA;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	display: flex;
	align-items: center;

	&-active {
		color: #1db131 !important;
		background: #e8fcee !important;
	}
}
.footer {
	border-top: 1rpx solid #ededef;
	background: #fff;
	width: 100%;
	position: fixed;
	bottom: 0;
	padding: 24rpx 32rpx;
	box-sizing: border-box;
	z-index: 9;
	.copybtn {
		background: #FF5C03;
		color: #fff;
		text-align: center;
		font-size: 28rpx;
		border-radius: 80rpx;
		padding: 20rpx 0;
	}
}
</style>