增加全部/个人页签

src/saas/AppMailList/AppMailList.vue

@@ -1,28 +1,30 @@
 <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">
         <div v-for="(letter, index) in indexList" :key="index">
           <u-index-anchor :index="letter"/>
           <div class="item" v-for="(item, index) in list.filter(e=>e.nameInitials==letter)" :key="index">
-            <div class="title">{{item.label}}</div>
+            <div class="title">{{ item.label }}</div>
             <div class="phone-list">
               <div class="item-info">
-                <p>{{item.name}}</p>
+                <p>{{ item.name }}</p>
                 <div class="phone">
-                  <span>{{item.type}}</span>{{item.phone}}
+                  <span>{{ item.type }}</span>{{ item.phone }}
                 </div>
               </div>
             </div>
-            <img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone(item.phone)"  class="phone-icon" >
+            <img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone(item.phone)" class="phone-icon">
           </div>
         </div>
       </u-index-list>
     </div>
-    <AiEmpty v-if="!list.length" :noPermit="true" />
+    <AiEmpty v-if="!list.length" :noPermit="true"/>
     <div class="footer-btn" @click="toAddList">我添加的</div>
     <AiFixedBtn>
       <div class="addBtn iconfont iconfont-iconfangda" @tap="gotoAdd()"/>
@@ -31,7 +33,8 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import {mapState} from 'vuex'
+
 export default {
   name: "AppMailList",
   appName: "电话簿",
@@ -44,34 +47,45 @@ 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
         }
       }).then(res => {
         if (res.code == 0) {
-          this.indexList = [...new Set(res.data.records.map(e=>e.nameInitials))];
+          this.indexList = [...new Set(res.data.records.map(e => e.nameInitials))];
           this.list = res.data.records;
         }
       })
@@ -83,7 +97,7 @@ export default {
       uni.navigateTo({url: `./myAddList`})
     },
     gotoAdd() {
-      uni.navigateTo({ url: './add' })
+      uni.navigateTo({url: './add'})
     }
   },
   onPageScroll(e) {
@@ -94,9 +108,10 @@ export default {
 
 <style lang="scss" scoped>
 .AppMailList {
-  ::v-deep .fixed{
+  ::v-deep .fixed {
     z-index: 9999;
   }
+
   .header-top {
     display: flex;
     background: #fff;
@@ -104,8 +119,9 @@ export default {
     align-items: center;
     padding-top: 16px;
   }
+
   // background-color: #F3F6F9;
-  .list-content{
+  .list-content {
     padding-bottom: 112px;
     // .title{
     //   padding-left: 48px;
@@ -115,18 +131,21 @@ export default {
     //   font-weight: 600;
     //   color: #999;
     // }
-    .item{
+    .item {
       position: relative;
     }
-    .phone-list{
+
+    .phone-list {
       background-color: #fff;
       width: 100%;
-      .item-info{
+
+      .item-info {
         width: 680px;
         padding: 32px 48px;
         box-sizing: border-box;
         box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
-        p{
+
+        p {
           font-size: 32px;
           font-family: PingFangSC-Medium, PingFang SC;
           font-weight: 500;
@@ -136,14 +155,16 @@ export default {
           margin-bottom: 8px;
           width: 100%;
         }
-        .phone{
+
+        .phone {
           font-size: 26px;
           font-family: PingFangSC-Regular, PingFang SC;
           color: #333;
           line-height: 36px;
           width: 100%;
           word-break: break-all;
-          span{
+
+          span {
             display: inline-block;
             margin-right: 16px;
             color: #999;
@@ -152,7 +173,8 @@ export default {
       }
     }
   }
-  .footer-btn{
+
+  .footer-btn {
     width: 100%;
     text-align: center;
     height: 112px;
@@ -168,10 +190,12 @@ export default {
     color: #FFF;
     z-index: 999;
   }
+
   ::v-deep .u-index-anchor {
-    top: 0!important;
+    top: 0 !important;
   }
-  .phone-icon{
+
+  .phone-icon {
     width: 40px;
     height: 40px;
     vertical-align: sub;
@@ -180,9 +204,10 @@ export default {
     right: 64px;
   }
 
-  ::v-deep .u-search{
-    margin-bottom: 0!important;
+  ::v-deep .u-search {
+    margin-bottom: 0 !important;
   }
+
   .addBtn {
     width: 96px;
     height: 96px;