|
|
|
|
@ -1,11 +1,13 @@ |
|
|
|
|
<template> |
|
|
|
|
<view> |
|
|
|
|
<view class="box-nav"> |
|
|
|
|
<image style="width: 100%;" src="../../../static/image/index/index_bg.jpg"></image> |
|
|
|
|
<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> |
|
|
|
|
<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> |
|
|
|
|
<view class="p14lr" style="margin-top: -20px;"> |
|
|
|
|
<view class="video_box"> |
|
|
|
|
<view class="flex ai-c jc-sb mt5"> |
|
|
|
|
@ -15,15 +17,24 @@ |
|
|
|
|
<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"> |
|
|
|
|
<view class="wp100 relative" style="height: 362rpx;border-radius: 16rpx;"> |
|
|
|
|
<image style="width: 100%;height: 362rpx;border-radius: 16rpx;" id="myVideo" src="../../../static/image/index/jpsp.png"></image> |
|
|
|
|
<image class="play_btn_2" src="../../static/image/index/play.png" /> |
|
|
|
|
</view> |
|
|
|
|
<view class="skill-sequence-panel-content-wrapper"> |
|
|
|
|
<scroll-view class="skill-sequence-panel-content" scroll-x :scroll-into-view="intoindex"> |
|
|
|
|
<view class="skill-sequence-skill-wrapper tab_iem m15tb" :class="videoIndex===index?'checked_tab':''" |
|
|
|
|
v-for="(item,index) of operateList" :key="index" :id='"text"+index' @tap="checkVideo(index)"> |
|
|
|
|
{{item.description}} |
|
|
|
|
</view> |
|
|
|
|
</scroll-view> |
|
|
|
|
</view> |
|
|
|
|
<swiper class="swiper" :current="videoIndex" style="height: 362rpx;" :autoplay="false" |
|
|
|
|
:disable-programmatic-animation="true" @change="onChange"> |
|
|
|
|
<swiper-item v-for="(item,index) of operateList" :key="index" @tap="toVideo"> |
|
|
|
|
<view class="wp100 relative p5lr" style="height: 362rpx;border-radius: 16rpx;overflow: hidden;"> |
|
|
|
|
<image style="width: 100%;height: 362rpx;border-radius: 16rpx;" mode="widthFix" |
|
|
|
|
:src="item.videoList[0].videoUrl+'?x-oss-process=video/snapshot,t_0,f_jpg'"></image> |
|
|
|
|
<image class="play_btn_2" src="../../static/image/index/play.png" /> |
|
|
|
|
</view> |
|
|
|
|
</swiper-item> |
|
|
|
|
</swiper> |
|
|
|
|
</view> |
|
|
|
|
<view class="video_box mt10"> |
|
|
|
|
<view class="flex ai-c jc-sb"> |
|
|
|
|
@ -33,19 +44,20 @@ |
|
|
|
|
<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="toVideo"> |
|
|
|
|
<view class="pic relative"> |
|
|
|
|
<image class="pic" src="../../static/image/index/index_bg.jpg"></image> |
|
|
|
|
<image class="play_btn_3" src="../../static/image/index/play.png" /> |
|
|
|
|
</view> |
|
|
|
|
<view class="ml10"> |
|
|
|
|
<text class="fs16 cor-000 fw600">上车、下车的方法</text> |
|
|
|
|
<view class="fs14 mt5 cor-666">上车、下车的方法</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="flex p14lr p20tb bc-fff mt10" style="border-bottom: 1rpx solid #DDDCDC;" |
|
|
|
|
v-for="(item,index) of videoList" :key="index" @click="toOperateDetail(item.videoId)"> |
|
|
|
|
<view class="pic relative" style="overflow: hidden;"> |
|
|
|
|
<image class="pic" mode="widthFix" :src="item.videoUrl+'?x-oss-process=video/snapshot,t_0,f_jpg'"></image> |
|
|
|
|
<image class="play_btn_3" src="../../static/image/index/play.png" /> |
|
|
|
|
</view> |
|
|
|
|
<view class="ml10"> |
|
|
|
|
<text class="fs16 cor-000 fw600">{{baseList[0]?.description}}</text> |
|
|
|
|
<view class="fs14 mt5 cor-666">{{item.description}}</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
@ -54,125 +66,198 @@ |
|
|
|
|
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:{ |
|
|
|
|
getOperateList(){ |
|
|
|
|
queryProjectList({ |
|
|
|
|
"carTypeId": storage.get('carType') || '1001', |
|
|
|
|
"subject": String(this.subject), |
|
|
|
|
"type": "2" |
|
|
|
|
}).then(resp=>{ |
|
|
|
|
console.log(resp); |
|
|
|
|
}) |
|
|
|
|
export default { |
|
|
|
|
name: "Subject2", |
|
|
|
|
props: { |
|
|
|
|
subject: { |
|
|
|
|
type: [String, Number] |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
toVideo(){ |
|
|
|
|
uni.navigateTo({ |
|
|
|
|
url:"/pages/questionBank/videoDetail?driveType="+this.diverTypeList[this.diverTypeIndex].configItemCode+"&subject="+this.subject+"&projectId="+this.projectId+"&type=1" |
|
|
|
|
}) |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
intoindex: '', |
|
|
|
|
diverTypeIndex: 0, |
|
|
|
|
diverTypeList: [], |
|
|
|
|
videoIndex: 0, |
|
|
|
|
projectId: undefined, |
|
|
|
|
operateList: [], |
|
|
|
|
baseList: [], |
|
|
|
|
videoList: [] |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
getVideoList(){ |
|
|
|
|
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 |
|
|
|
|
}) |
|
|
|
|
async mounted() { |
|
|
|
|
await this.getDiverType() |
|
|
|
|
}, |
|
|
|
|
getDiverType(){ |
|
|
|
|
const carTypeId=storage.get('carType') || '1001' |
|
|
|
|
querySysConfigList(carTypeId,'DriveType').then(resp=>{ |
|
|
|
|
if(resp.code==='0000'){ |
|
|
|
|
this.diverTypeList=resp.data |
|
|
|
|
methods: { |
|
|
|
|
onChange(e) { |
|
|
|
|
this.videoIndex = e.detail.current |
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
const index = this.videoIndex - 1 < 0 ? 0 : this.videoIndex - 1 |
|
|
|
|
this.intoindex = "text" + index |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
getOperateList() { |
|
|
|
|
queryProjectList({ |
|
|
|
|
"carTypeId": storage.get('carType') || '1001', |
|
|
|
|
"subject": String(this.subject), |
|
|
|
|
"driveType": this.diverTypeList[this.diverTypeIndex].configItemCode, |
|
|
|
|
"type": "2" |
|
|
|
|
}).then(resp => { |
|
|
|
|
if (resp.code === '0000') { |
|
|
|
|
this.baseList = resp.data |
|
|
|
|
this.videoList = resp.data[0].videoList.slice(0, 5) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
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}` |
|
|
|
|
}, |
|
|
|
|
toVideo() { |
|
|
|
|
let arr = JSON.parse(JSON.stringify(this.operateList)) |
|
|
|
|
arr = arr.map(item => { |
|
|
|
|
return { |
|
|
|
|
...item, |
|
|
|
|
videoUrl: item.videoList[0]?.videoUrl, |
|
|
|
|
videoTime:this.formateTime(item.videoList[0]?.videoTime) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
let jsonString = JSON.stringify(arr) |
|
|
|
|
uni.navigateTo({ |
|
|
|
|
url: "/pages/questionBank/videoDetail?videoList=" + jsonString + "&subject=" + this.subject + |
|
|
|
|
"&projectId=" + this.projectId + "&type=1" |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
toOperateDetail(val){ |
|
|
|
|
let arr = JSON.parse(JSON.stringify(this.baseList[0].videoList)) |
|
|
|
|
arr = arr.map(item => { |
|
|
|
|
return { |
|
|
|
|
...item, |
|
|
|
|
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" |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
getVideoList() { |
|
|
|
|
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() |
|
|
|
|
this.getOperateList() |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
changeDiverType(){ |
|
|
|
|
this.diverTypeIndex=this.diverTypeIndex==0?1:0 |
|
|
|
|
changeDiverType() { |
|
|
|
|
this.diverTypeIndex = this.diverTypeIndex == 0 ? 1 : 0 |
|
|
|
|
this.videoIndex = 0 |
|
|
|
|
this.getVideoList() |
|
|
|
|
}, |
|
|
|
|
checkVideo(val){ |
|
|
|
|
this.projectId=this.operateList[val]?.projectId |
|
|
|
|
this.videoIndex=val |
|
|
|
|
}, |
|
|
|
|
toDetail(){ |
|
|
|
|
uni.navigateTo({ |
|
|
|
|
url:"/pages/questionBank/baseOperate" |
|
|
|
|
}) |
|
|
|
|
checkVideo(val) { |
|
|
|
|
this.projectId = this.operateList[val]?.projectId |
|
|
|
|
this.videoIndex = val |
|
|
|
|
}, |
|
|
|
|
toDetail() { |
|
|
|
|
uni.navigateTo({ |
|
|
|
|
url: "/pages/questionBank/baseOperate?subject=" + this.subject |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</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 |
|
|
|
|
.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; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.play_btn_3 { |
|
|
|
|
width: 65rpx; |
|
|
|
|
height: 65rpx; |
|
|
|
|
position: absolute; |
|
|
|
|
left: 117.5rpx; |
|
|
|
|
top: 52rpx |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.play_btn_2 { |
|
|
|
|
width: 65rpx; |
|
|
|
|
height: 65rpx; |
|
|
|
|
position: absolute; |
|
|
|
|
left: calc((100% - 65rpx)/2); |
|
|
|
|
top: 148.5rpx |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/*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; |
|
|
|
|
} |
|
|
|
|
.checked_tab{ |
|
|
|
|
background: linear-gradient(90deg, #11DF20 0%, #01B74F 100%); |
|
|
|
|
color:#fff |
|
|
|
|
} |
|
|
|
|
.pic{ |
|
|
|
|
width: 300rpx; |
|
|
|
|
height: 169rpx; |
|
|
|
|
background: #00B74F; |
|
|
|
|
border-radius: 8rpx; |
|
|
|
|
} |
|
|
|
|
.play_btn_3{ |
|
|
|
|
width: 65rpx; |
|
|
|
|
height: 65rpx; |
|
|
|
|
position: absolute; |
|
|
|
|
left:117.5rpx; |
|
|
|
|
top: 52rpx |
|
|
|
|
} |
|
|
|
|
.play_btn_2{ |
|
|
|
|
width: 65rpx; |
|
|
|
|
height: 65rpx; |
|
|
|
|
position: absolute; |
|
|
|
|
left: calc((100% - 65rpx)/2); |
|
|
|
|
top: 148.5rpx |
|
|
|
|
} |
|
|
|
|
</style> |
