bug

src/apps/AppMailList/AppMailList.vue

@@ -1,45 +1,164 @@
 <template>
   <div class="AppMailList">
-    <component
-      :is="component"
-      @change="onChange"
-      :params="params">
-    </component>
+    <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)">
+            <div class="title">{{item.label}}</div>
+            <div class="phone-list">
+              <div class="item-info">
+                <p>{{item.name}}</p>
+                <div class="phone">
+                  <span>{{item.type}}</span>{{item.phone}}
+                </div>
+              </div>
+            </div>
+            <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"/>
+    <!-- <div class="id-list">
+      <div class="item" v-for="(item, index) in list" :key="index">
+        <u-index-anchor :index="item.label" />
+      </div>
+    </div> -->
+    <div class="footer-btn" @click="toAddList">我添加的</div>
   </div>
 </template>
 
 <script>
-import Add from './add'
-import List from './list'
-import MyAddList from './myAddList'
-
+import { mapState } from 'vuex'
 export default {
-  name: 'AppMailList',
-  appName: '便民通讯录',
-
+  name: "AppMailList",
+  appName: "便民通讯录",
+  inject: {
+    root: {}
+  },
   data() {
     return {
-      component: 'List',
-      params: {}
+      scrollTop: 0,
+      list: [],
+      indexList: []
     }
   },
-
-  components: { Add, List , MyAddList},
+  computed: { ...mapState(['user']) },
+  mounted() {
+    this.getList()
+    document.title = '便民通讯录'
+  },
 
   methods: {
-    onChange(e) {
-      this.params = e.params
-      this.component = e.type
-    }
+    callPhone(phone) {
+      uni.makePhoneCall({phoneNumber: phone})
+    },
+    getList() {
+      this.$http.post(`/app/appconvenientaddressbook/list`, null, {
+        params: {
+          areaId: this.user.areaId,
+          isPublic: 1,
+          resource: "portal",
+          size: 999
+        }
+      }).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`})
+    },
   },
+  onPageScroll(e) {
+    this.scrollTop = e.scrollTop;
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-uni-page-body{
-  height: 100%;
-}
-.AppMailList{
-  height: 100%;
+.AppMailList {
+  background-color: #F3F6F9;
+  .list-content{
+    padding-bottom: 112px;
+    // .title{
+    //   padding-left: 48px;
+    //   line-height: 64px;
+    //   font-size: 26px;
+    //   font-family: PingFangSC-Semibold, PingFang SC;
+    //   font-weight: 600;
+    //   color: #999;
+    // }
+    .item{
+      position: relative;
+    }
+    .phone-list{
+      background-color: #fff;
+      width: 100%;
+      .item-info{
+        width: 680px;
+        padding: 32px 48px;
+        box-sizing: border-box;
+        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.02);
+        p{
+          font-size: 32px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #333;
+          line-height: 44px;
+          word-break: break-all;
+          margin-bottom: 8px;
+          width: 100%;
+          word-break: break-all;
+        }
+        .phone{
+          font-size: 26px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #333;
+          line-height: 36px;
+          width: 100%;
+          word-break: break-all;
+          span{
+            display: inline-block;
+            margin-right: 16px;
+            color: #999;
+          }
+        }
+      }
+    }
+  }
+  .footer-btn{
+    width: 100%;
+    text-align: center;
+    height: 112px;
+    line-height: 112px;
+    background: #3975C6;
+    box-shadow: 0px 1px 0px 0px #EEEEEE;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFF;
+    z-index: 999;
+  }
+  ::v-deep .u-index-anchor  {
+    top: 0!important;
+  }
+  .phone-icon{
+    width: 40px;
+    height: 40px;
+    vertical-align: sub;
+    position: absolute;
+    top: 60px;
+    right: 64px;
+  } 
 }
 </style>

src/apps/AppMailList/list.vue

@@ -72,6 +72,9 @@ export default {
       uni.navigateTo({url: `./myAddList`})
     },
   },
+  onPageScroll(e) {
+    this.scrollTop = e.scrollTop;
+  }
 }
 </script>