小程序：通讯录的实现

<template>
  <!-- 通讯录 -->
  <view class="address-book">
    <view class="address-book-header">
      <x-nav-bar input title="通讯录" @onInputChange="onChange"></x-nav-bar>
    </view>
    <view class="address-book-main">
      <template v-if="resultList.length != 0">
        <view class="main-list">
          <x-phone
            type="3"
            :phoneList="resultList"
            :isCheckbox="false"
            :searchValue="searchValue"
          ></x-phone>
        </view>
      </template>
      <template v-else>
        <x-no-data v-if="!isLoad"></x-no-data>
      </template>
      <template>
        <view class="main-load" v-if="isLoad">
          <u-loading mode="circle"></u-loading>
        </view>
      </template>
    </view>
    <view class="address-book-tab">
      <x-nav-tab></x-nav-tab>
    </view>
  </view>
</template>

<script>
import serve from "../../../mixin/common.js";
export default {
  name: "address-book",
  data() {
    return {
      // 加载数据的动画
      isLoad: false,
      // 保存选择的人员--用于协助申请
      selectedList: [],
      // 储存处理后的数据
      resultList: [],
      searchValue: "",
    };
  },
  onShow() {
    this.searchValue = '';
  },
  onLoad() {
    this.isLoad = true;
    this.getContactsList();
  },
  mounted() {},
  
  methods: {
    //获取通讯录列表
    getContactsList() {
      serve.setContactsList().then((res) => {
        this.handleData(res.data);
      });
    },
    handleData(data) {
      let temporary = [];

      // 对从后台获取的数据进行处理
      for (let i = 0, length = data.length; i < length; i++) {
        temporary = data[i].employe;
        this.resultList.push({
          deptName: data[i].deptName,
          list: [],
        });
        for (let j = 0, num = temporary.length; j < num; j++) {
          this.resultList[i].list.push({
            userName: temporary[j].userName,
            userId: temporary[j].userId,
            phone: temporary[j].phone,
          });
        }
      }
      this.isLoad = false;
    },
    // 改变数据
    onChange(value) {
      this.isLoad = true;
      this.searchValue = value;
    },
  },
  onShareAppMessage(res) {},
};
</script>

<style lang="scss" scoped>
.address-book {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;

  &-header {
    width: 100vw;
  }

  &-main {
    flex: 1;
    overflow: scroll;

    .main-load {
      padding: 30rpx 0;
      text-align: center;
    }
  }
}
</style>