supplier-dispatch-h5/src/views/documentView/docmentList.vue

<template>
<div class="wrap">
  <template v-if="supplierId">
    <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="getNormalList"/>
        </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>
  </template>
  <template v-if="driverId">
    <div class="navBar">
      <van-nav-bar
          :border="false"
          :fixed="true"
          :safe-area-inset-top="true"
      >
        <template slot="title">
          <van-field
              v-model="keyword"
              placeholder="名称/关键词/简介"
          >
            <!--          <template #button>
                        <van-icon class="search" name="search" size="20"  @click="getTrainingList"/>
                      </template>-->
          </van-field>
        </template>
        <template slot="left">
          <div class="navLeft">
            <van-icon class="icon" name="arrow-left" />
            <div>返回</div>
          </div>
        </template>
        <template slot="right">
          <van-icon class="search" name="search" size="20"  @click="getNormalList"/>
        </template>
      </van-nav-bar>
    </div>
  </template>
 <div :class="supplierId ? 'tab_wrap' : 'driver_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 }}</div>
        </div>
        <div class="imgWrap">
          <img :src="item.themePicture">
        </div>
        <div class="num common">{{ item.synopsis }}</div>
        <div class="time common">{{ item.pushTime		 }}</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 {getNormalList} from "@/api/mine";
export default {
  name: "docmentList",
  mixins:[myMixins],
  data(){
    return{
      tabArr: [{name: '车型技术参数', status: 1}, {name: '中道服务规范', status:2},{name: '中道小课堂', status: 3}, {name: '新手入列', status: 4},],
      activeIndex: 0,
      pageList:[],
      totalList:[],
      keyword:'',
      isLoading:false,
      show:false,
      showEmpty:false,
      supplierId:'',
      driverId:'',
    }
  },
  mounted() {
    const urlParams = new URLSearchParams(window.location.search);
    this.supplierId = urlParams.get('supplierId');
    this.driverId = urlParams.get('driverId');
    this.getNormalList()
  },
  methods:{
    onRefresh() {
      this.getNormalList()
      setTimeout(() => {
        this.$toast('刷新成功');
        this.isLoading = false;
      }, 1000);
    },
   async changeTab(index) {
    this.activeIndex = index
    await this.getNormalList()
  },
    async getNormalList(){
      let res= await getNormalList({
        type:this.supplierId ? 2 : 1,
        // type:2,
        id: this.supplierId ? this.supplierId : this.driverId,
        // 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 === '中道小课堂');
      }else if(this.activeIndex === 3){
        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.getNormalList()
    }
}
}
</script>

<style scoped lang="scss">
@import "@/styles/common.scss";
@import "@/styles/mixin.scss";
@import "@/styles/docment.scss";
@import "@/styles/driverDocment.scss";

</style>