通讯录列表

src/api/addressBook/phoneList.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+//通讯录查询
+export function ListPhones(query) {
+  return request({
+    url: '/system/phones/query',
+    method: 'get',
+    params: query
+  })
+}

src/views/addressBook/index.vue

@@ -1,32 +1,101 @@
 <template>
   <div class="app-container">
-    <van-index-bar :index-list="indexList">
-      <div v-for="(item, index) in indexList" :key="index">
-        <van-index-anchor :index="item" />
-        <van-cell title="文本" />
-        <van-cell title="文本" />
-        <van-cell title="文本" />
-        <van-cell title="文本" />
-        <van-cell title="文本" />
-      </div>
-    </van-index-bar>
+    <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 {
-      indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "G", "K"],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      //是否显示加载
+      loading: false,
+      //是否滚动到底部
+      finished: false,
+      //通讯录列表
+      phonesList:[],
     };
   },
-  mounted() {},
-  methods: {},
+  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 {
-}
-</style>
+  .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>

src/views/index.vue

@@ -72,4 +72,4 @@ export default {
 <style scoped lang="scss">
 .app-container {
 }
-</style>
+</style>