27668

src/apps/AppMailList/AppMailList.vue

@@ -14,7 +14,7 @@
           <AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="areaSelect" :name.sync="areaName">
             <span class="label" v-if="areaName">{{ areaName }}</span>
             <span v-else>请选择</span>
-            <u-icon name="arrow-down" color="#666" size="24" style="margin-left:4px;" />
+            <u-icon name="arrow-down" color="#666" size="24" style="margin-left: 4px" />
           </AiAreaPicker>
         </div>
 
@@ -24,23 +24,24 @@
     <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>
+          <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="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"/>
+    <AiEmpty v-if="!list.length" />
     <!-- <div class="id-list">
       <div class="item" v-for="(item, index) in list" :key="index">
         <u-index-anchor :index="item.label" />
@@ -53,10 +54,10 @@
 <script>
 import { mapState } from 'vuex'
 export default {
-  name: "AppMailList",
-  appName: "便民通讯录",
+  name: 'AppMailList',
+  appName: '便民通讯录',
   inject: {
-    root: {}
+    root: {},
   },
   data() {
     return {
@@ -65,7 +66,7 @@ export default {
       indexList: [],
       areaId: '',
       areaName: '',
-      keyword: ''
+      keyword: '',
     }
   },
   computed: { ...mapState(['user']) },
@@ -78,7 +79,7 @@ export default {
     })
   },
   onShow() {
-    document.title = "便民通讯录"
+    document.title = '便民通讯录'
   },
 
   methods: {
@@ -87,44 +88,46 @@ export default {
       this.getList()
     },
     callPhone(phone) {
-      uni.makePhoneCall({phoneNumber: phone})
+      uni.makePhoneCall({ phoneNumber: phone })
     },
     handerClear() {
       this.keyword = ''
       this.getList()
     },
     getList() {
-      this.$http.post(`/app/appconvenientaddressbook/list`, null, {
-        params: {
-          areaId: this.areaId,
-          isPublic: 1,
-          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.list = res.data.records;
-        }
-      })
+      this.$http
+        .post(`/app/appconvenientaddressbook/list`, null, {
+          params: {
+            areaId: this.areaId,
+            isPublic: 1,
+            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.list = res.data.records
+          }
+        })
     },
     toAddList() {
       // this.$emit('change', {
       //   type: 'MyAddList',
       // })
-      uni.navigateTo({url: `./myAddList`})
+      uni.navigateTo({ url: `./myAddList` })
     },
   },
   onPageScroll(e) {
-    this.scrollTop = e.scrollTop;
-  }
+    this.scrollTop = e.scrollTop
+  },
 }
 </script>
 
 <style lang="scss" scoped>
 .AppMailList {
-  ::v-deep .fixed{
+  ::v-deep .fixed {
     z-index: 9999;
   }
   .header-top {
@@ -135,7 +138,7 @@ export default {
     padding-top: 16px;
   }
   // background-color: #F3F6F9;
-  .list-content{
+  .list-content {
     padding-bottom: 112px;
     // .title{
     //   padding-left: 48px;
@@ -145,18 +148,18 @@ 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;
@@ -166,14 +169,14 @@ 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;
@@ -182,26 +185,26 @@ export default {
       }
     }
   }
-  .footer-btn{
+  .footer-btn {
     width: 100%;
     text-align: center;
     height: 112px;
     line-height: 112px;
-    background: #3975C6;
-    box-shadow: 0 1px 0 0 #EEEEEE;
+    background: #3975c6;
+    box-shadow: 0 1px 0 0 #eeeeee;
     position: fixed;
     bottom: 0;
     left: 0;
     font-size: 32px;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
-    color: #FFF;
+    color: #fff;
     z-index: 999;
   }
-  ::v-deep .u-index-anchor  {
-    top: 0!important;
+  ::v-deep .u-index-anchor {
+    top: 0 !important;
   }
-  .phone-icon{
+  .phone-icon {
     width: 40px;
     height: 40px;
     vertical-align: sub;
@@ -224,8 +227,8 @@ export default {
       }
     }
   }
-  ::v-deep  .u-search{
-    margin-bottom: 0!important;
+  ::v-deep .u-search {
+    margin-bottom: 0 !important;
   }
 }
 </style>