小程序产品库完成

src/mods/AppAddressBook/AppAddressBook.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="wrapper">
+    <div class="areaSelection">
+      <div class="area">区域选择</div>
+      <div class="select">
+        <ai-area-picker ref="area" class="ai-area" :value="areaId" :name.sync="areaName" :areaId="$areaId"
+                        @select="areaSelect">
+          <div class="ai-area__wrapper">
+            <span class="label" v-if="areaName">{{ areaName }}</span>
+            <span v-else>请选择</span>
+            <u-icon name="arrow-right"></u-icon>
+          </div>
+        </ai-area-picker>
+      </div>
+    </div>
+    <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: '',
+    }
+  },
+  onLoad() {
+    this.userInfo = uni.getStorageSync("userInfo");
+    this.areaId = this.$areaId
+    this.areaName = this.$areaName
+    this.getList();
+  },
+
+  computed: {
+    ...mapState(['user'])
+  },
+
+  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
+        }
+      }).then(res => {
+        if (res?.data) {
+          this.indexList = [...new Set(res.data.records.map(e => e.nameInitials))];
+          this.list = res.data.records;
+        }
+      })
+    },
+    areaSelect(v) {
+      this.areaId = v
+      this.isMore = false
+      this.current = 0
+      this.list = []
+
+      this.$nextTick(() => {
+        this.getList()
+      })
+    },
+  },
+  onPageScroll(e) {
+    this.scrollTop = e.scrollTop;
+  },
+
+}
+</script>
+
+<style lang="scss" scoped>
+.areaSelection {
+  display: flex;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 0 30px;
+  width: 100%;
+  height: 120px;
+  line-height: 120px;
+  background-color: #FFFF;
+
+  .select {
+    text-align: right;
+  }
+}
+
+.item {
+  box-sizing: border-box;
+  padding: 32px 48px;
+  background: #FFFFFF;
+  box-shadow: 0px 0px 8px 0px 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>