feat:通讯录

张含笑

2026-01-09 9d8c96f9223ab5db295c6d7b4f1ece31c262d646

feat:通讯录

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

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

    <!-- 联系人列表 -->
@@ -15,18 +15,18 @@
        <div class="itemBox">
          <!-- 头像 -->
          <div class="contactAvatar">
            <image :src="contact.avatar" mode="aspectFill" />
            <image :src="contact.avatar || defaultAvatar"  />
          </div>

          <!-- 联系人信息 -->
          <div class="contactInfo">
            <div class="contactName">{{ contact.friendNickName }}</div>
            <div class="contactDept">{{ contact.dept }}</div>
            <div class="contactName">{{ contact.friendNickName  || '未知联系人' }}</div>
            <div class="contactDept">{{ contact.dept || '未知部门' }}</div>
          </div>

          <!-- 电话按钮 -->
          <div class="callButton" @click="makeCall(contact)">
            <image src="@/static/images/voiceVal/phoneVal.svg" mode="aspectFit" />
            <image src="@/static/images/voiceVal/phoneVal.svg"  />
          </div>
        </div>

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

import defaultAvatar  from '/static/images/tabbar/icon_me.png'
// 联系人数据
const contacts = ref([
  { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
  { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
  { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
  { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
  { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
  { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
  { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
  { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
  { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
  { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
  { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
  { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
  { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
  { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
  { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
  { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
  { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
  { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
  { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
  { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
  { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
  { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
  { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
])

const contacts = ref([])
const defaultParam =ref( {
  current: 1,
  size: 10,
  searchKeyword:''
})
// 获取通讯录
const getPhoneBookList = () => {
  // 添加分页参数
  const params = {
    pageNum: 1,
    pageSize: 100
    current: defaultParam.value.current,
    size: defaultParam.value.size
  }
  getPhoneBookListApi(params).then(res => {
    const response = res.data.data
@@ -95,10 +73,11 @@

// 拨打电话方法
const makeCall = (contact) => {
  console.log('拨打电话给', contact.name)
  const contactName = contact.friendNickName || '未知联系人'
  console.log('拨打电话给', contactName)
  // 这里可以添加实际的拨打电话逻辑
  uni.showToast({
    title: `正在拨打${contact.name}的电话`,
    title: `正在拨打${contactName}的电话`,
    icon: 'none'
  })
}