| | |
| | | <up-search placeholder="请输入关键字搜索" v-model="defaultParam.nickName" :animation="true" :show-action="false" @confirm="onSearch" @search="onSearch" @clear="handleClear"></up-search> |
| | | </div> |
| | | |
| | | <!-- WebSocket连接状态 --> |
| | | <div class="wsStatusBar" :class="{ 'ws-connected': wsConnected }"> |
| | | <div class="wsStatusContent"> |
| | | <text class="wsStatusText">WS状态: {{ wsStatus }}</text> |
| | | <text class="wsUserIdText" v-if="wsUserId">用户ID: {{ wsUserId }}</text> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 联系人列表 --> |
| | | <div class="contactList" @scrolltolower="onScrollToLower"> |
| | | <div |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, onMounted, onUnmounted } from 'vue'; |
| | | import { getStatusBarHeight } from '@/utils/common'; |
| | | import { useUserStore } from "@/store/index.js" |
| | | const topMargin = getStatusBarHeight() |
| | | import { getPhoneBookListApi } from '@/api/voiceCall/index.js' |
| | | import { onShow } from '@dcloudio/uni-app' |
| | | import defaultAvatar from '/static/images/defaultAvatar.svg' |
| | | import { useGlobalWS } from "@/hooks/useGlobalWS.js"; |
| | | import websocketService from "@/utils/websocket.js"; |
| | | const userStore = useUserStore() |
| | | const userId = userStore.userInfo.new_userInfo.userId |
| | | const userStore = useUserStore() |
| | | const userId = userStore.userInfo.new_userInfo.userId |
| | | // 联系人数据 |
| | | const contacts = ref([]) |
| | | const defaultParam = ref({ |
| | |
| | | // 加载状态 |
| | | const loading = ref(false) |
| | | const hasMore = ref(true) |
| | | |
| | | // WebSocket连接状态 |
| | | const wsConnected = ref(false) |
| | | const wsStatus = ref('未连接') |
| | | const wsUserId = ref('') |
| | | |
| | | // 初始化全局WebSocket |
| | | try { |
| | | useGlobalWS(); |
| | | } catch (error) { |
| | | console.error('初始化全局WebSocket失败:', error); |
| | | } |
| | | |
| | | // 更新WebSocket连接状态 |
| | | function updateWSStatus() { |
| | | wsConnected.value = websocketService.getConnected(); |
| | | wsStatus.value = wsConnected.value ? '已连接' : '未连接'; |
| | | wsUserId.value = websocketService.userId || ''; |
| | | } |
| | | |
| | | // 监听WebSocket状态变化 |
| | | function setupWSStatusListener() { |
| | | // 设置WebSocket回调 |
| | | websocketService.setOnOpenCallback(() => { |
| | | updateWSStatus(); |
| | | console.log('WebSocket已连接'); |
| | | }); |
| | | |
| | | websocketService.setOnCloseCallback(() => { |
| | | updateWSStatus(); |
| | | console.log('WebSocket已关闭'); |
| | | }); |
| | | |
| | | websocketService.setOnErrorCallback(() => { |
| | | updateWSStatus(); |
| | | console.log('WebSocket错误'); |
| | | }); |
| | | } |
| | | |
| | | // 获取通讯录 |
| | | const getPhoneBookList = () => { |
| | |
| | | defaultParam.value.current = 1 |
| | | hasMore.value = true |
| | | getPhoneBookList() |
| | | // 更新WebSocket状态 |
| | | updateWSStatus(); |
| | | }); |
| | | |
| | | onMounted(() => { |
| | | // 设置WebSocket状态监听器 |
| | | setupWSStatusListener(); |
| | | // 初始更新WebSocket状态 |
| | | updateWSStatus(); |
| | | }); |
| | | |
| | | onUnmounted(() => { |
| | | // 清理WebSocket回调(可选) |
| | | // 注意:如果其他组件也需要使用WebSocket,这里不要清理回调 |
| | | }); |
| | | |
| | | // 监听滚动到底部 |