CRM_25-12-09#story#7484,供应商培训材料问答编辑优化--敖煜

src/views/documentView/trainDocment.vue

@@ -22,9 +22,9 @@
     </van-nav-bar>
   </div>
   <div class="tab_wrap">
-    <div v-for="(item, index) in tabArr" :key="index" :class="{'active' : activeIndex == index}"
+    <div v-for="(item, index) in tabArr" :key="index" :class="{'active' : activeIndex == index,'active1':activeIndex==0}"
          @click="changeTab(index)">
-      {{ item.name }}
+      {{ item.name }}<span v-if="item.count" :class="{'commonNum':true,'notFinish':index==2}">{{item.count}}</span>
     </div>
   </div>
   <div class="contentWrap" v-show="!showEmpty">
@@ -61,7 +61,7 @@ export default {
   mixins:[myMixins],
   data(){
     return{
-      tabArr: [{name: '车型技术参数', status: 1}, {name: '中道服务规范', status:2},{name: '中道小课堂', status: 3}],
+      tabArr: [{name: '全部文档', status: 1,count:0}, {name: '已培训', status:2,count:0},{name: '未培训', status: 3,count:0}],
       activeIndex: 0,
       pageNum:1,
       pageSize:10,
@@ -73,6 +73,7 @@ export default {
       showEmpty:false,
       isLoading:false,
       supplierId:'',
+      numInfo:'',
     }
   },
   mounted() {
@@ -111,17 +112,31 @@ export default {
       })
       this.totalList=[]
       this.pageList=[]
-      this.totalList=res.data.list
+      this.totalList=res?.data?.list ? res?.data?.list[0]?.materials : []
+      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
+      }
+      console.log(' this.totalList',this.totalList)
       let result=[]
       if(this.activeIndex === 0){
-        result=this.totalList?.filter(q => q.title === '车型技术参数');
+        result=this.totalList || []
+        // result=this.totalList?.filter(q => q.title === '车型技术参数');
       }else if(this.activeIndex === 1){
-        result=this.totalList?.filter(q => q.title === '中道服务规范');
+        // result=this.totalList?.filter(q => q.title === '中道服务规范');
+        result=this.totalList?.filter(item => item.alreadyRead==1) || []
       }else if(this.activeIndex === 2){
-        result=this.totalList?.filter(q => q.title === '中道小课堂');
+        result=this.totalList?.filter(item => item.alreadyRead!=1) || []
+        // result=this.totalList?.filter(q => q.title === '中道小课堂');
       }
       if(result){
-        this.pageList=result[0].materials
+        this.pageList=result
       }
       if(this.pageList?.length === 0){
         this.showEmpty  = true
@@ -140,6 +155,16 @@ export default {
 @import "@/styles/common.scss";
 @import "@/styles/mixin.scss";
 @import "@/styles/docment.scss";
+.tab_wrap {
+  .active:after {
+    width: 37px;
+    left: 0%;
+    transform: translateX(0%);
+  }
+  .active1:after {
+    width:48px !important;
+  }
+}
 .read{
   padding: 2px 8px;
   border-radius: 5px;