文档资料，培训文档模块

src/views/documentView/trainDocment.vue

@@ -2,7 +2,6 @@
 <div class="wrap">
   <div class="navBar">
     <van-nav-bar
-        title="培训文档 "
         left-arrow
         left-arrow-color="#FFFFFF"
         :border="false"
@@ -10,32 +9,42 @@
         :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"   @keyup.enter="getList"/>
+      </template>
       <template slot="right">
-        <div class="rightWrap">
-          <img src="@/assets/serach.png" class="img2"/>
+        <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="contentWrap">
-        <div class="itemWrap">
+
+  <div class="contentWrap" v-show="!showEmpty">
+        <div class="itemWrap" v-for="(item,index) in  pageList" :key="index">
             <div class="info flexBetween common">
-              <div class="title">会记回家和</div>
-              <div class="time">2023-08-24 13:14:00</div>
+              <div class="title">{{ item.pushUser }}</div>
+              <div class="time">{{ item.pushTime }}</div>
             </div>
            <div class="imgWrap">
-             <img src="@/assets/empty.png">
+             <img :src="item.themePicture">
+             <div class="name">{{item.name}}</div>
            </div>
-           <div class="num common">111</div>
+           <div class="num common">{{ item.synopsis }}</div>
             <div class="doc flexBetween common">
-              <div class="left">培训材料</div>
+              <div class="left">{{ item.docType?.label }}</div>
               <div class="right">
-                <span style="color: red;font-size: 14px;margin-right: 8px">未处理</span>
-                <span style="opacity: .9;color: #ccc">阅读8</span>
+                <span style="color: red;font-size: 14px;margin-right: 8px">{{ item.listShowButton==null ? '已处理' :  '未处理' }}</span>
+                <span style="opacity: .9;color: #ccc">阅读  {{item.readCount}}</span>
               </div>
             </div>
         </div>
   </div>
+  <div class="empty" style="display: flex;justify-content: center;align-items: center;height:calc(100% - 46px);background-color: #FAFAFA" v-show="showEmpty">
+    <img src="@/assets/empty.png"  style="width: 100%"/>
+  </div>
 </div>
 </template>
 
@@ -44,26 +53,45 @@ import {myMixins} from "@/utils/myMixins"
 import {pageList} from  "@/api/mine"
 export default {
   name: "trainDocment",
+  computed: {
+  },
   mixins:[myMixins],
   data(){
     return{
       pageNum:1,
-      pageSize:10
+      pageSize:10,
+      pageList:[],
+      keyword:'',
+      show:false,
+      showEmpty:false
     }
   },
   mounted() {
-    this.getList()
+    this.getList();
   },
   methods:{
+    // handleEnterKey() {
+    //   this.getList()
+    // },
     async getList(){
       let res= await pageList({
         pageNum:this.pageNum,
         pageSize:this.pageSize,
-        userId:54585,
-        docType:2
+        docType:1,
+        keyword:this.keyword || ''
       })
+      this.pageList=res.data;
+      if(res.data.length === 0){
+        this.showEmpty  = true
+      }else {
+        this.showEmpty = false
+      }
       console.log(res)
 
+    },
+    initShow(){
+      this.keyword= '',
+          this.getList()
     }
   }
 }
@@ -92,7 +120,7 @@ export default {
   width: 100%;
   box-sizing: border-box;
   .itemWrap{
-    margin-top: 56px;
+    margin-bottom: 16px;
     @include wh(100%, 300px);
     background: #FFFFFF;
     box-shadow: 0px 2px 10px 0px rgba(216, 216, 216, 0.5);
@@ -111,11 +139,20 @@ export default {
     .imgWrap{
       width: 100%;
       height: 200px;
+      position: relative;
       //background-color: #6C81CD;
       img{
         width: 100%;
         height: 200px;
       }
+      .name{
+        position: absolute;
+        left: 30px;
+        bottom: 30px;
+        font-size: 14px;
+        font-weight: 500;
+        color: #FFFFFF;
+      }
     }
     .left{
       color: red;