142 lines
4.1 KiB
Vue
142 lines
4.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="tab_wrap">
|
|
<div v-for="(item, index) in tabArr" :key="index" :class="{'active' : activeIndex == index}"
|
|
@click="changeTab(index)">
|
|
{{ 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 class="time">{{ item.pushTime }}</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"
|
|
export default {
|
|
name: "trainDocment",
|
|
computed: {
|
|
},
|
|
mixins:[myMixins],
|
|
data(){
|
|
return{
|
|
tabArr: [{name: '车型技术参数', status: 1}, {name: '中道服务规范', status:2},{name: '中道小课堂', status: 3}],
|
|
activeIndex: 0,
|
|
pageNum:1,
|
|
pageSize:10,
|
|
pageList:[],
|
|
totalList:[],
|
|
keyword:'',
|
|
show:false,
|
|
showEmpty:false,
|
|
isLoading:false,
|
|
supplierId:'',
|
|
}
|
|
},
|
|
mounted() {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
this.supplierId = urlParams.get('supplierId');
|
|
// this.$toast(this.supplierId);
|
|
this.getTrainingList();
|
|
},
|
|
methods:{
|
|
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:2,
|
|
id:this.supplierId,//33041,
|
|
text:this.keyword || '',
|
|
})
|
|
this.totalList=[]
|
|
this.pageList=[]
|
|
this.totalList=res.data.list
|
|
let result=[]
|
|
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 === '中道小课堂');
|
|
}
|
|
if(result){
|
|
this.pageList=result[0].materials
|
|
}
|
|
if(this.pageList?.length === 0){
|
|
this.showEmpty = true
|
|
}else {
|
|
this.showEmpty = false
|
|
}
|
|
},
|
|
initShow(){
|
|
this.keyword= '',
|
|
this.getTrainingList()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
@import "@/styles/common.scss";
|
|
@import "@/styles/mixin.scss";
|
|
@import "@/styles/docment.scss";
|
|
.read{
|
|
padding: 2px 8px;
|
|
border-radius: 5px;
|
|
border: 1px solid red;
|
|
color: red;
|
|
font-size: 8px;
|
|
}
|
|
.alRead{
|
|
color: #cccccc !important;
|
|
}
|
|
</style> |