小程序目录调整完成

src/mods/conv/AppAddressBook/AppAddressBook.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="wrapper">
+    <div class="searAreName">
+      <AiAreaPicker ref="area" class="ai-area" v-model="areaId" :name.sync="areaName" :areaId="$areaId" @input="areaSelect" >
+        <div class="ai-area__wrapper">
+          <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>
+        </div>
+      </AiAreaPicker>
+      <!-- <span v-else>{{ areaName }}</span> -->
+
+      <u-search v-model="name" ref="searchObj" placeholder="请输入名称/类型/电话" :show-action="false" clearabled bg-color="#F5F5F5" search-icon-color="#ccc" placeholder-color="#666" @search="handerSearch" @clear=";(index = []), (name = ''), getList()" style="width: 70%" />
+    </div>
+
+    <!-- <AiTopFixed>
+      <div class="searchObj">
+        <u-search v-model="name" ref="searchObj" placeholder="请输入姓名或电话" :show-action="false" clearabled bg-color="#F5F7F9" search-icon-color="#6AA8F8" placeholder-color="#D0D4D4" @search="handerSearch" @clear=";(index = []), (name = ''), getList()" />
+      </div>
+    </AiTopFixed> -->
+
+    <template v-if="list.length">
+      <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" hover-class="bg-hover" @click="phone(item)" v-for="(item, index) in list.filter((e) => e.nameInitials == letter)" :key="index">
+            <label>{{ item.name }}</label>
+            <div class="info">
+              {{ item.type }}<span>{{ item.phone }}</span>
+            </div>
+          </div>
+        </div>
+      </u-index-list>
+    </template>
+
+    <AiEmpty v-else></AiEmpty>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'AppAddressBook',
+  appName: '便民通讯录',
+  data() {
+    return {
+      scrollTop: 0,
+      indexList: [],
+      list: [],
+      userInfo: {},
+      areaId: '',
+      $areaId: '',
+      areaName: '',
+      name: '',
+    }
+  },
+  onLoad() {
+    this.userInfo = uni.getStorageSync('userInfo')
+    this.areaId = this.$areaId
+    this.areaName = this.$areaName
+    this.getList()
+  },
+
+  computed: {
+    ...mapState(['user']),
+  },
+  watch: {},
+  methods: {
+    phone({ phone: phoneNumber }) {
+      uni.makePhoneCall({ phoneNumber })
+    },
+    getList() {
+      this.$instance
+        .post('/app/appconvenientaddressbook/list', null, {
+          params: {
+            isPublic: 1,
+            resource: 'portal',
+            areaId: this.areaId,
+            size: 999,
+            name: this.name,
+          },
+        })
+        .then((res) => {
+          if (res?.data) {
+            this.indexList = [...new Set(res.data.records.map((e) => e.nameInitials))]
+            this.list = res.data.records
+          }
+        })
+    },
+    areaSelect(v) {
+      if(this.user.status == 2 ) {
+        this.areaId = v
+        this.isMore = false
+        this.current = 0
+        this.list = []
+      } else {
+        return false
+      }
+      this.$nextTick(() => {
+        this.getList()
+      })
+    },
+
+    handerSearch(e) {
+      this.name = e
+      this.getList()
+    },
+  },
+  onPageScroll(e) {
+    this.scrollTop = e.scrollTop
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  .searAreName {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24px 32px;
+    background: #fff;
+  }
+
+  ::v-deep .AiTopFixed {
+    width: 100%;
+    .placeholder {
+      opacity: 1;
+      visibility: inherit;
+      .content {
+        padding: 0 !important;
+      }
+    }
+    .fixed {
+      width: 0;
+      margin: 0 !important;
+      .content {
+        padding: 0 !important;
+      }
+    }
+  }
+  .searchObj {
+    padding: 24px 32px;
+    background: #fff;
+  }
+}
+
+.item {
+  box-sizing: border-box;
+  padding: 32px 48px;
+  background: #ffffff;
+  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
+
+  & > label {
+    font-size: 32px;
+    font-weight: 600;
+    color: #333333;
+    line-height: 44px;
+  }
+
+  .info {
+    display: flex;
+    align-items: center;
+    font-size: 26px;
+    color: #999999;
+    margin-top: 8px;
+
+    & > span {
+      color: #333333;
+      margin-left: 16px;
+    }
+  }
+}
+</style>