241 lines
7.1 KiB
Vue
241 lines
7.1 KiB
Vue
<template>
|
||
<div class="wrap">
|
||
<div class="navBar">
|
||
<van-nav-bar
|
||
left-arrow
|
||
left-arrow-color="#FFFFFF"
|
||
:border="false"
|
||
:fixed="true"
|
||
:safe-area-inset-top="true"
|
||
@click-left="goBack"
|
||
>
|
||
<template slot="title">
|
||
<div v-show="!show">培训文档</div>
|
||
<van-field v-model="keyword" placeholder="请输入关键词" v-show="show" @input="getTrainingList"/>
|
||
</template>
|
||
<template slot="right">
|
||
<div class="rightWrap" @click="show = !show">
|
||
<img src="@/assets/serach.png" class="img2" v-show="!show"/>
|
||
<img src="@/assets/delKey.png" class="img2" v-show="show" @click="initShow"/>
|
||
</div>
|
||
</template>
|
||
</van-nav-bar>
|
||
</div>
|
||
|
||
<!-- <div class="navBar">
|
||
<van-nav-bar
|
||
:border="false"
|
||
:fixed="true"
|
||
:safe-area-inset-top="true"
|
||
>
|
||
<template slot="title">
|
||
<van-field
|
||
v-model="keyword"
|
||
placeholder="名称/关键词/简介"
|
||
>
|
||
</van-field>
|
||
</template>
|
||
<template slot="left">
|
||
<div class="navLeft" @click="goBack">
|
||
<van-icon class="icon" name="arrow-left" />
|
||
<div>返回</div>
|
||
</div>
|
||
</template>
|
||
<template slot="right">
|
||
<van-icon class="search" name="search" size="20" @click="getTrainingList"/>
|
||
</template>
|
||
</van-nav-bar>
|
||
</div>
|
||
-->
|
||
<!-- <div class="statisticContainer">
|
||
<div class="statisticWrap">
|
||
<div class="line1">
|
||
<span>培训统计</span>
|
||
<span>更新时间：{{time}}</span>
|
||
</div>
|
||
<div class="numWrap">
|
||
<div>
|
||
<span>{{ numInfo?.totalNum }}</span>
|
||
<span>文章总数</span>
|
||
</div>
|
||
<div>
|
||
<span>{{ numInfo?.readNum }}</span><span>已培训数量</span>
|
||
</div>
|
||
<div>
|
||
<span>{{ numInfo?.notReadNum }}</span> <span>未培训数量</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>-->
|
||
<div class="tab_wrap">
|
||
<div v-for="(item, index) in tabArr" :key="index" :class="{'active' : activeIndex == index}"
|
||
@click="changeTab(index)">
|
||
{{ item.name }}<span v-if="item.count" :class="{'commonNum':true,'notFinish':index==2}">{{item.count}}</span>
|
||
<!-- {{ item.name }}-->
|
||
</div>
|
||
</div>
|
||
<div class="contentWrap" v-show="!showEmpty">
|
||
<van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="min-height:85vh">
|
||
<div class="itemWrap" v-for="(item,index) in pageList" :key="index" @click="goH5Detail(item,'培训文档')">
|
||
<div class="info flexBetween common">
|
||
<div class="title">{{ item.name }}<span v-if="item.mustRead===1" class="read">必读</span></div>
|
||
</div>
|
||
<div class="imgWrap">
|
||
<img :src="item.themePicture">
|
||
</div>
|
||
<div class="num common">{{ item.synopsis }}</div>
|
||
<div class="info flexBetween common" >
|
||
<div class="time">{{ item.pushTime }}</div>
|
||
<span style="color: red;font-size: 14px;margin-right: 8px" :class="item.alreadyRead===1 ? 'alRead' : ''">{{ item.alreadyRead===1 ? '已处理' : '未处理' }}</span>
|
||
</div>
|
||
</div>
|
||
</van-pull-refresh>
|
||
</div>
|
||
<div class="empty" v-show="showEmpty">
|
||
<img src="@/assets/empty.png" />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {myMixins} from "@/utils/myMixins"
|
||
import {getTrainingList} from "@/api/mine"
|
||
import {timeFormat} from "@/utils/common";
|
||
export default {
|
||
name: "diverTrainDocment",
|
||
computed: {
|
||
},
|
||
mixins:[myMixins],
|
||
data(){
|
||
return{
|
||
tabArr: [{name: '全部文档', status: 1,count:0}, {name: '已培训', status:2,count:0},{name: '未培训', status: 3,count:0}],
|
||
// tabArr: [{name: '车型技术参数', status: 1}, {name: '中道服务规范', status:2},{name: '中道小课堂', status: 3}],
|
||
activeIndex: 0,
|
||
pageList:[],
|
||
totalList:[],
|
||
numInfo:'',
|
||
keyword:'',
|
||
serviceTypeName:'',
|
||
show:false,
|
||
showEmpty:false,
|
||
isLoading:false,
|
||
driverId:'',
|
||
time:'',
|
||
}
|
||
},
|
||
mounted() {
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
this.driverId = urlParams.get('driverId');
|
||
this.time=timeFormat(Date.now())
|
||
this.keyword=urlParams.get('keyword') || ''
|
||
this.serviceTypeName=urlParams.get('serviceTypeName') || ''
|
||
this.getTrainingList();
|
||
document.addEventListener('visibilitychange', async ( ) => {
|
||
let state = document.visibilityState
|
||
if (state == 'hidden') { // 用户离开了
|
||
}
|
||
if (state == 'visible') {
|
||
this.getTrainingList();
|
||
}
|
||
});
|
||
},
|
||
methods:{
|
||
initShow(){
|
||
this.keyword= ''
|
||
this.getTrainingList()
|
||
},
|
||
onRefresh() {
|
||
this.getTrainingList()
|
||
setTimeout(() => {
|
||
this.$toast('刷新成功');
|
||
this.isLoading = false;
|
||
}, 1000);
|
||
},
|
||
async changeTab(index) {
|
||
this.activeIndex = index
|
||
await this.getTrainingList()
|
||
},
|
||
async getTrainingList(){
|
||
let res= await getTrainingList({
|
||
type:1,
|
||
id:this.driverId,
|
||
text:this.keyword || '',
|
||
serviceTypeName:this.serviceTypeName || ''
|
||
})
|
||
this.totalList=[]
|
||
this.pageList=[]
|
||
this.tabArr[0].count=0
|
||
this.tabArr[1].count=0
|
||
this.tabArr[2].count=0
|
||
this.numInfo=res.data
|
||
if(res.data.totalNum){
|
||
this.tabArr[0].count=res.data.totalNum
|
||
}
|
||
if(res.data.readNum){
|
||
this.tabArr[1].count=res.data.readNum
|
||
}
|
||
if(res.data.notReadNum){
|
||
this.tabArr[2].count=res.data.notReadNum
|
||
}
|
||
/* this.totalList=res.data.list
|
||
if(this.activeIndex === 0){
|
||
result=this.totalList?.filter(q => q.title === '车型技术参数');
|
||
}else if(this.activeIndex === 1){
|
||
result=this.totalList?.filter(q => q.title === '中道服务规范');
|
||
}else if(this.activeIndex === 2){
|
||
result=this.totalList?.filter(q => q.title === '中道小课堂');
|
||
}*/
|
||
let result=[]
|
||
this.totalList=res?.data?.list ? res?.data?.list[0]?.materials : []
|
||
if(this.activeIndex === 0){
|
||
result=this.totalList || []
|
||
}else if(this.activeIndex === 1){
|
||
result=this.totalList?.filter(item => item.alreadyRead==1) || []
|
||
}else if(this.activeIndex === 2){
|
||
result=this.totalList?.filter(item => item.alreadyRead!=1) || []
|
||
}
|
||
if(result){
|
||
this.pageList=result
|
||
this.time=timeFormat(Date.now())
|
||
}
|
||
if(this.pageList?.length === 0){
|
||
this.showEmpty = true
|
||
}else {
|
||
this.showEmpty = false
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
@import "@/styles/common.scss";
|
||
@import "@/styles/mixin.scss";
|
||
@import "@/styles/docment.scss";
|
||
@import "@/styles/driverDocment.scss";
|
||
/*::v-deep .van-nav-bar__content{
|
||
background-color: #3A3A3A !important;
|
||
}*/
|
||
.tab_wrap {
|
||
.active:after {
|
||
width: 37px;
|
||
left: 0%;
|
||
transform: translateX(0%);
|
||
}
|
||
.active1:after {
|
||
width:48px !important;
|
||
}
|
||
}
|
||
.read{
|
||
padding: 2px 8px;
|
||
border-radius: 5px;
|
||
border: 1px solid red;
|
||
color: red;
|
||
font-size: 8px;
|
||
}
|
||
.alRead{
|
||
color: #cccccc !important;
|
||
}
|
||
.contentWrap{
|
||
height: calc(100% - 180px) !important;
|
||
}
|
||
</style> |