<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>