ylrz_his_scrm_company_qw/pages/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" ></video> 
		</view>
		<view class="title-content" id="title-content">
			<!-- 课程标题 -->
			<view >
				{{listdetail.title}} 
			</view>
			<view class="fs24" style="color: #666;font-weight: normal;">
				{{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!=null&&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">
			<view class="justify-between" >
				<view class="copybtn flex-1" @click="copyshareLink()">复制分享链接</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		getcourseDetail
	} from '@/api/courseManage'
	import {
		numberToLetter
	} from "@/utils/tools.js"
	export default {
		data() {
			return {
				videoId:'',
				listdetail:[]
			}
		},
		onLoad(option) {
			this.videoId=option.videoId
		},
		onShow() {
			this.getdetail()
		},
		methods: {
			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.listdetail=res.data.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(){
				console.log(123)
			}
		}
	}
</script>

<style scoped lang="scss">
.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>