jwl-applet/src/pages/questionBank/videoDetail.vue

<template>
	<view>
		<sunny-video style="width: 100%" videoHeight="422rpx" ref="sunny-video" :src="videoList[currentIndex].videoUrl" />
		<view class="p14tb bc-fff">
			<view class="skill-sequence-panel-content-wrapper pr14" v-if="videoType=='test'">
				<scroll-view class="skill-sequence-panel-content" scroll-x>
					<view class="skill-sequence-skill-wrapper tab_iem" :class="videoIndex===item.value?'checked_tab':''"
						v-for="(item,index) of testList" :key="index" @tap="checkTest(item.value)">{{item.label}}</view>
				</scroll-view>
			</view>
			<view class="flex ai-c jc-sb mt10 wp100 p14">
				<text class="fs18 fw600 cor-000">{{title}}</text>
				<view class="flex" @tap="popupShow=true" v-if="videoType!='test'">
					<text class="fs14 cor-666">更多</text>
					<u-icon color="#666" name="arrow-right" size="18"></u-icon>
				</view>
				<view v-else class="fs14 cor-666">共9条路线</view>
			</view>
			<view>
			</view>
		</view>
		<view class="bc-fff pl14 pb10">
			<view class="skill-sequence-panel-content-wrapper">
				<scroll-view class="skill-sequence-panel-content" scroll-x :scroll-left="getScrollLeft">
					<view class="skill-sequence-skill-wrapper" v-for="(item, index) in videoList" :key="index"
						@tap="checkVideo(item.projectId)">
						<view>
							<view class="mb10 relative contain-box hide" style="overflow: hidden;">
									<image class="contain-box" style="position: absolute;left: 0;top: 0;" mode="widthFix"
										:src="item.videoUrl+'?x-oss-process=video/snapshot,t_0,f_jpg'"></image>
								<view v-if="projectId==item.projectId" class="playLogo">播放中</view>
								<image class="play_btn" src="../../static/image/index/play.png" />
								<text style="position: absolute;right: 8rpx;bottom: 8rpx;color:#fff">{{item.videoTime}}</text>
							</view>
							<view class="topic_cont_text" :style="{color:projectId==item.projectId?'#FF6E02':'#333'}">
								{{item.description}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<u-popup :show="popupShow" mode="bottom" :closeOnClickOverlay="true" @close="popupShow=false">
			<view class="p14 flex ai-c jc-sb">
				<text class="fs16 fw600 cor-000">课程目录</text>
				<text class="fs16 cor-666" @tap="popupShow=false">收起</text>
			</view>
			<view style="max-height: 800rpx;overflow-y: scroll;" class="p14lr">
				<view class="flex bc-fff mb15" style="border-radius: 16rpx;" v-for="(item,index) of videoList" :key="index"
					@tap="checkVideo(item.projectId)">
					<view class="pic relative hide" style="overflow: hidden;">
						<image class="pic" style="position: absolute;left: 0;top: 0;" mode="widthFix" :src="item.videoUrl+'?x-oss-process=video/snapshot,t_0,f_jpg'"></image>
						<image class="play_btn_2" src="../../static/image/index/play.png" />
						<text style="position: absolute;right: 8rpx;bottom: 8rpx;color:#fff">{{item.videoTime}}</text>
					</view>
					<view class="ml10">
						<text class="fs16 cor-000 fw600">{{item.description}}</text>
						<view class="fs14 mt5 cor-666">{{item.subDesc}}</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		queryProjectList
	} from '@/jtools/api/question';
	import storage from '@/jtools/storage';
	export default {
		data() {
			return {
				title: '',
				currentIndex: 0,
				videoIndex: 0,
				testList: [{
					label: "八一考场",
					value: 0,
				}, {
					label: "富凯考场",
					value: 1
				}, {
					label: "新亚考场",
					value: 2
				}, {
					label: "庐江考场",
					value: 3
				}, {
					label: "富凯考场",
					value: 4
				}, {
					label: "新亚考场",
					value: 5
				}, {
					label: "庐江考场",
					value: 6
				}],
				driveType:'',
				videoType: '',
				popupShow: false,
				videoList: [{
					title: '正确的驾驶姿势',
					time: '13:14',
					id: 0
				}, {
					title: '正确的驾驶姿势',
					time: '13:14',
					id: 1
				}, {
					title: '正确的驾驶姿势',
					time: '13:14',
					id: 2
				}, {
					title: '正确的驾驶姿势',
					time: '13:14',
					id: 3
				}, {
					title: '正确的驾驶姿势',
					time: '13:14',
					id: 4
				}, {
					title: '正确的驾驶姿势',
					time: '13:14',
					id: 5
				}],
				projectId: undefined,
				param: {}
			}
		},
		onLoad(op) {
			if(op.driveType){
				this.driveType=op.driveType
				this.param.driveType=op.driveType
			}
			if (op.type) {
				this.videoType = op.type
			}
			if (op.projectId) {
				this.projectId = op.projectId
			}
			if (op.subject) {
				this.param.subject = op.subject
			}
			if (op.type) {
				this.param.type = op.type
				this.getVideoList()
			}
			if (op.type == '1') {
				if (this.param.subject == '2') {
					this.title = '科二基础项目讲解'
				} else {
					this.title = '科三基础项目讲解'
				}
			} else {
				this.title = '基础操作讲解'
			}
			
		},
		computed: {
			getScrollLeft() {
				const index = this.currentIndex - 1 < 0 ? 0 : this.currentIndex - 1
				return 164 * index
			}
		},
		methods: {
			formateTime(time) {
				const h = parseInt(time / 3600)
				const minute = parseInt(time / 60 % 60)
				const second = Math.ceil(time % 60)
				const hours = h < 10 ? '0' + h : h
				const formatSecond = second > 59 ? 59 : second
				return `${hours > 0 ? `${hours}:` : ''}${minute < 10 ? '0' + minute : minute}:${formatSecond < 10 ? '0' + formatSecond : formatSecond}`
			},
			getVideoList() {
				queryProjectList({
					"carTypeId": storage.get('carType') || '1001',
					...this.param,
				}).then(resp => {
					if(resp.code==='0000'){
						let arr=[]
						if(this.param.type=='1'){
							arr = JSON.parse(JSON.stringify(resp.data))
							arr = arr.map(item => {
								return {
									...item,
									videoUrl: item.videoList[0]?.videoUrl,
									videoTime: this.formateTime(item.videoList[0]?.videoTime)
								}
							})
						}else{
							arr = JSON.parse(JSON.stringify(resp.data[0].videoList))
							arr = arr.map(item => {
								return {
									...item,
									projectId: item.videoId,
									subDesc: resp.data[0].description,
									videoTime: this.formateTime(item.videoTime)
								}
							})
						}
						this.videoList = arr
						this.currentIndex = this.videoList.findIndex(item => item.projectId == this.projectId)
					}
				})
			},
			checkTest(val) {
				this.videoIndex = val
			},
			checkVideo(val) {
				this.popupShow = false
				this.projectId = val
				this.currentIndex = this.videoList.findIndex(item => item.projectId == this.projectId)
			}
		}
	}
</script>

<style scoped>
	.contain-box {
		width: 260rpx;
		height: 146rpx;
		background: #00B74F;
		border-radius: 8rpx;
	}

	.topic_cont_text {
		width: 260rpx;
		height:45rpx;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		/* display: -webkit-box; */
		white-space: nowrap;
		-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp:1; /** 显示的行数 **/
		
	}

	.playLogo {
		width: 90rpx;
		height: 40rpx;
		background: #FF6E02;
		border-radius: 8rpx 0rpx 8rpx 0rpx;
		line-height: 40rpx;
		text-align: center;
		color: #fff;
		font-size: 12px;
		position: absolute;
		left: 0;
		top: 0
	}

	.play_btn {
		width: 65rpx;
		height: 65rpx;
		position: absolute;
		left: 97.5rpx;
		top: 39.5rpx
	}

	.play_btn_2 {
		width: 65rpx;
		height: 65rpx;
		position: absolute;
		left: 117.5rpx;
		top: 52rpx
	}

	.pic {
		width: 300rpx;
		height: 169rpx;
		background: #00B74F;
		border-radius: 8rpx;
	}

	.tab_iem {
		width: 145rpx;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		background: #F5F5F5;
		border-radius: 10rpx;
		color: #333
	}

	.checked_tab {
		background: linear-gradient(90deg, #11DF20 0%, #01B74F 100%);
		color: #fff
	}

	/*scroll-view外层*/
	.skill-sequence-panel-content-wrapper {
		position: relative;
		white-space: nowrap;
	}

	/*scroll-view本身*/
	.skill-sequence-panel-content {
		min-width: 100%;
	}

	/*scroll-view内层*/
	.skill-sequence-skill-wrapper {
		display: inline-block;
		margin-right: 15px;
	}
	.hide {
		backface-visibility: hidden;
		transform: translate3d(0, 0, 0);
		-webkit-backface-visibility: hidden;
		-webkit-transform: translate3d(0, 0, 0);
	}
</style>