You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
3.4 KiB
130 lines
3.4 KiB
<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="../../../static/image/index/subject2_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">科二考试项目讲解</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-sb mt15">
|
|
<view class="tab_iem" :class="videoIndex===item.value?'checked_tab':''" v-for="(item,index) of operateList" :key="index" @tap="checkVideo(index)">{{item.description}}</view>
|
|
</view>
|
|
<view class="mt15">
|
|
<video style="width: 100%;height: 362rpx;border-radius: 16rpx;" id="myVideo" :src="operateList[videoIndex].videoList[0].videoUrl"></video>
|
|
</view>
|
|
</view>
|
|
<view class="video_box mt10">
|
|
<text class="fs18 cor-000">驾驶方法</text>
|
|
<view class="text-center mt10" style="width: 200rpx;" @tap="toDetail">
|
|
<image style="width: 200rpx;height: 200rpx;margin-bottom: 5px;" src="../../../static/image/index/base_operate.png"></image>
|
|
<text class="fs16 cor-000">基础操作讲解</text>
|
|
<view class="fs14 cor-999 mt5">操作方法精讲</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,
|
|
operateList:[]
|
|
}
|
|
},
|
|
async mounted(){
|
|
await this.getDiverType()
|
|
},
|
|
methods:{
|
|
getVideoList(){
|
|
console.log('index',this.diverTypeIndex);
|
|
console.log(this.diverTypeList[this.diverTypeIndex]);
|
|
queryProjectList({
|
|
"carTypeId": storage.get('carType') || '1001',
|
|
"driveType": this.diverTypeList[this.diverTypeIndex].configItemCode,
|
|
"subject": String(this.subject),
|
|
"projectId":'1001',
|
|
"type": "1"
|
|
}).then(resp=>{
|
|
this.operateList=resp.data
|
|
})
|
|
},
|
|
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){
|
|
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{
|
|
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>
|
|
|