feat:通讯录

张含笑

2026-01-09 1aa1c153a196bd23192d2401cd28dd1c1c72f69b

feat:通讯录

 uniapps/work-app/src/api/voiceCall/index.js

New file
@@ -0,0 +1,11 @@
import {request} from "@/utils/index.js";

export const getPhoneBookListApi = (data) => {
  return request({
    url: '/webservice/jaUserContact/pageInfo',
    method: 'post',
    data,
  })
}



 uniapps/work-app/src/pages/voiceCall/index.vue

@@ -2,14 +2,14 @@
  <div class="voiceCallContainer" :style="{ paddingTop: topMargin + 'px' }">
    <!-- 顶部搜索栏 -->
    <div class="searchBar">
      <up-search placeholder="请输入关键字搜索"  :animation="true"   :show-action="false"></up-search>
      <up-search placeholder="请输入关键字搜索" v-model="searchKeyword"  :animation="true"   :show-action="false"></up-search>
    </div>

    <!-- 联系人列表 -->
   <div class="contactList">
     <div
       class="contactItem"
       v-for="(contact, index) in filteredContacts"
        v-for="(contact, index) in contacts"
       :key="index"
     >
  <div class="itemBox">
@@ -20,7 +20,7 @@

    <!-- 联系人信息 -->
    <div class="contactInfo">
      <div class="contactName">{{ contact.name }}</div>
            <div class="contactName">{{ contact.friendNickName }}</div>
      <div class="contactDept">{{ contact.dept }}</div>
    </div>

@@ -38,7 +38,8 @@
<script setup>
import { getStatusBarHeight } from '@/utils/common';
const topMargin = getStatusBarHeight()

import { getPhoneBookListApi } from '@/api/voiceCall/index.js'
import { onShow } from '@dcloudio/uni-app'
// 搜索关键字
const searchKeyword = ref('')

@@ -69,16 +70,28 @@
  { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
])

// 过滤后的联系人列表
const filteredContacts = computed(() => {
  if (!searchKeyword.value) {
    return contacts.value
// 获取通讯录
const getPhoneBookList = () => {
  // 添加分页参数
  const params = {
    pageNum: 1,
    pageSize: 100
  }
  return contacts.value.filter(contact => {
    return contact.name.includes(searchKeyword.value) ||
      contact.dept.includes(searchKeyword.value)
  getPhoneBookListApi(params).then(res => {
    const response = res.data.data
    console.log('通讯录',  response)
    contacts.value = response.records
  }).catch(err => {
    console.error('获取通讯录失败:', err)
    const errorMsg = err.msg || err.message || '获取通讯录失败'
    uni.showToast({
      title: errorMsg,
      icon: 'none',
      duration: 3000
  })
})
}


// 拨打电话方法
const makeCall = (contact) => {
@@ -89,6 +102,9 @@
    icon: 'none'
  })
}
onShow(() => {
  getPhoneBookList()
});
</script>

<style scoped lang="scss">
@@ -123,6 +139,7 @@
  padding:0 24rpx;

}

.itemBox {
  display: flex;
 align-items: center;
@@ -131,6 +148,7 @@
  height: 98rpx;
  border-bottom: 1rpx solid #EBEBEB;
}

.contactAvatar {
  width: 80rpx;
  height: 80rpx;