316 lines
8.2 KiB
Vue
316 lines
8.2 KiB
Vue
<template>
|
|
<view>
|
|
<sunny-video style="width: 100%" videoHeight="422rpx" ref="sunny-video" :src="videoList[currentIndex].videoUrl" />
|
|
<view class="p14tb bc-fff">
|
|
<view class="skill-sequence-panel-content-wrapper pr14" v-if="videoType=='test'">
|
|
<scroll-view class="skill-sequence-panel-content" scroll-x>
|
|
<view class="skill-sequence-skill-wrapper tab_iem" :class="videoIndex===item.value?'checked_tab':''"
|
|
v-for="(item,index) of testList" :key="index" @tap="checkTest(item.value)">{{item.label}}</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="flex ai-c jc-sb mt10 wp100 p14">
|
|
<text class="fs18 fw600 cor-000">{{title}}</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="bc-fff pl14 pb10">
|
|
<view class="skill-sequence-panel-content-wrapper">
|
|
<scroll-view class="skill-sequence-panel-content" scroll-x :scroll-left="getScrollLeft">
|
|
<view class="skill-sequence-skill-wrapper" v-for="(item, index) in videoList" :key="index"
|
|
@tap="checkVideo(item.projectId)">
|
|
<view>
|
|
<view class="mb10 relative contain-box hide" style="overflow: hidden;">
|
|
<image class="contain-box" style="position: absolute;left: 0;top: 0;" mode="widthFix"
|
|
:src="item.videoUrl+'?x-oss-process=video/snapshot,t_0,f_jpg'"></image>
|
|
<view v-if="projectId==item.projectId" class="playLogo">播放中</view>
|
|
<image class="play_btn" src="../../static/image/index/play.png" />
|
|
<text style="position: absolute;right: 8rpx;bottom: 8rpx;color:#fff">{{item.videoTime}}</text>
|
|
</view>
|
|
<view class="topic_cont_text" :style="{color:projectId==item.projectId?'#FF6E02':'#333'}">
|
|
{{item.description}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</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 mb15" style="border-radius: 16rpx;" v-for="(item,index) of videoList" :key="index"
|
|
@tap="checkVideo(item.projectId)">
|
|
<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" />
|
|
<text style="position: absolute;right: 8rpx;bottom: 8rpx;color:#fff">{{item.videoTime}}</text>
|
|
</view>
|
|
<view class="ml10">
|
|
<text class="fs16 cor-000 fw600">{{item.description}}</text>
|
|
<view class="fs14 mt5 cor-666">{{item.subDesc}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
queryProjectList
|
|
} from '@/jtools/api/question';
|
|
import storage from '@/jtools/storage';
|
|
export default {
|
|
data() {
|
|
return {
|
|
title: '',
|
|
currentIndex: 0,
|
|
videoIndex: 0,
|
|
testList: [{
|
|
label: "八一考场",
|
|
value: 0,
|
|
}, {
|
|
label: "富凯考场",
|
|
value: 1
|
|
}, {
|
|
label: "新亚考场",
|
|
value: 2
|
|
}, {
|
|
label: "庐江考场",
|
|
value: 3
|
|
}, {
|
|
label: "富凯考场",
|
|
value: 4
|
|
}, {
|
|
label: "新亚考场",
|
|
value: 5
|
|
}, {
|
|
label: "庐江考场",
|
|
value: 6
|
|
}],
|
|
driveType:'',
|
|
videoType: '',
|
|
popupShow: false,
|
|
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
|
|
}],
|
|
projectId: undefined,
|
|
param: {}
|
|
}
|
|
},
|
|
onLoad(op) {
|
|
if(op.driveType){
|
|
this.driveType=op.driveType
|
|
this.param.driveType=op.driveType
|
|
}
|
|
if (op.type) {
|
|
this.videoType = op.type
|
|
}
|
|
if (op.projectId) {
|
|
this.projectId = op.projectId
|
|
}
|
|
if (op.subject) {
|
|
this.param.subject = op.subject
|
|
}
|
|
if (op.type) {
|
|
this.param.type = op.type
|
|
this.getVideoList()
|
|
}
|
|
if (op.type == '1') {
|
|
if (this.param.subject == '2') {
|
|
this.title = '科二基础项目讲解'
|
|
} else {
|
|
this.title = '科三基础项目讲解'
|
|
}
|
|
} else {
|
|
this.title = '基础操作讲解'
|
|
}
|
|
|
|
},
|
|
computed: {
|
|
getScrollLeft() {
|
|
const index = this.currentIndex - 1 < 0 ? 0 : this.currentIndex - 1
|
|
return 164 * index
|
|
}
|
|
},
|
|
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}`
|
|
},
|
|
getVideoList() {
|
|
queryProjectList({
|
|
"carTypeId": storage.get('carType') || '1001',
|
|
...this.param,
|
|
}).then(resp => {
|
|
if(resp.code==='0000'){
|
|
let arr=[]
|
|
if(this.param.type=='1'){
|
|
arr = JSON.parse(JSON.stringify(resp.data))
|
|
arr = arr.map(item => {
|
|
return {
|
|
...item,
|
|
videoUrl: item.videoList[0]?.videoUrl,
|
|
videoTime: this.formateTime(item.videoList[0]?.videoTime)
|
|
}
|
|
})
|
|
}else{
|
|
arr = JSON.parse(JSON.stringify(resp.data[0].videoList))
|
|
arr = arr.map(item => {
|
|
return {
|
|
...item,
|
|
projectId: item.videoId,
|
|
subDesc: resp.data[0].description,
|
|
videoTime: this.formateTime(item.videoTime)
|
|
}
|
|
})
|
|
}
|
|
this.videoList = arr
|
|
this.currentIndex = this.videoList.findIndex(item => item.projectId == this.projectId)
|
|
}
|
|
})
|
|
},
|
|
checkTest(val) {
|
|
this.videoIndex = val
|
|
},
|
|
checkVideo(val) {
|
|
this.popupShow = false
|
|
this.projectId = val
|
|
this.currentIndex = this.videoList.findIndex(item => item.projectId == this.projectId)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.contain-box {
|
|
width: 260rpx;
|
|
height: 146rpx;
|
|
background: #00B74F;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.topic_cont_text {
|
|
width: 260rpx;
|
|
height:45rpx;
|
|
overflow: hidden;
|
|
word-break: break-all;
|
|
/* break-all(允许在单词内换行。) */
|
|
text-overflow: ellipsis;
|
|
/* 超出部分省略号 */
|
|
/* display: -webkit-box; */
|
|
white-space: nowrap;
|
|
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
|
|
-webkit-line-clamp:1; /** 显示的行数 **/
|
|
|
|
}
|
|
|
|
.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
|
|
}
|
|
|
|
/*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;
|
|
}
|
|
.hide {
|
|
backface-visibility: hidden;
|
|
transform: translate3d(0, 0, 0);
|
|
-webkit-backface-visibility: hidden;
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
}
|
|
</style> |