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

<template>
	<view>
		<j-navbar>基本操作</j-navbar>
		<!-- <u-sticky bgColor="#fff">
		  <u-tabs :list="categoryList" :scrollable="false" @click="changeCategory"></u-tabs>
		</u-sticky> -->
		<view class="p14">
			<!-- <view class="flex ai-c">
				<view class="car_item mr10" v-for="(item,index) of carTypeList" :key="index" @tap="chooseCar(item.value)" :class="item.value===tCar?'checked_car':'unchecked_car'">{{item.label}}</view>
			</view> -->
			<view class="flex p14lr p20tb bc-fff mb10" style="border-radius: 10rpx;"
				v-for="(item,index) of videoList" :key="index" @tap="toOperateDetail(item.videoId)">
				<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" />
				</view>
				<view class="ml10">
					<text class="fs16 cor-000 fw600">{{allVideoList[0]?.description}}</text>
					<view class="fs14 mt5 cor-666">{{item.description}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		querySysConfigList,
		queryProjectList
	} from '@/jtools/api/question';
	import storage from '@/jtools/storage';
	export default {
		data(){
			return{
				type:'2',
				subject:'1',
				tCar:0,
				categoryList:[{
					name:'手动挡C1'
				},{
					name:'自动挡C2'
				}],
				allVideoList:[],
				videoList:[]
			}
		},
		onLoad(op){
			if(op.subject){
				this.subject=op.subject
			}
			if(op.type){
				this.type=op.type
			}
			this.getDiverType()
		},
		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}`
			},
			toOperateDetail(val){
				let arr = JSON.parse(JSON.stringify(this.allVideoList[0].videoList))
				arr = arr.map(item => {
					return {
						...item,
						subDesc:this.allVideoList[0].description,
						projectId:item.videoId,
						videoTime:this.formateTime(item.videoTime)
					}
				})
				let jsonString = JSON.stringify(arr)
				uni.navigateTo({
					url: "/pages/questionBank/videoDetail?videoList=" + jsonString + "&subject=" + this.subject +
						"&projectId=" + val + "&type=2"
				})
			},
			getOperateList() {
				queryProjectList({
					"carTypeId": storage.get('carType') || '1001',
					"subject": String(this.subject),
					"type": this.type
				}).then(resp => {
					if(resp.code==='0000'){
						this.videoList=resp.data[0]?resp.data[0].videoList:[]
						this.allVideoList=resp.data
					}
				})
			},
			getDiverType() {
				const carTypeId = storage.get('carType') || '1001'
				querySysConfigList(carTypeId, 'DriveType').then(resp => {
					if (resp.code === '0000') {
						this.categoryList=resp.data.map(item=>{
							return {
								...item,
								name:item.configItemName
							}
						})
						this.getOperateList()
					}
				})
			},
			chooseCar(val){
				this.tCar=val
			},
			changeCategory(val){
				this.tCar=val.index
				this.getOperateList()
			},
			toDetail(){
				uni.navigateTo({
					url:'/pages/questionBank/videoDetail'
				})
			}
		}
		}
</script>

<style scoped>
	::v-deep .u-tabs__wrapper__nav__line {
			background: linear-gradient(90deg, #11DF20 0%, #00B74F 100%) !important;
			bottom: 14rpx !important;
		}
		.car_item{
			font-size: 28rpx;
			padding:0 34rpx;
		  height: 58rpx;
			line-height: 58rpx;
			border-radius: 29rpx;
		}
		.checked_car{
			background-color: #05C341;
			color: #fff;
		}
		.unchecked_car{
			border: 1px solid #DDD;
			color: #666;
			box-sizing: border-box;
		}
		.pic{
			width: 300rpx;
			height: 169rpx;
			background: #00B74F;
			border-radius: 10rpx;
		}
		.play_btn_2 {
			width: 65rpx;
			height: 65rpx;
			position: absolute;
			left: 117.5rpx;
			top: 52rpx
		}
		.hide {
			backface-visibility: hidden;
			transform: translate3d(0, 0, 0);
			-webkit-backface-visibility: hidden;
			-webkit-transform: translate3d(0, 0, 0);
		}
</style>