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

<template>
	<view>
		<sunny-video style="width: 100%" videoHeight="422rpx" ref="sunny-video" title="测试视频" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4" @timeupdate="timeupdate" />
		<view class="p14 bc-fff">
		<u-scroll-list :indicator="false" v-if="videoType=='test'">
			<view class="flex ai-c jc-sb mt15">
				<view class="tab_iem mr15" :class="videoIndex===item.value?'checked_tab':''" v-for="(item,index) of testList" :key="index" @tap="checkTest(item.value)">{{item.label}}</view>
			</view>
			</u-scroll-list>
			<view class="flex ai-c jc-sb mt10 wp100">
				<text class="fs18 fw600 cor-000">C1捷达-基础操作视频讲解</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="pl14 bc-fff">
			<u-scroll-list :indicator="false" class="mr15">
			      <view v-for="(item, index) in videoList" :key="index" class="mr15" @click="checkVideo(item.id)">
							<view>
								<view class="mb10 relative">
									<image class="contain-box" src="../../static/image/index/index_bg.png"></image>
									<view v-if="nowVideo===item.id" class="playLogo">播放中</view>
									<image class="play_btn" src="../../static/image/index/play.png" />
									<text style="position: absolute;right: 8rpx;bottom: 8rpx;color:#fff">13:14</text>
								</view>
								<text :style="{color:nowVideo===item.id?'#FF6E02':'#333'}">正确的驾驶姿势</text>
							</view>
			      </view>
			  </u-scroll-list>
		</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 mt10" style="border-radius: 16rpx;" v-for="(item,index) of videoList" :key="index" @tap="toDetail">
					<view class="pic relative">
						<image class="pic" src="../../static/image/index/index_bg.png"></image>
						<image class="play_btn_2" src="../../static/image/index/play.png" />
						<text style="position: absolute;right: 8rpx;bottom: 8rpx;color:#fff">13:14</text>
					</view>
					<view class="ml10">
						<text class="fs16 cor-000 fw600">上车、下车的方法</text>
						<view class="fs14 mt5 cor-666">上车、下车的方法</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				videoIndex:0,
				testList:[{
				label:"八一考场",
				value:0,
			},{
				label:"富凯考场",
				value:1
			},{
				label:"新亚考场",
				value:2
			},{
				label:"庐江考场",
				value:3
			},{
				label:"富凯考场",
				value:4
			},{
				label:"新亚考场",
				value:5
			},{
				label:"庐江考场",
				value:6
			}],
				videoType:'',
				popupShow:false,
				nowVideo:0,
				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
				}]
			}
		},
		onLoad(op){
			if(op.type){
				this.videoType=op.type
			}
		},
		methods:{
			checkTest(val){
				this.videoIndex=val
			},
			checkVideo(val){
				this.nowVideo=val
			}
		}
	}
</script>

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