便民通讯录地区选择

src/apps/AppMailList/AppMailList.vue

@@ -1,5 +1,15 @@
 <template>
   <div class="AppMailList">
+    <AiTopFixed>
+      <div class="area-content">
+        <AiAreaPicker :areaId="user.areaId" :value="areaId" @select="areaSelect" :name.sync="areaName">
+          <img src="./img/local-icon.png" alt="">
+          <span class="label" v-if="areaName">{{ areaName }}</span>
+          <span v-else>请选择</span>
+          <u-icon name="arrow-down" color="#666" size="24"/>
+        </AiAreaPicker>
+      </div>
+    </AiTopFixed>
     <div class="list-content">
       <u-index-list :scrollTop="scrollTop" :index-list="indexList">
         <div v-for="(letter, index) in indexList" :key="index">
@@ -41,11 +51,15 @@ export default {
     return {
       scrollTop: 0,
       list: [],
-      indexList: []
+      indexList: [],
+      areaId: '',
+      areaName: ''
     }
   },
   computed: { ...mapState(['user']) },
   mounted() {
+    this.areaId = this.user.areaId
+    this.areaName = this.user.areaName
     this.getList()
     uni.$on('updateList', () => {
       this.getList()
@@ -56,13 +70,17 @@ export default {
   },
 
   methods: {
+    areaSelect(e) {
+      this.areaId = e
+      this.getList()
+    },
     callPhone(phone) {
       uni.makePhoneCall({phoneNumber: phone})
     },
     getList() {
       this.$http.post(`/app/appconvenientaddressbook/list`, null, {
         params: {
-          areaId: this.user.areaId,
+          areaId: this.areaId,
           isPublic: 1,
           resource: "portal",
           size: 999
@@ -89,6 +107,23 @@ export default {
 
 <style lang="scss" scoped>
 .AppMailList {
+  ::v-deep .fixed{
+    z-index: 9999;
+  }
+  .area-content {
+    width: 100%;
+    line-height: 64px;
+
+    img {
+      width: 42px;
+      vertical-align: middle;
+      margin-right: 16px;
+    }
+
+    .u-icon {
+      margin-left: 6px;
+    }
+  }
   // background-color: #F3F6F9;
   .list-content{
     padding-bottom: 112px;