tabs修复

src/apps/AppUniMsg/AppUniMsg.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="AppUniMsg">
+    <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
+
     <template v-if="datas.length > 0">
       <AiCard v-for="(item, i) in datas" :key="i" @click.native="toAdd(item, 1)">
         <template #custom>
@@ -7,15 +9,17 @@
             {{ item.title }}
           </div>
 
-          <div class="titles">
-            <span>发布部门</span>
+          <div class="publishUnitNames">
+            <span>发布部门：</span>
             <span>{{ item.publishUnitName }}</span>
           </div>
 
-          <div class="titles">
-            <span>发布时间</span>
+          <div class="createTimes">
+            <span>发布时间：</span>
             <span>{{ item.createTime }}</span>
           </div>
+
+          <img :src="items.url" alt="" v-for="(items, i) in item.images" :key="i" />
         </template>
 
         <template #menu>
@@ -38,6 +42,8 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   name: 'AppUniMsg',
   appName: '小程序公告',
@@ -50,9 +56,20 @@ export default {
       size: 10,
       deletShow: false,
       deletId: '',
+      tabList: [
+        {
+          name: '全部公告',
+        },
+        {
+          name: '我的发布',
+        },
+      ],
+      currentTabs: 0,
     }
   },
   computed: {
+    ...mapState(['user']),
+
     loadmore() {
       return this.pages <= this.current ? 'loading ' : 'nomore'
     },
@@ -69,11 +86,21 @@ export default {
           params: {
             size: this.size,
             current: this.current,
+            createUserId: this.currentTabs == 1 ? this.user.id : '',
           },
         })
         .then((res) => {
           if (res.code == 0) {
             this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
+            if (this.datas) {
+              this.datas.map((item) => {
+                if (item.images) {
+                  item.images = JSON.parse(item.images || '[]')
+                }
+                return item
+              })
+            }
+
             this.pages = res.data.pages
           }
         })
@@ -108,6 +135,11 @@ export default {
         }
       })
     },
+
+    change(index) {
+      this.currentTabs = index
+      this.getList()
+    },
   },
   onReachBottom() {
     this.current = this.current + 1
@@ -125,6 +157,21 @@ export default {
       background: #fff;
       padding: 32px;
       border-radius: 16px;
+      .fill {
+        .titles {
+          font-size: 30px;
+          color: #333;
+          font-family: 500;
+        }
+        img {
+          width: 200px;
+          height: 200px;
+          margin-right: 8px;
+        }
+        img:nth-child(3n) {
+          margin-right: 0;
+        }
+      }
     }
     .mask {
       .moreMenu {