增加全部/个人页签

src/saas/AppMailList/AppMailList.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="AppMailList">
     <AiTopFixed>
-      <u-search v-model="keyword" :clearabled="false" placeholder="请输入名称、类型或电话" :show-action="false" bg-color="#F5F5F5" search-icon-color="#999" color="#666" @search="getList"></u-search>
+      <u-search v-model="keyword" :clearabled="false" placeholder="请输入名称、类型或电话" :show-action="false" bg-color="#F5F5F5"
+                search-icon-color="#999" color="#666" @search="getList"></u-search>
+      <u-tabs :list="tabs" :current="currentTab" @change="handleCurrentTab"/>
     </AiTopFixed>
     <div class="list-content">
       <u-index-list :scrollTop="scrollTop" :index-list="indexList">
@@ -32,6 +34,7 @@
 
 <script>
 import {mapState} from 'vuex'
+
 export default {
   name: "AppMailList",
   appName: "电话簿",
@@ -44,27 +47,38 @@ export default {
       list: [],
       indexList: [],
       keyword: '',
+      currentTab: 0
     }
   },
-  computed: { ...mapState(['user']) },
-  mounted() {
-    this.getList()
-    uni.$on('updateList', () => {
-      this.getList()
-    })
+  computed: {
+    ...mapState(['user']),
+    tabs() {
+      return [
+        {name: "全部", search: {isPublic: 1}},
+        {name: "个人", search: {isPublic: 0, createUserId: this.user.id}}
+      ]
+    },
+    currentSearch() {
+      return this.tabs?.[this.currentTab]?.search || {}
+    }
   },
   onShow() {
     document.title = "电话簿"
+    this.getList()
   },
 
   methods: {
+    handleCurrentTab(i) {
+      this.currentTab = i
+      this.getList()
+    },
     callPhone(phone) {
       uni.makePhoneCall({phoneNumber: phone})
     },
     getList() {
       this.$http.post(`/app/appconvenientaddressbook/list`, null, {
         params: {
-          isPublic: 1,
+          ...this.currentSearch,
           resource: "portal",
           size: 999,
           name: this.keyword
@@ -97,6 +111,7 @@ export default {
   ::v-deep .fixed {
     z-index: 9999;
   }
+
   .header-top {
     display: flex;
     background: #fff;
@@ -104,6 +119,7 @@ export default {
     align-items: center;
     padding-top: 16px;
   }
+
   // background-color: #F3F6F9;
   .list-content {
     padding-bottom: 112px;
@@ -118,14 +134,17 @@ export default {
     .item {
       position: relative;
     }
+
     .phone-list {
       background-color: #fff;
       width: 100%;
+
       .item-info {
         width: 680px;
         padding: 32px 48px;
         box-sizing: border-box;
         box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
+
         p {
           font-size: 32px;
           font-family: PingFangSC-Medium, PingFang SC;
@@ -136,6 +155,7 @@ export default {
           margin-bottom: 8px;
           width: 100%;
         }
+
         .phone {
           font-size: 26px;
           font-family: PingFangSC-Regular, PingFang SC;
@@ -143,6 +163,7 @@ export default {
           line-height: 36px;
           width: 100%;
           word-break: break-all;
+
           span {
             display: inline-block;
             margin-right: 16px;
@@ -152,6 +173,7 @@ export default {
       }
     }
   }
+
   .footer-btn {
     width: 100%;
     text-align: center;
@@ -168,9 +190,11 @@ export default {
     color: #FFF;
     z-index: 999;
   }
+
   ::v-deep .u-index-anchor {
     top: 0 !important;
   }
+
   .phone-icon {
     width: 40px;
     height: 40px;
@@ -183,6 +207,7 @@ export default {
   ::v-deep .u-search {
     margin-bottom: 0 !important;
   }
+
   .addBtn {
     width: 96px;
     height: 96px;