nsgk_mobile/src/views/addressBook/index.vue

<template>
  <div class="app-container">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getList"
    >
      <van-cell v-for="item in phonesList" :key="item.phone">
        <span class="nameTit">{{item.name.substr(-2)}}</span>
        <p class="nameSize">{{item.name}}{{item.phone}}</p>
        <van-icon name="phone-circle" size="30" color="#00BC20" class="icon" @click="callPhone(item.phone)"/>
      </van-cell>
    </van-list>
<!--    <van-index-bar :index-list="indexList" highlight-color="#1989fa">-->
<!--      <div v-for="(item, index) in indexList" :key="index">-->
<!--        <van-index-anchor :index="item" />-->
<!--        <van-cell v-for="phone in phonesList">-->
<!--          <span class="nameTit">东旭</span>-->
<!--          <p class="nameSize">{{phone.name}}{{phone.phone}}</p>-->
<!--          <van-icon name="phone-circle" size="30" color="#00BC20" class="icon"/>-->
<!--        </van-cell>-->
<!--      </div>-->
<!--    </van-index-bar>-->
  </div>
</template>

<script>
import { ListPhones } from "@/api/addressBook/phoneList";
export default {
  name: "addressBook",
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      //是否显示加载
      loading: false,
      //是否滚动到底部
      finished: false,
      //通讯录列表
      phonesList:[],
    };
  },
  created(){
    this.getList();
  },
  methods: {
    /** 查询通讯录列表 */
    getList(){
      this.loading = true;
      ListPhones(this.queryParams).then(response => {
        console.log(response)
        response.rows.forEach(element => {
          this.phonesList.push(element);
        })
        console.log(this.phonesList)
        if(this.phonesList.length >= response.total){
          this.finished = true;
          return;
        }
        this.queryParams.pageNum += 1 ;
        this.loading = false;
      });
    },
    callPhone(phoneNumber){
      window.location.href = 'tel://' + phoneNumber;
    }
  },
};
</script>

<style scoped lang="scss">
  .app-container {
  }
  .van-tag--medium{
    padding: 18px 10px;
  }
  .icon{
    position: absolute;
    right: 0;
    top: 0.05rem;
  }
  .nameTit{
    background: #1989fa;
    color: #fff;
    width: 1rem;
    height: 1rem;
    display: inline-block;
    text-align: center;
    line-height: 1rem;
    border-radius: 0.1rem;
    margin-right: 0.1rem;
  }
  .nameSize{
    display: inline-block;
    line-height: 0.5rem;
  }
</style>