109 lines
2.5 KiB
Vue
109 lines
2.5 KiB
Vue
<template>
|
|
<!-- 手机端地址卡片 -->
|
|
<div class="bg-white/90 backdrop-blur-sm rounded-2xl shadow-xl p-5 transform transition-all duration-300 hover:shadow-2xl border border-gray-100">
|
|
<div class="flex items-center mb-4">
|
|
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3">
|
|
<i class="fa-solid fa-mobile-screen text-blue-500"></i>
|
|
</div>
|
|
<h3 class="font-semibold">手机端地址</h3>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 p-3 rounded-xl border border-gray-100 transition-all duration-300 hover:border-primary/20 hover:bg-primary/5">
|
|
<div class="text-xs text-gray-500 mb-1">连接地址</div>
|
|
<div class="font-mono text-blue-600 truncate break-all">{{ phoneAddress || '未连接' }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref, onMounted, onUnmounted, watch } from 'vue';
|
|
|
|
// Props
|
|
const props = defineProps({
|
|
isConnected: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
wsUrl: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
// 手机端地址状态
|
|
const phoneAddress = ref('');
|
|
|
|
// 定时轮询获取手机端地址
|
|
let pollInterval = null;
|
|
|
|
const fetchPhoneAddress = async () => {
|
|
// 只有在连接状态时才查询手机端地址
|
|
if (!props.isConnected) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/phone-addr');
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
if (data.phoneAddress) {
|
|
phoneAddress.value = data.phoneAddress;
|
|
} else {
|
|
phoneAddress.value = '';
|
|
}
|
|
}
|
|
} catch (error) {
|
|
|
|
}
|
|
};
|
|
|
|
// 监听连接状态变化
|
|
watch(
|
|
() => props.isConnected,
|
|
(newVal) => {
|
|
if (newVal) {
|
|
// 连接成功时立即获取一次
|
|
fetchPhoneAddress();
|
|
// 开始轮询
|
|
startPolling();
|
|
} else {
|
|
// 断开连接时清除轮询
|
|
stopPolling();
|
|
// 清空显示的手机端地址
|
|
phoneAddress.value = '';
|
|
}
|
|
}
|
|
);
|
|
|
|
// 开始轮询
|
|
const startPolling = () => {
|
|
if (pollInterval) {
|
|
clearInterval(pollInterval);
|
|
}
|
|
pollInterval = setInterval(fetchPhoneAddress, 3000);
|
|
};
|
|
|
|
// 停止轮询
|
|
const stopPolling = () => {
|
|
if (pollInterval) {
|
|
clearInterval(pollInterval);
|
|
pollInterval = null;
|
|
}
|
|
};
|
|
|
|
// 组件挂载时的处理
|
|
onMounted(() => {
|
|
// 如果已经连接，开始轮询
|
|
if (props.isConnected) {
|
|
fetchPhoneAddress();
|
|
startPolling();
|
|
}
|
|
});
|
|
|
|
// 组件卸载时清除轮询
|
|
onUnmounted(() => {
|
|
stopPolling();
|
|
});
|
|
|
|
// 移除了不需要的computed属性
|
|
</script> |