huxiaofeng666/jwl-applet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
脆皮鸭
2023-08-24 15:26:02 +08:00
parent 1596959583
commit 97547afc4d
19 changed files with 922 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

247
src/pages/questionBank/videoDetail.vue
View File

@@ -1,13 +1,16 @@
<template>
<view>
<sunny-video style="width: 100%" videoHeight="422rpx" ref="sunny-video" title="测试视频" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4" @timeupdate="timeupdate" />
<view class="p14 bc-fff">
<u-scroll-list :indicator="false" v-if="videoType=='test'">
<view class="flex ai-c jc-sb mt15">
<view class="tab_iem mr15" :class="videoIndex===item.value?'checked_tab':''" v-for="(item,index) of testList" :key="index" @tap="checkTest(item.value)">{{item.label}}</view>
<sunny-video style="width: 100%" videoHeight="422rpx" ref="sunny-video" title="测试视频"
src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
@timeupdate="timeupdate" />
<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>
</u-scroll-list>
<view class="flex ai-c jc-sb mt10 wp100">
<view class="flex ai-c jc-sb mt10 wp100 p14">
<text class="fs18 fw600 cor-000">C1捷达-基础操作视频讲解</text>
<view class="flex" @tap="popupShow=true" v-if="videoType!='test'">
<text class="fs14 cor-666">更多</text>
@@ -18,20 +21,23 @@
<view>
</view>
</view>
<view class="pl14 bc-fff">
<u-scroll-list :indicator="false" class="mr15">
<view v-for="(item, index) in videoList" :key="index" class="mr15" @click="checkVideo(item.id)">
<view>
<view class="mb10 relative">
<image class="contain-box" src="../../static/image/index/index_bg.png"></image>
<view v-if="nowVideo===item.id" class="playLogo">播放中</view>
<image class="play_btn" src="../../static/image/index/play.png" />
<text style="position: absolute;right: 8rpx;bottom: 8rpx;color:#fff">13:14</text>
</view>
<text :style="{color:nowVideo===item.id?'#FF6E02':'#333'}">正确的驾驶姿势</text>
<view class="bc-fff pl14">
<view class="skill-sequence-panel-content-wrapper">
<scroll-view class="skill-sequence-panel-content" scroll-x :scroll-left="164*currentIndex">
<view class="skill-sequence-skill-wrapper" v-for="(item, index) in videoList" :key="index"
@click="checkVideo(item.projectId)">
<view>
<view class="mb10 relative">
<image class="contain-box" src="../../static/image/index/index_bg.png"></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">13:14</text>
</view>
</view>
</u-scroll-list>
<text :style="{color:projectId==item.projectId?'#FF6E02':'#333'}">{{item.description}}</text>
</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">
@@ -39,14 +45,15 @@
<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 mt10" style="border-radius: 16rpx;" v-for="(item,index) of videoList" :key="index" @tap="toDetail">
<view class="flex bc-fff mt10" style="border-radius: 16rpx;" v-for="(item,index) of videoList" :key="index"
@tap="toDetail">
<view class="pic relative">
<image class="pic" src="../../static/image/index/index_bg.png"></image>
<image class="play_btn_2" src="../../static/image/index/play.png" />
<text style="position: absolute;right: 8rpx;bottom: 8rpx;color:#fff">13:14</text>
</view>
<view class="ml10">
<text class="fs16 cor-000 fw600">上车、下车的方法</text>
<text class="fs16 cor-000 fw600">{{item.description}}</text>
<view class="fs14 mt5 cor-666">上车、下车的方法</view>
</view>
</view>
@@ -56,73 +63,103 @@
</template>
<script>
export default{
data(){
return{
videoIndex:0,
testList:[{
label:"八一考场",
value:0,
},{
label:"富凯考场",
value:1
},{
label:"新亚考场",
value:2
},{
label:"庐江考场",
value:3
},{
label:"富凯考场",
value:4
},{
label:"新亚考场",
value:5
},{
label:"庐江考场",
value:6
}],
videoType:'',
popupShow:false,
nowVideo:0,
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
}]
import {
queryProjectList
} from '@/jtools/api/question';
import storage from '@/jtools/storage';
export default {
data() {
return {
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
}],
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){
onLoad(op) {
if (op.type) {
this.videoType = op.type
}
if(op.projectId){
this.projectId=op.projectId
}
if(op.driveType){
this.param.driveType=op.driveType
}
if(op.subject){
this.param.subject=op.subject
}
if(op.type){
this.videoType=op.type
this.param.type=op.type
}
this.getVieoList()
},
methods:{
checkTest(val){
this.videoIndex=val
methods: {
getVieoList(){
queryProjectList({
"carTypeId": storage.get('carType') || '1001',
"driveType": this.param.driveType,
"subject": this.param.subject,
"type": this.param.type
}).then(resp=>{
this.videoList=resp.data
this.currentIndex=this.videoList.findIndex(item=>item.projectId==this.projectId)
})
},
checkVideo(val){
this.nowVideo=val
checkTest(val) {
this.videoIndex = val
},
checkVideo(val) {
this.projectId = val
}
}
}
@@ -135,7 +172,8 @@
background: #00B74F;
border-radius: 8rpx;
}
.playLogo{
.playLogo {
width: 90rpx;
height: 40rpx;
background: #FF6E02;
@@ -146,39 +184,58 @@
font-size: 12px;
position: absolute;
left: 0;
top:0
top: 0
}
.play_btn{
.play_btn {
width: 65rpx;
height: 65rpx;
position: absolute;
left: 97.5rpx;
top:39.5rpx
top: 39.5rpx
}
.play_btn_2{
.play_btn_2 {
width: 65rpx;
height: 65rpx;
position: absolute;
left: 117.5rpx;
top:52rpx
top: 52rpx
}
.pic{
.pic {
width: 300rpx;
height: 169rpx;
background: #00B74F;
border-radius: 8rpx;
}
.tab_iem{
.tab_iem {
width: 145rpx;
height: 56rpx;
line-height: 56rpx;
text-align: center;
background: #F5F5F5;
border-radius: 10rpx;
color:#333
}
.checked_tab{
color: #333
}
.checked_tab {
background: linear-gradient(90deg, #11DF20 0%, #01B74F 100%);
color:#fff
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;
}
</style>