jwl-applet/src/pages/index/components/Subject2.vue

<template>
  <view>
    <view class="box-nav">
      <image style="width: 100%;" src="../../../static/image/index/index_bg.jpg"></image>
			<view style="width: 100%;position: absolute;top: 80px;left: 0;" class="flex jc-c">
				<image style="width: 694rpx" mode="widthFix" :src="subject=='2'?'../../../static/image/index/subject2_bg.png':'../../../static/image/index/subject3_bg.png'"></image>
			</view>
    </view>
		<view class="p14lr" style="margin-top: -20px;">
			<view class="video_box">
				<view class="flex ai-c jc-sb mt5">
					<text class="fs18 cor-000">科{{subject=='2'?'二':'三'}}考试项目讲解</text>
					<view class="flex ai-c" style="height: 34rpx;line-height: 34rpx;" @tap="changeDiverType">
						<text style="color:#05C341;font-size: 16px;">{{diverTypeList[diverTypeIndex]?.configItemName}}</text>
						<u-icon name="list" color="#05C341" size="18"></u-icon>
					</view>
				</view>
				<view class="flex ai-c jc-fa mt15" style="flex-wrap: wrap;">
					<view class="tab_iem mr10 mb10" :class="videoIndex===index?'checked_tab':''" v-for="(item,index) of operateList" :key="index" @tap="checkVideo(index)">{{item.description}}</view>
				</view>
				<view @tap="toVideo">
					<video style="width: 100%;height: 362rpx;border-radius: 16rpx;" id="myVideo" src="http://flv4mp4.people.com.cn/videofile7/pvmsvideo/2021/3/10/ChenQiuNan_3c561132970edeedc50e153fcf3b186b_android_c.mp4"></video>
				</view>
			</view>
			<view class="video_box mt10">
				<view class="flex ai-c jc-sb">
					<text class="fs18 cor-000">基础操作讲解</text>
					<view class="flex cor-666" @tap="toVideo">
						<text>全部</text>
						<u-icon color="#666" name="arrow-right" size="18"></u-icon>
					</view>
				</view>
					<view class="flex p14lr p20tb bc-fff mt10" style="border-bottom: 1rpx solid #DDDCDC;;" v-for="(item,index) of operateList" :key="index" @tap="toDetail">
						<image class="pic" src="../../static/image/index/index_bg.jpg"></image>
						<view class="ml10">
							<text class="fs16 cor-000 fw600">上车、下车的方法</text>
							<view class="fs14 mt5 cor-666">上车、下车的方法</view>
						</view>
				</view>
			</view>
		</view>
  </view>
</template>

<script>
	import {
		querySysConfigList,
		queryProjectList
	} from '@/jtools/api/question';
	import storage from '@/jtools/storage';
export default {
  name: "Subject2",
	props:{
		subject:{
			type:[String,Number]
		}
	},
	data(){
		return{
			diverTypeIndex:0,
			diverTypeList:[],
			videoIndex:0,
			projectId:undefined,
			operateList:[]
		}
	},
	async mounted(){
		await this.getDiverType()
	},
	methods:{
		toVideo(){
			uni.navigateTo({
				url:"/pages/questionBank/videoDetail?driveType="+this.diverTypeList[this.diverTypeIndex].configItemCode+"&subject="+this.subject+"&projectId="+this.projectId+"&type=1"
			})
		},
		getVideoList(){
			console.log(this.subject);
			queryProjectList({
				 "carTypeId": storage.get('carType') || '1001',
				  "driveType": this.diverTypeList[this.diverTypeIndex].configItemCode,
				  "subject": String(this.subject),
				  "type": "1"
			}).then(resp=>{
				this.operateList=resp.data
				this.projectId=this.operateList[0]?.projectId
			})
		},
		getDiverType(){
				const carTypeId=storage.get('carType') || '1001'
				querySysConfigList(carTypeId,'DriveType').then(resp=>{
					if(resp.code==='0000'){
						this.diverTypeList=resp.data
						this.getVideoList()
					}
				})
			},
			changeDiverType(){
				this.diverTypeIndex=this.diverTypeIndex==0?1:0
				this.getVideoList()
			},
		checkVideo(val){
			console.log(val);
			this.projectId=this.operateList[val]?.projectId
			this.videoIndex=val
		},
		toDetail(){
			uni.navigateTo({
				url:"/pages/questionBank/baseOperate"
			})
		}
	}
}
</script>

<style scoped>
.box-nav{
  width: 100%;
  position: relative;
}
.center-box{
  position: absolute;
  width: 100%;
  top: 170rpx;
  padding: 0 28rpx;
}
.video_box{
	width: 100%;
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 14px;
}
.tab_iem{
	padding: 0 5px;
	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
}
.pic{
			width: 300rpx;
			height: 169rpx;
			background: #00B74F;
			border-radius: 8rpx;
		}
</style>