feat:注释

张含笑

2026-01-08 c76d3e7a08cdc1c55c8e2e82e6fd490bd0b911ae

feat:注释

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

@@ -1,14 +1,175 @@
<template>
    <view class="eventTickets">
        语音通话
    </view>
  <div class="voiceCallContainer">
    <!-- 顶部搜索栏 -->
    <div class="searchBar">
      <up-search placeholder="请输入关键字搜索"  :animation="true"   :show-action="false"></up-search>
    </div>

    <!-- 联系人列表 -->
   <div class="contactList">
     <div
       class="contactItem"
       v-for="(contact, index) in filteredContacts"
       :key="index"
     >
       <!-- 头像 -->
       <div class="contactAvatar">
         <image :src="contact.avatar" mode="aspectFill" />
       </div>

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

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

<script setup></script>
<script setup>
import { ref, computed } from 'vue'

// 搜索关键字
const searchKeyword = ref('')

// 联系人数据
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' },
])

// 过滤后的联系人列表
const filteredContacts = computed(() => {
  if (!searchKeyword.value) {
    return contacts.value
  }
  return contacts.value.filter(contact => {
    return contact.name.includes(searchKeyword.value) ||
      contact.dept.includes(searchKeyword.value)
  })
})

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

<style scoped lang="scss">
.eventTickets {
    width: 100%;
    height: 100%;
.voiceCallContainer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.searchBar {
  padding: 20rpx;
  display: flex;
  align-items: center;
  height: 108rpx;
}

.searchIcon {
  position: absolute;
  left: 40rpx;
  z-index: 1;
  width: 40rpx;
  height: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.searchIcon image {
  width: 30rpx;
  height: 30rpx;
  opacity: 0.5;
}
.contactList {
  margin: 0 24rpx;
  background: #fff;
  border-radius: 12rpx ;
  overflow-y: auto;
  height: 0;
  flex-grow: 1;
  align-content: flex-start;
}

.contactItem {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #EBEBEB;
}

.contactAvatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 30rpx;
}

.contactAvatar image {
  width: 100%;
  height: 100%;
}

.contactInfo {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.contactName {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 8rpx;
}

.contactDept {
  font-size: 26rpx;
  color: #999;
}

.callButton {
  width: 80rpx;
  height: 80rpx;
  background-color: #4C85FF;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.callButton image {
  width: 40rpx;
  height: 40rpx;
  filter: brightness(0) invert(1); /* 将图标转换为白色 */
}
</style>