update：提交我的设备改版
This commit is contained in:
+22
-12
@@ -8,9 +8,6 @@
|
||||
} from "@dcloudio/uni-app";
|
||||
import websocket from "@/websocket";
|
||||
import matchWebsocket from "@/matchWebsocket";
|
||||
import {
|
||||
getDeviceBatteryAPI
|
||||
} from "@/apis";
|
||||
import {
|
||||
MESSAGETYPES
|
||||
} from "@/constants";
|
||||
@@ -27,8 +24,9 @@
|
||||
} = storeToRefs(store);
|
||||
const {
|
||||
updateUser,
|
||||
updateOnline,
|
||||
updateDeviceBattery,
|
||||
updateDeviceStatus,
|
||||
setDeviceOnline,
|
||||
clearDeviceStatus,
|
||||
showDeviceChargingDialog,
|
||||
clearSessionState,
|
||||
clearDevice
|
||||
@@ -70,14 +68,19 @@
|
||||
});
|
||||
}
|
||||
|
||||
async function emitUpdateOnline() {
|
||||
const data = await getDeviceBatteryAPI();
|
||||
function emitUpdateOnline(nextOnline) {
|
||||
const wasOnline = Boolean(online.value);
|
||||
const nextOnline = Boolean(data.online);
|
||||
updateOnline(nextOnline);
|
||||
updateDeviceBattery(nextOnline ? data?.battery ?? data?.power : null);
|
||||
if (!device.value.deviceId || wasOnline === nextOnline) return;
|
||||
audioManager.play(nextOnline ? "设备已连接" : "设备连接已断开");
|
||||
setDeviceOnline(nextOnline === true);
|
||||
if (!device.value.deviceId || wasOnline === (nextOnline === true)) return;
|
||||
audioManager.play(nextOnline === true ? "设备已连接" : "设备连接已断开");
|
||||
}
|
||||
|
||||
function onDeviceStatusPush(status) {
|
||||
updateDeviceStatus(status);
|
||||
}
|
||||
|
||||
function onShootSocketDisconnected() {
|
||||
clearDeviceStatus();
|
||||
}
|
||||
|
||||
function onDeviceBindInvalid() {
|
||||
@@ -113,6 +116,10 @@
|
||||
}
|
||||
|
||||
function onShootWsMsg(content) {
|
||||
if (content?.event === "/addons/shoot/battery") {
|
||||
onDeviceStatusPush(content.data);
|
||||
return;
|
||||
}
|
||||
if(content.type === 'shoot-trigger'){
|
||||
onDeviceShoot()
|
||||
}
|
||||
@@ -124,6 +131,7 @@
|
||||
void audioManager.warmButton();
|
||||
uni.$on("update-user", emitUpdateUser);
|
||||
uni.$on("update-online", emitUpdateOnline);
|
||||
uni.$on("shoot-socket-disconnected", onShootSocketDisconnected);
|
||||
uni.$on("session-kicked-out", onSessionKickedOut);
|
||||
uni.$on("device-bind-invalid", onDeviceBindInvalid);
|
||||
uni.$on("device-charging", onDeviceCharging);
|
||||
@@ -150,6 +158,7 @@
|
||||
onHide(() => {
|
||||
uni.$off("update-user", emitUpdateUser);
|
||||
uni.$off("update-online", emitUpdateOnline);
|
||||
uni.$off("shoot-socket-disconnected", onShootSocketDisconnected);
|
||||
uni.$off("session-kicked-out", onSessionKickedOut);
|
||||
uni.$off("device-bind-invalid", onDeviceBindInvalid);
|
||||
uni.$off("device-charging", onDeviceCharging);
|
||||
@@ -159,6 +168,7 @@
|
||||
matchWebsocket.closeMatchWebSocket({
|
||||
reason: "app-hide"
|
||||
});
|
||||
clearDeviceStatus();
|
||||
websocket.closeWebSocket();
|
||||
});
|
||||
</script>
|
||||
|
||||
+4
-4
@@ -285,6 +285,10 @@ export const getDeviceDetailAPI = (deviceId) => {
|
||||
return request("GET", `/user/device/getDetail?deviceId=${encodeURIComponent(deviceId)}`);
|
||||
};
|
||||
|
||||
export const updateDeviceAliasAPI = (deviceId, alias) => {
|
||||
return request("POST", "/user/device/updateAlias", {deviceId, alias});
|
||||
};
|
||||
|
||||
export const createPractiseAPI = (arrows, time, target) => {
|
||||
return request("POST", "/user/practice/create", {
|
||||
shootNumber: arrows,
|
||||
@@ -565,10 +569,6 @@ export const laserCloseAPI = async () => {
|
||||
return request("POST", "/user/device/closeAim");
|
||||
};
|
||||
|
||||
export const getDeviceBatteryAPI = async () => {
|
||||
return request("GET", "/user/device/battery");
|
||||
};
|
||||
|
||||
// 设备连接指定 WiFi，只下发 WiFi 凭证，不触发 OTA 升级。
|
||||
export const connectDeviceWifiAPI = async (ssid, password) => {
|
||||
return request("POST", "/user/hardwareBox/connectWifi", {ssid, password});
|
||||
|
||||
@@ -1,44 +1,15 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from "vue";
|
||||
import { getDeviceBatteryAPI } from "@/apis";
|
||||
import useStore from "@/store";
|
||||
import { storeToRefs } from "pinia";
|
||||
|
||||
const power = ref(0);
|
||||
const timer = ref(null);
|
||||
let disposed = false;
|
||||
let requestInFlight = false;
|
||||
|
||||
const refreshPower = async () => {
|
||||
if (disposed || requestInFlight) return;
|
||||
requestInFlight = true;
|
||||
try {
|
||||
const data = await getDeviceBatteryAPI();
|
||||
if (!disposed) power.value = data.battery;
|
||||
} catch (_) {
|
||||
// 电量轮询失败时等待下一轮，避免产生未处理的 Promise 拒绝。
|
||||
} finally {
|
||||
requestInFlight = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await refreshPower();
|
||||
if (disposed) return;
|
||||
timer.value = setInterval(() => {
|
||||
void refreshPower();
|
||||
}, 1000 * 10);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
disposed = true;
|
||||
clearInterval(timer.value);
|
||||
timer.value = null;
|
||||
});
|
||||
const store = useStore();
|
||||
const { deviceBattery: power } = storeToRefs(store);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<image src="../static/b-power.png" mode="widthFix" />
|
||||
<view>电量{{ power || 1 }}%</view>
|
||||
<view>{{ power === null ? "电量--" : `电量${power}%` }}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
import { getDeviceBatteryAPI } from "@/apis";
|
||||
import useStore from "@/store";
|
||||
import { storeToRefs } from "pinia";
|
||||
|
||||
const OTA_MIN_BATTERY = 50;
|
||||
const OTA_LOW_BATTERY_TEXT = "电量不足 50%，暂不支持 OTA 升级";
|
||||
const OTA_OFFLINE_TEXT = "请先开启智能弓";
|
||||
const store = useStore();
|
||||
const { deviceStatus } = storeToRefs(store);
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
@@ -48,29 +49,15 @@ const isFailure = computed(() => props.state === "update_failure");
|
||||
// Clamp progress to keep the progress bar width within its container.
|
||||
const progressValue = computed(() => Math.min(100, Math.max(0, Number(props.progress) || 0)));
|
||||
|
||||
// 点击立即更新前先校验设备在线状态，再校验设备电量。
|
||||
const handleUpdateClick = async () => {
|
||||
try {
|
||||
const deviceStatus = await getDeviceBatteryAPI();
|
||||
if (deviceStatus?.online !== true) {
|
||||
// 点击立即更新前先校验设备在线状态。
|
||||
const handleUpdateClick = () => {
|
||||
if (deviceStatus.value?.online !== true) {
|
||||
uni.showToast({
|
||||
title: OTA_OFFLINE_TEXT,
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (Number(deviceStatus?.battery) <= OTA_MIN_BATTERY) {
|
||||
uni.showToast({
|
||||
title: OTA_LOW_BATTERY_TEXT,
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
} catch (err) {
|
||||
emit("update");
|
||||
return;
|
||||
}
|
||||
emit("update");
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -12,12 +12,11 @@ import {
|
||||
getHomeData,
|
||||
getPhoneNumberAPI,
|
||||
getPhoneNumberAPIv2,
|
||||
getDeviceBatteryAPI,
|
||||
} from "@/apis";
|
||||
|
||||
import useStore from "@/store";
|
||||
const store = useStore();
|
||||
const { updateUser, updateDevice, updateOnline, clearDevice } = store;
|
||||
const { updateUser, updateDevice, clearDevice } = store;
|
||||
|
||||
const props = defineProps({
|
||||
show: {
|
||||
@@ -125,8 +124,6 @@ async function doLogin() {
|
||||
devices.bindings[0].deviceId,
|
||||
devices.bindings[0].deviceName
|
||||
);
|
||||
const data = await getDeviceBatteryAPI();
|
||||
updateOnline(data.online);
|
||||
} else {
|
||||
clearDevice();
|
||||
}
|
||||
|
||||
@@ -147,6 +147,9 @@
|
||||
{
|
||||
"path": "my-device"
|
||||
},
|
||||
{
|
||||
"path": "device-qrcode"
|
||||
},
|
||||
{
|
||||
"path": "device-bind-success"
|
||||
},
|
||||
|
||||
@@ -6,7 +6,6 @@ export function useDeviceBinding({
|
||||
binding,
|
||||
updateDevice,
|
||||
deviceDetails,
|
||||
refreshDeviceStatus,
|
||||
}) {
|
||||
const showBindFailurePage = () => {
|
||||
uni.hideToast();
|
||||
@@ -63,7 +62,6 @@ export function useDeviceBinding({
|
||||
const applyBoundDevice = () => {
|
||||
updateDevice(deviceId, deviceName);
|
||||
deviceDetails.value = result || {};
|
||||
void refreshDeviceStatus();
|
||||
};
|
||||
uni.navigateTo({
|
||||
url: `/pages/device/device-bind-success?deviceId=${encodeURIComponent(deviceId)}`,
|
||||
|
||||
@@ -1,19 +1,23 @@
|
||||
import { computed, ref } from "vue";
|
||||
import { getDeviceBatteryAPI, getMyDevicesAPI, unbindDeviceAPI } from "@/apis";
|
||||
import {
|
||||
getDeviceDetailAPI,
|
||||
getMyDevicesAPI,
|
||||
unbindDeviceAPI,
|
||||
} from "@/apis";
|
||||
|
||||
export const DEVICE_NAME_STORAGE_KEY = "device_name_overrides";
|
||||
|
||||
export function useDeviceStatus({
|
||||
user,
|
||||
device,
|
||||
deviceStatus,
|
||||
online,
|
||||
updateDevice,
|
||||
updateOnline,
|
||||
clearDevice,
|
||||
unbindDialogVisible,
|
||||
}) {
|
||||
const deviceStatus = ref({});
|
||||
const deviceDetails = ref({});
|
||||
let deviceDetailRequestVersion = 0;
|
||||
|
||||
const isDeviceOnline = computed(
|
||||
() => deviceStatus.value.online === true || online.value === true
|
||||
@@ -23,16 +27,32 @@ export function useDeviceStatus({
|
||||
isDeviceOnline.value ? "device-status--online" : "device-status--offline"
|
||||
);
|
||||
const battery = computed(() => {
|
||||
const value = Number(
|
||||
deviceStatus.value.battery ?? deviceStatus.value.power ?? 0
|
||||
);
|
||||
return Number.isFinite(value) && value > 0 ? Math.min(100, value) : 0;
|
||||
const rawValue = deviceStatus.value.battery ?? deviceStatus.value.power;
|
||||
if (rawValue === null || rawValue === undefined || rawValue === "") return null;
|
||||
const value = Number(rawValue);
|
||||
return Number.isFinite(value) ? Math.min(100, Math.max(0, value)) : null;
|
||||
});
|
||||
const batteryText = computed(() =>
|
||||
battery.value ? `${battery.value}%` : "暂无数据"
|
||||
battery.value === null ? "暂无数据" : `${battery.value}%`
|
||||
);
|
||||
const onlineDurationText = computed(() => {
|
||||
const rawDuration = deviceStatus.value.onlineDuration;
|
||||
if (rawDuration == null || String(rawDuration).trim() === "") return "--";
|
||||
|
||||
const seconds = Number(rawDuration);
|
||||
if (!Number.isFinite(seconds) || seconds < 0) return "--";
|
||||
|
||||
// WS 推送秒数，页面按完整分钟展示累计使用时间。
|
||||
const totalMinutes = Math.floor(seconds / 60);
|
||||
const hours = Math.floor(totalMinutes / 60);
|
||||
const minutes = totalMinutes % 60;
|
||||
return hours > 0 ? `${hours}小时${minutes}分钟` : `${minutes}分钟`;
|
||||
});
|
||||
const networkType = computed(() =>
|
||||
String(deviceStatus.value.netType ?? "").trim().toLowerCase()
|
||||
);
|
||||
const networkText = computed(() => {
|
||||
const netType = String(deviceStatus.value.netType || "").toLowerCase();
|
||||
const netType = networkType.value;
|
||||
if (netType === "wifi") return "WiFi";
|
||||
if (netType === "4g") return "4G";
|
||||
return isDeviceOnline.value ? "在线" : "未连接";
|
||||
@@ -55,15 +75,37 @@ export function useDeviceStatus({
|
||||
return value && typeof value === "object" ? value : {};
|
||||
};
|
||||
|
||||
const refreshDeviceStatus = async () => {
|
||||
if (!device.value.deviceId) return;
|
||||
const refreshDeviceDetails = async () => {
|
||||
const deviceId = device.value.deviceId;
|
||||
if (!deviceId) return;
|
||||
|
||||
const requestVersion = ++deviceDetailRequestVersion;
|
||||
try {
|
||||
const result = await getDeviceBatteryAPI();
|
||||
deviceStatus.value = result || {};
|
||||
updateOnline(result?.online === true);
|
||||
const detailResponse = await getDeviceDetailAPI(deviceId);
|
||||
const detail = detailResponse?.detail || detailResponse?.data?.detail;
|
||||
if (
|
||||
!detail ||
|
||||
typeof detail !== "object" ||
|
||||
requestVersion !== deviceDetailRequestVersion ||
|
||||
device.value.deviceId !== deviceId
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
deviceDetails.value = {
|
||||
...deviceDetails.value,
|
||||
...detail,
|
||||
deviceModelName: detail.deviceModelName ?? "",
|
||||
bindTime: String(
|
||||
detail.bindTime ?? deviceDetails.value.bindTime ?? ""
|
||||
).trim(),
|
||||
qrCodeUrl: String(
|
||||
detail.qrCodeUrl ?? deviceDetails.value.qrCodeUrl ?? ""
|
||||
).trim(),
|
||||
};
|
||||
} catch (error) {
|
||||
deviceStatus.value = {};
|
||||
console.log("获取设备状态失败", error);
|
||||
// 实时刷新失败时保留当前页面数据，等待下次通知或页面重新显示。
|
||||
console.log("刷新设备详情失败", error);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -74,19 +116,46 @@ export function useDeviceStatus({
|
||||
if (Array.isArray(devices?.bindings) && devices.bindings.length > 0) {
|
||||
const currentDevice = devices.bindings[0];
|
||||
const nameOverrides = getDeviceNameOverrides();
|
||||
deviceDetails.value = currentDevice;
|
||||
// 二维码和绑定时间仅取详情接口，绑定列表不能作为这两项的回退数据。
|
||||
let latestDevice = {
|
||||
...currentDevice,
|
||||
deviceModelName: "",
|
||||
bindTime: "",
|
||||
qrCodeUrl: "",
|
||||
};
|
||||
|
||||
try {
|
||||
const detailResponse = await getDeviceDetailAPI(currentDevice.deviceId);
|
||||
const detail = detailResponse?.detail || detailResponse?.data?.detail;
|
||||
if (detail && typeof detail === "object") {
|
||||
latestDevice = {
|
||||
...currentDevice,
|
||||
...detail,
|
||||
deviceModelName: detail.deviceModelName ?? "",
|
||||
bindTime: String(detail.bindTime ?? "").trim(),
|
||||
qrCodeUrl: String(detail.qrCodeUrl ?? "").trim(),
|
||||
deviceName:
|
||||
detail.deviceAlias || detail.deviceName || currentDevice.deviceName,
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
// 详情接口失败时保留绑定关系，二维码和绑定时间仍保持为空。
|
||||
console.log("获取设备详情失败", error);
|
||||
}
|
||||
|
||||
deviceDetails.value = latestDevice;
|
||||
updateDevice(
|
||||
currentDevice.deviceId,
|
||||
nameOverrides[currentDevice.deviceId] ||
|
||||
currentDevice.deviceName ||
|
||||
currentDevice.name ||
|
||||
latestDevice.deviceId,
|
||||
nameOverrides[latestDevice.deviceId] ||
|
||||
latestDevice.deviceAlias ||
|
||||
latestDevice.deviceName ||
|
||||
latestDevice.name ||
|
||||
"我的智能弓"
|
||||
);
|
||||
await refreshDeviceStatus();
|
||||
return;
|
||||
}
|
||||
clearDevice();
|
||||
deviceStatus.value = {};
|
||||
deviceDetailRequestVersion += 1;
|
||||
deviceDetails.value = {};
|
||||
} catch (error) {
|
||||
console.log("同步设备绑定失败", error);
|
||||
@@ -99,7 +168,7 @@ export function useDeviceStatus({
|
||||
await unbindDeviceAPI(device.value.deviceId);
|
||||
uni.setStorageSync("calibration", false);
|
||||
clearDevice();
|
||||
deviceStatus.value = {};
|
||||
deviceDetailRequestVersion += 1;
|
||||
deviceDetails.value = {};
|
||||
unbindDialogVisible.value = false;
|
||||
uni.showToast({ title: "解绑成功", icon: "success" });
|
||||
@@ -120,7 +189,9 @@ export function useDeviceStatus({
|
||||
isDeviceOnline,
|
||||
maskedDeviceId,
|
||||
networkText,
|
||||
refreshDeviceStatus,
|
||||
networkType,
|
||||
onlineDurationText,
|
||||
refreshDeviceDetails,
|
||||
statusClass,
|
||||
statusText,
|
||||
syncDeviceBinding,
|
||||
|
||||
@@ -0,0 +1,192 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import Container from "@/components/Container.vue";
|
||||
import { getDeviceDetailAPI } from "@/apis";
|
||||
import useStore from "@/store";
|
||||
import { storeToRefs } from "pinia";
|
||||
|
||||
const store = useStore();
|
||||
const { device } = storeToRefs(store);
|
||||
const deviceId = ref("");
|
||||
const qrImageUrl = ref("");
|
||||
const qrSaved = ref(false);
|
||||
const loading = ref(true);
|
||||
|
||||
const loadQrCode = async () => {
|
||||
if (!deviceId.value) {
|
||||
loading.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await getDeviceDetailAPI(deviceId.value);
|
||||
const detail = response?.detail || response?.data?.detail;
|
||||
qrImageUrl.value = String(detail?.qrCodeUrl ?? "").trim();
|
||||
} catch (error) {
|
||||
console.error("获取设备二维码失败", error);
|
||||
qrImageUrl.value = "";
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const saveQrCode = async () => {
|
||||
if (!qrImageUrl.value) return;
|
||||
|
||||
let filePath = qrImageUrl.value;
|
||||
try {
|
||||
if (/^https?:\/\//.test(filePath)) {
|
||||
filePath = await new Promise((resolve, reject) => {
|
||||
uni.downloadFile({
|
||||
url: filePath,
|
||||
success: (result) =>
|
||||
result.statusCode === 200
|
||||
? resolve(result.tempFilePath)
|
||||
: reject(new Error("二维码下载失败")),
|
||||
fail: reject,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
await new Promise((resolve, reject) => {
|
||||
uni.saveImageToPhotosAlbum({ success: resolve, fail: reject, filePath });
|
||||
});
|
||||
qrSaved.value = true;
|
||||
uni.showToast({ title: "已保存至相册", icon: "success" });
|
||||
} catch (error) {
|
||||
uni.showToast({ title: "请长按二维码保存", icon: "none" });
|
||||
}
|
||||
};
|
||||
|
||||
onLoad((options = {}) => {
|
||||
try {
|
||||
deviceId.value = decodeURIComponent(options.deviceId || "") || device.value.deviceId || "";
|
||||
} catch (error) {
|
||||
deviceId.value = device.value.deviceId || "";
|
||||
}
|
||||
void loadQrCode();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Container :bgType="12" :scroll="false">
|
||||
<view class="qr-page">
|
||||
<view class="qr-corner qr-corner--top"></view>
|
||||
<view class="qr-corner qr-corner--bottom"></view>
|
||||
<view class="qr-canvas">
|
||||
<text v-if="loading" class="qr-empty">二维码加载中...</text>
|
||||
<template v-else-if="qrImageUrl">
|
||||
<image class="qr-image" :src="qrImageUrl" mode="aspectFit" show-menu-by-longpress />
|
||||
<text v-if="qrSaved" class="qr-device-id">设备ID：{{ deviceId }}</text>
|
||||
<view v-else class="qr-save-button" @click="saveQrCode">
|
||||
<text>保存至相册</text>
|
||||
</view>
|
||||
<text class="qr-description">
|
||||
该二维码为当前绑定弓箭的二维码，你可以截图保存到相册，以便当二维码丢失或不在身边时，可以扫描二维码进行设备绑定。
|
||||
</text>
|
||||
<text class="qr-note">注：解除绑定后将无法查看该二维码。</text>
|
||||
</template>
|
||||
<text v-else class="qr-empty">暂无设备二维码</text>
|
||||
</view>
|
||||
</view>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.qr-page {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.qr-corner {
|
||||
position: absolute;
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
background: #ffeb00;
|
||||
}
|
||||
|
||||
.qr-corner--top {
|
||||
top: -220rpx;
|
||||
right: -170rpx;
|
||||
transform: rotate(42deg);
|
||||
}
|
||||
|
||||
.qr-corner--bottom {
|
||||
bottom: -220rpx;
|
||||
left: -170rpx;
|
||||
transform: rotate(42deg);
|
||||
}
|
||||
|
||||
.qr-canvas {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 260rpx 62rpx 70rpx;
|
||||
}
|
||||
|
||||
.qr-image {
|
||||
width: 432rpx;
|
||||
height: 432rpx;
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.qr-save-button {
|
||||
display: flex;
|
||||
width: 360rpx;
|
||||
height: 72rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 34rpx;
|
||||
border: 1rpx solid #e8c840;
|
||||
border-radius: 36rpx;
|
||||
color: #ffe846;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.qr-device-id,
|
||||
.qr-empty {
|
||||
color: rgba(255, 255, 255, 0.72);
|
||||
font-size: 26rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.qr-device-id {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.qr-empty {
|
||||
margin-top: 140rpx;
|
||||
}
|
||||
|
||||
.qr-description,
|
||||
.qr-note {
|
||||
width: 100%;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 22rpx;
|
||||
line-height: 36rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.qr-description {
|
||||
margin-top: 42rpx;
|
||||
}
|
||||
|
||||
.qr-note {
|
||||
margin-top: 12rpx;
|
||||
color: rgba(255, 232, 70, 0.7);
|
||||
}
|
||||
</style>
|
||||
+356
-221
@@ -1,10 +1,15 @@
|
||||
<script setup>
|
||||
import { computed, onMounted, onUnmounted, ref } from "vue";
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from "vue";
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app";
|
||||
import Container from "@/components/Container.vue";
|
||||
import Header from "@/components/Header.vue";
|
||||
import ScreenHint from "@/components/ScreenHint.vue";
|
||||
import ModalDialog from "@/components/ModalDialog.vue";
|
||||
import { laserAimAPI } from "@/apis";
|
||||
import {
|
||||
getHardwareBoxVersionAPI,
|
||||
laserAimAPI,
|
||||
updateDeviceAliasAPI,
|
||||
} from "@/apis";
|
||||
import useStore from "@/store";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useDeviceBinding } from "./composables/useDeviceBinding";
|
||||
@@ -14,12 +19,13 @@ import {
|
||||
} from "./composables/useDeviceStatus";
|
||||
|
||||
const store = useStore();
|
||||
const { updateDevice, updateOnline, clearDevice } = store;
|
||||
const { user, device, online } = storeToRefs(store);
|
||||
const { updateDevice, clearDevice } = store;
|
||||
const { user, device, deviceStatus, online } = storeToRefs(store);
|
||||
|
||||
const formatBindingDate = (value) => {
|
||||
if (!value) return "2026/12/13";
|
||||
if (!value) return "--";
|
||||
const text = String(value).trim();
|
||||
if (!text) return "--";
|
||||
const dateParts = text.match(/^(\d{4})[-/.](\d{1,2})[-/.](\d{1,2})/);
|
||||
if (dateParts) {
|
||||
return `${dateParts[1]}/${dateParts[2].padStart(2, "0")}/${dateParts[3].padStart(2, "0")}`;
|
||||
@@ -32,7 +38,7 @@ const formatBindingDate = (value) => {
|
||||
: numericValue
|
||||
: value
|
||||
);
|
||||
if (Number.isNaN(date.getTime())) return text;
|
||||
if (Number.isNaN(date.getTime())) return "--";
|
||||
return `${date.getFullYear()}/${String(date.getMonth() + 1).padStart(2, "0")}/${String(
|
||||
date.getDate()
|
||||
).padStart(2, "0")}`;
|
||||
@@ -42,14 +48,18 @@ const showTip = ref(false);
|
||||
const confirmBindTip = ref(false);
|
||||
const unbindDialogVisible = ref(false);
|
||||
const nameEditorVisible = ref(false);
|
||||
const qrVisible = ref(false);
|
||||
const qrSaved = ref(false);
|
||||
const editingName = ref("");
|
||||
const renaming = ref(false);
|
||||
const token = ref("");
|
||||
const binding = ref(false);
|
||||
const retryScanOnShow = ref(false);
|
||||
const calibration = ref(false);
|
||||
const showDeviceId = ref(false);
|
||||
const latestVersionDialogVisible = ref(false);
|
||||
const otaNeedUpdate = ref(false);
|
||||
const firmwareActionPending = ref(false);
|
||||
let otaCheckPromise = null;
|
||||
let otaCheckRequestVersion = 0;
|
||||
|
||||
const {
|
||||
batteryText,
|
||||
@@ -57,8 +67,9 @@ const {
|
||||
getDeviceNameOverrides,
|
||||
isDeviceOnline,
|
||||
maskedDeviceId,
|
||||
networkText,
|
||||
refreshDeviceStatus,
|
||||
networkType,
|
||||
onlineDurationText,
|
||||
refreshDeviceDetails,
|
||||
statusClass,
|
||||
statusText,
|
||||
syncDeviceBinding,
|
||||
@@ -66,23 +77,20 @@ const {
|
||||
} = useDeviceStatus({
|
||||
user,
|
||||
device,
|
||||
deviceStatus,
|
||||
online,
|
||||
updateDevice,
|
||||
updateOnline,
|
||||
clearDevice,
|
||||
unbindDialogVisible,
|
||||
});
|
||||
|
||||
const wifiStatusText = computed(() =>
|
||||
String(networkText.value || "").toLowerCase() === "wifi" ? "已连接" : "未连接"
|
||||
);
|
||||
const wifiStatusText = computed(() => {
|
||||
if (!networkType.value) return "未设置";
|
||||
return networkType.value === "wifi" ? "已连接" : "未连接";
|
||||
});
|
||||
|
||||
const bindingDateText = computed(() =>
|
||||
formatBindingDate(
|
||||
deviceDetails.value.bindTime ||
|
||||
deviceDetails.value.bindingTime ||
|
||||
deviceDetails.value.createTime
|
||||
)
|
||||
formatBindingDate(deviceDetails.value.bindTime)
|
||||
);
|
||||
|
||||
const deviceIdText = computed(() =>
|
||||
@@ -91,23 +99,21 @@ const deviceIdText = computed(() =>
|
||||
: maskedDeviceId.value
|
||||
);
|
||||
|
||||
// 设计稿中的设备信息优先读取接口字段，缺省时使用页面展示默认值。
|
||||
// 设备型号直接读取详情接口，缺失时显示占位符。
|
||||
const designDeviceStats = computed(() => [
|
||||
{
|
||||
label: "设备型号",
|
||||
value: deviceDetails.value.model || deviceDetails.value.deviceModel || "射灵1代",
|
||||
value: deviceDetails.value.deviceModelName?.trim() || "--",
|
||||
},
|
||||
{
|
||||
label: "剩余电量",
|
||||
value: batteryText.value === "暂无数据" ? "88%" : batteryText.value,
|
||||
value: batteryText.value === "暂无数据" || !isDeviceOnline.value
|
||||
? "--"
|
||||
: batteryText.value,
|
||||
},
|
||||
{
|
||||
label: "累计使用",
|
||||
value:
|
||||
deviceDetails.value.totalUseTime ||
|
||||
deviceDetails.value.usedTime ||
|
||||
deviceDetails.value.duration ||
|
||||
"2510小时36分",
|
||||
value: onlineDurationText.value,
|
||||
},
|
||||
{
|
||||
label: "绑定时间",
|
||||
@@ -121,17 +127,9 @@ const { confirmBind, handleScan } = useDeviceBinding({
|
||||
binding,
|
||||
updateDevice,
|
||||
deviceDetails,
|
||||
refreshDeviceStatus,
|
||||
});
|
||||
|
||||
const qrImageUrl = computed(
|
||||
() =>
|
||||
deviceDetails.value.qrCode ||
|
||||
deviceDetails.value.qrcode ||
|
||||
deviceDetails.value.qrUrl ||
|
||||
"../../static/device-assets/my-device-qrcode.png"
|
||||
);
|
||||
const isScanPage = computed(() => !device.value.deviceId && !qrVisible.value);
|
||||
const isScanPage = computed(() => !device.value.deviceId);
|
||||
|
||||
// 解绑前展示统一确认弹窗，避免误触解除绑定。
|
||||
const openUnbindDialog = () => {
|
||||
@@ -148,6 +146,7 @@ const openNameEditor = () => {
|
||||
};
|
||||
|
||||
const closeNameEditor = () => {
|
||||
if (renaming.value) return;
|
||||
nameEditorVisible.value = false;
|
||||
};
|
||||
|
||||
@@ -155,8 +154,9 @@ const toggleDeviceId = () => {
|
||||
if (device.value.deviceId) showDeviceId.value = !showDeviceId.value;
|
||||
};
|
||||
|
||||
// 当前接口列表没有设备改名接口，先更新页面和本地缓存，后端接口接入时可替换为请求。
|
||||
const confirmName = () => {
|
||||
const confirmName = async () => {
|
||||
if (renaming.value) return;
|
||||
|
||||
const name = String(editingName.value || "").trim();
|
||||
if (!name) {
|
||||
uni.showToast({ title: "请输入设备名", icon: "none" });
|
||||
@@ -166,13 +166,38 @@ const confirmName = () => {
|
||||
uni.showToast({ title: "设备名格式不正确", icon: "none" });
|
||||
return;
|
||||
}
|
||||
updateDevice(device.value.deviceId, name);
|
||||
deviceDetails.value = { ...deviceDetails.value, deviceName: name };
|
||||
|
||||
const deviceId = device.value.deviceId;
|
||||
if (!deviceId) {
|
||||
uni.showToast({ title: "暂无绑定设备", icon: "none" });
|
||||
return;
|
||||
}
|
||||
|
||||
renaming.value = true;
|
||||
try {
|
||||
await updateDeviceAliasAPI(deviceId, name);
|
||||
if (device.value.deviceId !== deviceId) return;
|
||||
|
||||
updateDevice(deviceId, name);
|
||||
deviceDetails.value = {
|
||||
...deviceDetails.value,
|
||||
deviceAlias: name,
|
||||
deviceName: name,
|
||||
};
|
||||
|
||||
// 服务端别名已成为数据源，移除旧版本遗留的本地名称覆盖。
|
||||
const nameOverrides = getDeviceNameOverrides();
|
||||
nameOverrides[device.value.deviceId] = name;
|
||||
delete nameOverrides[deviceId];
|
||||
uni.setStorageSync(DEVICE_NAME_STORAGE_KEY, nameOverrides);
|
||||
|
||||
nameEditorVisible.value = false;
|
||||
uni.showToast({ title: "设备名已更新", icon: "success" });
|
||||
void refreshDeviceDetails();
|
||||
} catch (error) {
|
||||
console.error("修改设备名失败", error);
|
||||
} finally {
|
||||
renaming.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const toDeviceIntroPage = () => {
|
||||
@@ -180,18 +205,111 @@ const toDeviceIntroPage = () => {
|
||||
};
|
||||
|
||||
const joinWifi = () => {
|
||||
uni.navigateTo({ url: "/pages/device/ota-wifi" });
|
||||
};
|
||||
|
||||
const goFirmwareUpdate = () => {
|
||||
if (!isDeviceOnline.value) {
|
||||
uni.showToast({ title: "请先开启智能弓", icon: "none" });
|
||||
uni.showToast({ title: "请先开启智能弓箭", icon: "none" });
|
||||
return;
|
||||
}
|
||||
uni.navigateTo({ url: "/pages/device/ota-wifi" });
|
||||
};
|
||||
|
||||
const clearOtaState = () => {
|
||||
otaCheckRequestVersion += 1;
|
||||
otaCheckPromise = null;
|
||||
otaNeedUpdate.value = false;
|
||||
};
|
||||
|
||||
const loadOtaVersionInfo = async () => {
|
||||
if (otaCheckPromise) return otaCheckPromise;
|
||||
|
||||
const deviceId = device.value.deviceId;
|
||||
if (!deviceId || !isDeviceOnline.value) return null;
|
||||
|
||||
const requestVersion = ++otaCheckRequestVersion;
|
||||
const request = getHardwareBoxVersionAPI()
|
||||
.then((versionInfo) => {
|
||||
if (
|
||||
requestVersion !== otaCheckRequestVersion ||
|
||||
device.value.deviceId !== deviceId ||
|
||||
!isDeviceOnline.value
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!versionInfo || typeof versionInfo !== "object") {
|
||||
throw new Error("固件版本信息为空");
|
||||
}
|
||||
|
||||
const needUpdate =
|
||||
versionInfo.needUpdate === true || Number(versionInfo.needUpdate) === 1;
|
||||
otaNeedUpdate.value = needUpdate;
|
||||
return {
|
||||
versionNumber: versionInfo.versionNumber || "",
|
||||
resourceUrl: versionInfo.resourceUrl || "",
|
||||
needUpdate,
|
||||
};
|
||||
})
|
||||
.finally(() => {
|
||||
if (otaCheckPromise === request) {
|
||||
otaCheckPromise = null;
|
||||
}
|
||||
});
|
||||
|
||||
otaCheckPromise = request;
|
||||
return request;
|
||||
};
|
||||
|
||||
const refreshOtaUpdateState = async () => {
|
||||
otaNeedUpdate.value = false;
|
||||
if (!device.value.deviceId || !isDeviceOnline.value) {
|
||||
clearOtaState();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await loadOtaVersionInfo();
|
||||
} catch (error) {
|
||||
clearOtaState();
|
||||
console.log("检查固件更新失败", error);
|
||||
}
|
||||
};
|
||||
|
||||
const closeLatestVersionDialog = () => {
|
||||
latestVersionDialogVisible.value = false;
|
||||
};
|
||||
|
||||
const goFirmwareUpdate = async () => {
|
||||
if (firmwareActionPending.value) return;
|
||||
if (!isDeviceOnline.value) {
|
||||
uni.showToast({ title: "请先开启智能弓", icon: "none" });
|
||||
return;
|
||||
}
|
||||
|
||||
firmwareActionPending.value = true;
|
||||
try {
|
||||
const versionInfo = await loadOtaVersionInfo();
|
||||
if (!versionInfo) return;
|
||||
if (!versionInfo.needUpdate) {
|
||||
latestVersionDialogVisible.value = true;
|
||||
return;
|
||||
}
|
||||
|
||||
const query = [
|
||||
`versionNumber=${encodeURIComponent(versionInfo.versionNumber)}`,
|
||||
`resourceUrl=${encodeURIComponent(versionInfo.resourceUrl)}`,
|
||||
].join("&");
|
||||
uni.navigateTo({ url: `/pages/device/ota-wifi?${query}` });
|
||||
} catch (error) {
|
||||
uni.showToast({ title: "获取更新版本失败，请重试", icon: "none" });
|
||||
} finally {
|
||||
firmwareActionPending.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const goCalibration = async () => {
|
||||
if (!isDeviceOnline.value) {
|
||||
uni.showToast({ title: "请先开启智能弓箭", icon: "none" });
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await laserAimAPI();
|
||||
uni.navigateTo({ url: "/pages/device/calibration" });
|
||||
@@ -208,8 +326,13 @@ const copyEmail = () => {
|
||||
};
|
||||
|
||||
const openQr = () => {
|
||||
qrSaved.value = false;
|
||||
qrVisible.value = true;
|
||||
if (!device.value.deviceId) {
|
||||
uni.showToast({ title: "暂无绑定设备", icon: "none" });
|
||||
return;
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: `/pages/device/device-qrcode?deviceId=${encodeURIComponent(device.value.deviceId)}`,
|
||||
});
|
||||
};
|
||||
|
||||
const closeTip = () => {
|
||||
@@ -220,35 +343,19 @@ const closeConfirmBindTip = () => {
|
||||
confirmBindTip.value = false;
|
||||
};
|
||||
|
||||
const closeQr = () => {
|
||||
qrVisible.value = false;
|
||||
};
|
||||
|
||||
// 保存二维码到相册；远程二维码先下载到临时目录，失败时保留长按保存提示。
|
||||
const saveQrCode = async () => {
|
||||
let filePath = qrImageUrl.value;
|
||||
try {
|
||||
if (/^https?:\/\//.test(filePath)) {
|
||||
filePath = await new Promise((resolve, reject) => {
|
||||
uni.downloadFile({
|
||||
url: filePath,
|
||||
success: (result) =>
|
||||
result.statusCode === 200
|
||||
? resolve(result.tempFilePath)
|
||||
: reject(new Error("二维码下载失败")),
|
||||
fail: reject,
|
||||
});
|
||||
});
|
||||
watch(
|
||||
() => isDeviceOnline.value,
|
||||
(isOnline, wasOnline) => {
|
||||
if (isOnline && !wasOnline) {
|
||||
void refreshDeviceDetails();
|
||||
void refreshOtaUpdateState();
|
||||
return;
|
||||
}
|
||||
await new Promise((resolve, reject) => {
|
||||
uni.saveImageToPhotosAlbum({ success: resolve, fail: reject, filePath });
|
||||
});
|
||||
qrSaved.value = true;
|
||||
uni.showToast({ title: "已保存至相册", icon: "success" });
|
||||
} catch (error) {
|
||||
uni.showToast({ title: "请长按二维码保存", icon: "none" });
|
||||
if (!isOnline) {
|
||||
clearOtaState();
|
||||
}
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
onLoad((options = {}) => {
|
||||
retryScanOnShow.value = options.retryScan === "1";
|
||||
@@ -265,6 +372,7 @@ onUnmounted(() => {
|
||||
onShow(async () => {
|
||||
calibration.value = uni.getStorageSync("calibration");
|
||||
await syncDeviceBinding();
|
||||
void refreshOtaUpdateState();
|
||||
if (retryScanOnShow.value) {
|
||||
retryScanOnShow.value = false;
|
||||
handleScan();
|
||||
@@ -279,24 +387,17 @@ onShow(async () => {
|
||||
:scroll="false"
|
||||
:usePageScroll="false"
|
||||
>
|
||||
<view v-if="qrVisible" class="qr-page" @click="closeQr">
|
||||
<view class="qr-canvas" @click.stop>
|
||||
<view class="qr-corner qr-corner--top"></view>
|
||||
<view class="qr-corner qr-corner--bottom"></view>
|
||||
<text class="qr-title">射灵智能弓箭二维码</text>
|
||||
<image class="qr-image" :src="qrImageUrl" mode="aspectFit" show-menu-by-longpress />
|
||||
<text v-if="qrSaved" class="qr-device-id">设备ID：{{ maskedDeviceId }}</text>
|
||||
<view v-else class="qr-save-button" @click="saveQrCode">
|
||||
<text>保存至相册</text>
|
||||
</view>
|
||||
<text class="qr-description">
|
||||
该二维码为当前绑定弓箭的二维码，你可以截图保存到相册，以便当二维码丢失或不在身边时，可以扫描二维码进行设备绑定。
|
||||
</text>
|
||||
<text class="qr-note">注：解除绑定后将无法查看该二维码。</text>
|
||||
<template #header>
|
||||
<view class="device-nav">
|
||||
<Header title="" />
|
||||
<text class="device-nav-title">我的设备</text>
|
||||
<view v-if="device.deviceId" class="device-status" :class="statusClass">
|
||||
<view class="status-dot"></view>
|
||||
<text>{{ statusText }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else-if="!device.deviceId" class="scan-code">
|
||||
</template>
|
||||
<view v-if="!device.deviceId" class="scan-code">
|
||||
<view class="unbound-content">
|
||||
<button class="scan-entry" hover-class="none" @click="$clickSound(handleScan)">
|
||||
<image src="../../static/device-assets/my-device-unbound-scan.png" mode="aspectFit" />
|
||||
@@ -322,7 +423,10 @@ onShow(async () => {
|
||||
</view>
|
||||
|
||||
<view v-else class="device-page">
|
||||
<view class="device-visual">
|
||||
<view
|
||||
class="device-visual"
|
||||
:class="{ 'device-float-group': isDeviceOnline }"
|
||||
>
|
||||
<image
|
||||
class="device-stage"
|
||||
src="../../static/home-device/device-platform.png"
|
||||
@@ -335,11 +439,10 @@ onShow(async () => {
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="device-heading">
|
||||
<view class="device-status" :class="statusClass">
|
||||
<view class="status-dot"></view>
|
||||
<text>{{ statusText }}</text>
|
||||
</view>
|
||||
<view
|
||||
class="device-heading"
|
||||
:class="{ 'device-float-group': isDeviceOnline }"
|
||||
>
|
||||
<view class="device-title-row">
|
||||
<text class="device-name">{{ device.deviceName || "打弓佬" }}</text>
|
||||
<view class="edit-name" @click="openNameEditor">
|
||||
@@ -351,7 +454,9 @@ onShow(async () => {
|
||||
<view class="device-id-toggle" @click="toggleDeviceId">
|
||||
<image
|
||||
class="device-id-eye"
|
||||
src="../../static/home-device/device-id-visibility.png"
|
||||
:src="showDeviceId
|
||||
? '../../static/home-device/device-id-visible.png'
|
||||
: '../../static/home-device/device-id-hidden.png'"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
</view>
|
||||
@@ -392,7 +497,10 @@ onShow(async () => {
|
||||
</view>
|
||||
<view class="action-label-wrap">
|
||||
<text>固件更新</text>
|
||||
<text class="action-badge action-badge--new">New</text>
|
||||
<text
|
||||
v-if="otaNeedUpdate"
|
||||
class="action-badge action-badge--new"
|
||||
>New</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="action-item" @click="joinWifi">
|
||||
@@ -401,8 +509,17 @@ onShow(async () => {
|
||||
</view>
|
||||
<view class="action-label-wrap">
|
||||
<text>WIFI设置</text>
|
||||
<text v-if="wifiStatusText === '未连接'" class="action-badge action-badge--offline">
|
||||
未连接
|
||||
<text
|
||||
:class="[
|
||||
'action-badge',
|
||||
wifiStatusText === '未设置'
|
||||
? 'action-badge--unset'
|
||||
: wifiStatusText === '未连接'
|
||||
? 'action-badge--offline'
|
||||
: '',
|
||||
]"
|
||||
>
|
||||
{{ wifiStatusText }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -472,29 +589,84 @@ onShow(async () => {
|
||||
:onConfirm="unbindDevice"
|
||||
></ModalDialog>
|
||||
|
||||
<ModalDialog
|
||||
:show="latestVersionDialogVisible"
|
||||
title="固件更新"
|
||||
content="已经是最新版本"
|
||||
confirmText="确定"
|
||||
:showCancel="false"
|
||||
:onConfirm="closeLatestVersionDialog"
|
||||
></ModalDialog>
|
||||
|
||||
<view v-if="nameEditorVisible" class="name-mask" @click="closeNameEditor">
|
||||
<view class="name-sheet" @click.stop>
|
||||
<view class="name-panel" @click.stop>
|
||||
<image
|
||||
class="name-mascot"
|
||||
src="../../static/home-device/device-name-mascot.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<view class="name-sheet">
|
||||
<view class="name-input-row">
|
||||
<input
|
||||
v-model="editingName"
|
||||
class="name-input"
|
||||
focus
|
||||
:cursor-spacing="24"
|
||||
:disabled="renaming"
|
||||
maxlength="10"
|
||||
confirm-type="done"
|
||||
placeholder="请输入设备名（最长10个汉字）"
|
||||
placeholder-class="name-placeholder"
|
||||
@confirm="confirmName"
|
||||
/>
|
||||
<view class="name-confirm" @click="confirmName">确定</view>
|
||||
<view
|
||||
class="name-confirm"
|
||||
:class="{ 'name-confirm--disabled': renaming }"
|
||||
@click="confirmName"
|
||||
>
|
||||
<image
|
||||
class="name-confirm-image"
|
||||
src="../../static/home-device/device-name-confirm.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<text class="name-helper">仅支持中文、英文、数字、下划线、减号</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</Container>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.device-nav {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.device-nav-title {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
color: #ffffff;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
line-height: 52rpx;
|
||||
white-space: nowrap;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.device-nav .device-status {
|
||||
position: absolute;
|
||||
top: calc(100% + 28rpx);
|
||||
left: 50%;
|
||||
white-space: nowrap;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.my-device-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
@@ -635,6 +807,20 @@ onShow(async () => {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.device-float-group {
|
||||
animation: my-device-float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes my-device-float {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10rpx);
|
||||
}
|
||||
}
|
||||
|
||||
.device-stage {
|
||||
position: absolute;
|
||||
top: 214rpx;
|
||||
@@ -688,7 +874,7 @@ onShow(async () => {
|
||||
.device-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 536rpx;
|
||||
margin-top: 566rpx;
|
||||
height: 52rpx;
|
||||
line-height: 52rpx;
|
||||
padding: 0 24rpx;
|
||||
@@ -855,6 +1041,14 @@ onShow(async () => {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.action-badge--offline {
|
||||
color: #8b0000;
|
||||
}
|
||||
|
||||
.action-badge--unset {
|
||||
color: #565656;
|
||||
}
|
||||
|
||||
.unbind-entry {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
@@ -995,99 +1189,6 @@ onShow(async () => {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.qr-page {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.qr-corner {
|
||||
position: absolute;
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
background: #ffeb00;
|
||||
}
|
||||
|
||||
.qr-corner--top {
|
||||
top: -220rpx;
|
||||
right: -170rpx;
|
||||
transform: rotate(42deg);
|
||||
}
|
||||
|
||||
.qr-corner--bottom {
|
||||
bottom: -220rpx;
|
||||
left: -170rpx;
|
||||
transform: rotate(42deg);
|
||||
}
|
||||
|
||||
.qr-canvas {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 260rpx 62rpx 70rpx;
|
||||
}
|
||||
|
||||
.qr-title {
|
||||
color: #ffe846;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.qr-image {
|
||||
width: 432rpx;
|
||||
height: 432rpx;
|
||||
margin-top: 48rpx;
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.qr-device-id {
|
||||
margin-top: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.62);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.qr-save-button {
|
||||
display: flex;
|
||||
width: 360rpx;
|
||||
height: 72rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 34rpx;
|
||||
border: 1rpx solid #e8c840;
|
||||
border-radius: 36rpx;
|
||||
color: #ffe846;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.qr-description,
|
||||
.qr-note {
|
||||
width: 100%;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 22rpx;
|
||||
line-height: 36rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.qr-description {
|
||||
margin-top: 42rpx;
|
||||
}
|
||||
|
||||
.qr-note {
|
||||
margin-top: 12rpx;
|
||||
color: rgba(255, 232, 70, 0.7);
|
||||
}
|
||||
|
||||
.name-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -1101,52 +1202,86 @@ onShow(async () => {
|
||||
background: rgba(0, 0, 0, 0.68);
|
||||
}
|
||||
|
||||
.name-panel {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.name-mascot {
|
||||
position: absolute;
|
||||
bottom: calc(100% - 74rpx);
|
||||
left: 50%;
|
||||
z-index: 0;
|
||||
width: 176rpx;
|
||||
height: 190rpx;
|
||||
pointer-events: none;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.name-sheet {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 34rpx 32rpx 48rpx;
|
||||
border-top: 1rpx solid rgba(255, 226, 153, 0.4);
|
||||
border-radius: 28rpx 28rpx 0 0;
|
||||
background: linear-gradient(180deg, #57462b, #2c241b);
|
||||
padding: 42rpx 48rpx calc(48rpx + env(safe-area-inset-bottom));
|
||||
border-top: 2rpx solid rgba(255, 218, 96, 0.5);
|
||||
background: linear-gradient(180deg, #725323 0%, #4a351d 100%);
|
||||
}
|
||||
|
||||
.name-input-row {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
max-width: 620rpx;
|
||||
height: 78rpx;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
border-radius: 40rpx;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.name-input {
|
||||
flex: 1;
|
||||
height: 76rpx;
|
||||
padding: 0 22rpx;
|
||||
min-width: 0;
|
||||
height: 78rpx;
|
||||
padding: 0 28rpx 0 38rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 14rpx;
|
||||
color: #ffffff;
|
||||
background: rgba(0, 0, 0, 0.22);
|
||||
color: #3f3a34;
|
||||
background: #ffffff;
|
||||
font-size: 28rpx;
|
||||
line-height: 78rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.name-placeholder {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
color: #5f5a55;
|
||||
}
|
||||
|
||||
.name-confirm {
|
||||
display: flex;
|
||||
width: 132rpx;
|
||||
height: 76rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 18rpx;
|
||||
border-radius: 14rpx;
|
||||
color: #1b160d;
|
||||
background: #fed847;
|
||||
font-size: 26rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 156rpx;
|
||||
height: 78rpx;
|
||||
flex: 0 0 156rpx;
|
||||
}
|
||||
|
||||
.name-confirm-image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.name-confirm--disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.name-helper {
|
||||
display: block;
|
||||
margin-top: 18rpx;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 22rpx;
|
||||
margin-top: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.62);
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,15 +1,19 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from "vue";
|
||||
import { ref, computed, onMounted, onUnmounted, watch } from "vue";
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app";
|
||||
import Container from "@/components/Container.vue";
|
||||
import ScreenHint from "@/components/ScreenHint.vue";
|
||||
import {
|
||||
connectDeviceWifiAPI,
|
||||
getDeviceBatteryAPI,
|
||||
getHardwareBoxTaskStatusAPI,
|
||||
getHardwareBoxVersionAPI,
|
||||
sendHardwareBoxUpdateAPI,
|
||||
} from "@/apis";
|
||||
import useStore from "@/store";
|
||||
import { storeToRefs } from "pinia";
|
||||
|
||||
const store = useStore();
|
||||
const { deviceStatus } = storeToRefs(store);
|
||||
|
||||
const STATES = {
|
||||
SCANNING: "SCANNING",
|
||||
@@ -48,14 +52,13 @@ const progress = ref(0);
|
||||
let progressTimer = null;
|
||||
let timeoutTimer = null;
|
||||
let statusTimer = null;
|
||||
let wifiConnectTimer = null;
|
||||
let wifiConnectTimeoutTimer = null;
|
||||
let stopWifiStatusWatcher = null;
|
||||
let settleWifiConnectWaiting = null;
|
||||
let wifiConnectRequestId = 0;
|
||||
let wifiConnectPollCount = 0;
|
||||
const WIFI_CONNECT_POLL_INTERVAL = 2000;
|
||||
const WIFI_CONNECT_MAX_POLL_COUNT = 30;
|
||||
const WIFI_CONNECT_TIMEOUT = 60000;
|
||||
const DEVICE_STATUS_STALE_TIME = 6000;
|
||||
const WIFI_CONNECT_FAILED_TEXT = "连接失败，请检查WiFi密码或WiFi状态";
|
||||
const OTA_MIN_BATTERY = 50;
|
||||
const OTA_LOW_BATTERY_TEXT = "电量不足 50%，暂不支持 OTA 升级";
|
||||
// 控制授权拒绝弹窗显示/隐藏
|
||||
const wifiAuthDeniedVisible = ref(false);
|
||||
|
||||
@@ -207,7 +210,7 @@ const startScanning = () => {
|
||||
|
||||
// 选择列表中的 WiFi，并打开密码输入弹窗。
|
||||
const selectWifi = (wifi) => {
|
||||
cancelWifiConnectPolling();
|
||||
cancelWifiConnectWaiting();
|
||||
connectingWifi.value = wifi;
|
||||
connectInput.value = { ssid: wifi.SSID, password: "" };
|
||||
connectMode.value = wifi.secure ? "secure" : "open";
|
||||
@@ -217,7 +220,7 @@ const selectWifi = (wifi) => {
|
||||
|
||||
// 选择手动输入 WiFi，并打开手动输入弹窗。
|
||||
const selectOther = () => {
|
||||
cancelWifiConnectPolling();
|
||||
cancelWifiConnectWaiting();
|
||||
connectingWifi.value = null;
|
||||
connectInput.value = { ssid: "", password: "" };
|
||||
connectMode.value = "manual";
|
||||
@@ -225,9 +228,9 @@ const selectOther = () => {
|
||||
currentState.value = STATES.CONNECTING;
|
||||
};
|
||||
|
||||
// 关闭连接弹窗，并停止当前 WiFi 连接轮询。
|
||||
// 关闭连接弹窗，并停止等待当前 WiFi 连接结果。
|
||||
const closeConnectSheet = () => {
|
||||
cancelWifiConnectPolling();
|
||||
cancelWifiConnectWaiting();
|
||||
connectError.value = "";
|
||||
currentState.value = connectedWifi.value ? STATES.CONNECTED : STATES.LIST;
|
||||
};
|
||||
@@ -257,89 +260,84 @@ const wifiListScrollHeight = computed(() => {
|
||||
return `${Math.min(itemCount * 92, maxHeight)}rpx`;
|
||||
});
|
||||
|
||||
// 清理 WiFi 连接轮询定时器。
|
||||
const clearWifiConnectTimer = () => {
|
||||
clearTimeout(wifiConnectTimer);
|
||||
wifiConnectTimer = null;
|
||||
wifiConnectPollCount = 0;
|
||||
// 清理本次 WiFi 连接状态监听和超时计时器。
|
||||
const clearWifiConnectWatcher = () => {
|
||||
clearTimeout(wifiConnectTimeoutTimer);
|
||||
wifiConnectTimeoutTimer = null;
|
||||
if (stopWifiStatusWatcher) {
|
||||
stopWifiStatusWatcher();
|
||||
stopWifiStatusWatcher = null;
|
||||
}
|
||||
};
|
||||
|
||||
// 取消当前 WiFi 连接轮询，并恢复弹窗提交状态。
|
||||
const cancelWifiConnectPolling = () => {
|
||||
// 取消当前 WiFi 连接确认，并恢复弹窗提交状态。
|
||||
const cancelWifiConnectWaiting = () => {
|
||||
wifiConnectRequestId += 1;
|
||||
clearWifiConnectTimer();
|
||||
if (settleWifiConnectWaiting) {
|
||||
settleWifiConnectWaiting(false);
|
||||
}
|
||||
clearWifiConnectWatcher();
|
||||
connectStatusText.value = "";
|
||||
isSubmittingWifi.value = false;
|
||||
uni.hideLoading();
|
||||
};
|
||||
|
||||
// 判断设备电量接口返回的 online/netType 字段，确定设备是否已通过 WiFi 在线。
|
||||
// 返回值含义：true → WiFi 在线成功；"net_fail" → 设备走 4g 失败；false → 未就绪，需继续轮询。
|
||||
// 根据实时推送的 online/netType 判断设备是否已通过 WiFi 在线。
|
||||
// 返回值含义：true → WiFi 在线成功；"net_fail" → 设备走 4g 失败；false → 未就绪。
|
||||
const isDeviceConnectedByWifi = (deviceStatus) => {
|
||||
// online 不为 true → 设备不在线，需继续轮询
|
||||
// online 不为 true → 设备尚未在线，继续等待推送
|
||||
if (deviceStatus?.online !== true) return false;
|
||||
const netType = String(deviceStatus?.netType || "").toLowerCase();
|
||||
// online:true + netType:4g → 设备已切 4g，WiFi 连接失败
|
||||
if (netType === "4g") return "net_fail";
|
||||
// online:true + netType:wifi → WiFi 连接成功
|
||||
// online:true + netType:"" → 设备在线但 netType 暂未上报，继续轮询等待
|
||||
// online:true + netType:"" → 设备在线但 netType 暂未上报，继续等待推送
|
||||
return netType === "wifi";
|
||||
};
|
||||
|
||||
// 轮询设备电量接口，等待设备切到 WiFi 在线；netType:4g 快速失败，超时 30 次后放弃。
|
||||
const waitForDeviceWifiConnected = (requestId) => {
|
||||
// 等待提交配置后的新 WS 状态；忽略提交前的旧状态，超时后按连接失败处理。
|
||||
const waitForDeviceWifiConnected = (requestId, receivedAfter) => {
|
||||
return new Promise((resolve) => {
|
||||
const poll = async () => {
|
||||
if (requestId !== wifiConnectRequestId) {
|
||||
resolve(false);
|
||||
return;
|
||||
}
|
||||
|
||||
wifiConnectPollCount += 1;
|
||||
try {
|
||||
const deviceStatus = await getDeviceBatteryAPI();
|
||||
if (requestId !== wifiConnectRequestId) {
|
||||
resolve(false);
|
||||
return;
|
||||
}
|
||||
const connResult = isDeviceConnectedByWifi(deviceStatus);
|
||||
// online:true + netType:wifi → 成功
|
||||
if (connResult === true) {
|
||||
resolve(true);
|
||||
return;
|
||||
}
|
||||
// online:true + netType:4g → 立即失败（设备已切 4g，WiFi 连不上）
|
||||
if (connResult === "net_fail") {
|
||||
resolve(false);
|
||||
return;
|
||||
}
|
||||
// online:false + netType:"" → 继续轮询
|
||||
// online:true + netType:"" → 忽略，继续轮询（netType 暂未上报）
|
||||
} catch (err) {
|
||||
if (requestId !== wifiConnectRequestId) {
|
||||
resolve(false);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (wifiConnectPollCount >= WIFI_CONNECT_MAX_POLL_COUNT) {
|
||||
resolve(false);
|
||||
return;
|
||||
}
|
||||
|
||||
wifiConnectTimer = setTimeout(poll, WIFI_CONNECT_POLL_INTERVAL);
|
||||
let settled = false;
|
||||
const finish = (result) => {
|
||||
if (settled) return;
|
||||
settled = true;
|
||||
clearWifiConnectWatcher();
|
||||
settleWifiConnectWaiting = null;
|
||||
resolve(result);
|
||||
};
|
||||
|
||||
poll();
|
||||
settleWifiConnectWaiting = finish;
|
||||
stopWifiStatusWatcher = watch(
|
||||
deviceStatus,
|
||||
(status) => {
|
||||
if (requestId !== wifiConnectRequestId) {
|
||||
finish(false);
|
||||
return;
|
||||
}
|
||||
if (Number(status?.receivedAt) <= receivedAfter) return;
|
||||
|
||||
const connResult = isDeviceConnectedByWifi(status);
|
||||
if (connResult === true) {
|
||||
finish(true);
|
||||
} else if (connResult === "net_fail") {
|
||||
finish(false);
|
||||
}
|
||||
}
|
||||
);
|
||||
wifiConnectTimeoutTimer = setTimeout(
|
||||
() => finish(false),
|
||||
WIFI_CONNECT_TIMEOUT
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
// 提交 WiFi 配置给游戏设备，并轮询确认设备真实连上 WiFi 后再展示成功。
|
||||
// 提交 WiFi 配置给游戏设备，并通过 WS 确认设备真实连上 WiFi 后再展示成功。
|
||||
const submitDeviceWifiConfig = async ({ ssid, password }) => {
|
||||
if (isSubmittingWifi.value) return;
|
||||
wifiConnectRequestId += 1;
|
||||
const requestId = wifiConnectRequestId;
|
||||
clearWifiConnectTimer();
|
||||
clearWifiConnectWatcher();
|
||||
isSubmittingWifi.value = true;
|
||||
connectStatusText.value = "WiFi连接中...";
|
||||
uni.showLoading({
|
||||
@@ -348,7 +346,8 @@ const submitDeviceWifiConfig = async ({ ssid, password }) => {
|
||||
});
|
||||
try {
|
||||
await connectDeviceWifiAPI(ssid, password);
|
||||
const isConnected = await waitForDeviceWifiConnected(requestId);
|
||||
if (requestId !== wifiConnectRequestId) return;
|
||||
const isConnected = await waitForDeviceWifiConnected(requestId, Date.now());
|
||||
if (requestId !== wifiConnectRequestId) return;
|
||||
if (!isConnected) {
|
||||
connectError.value = WIFI_CONNECT_FAILED_TEXT;
|
||||
@@ -369,7 +368,7 @@ const submitDeviceWifiConfig = async ({ ssid, password }) => {
|
||||
}
|
||||
} finally {
|
||||
if (requestId === wifiConnectRequestId) {
|
||||
clearWifiConnectTimer();
|
||||
clearWifiConnectWatcher();
|
||||
connectStatusText.value = "";
|
||||
isSubmittingWifi.value = false;
|
||||
uni.hideLoading();
|
||||
@@ -456,7 +455,9 @@ const pollUpdateTaskStatus = (taskId) => {
|
||||
// 判断设备是否满足 OTA 更新条件，不满足时返回精确提示文案。
|
||||
const getUpdateDisabledReason = (deviceStatus) => {
|
||||
if (deviceStatus?.online !== true) return "请先开启智能弓";
|
||||
if (Number(deviceStatus?.battery) <= OTA_MIN_BATTERY) return OTA_LOW_BATTERY_TEXT;
|
||||
if (Date.now() - Number(deviceStatus?.receivedAt || 0) > DEVICE_STATUS_STALE_TIME) {
|
||||
return "设备状态同步中，请稍后重试";
|
||||
}
|
||||
if (String(deviceStatus?.netType || "").toLowerCase() !== "wifi") return "设备当前未连接 WiFi，请先连接 WiFi 后再更新";
|
||||
return "";
|
||||
};
|
||||
@@ -480,8 +481,7 @@ const startUpdate = async () => {
|
||||
isStartingUpdate.value = true;
|
||||
|
||||
try {
|
||||
const deviceStatus = await getDeviceBatteryAPI();
|
||||
const disabledReason = getUpdateDisabledReason(deviceStatus);
|
||||
const disabledReason = getUpdateDisabledReason(deviceStatus.value);
|
||||
if (disabledReason) {
|
||||
isStartingUpdate.value = false;
|
||||
uni.showToast({
|
||||
@@ -612,7 +612,7 @@ onUnmounted(() => {
|
||||
if (typeof uni.offKeyboardHeightChange === "function") {
|
||||
uni.offKeyboardHeightChange(handleKeyboardHeightChange);
|
||||
}
|
||||
cancelWifiConnectPolling();
|
||||
cancelWifiConnectWaiting();
|
||||
clearUpdateTimers();
|
||||
wx.offGetWifiList && wx.offGetWifiList();
|
||||
});
|
||||
|
||||
+35
-131
@@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
import {computed, onMounted, onUnmounted, ref, watch} from "vue";
|
||||
import {onHide, onShareAppMessage, onShareTimeline, onShow} from "@dcloudio/uni-app";
|
||||
import {onShareAppMessage, onShareTimeline, onShow} from "@dcloudio/uni-app";
|
||||
import Container from "@/components/Container.vue";
|
||||
import AppFooter from "@/components/AppFooter.vue";
|
||||
import UserHeader from "@/components/UserHeader.vue";
|
||||
@@ -11,7 +11,6 @@ import OtaModal from "@/components/OtaModal.vue";
|
||||
import {
|
||||
checkUserBindAPI,
|
||||
getAppConfig,
|
||||
getDeviceBatteryAPI,
|
||||
getHardwareBoxTaskStatusAPI,
|
||||
getHardwareBoxVersionAPI,
|
||||
getHomeData,
|
||||
@@ -33,103 +32,19 @@ const {
|
||||
clearDevice,
|
||||
getLvlName,
|
||||
getLvlNameByScore,
|
||||
updateOnline,
|
||||
updateDeviceBattery,
|
||||
} = store;
|
||||
const {user, device, online, deviceBattery, game} = storeToRefs(store);
|
||||
const {user, device, deviceStatus, online, deviceBattery, game} = storeToRefs(store);
|
||||
|
||||
const showModal = ref(false);
|
||||
const showGuide = ref(false);
|
||||
const scoreRankList = ref([]);
|
||||
const HOME_DEVICE_STATUS_POLL_INTERVAL = 10000;
|
||||
let isHomePageVisible = false;
|
||||
let homeDeviceStatusTimer = null;
|
||||
let isHomeDeviceStatusRequesting = false;
|
||||
|
||||
// 设备状态接口可能返回布尔值、数字或字符串，统一成 true / false / null。
|
||||
// null 表示接口没有给出可判断的状态，调用方应保留已有状态。
|
||||
const normalizeDeviceOnline = (value) => {
|
||||
if (typeof value === "boolean") return value;
|
||||
if (typeof value === "number") return value === 1;
|
||||
|
||||
const normalized = String(value ?? "").trim().toLowerCase();
|
||||
if (["true", "1", "online", "connected"].includes(normalized)) return true;
|
||||
if (["false", "0", "offline", "disconnected"].includes(normalized)) return false;
|
||||
return null;
|
||||
};
|
||||
|
||||
// 将设备状态接口响应统一同步到首页 Store，离线时清空无效电量。
|
||||
const applyHomeDeviceStatus = (data) => {
|
||||
const normalizedOnline = normalizeDeviceOnline(data?.online);
|
||||
if (normalizedOnline !== null) {
|
||||
updateOnline(normalizedOnline);
|
||||
}
|
||||
if (normalizedOnline === false) {
|
||||
updateDeviceBattery(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const battery = data?.battery ?? data?.power;
|
||||
if (battery !== undefined && battery !== null) {
|
||||
updateDeviceBattery(battery);
|
||||
}
|
||||
};
|
||||
|
||||
// 刷新首页设备在线状态和电量；上一轮未结束时跳过，避免请求堆积。
|
||||
const refreshHomeDeviceStatus = async () => {
|
||||
if (
|
||||
!isHomePageVisible ||
|
||||
!user.value?.id ||
|
||||
!device.value?.deviceId ||
|
||||
isHomeDeviceStatusRequesting
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
isHomeDeviceStatusRequesting = true;
|
||||
try {
|
||||
const data = await getDeviceBatteryAPI();
|
||||
if (isHomePageVisible) {
|
||||
applyHomeDeviceStatus(data);
|
||||
}
|
||||
} catch (error) {
|
||||
// 请求失败时保留上一次有效状态，等待下一轮自动恢复。
|
||||
console.log("刷新首页设备状态失败", error);
|
||||
} finally {
|
||||
isHomeDeviceStatusRequesting = false;
|
||||
}
|
||||
};
|
||||
|
||||
const stopHomeDeviceStatusPolling = () => {
|
||||
clearInterval(homeDeviceStatusTimer);
|
||||
homeDeviceStatusTimer = null;
|
||||
};
|
||||
|
||||
// 首页可见且用户已绑定设备时，每 10 秒刷新一次设备状态。
|
||||
const startHomeDeviceStatusPolling = () => {
|
||||
stopHomeDeviceStatusPolling();
|
||||
if (!isHomePageVisible || !user.value?.id || !device.value?.deviceId) return;
|
||||
|
||||
homeDeviceStatusTimer = setInterval(() => {
|
||||
void refreshHomeDeviceStatus();
|
||||
}, HOME_DEVICE_STATUS_POLL_INTERVAL);
|
||||
};
|
||||
|
||||
// 首页停留期间登录或绑定状态变化时，及时启停设备状态轮询。
|
||||
watch(
|
||||
[() => user.value?.id, () => device.value?.deviceId],
|
||||
() => {
|
||||
if (isHomePageVisible) {
|
||||
startHomeDeviceStatusPolling();
|
||||
}
|
||||
}
|
||||
);
|
||||
const DEVICE_STATUS_STALE_TIME = 6000;
|
||||
|
||||
// 首页设备卡片按“未绑定 / 已绑定未连接 / 已绑定已连接”三态展示。
|
||||
const deviceCardState = computed(() => {
|
||||
// 未登录时始终展示绑定入口，避免本地残留设备状态误显示为已绑定。
|
||||
if (!user.value?.id || !device.value?.deviceId) return "unbound";
|
||||
return normalizeDeviceOnline(online.value) === true ? "online" : "offline";
|
||||
return online.value === true ? "online" : "offline";
|
||||
});
|
||||
|
||||
const deviceCardAssets = {
|
||||
@@ -230,13 +145,7 @@ const checkOtaUpdate = async () => {
|
||||
isCheckingOta = true;
|
||||
|
||||
try {
|
||||
let deviceStatus;
|
||||
try {
|
||||
deviceStatus = await getDeviceBatteryAPI();
|
||||
} catch (err) {
|
||||
return;
|
||||
}
|
||||
if (normalizeDeviceOnline(deviceStatus?.online) !== true || otaVisible.value) return;
|
||||
if (online.value !== true || otaVisible.value) return;
|
||||
|
||||
let versionInfo;
|
||||
try {
|
||||
@@ -388,19 +297,9 @@ const startHomeOtaUpdate = async () => {
|
||||
const handleOtaUpdate = async () => {
|
||||
if (isStartingOta.value) return;
|
||||
isStartingOta.value = true;
|
||||
let deviceStatus;
|
||||
try {
|
||||
deviceStatus = await getDeviceBatteryAPI();
|
||||
} catch (err) {
|
||||
isStartingOta.value = false;
|
||||
uni.showToast({
|
||||
title: "获取设备状态失败，请重试",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
const currentDeviceStatus = deviceStatus.value;
|
||||
|
||||
if (normalizeDeviceOnline(deviceStatus?.online) !== true) {
|
||||
if (currentDeviceStatus?.online !== true) {
|
||||
isStartingOta.value = false;
|
||||
uni.showToast({
|
||||
title: "请先开启智能弓",
|
||||
@@ -409,7 +308,19 @@ const handleOtaUpdate = async () => {
|
||||
return;
|
||||
}
|
||||
|
||||
if (String(deviceStatus?.netType || "").toLowerCase() === "wifi") {
|
||||
if (
|
||||
Date.now() - Number(currentDeviceStatus?.receivedAt || 0) >
|
||||
DEVICE_STATUS_STALE_TIME
|
||||
) {
|
||||
isStartingOta.value = false;
|
||||
uni.showToast({
|
||||
title: "设备状态同步中，请稍后重试",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (String(currentDeviceStatus?.netType || "").toLowerCase() === "wifi") {
|
||||
startHomeOtaUpdate();
|
||||
return;
|
||||
}
|
||||
@@ -489,26 +400,15 @@ const syncHomeDevice = async () => {
|
||||
return;
|
||||
}
|
||||
|
||||
const previousDeviceId = String(device.value?.deviceId || "");
|
||||
const deviceId = String(currentDevice.deviceId || "");
|
||||
updateDevice(
|
||||
deviceId,
|
||||
currentDevice.deviceName || currentDevice.name || ""
|
||||
);
|
||||
|
||||
// 切换到新设备时先以离线态初始化，避免沿用上一台设备的在线状态。
|
||||
if (previousDeviceId !== deviceId) {
|
||||
updateOnline(false);
|
||||
updateDeviceBattery(null);
|
||||
}
|
||||
|
||||
await refreshHomeDeviceStatus();
|
||||
};
|
||||
|
||||
onShow(async (options) => {
|
||||
isHomePageVisible = true;
|
||||
startHomeDeviceStatusPolling();
|
||||
|
||||
const env = uni.getAccountInfoSync().miniProgram.envVersion;
|
||||
const token = uni.getStorageSync(`${env}_token`);
|
||||
|
||||
@@ -538,8 +438,6 @@ onShow(async (options) => {
|
||||
// devices.bindings[0].deviceId,
|
||||
// devices.bindings[0].deviceName
|
||||
// );
|
||||
// const data = await getDeviceBatteryAPI();
|
||||
// updateOnline(data.online);
|
||||
// }
|
||||
// } else {
|
||||
// showModal.value = true;
|
||||
@@ -579,13 +477,6 @@ onShow(async (options) => {
|
||||
}
|
||||
}
|
||||
|
||||
// 登录态或绑定设备可能在本次 onShow 中发生变化，按最新状态重建轮询。
|
||||
startHomeDeviceStatusPolling();
|
||||
});
|
||||
|
||||
onHide(() => {
|
||||
isHomePageVisible = false;
|
||||
stopHomeDeviceStatusPolling();
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
@@ -595,8 +486,6 @@ onMounted(async () => {
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
isHomePageVisible = false;
|
||||
stopHomeDeviceStatusPolling();
|
||||
invalidateOtaUpdateRun();
|
||||
});
|
||||
|
||||
@@ -657,6 +546,7 @@ onShareTimeline(() => {
|
||||
/>
|
||||
<image
|
||||
class="device-visual-bow"
|
||||
:class="{ 'device-visual-bow--floating': deviceCardState === 'online' }"
|
||||
:src="deviceCardAsset.bow"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
@@ -878,6 +768,20 @@ onShareTimeline(() => {
|
||||
height: 388rpx;
|
||||
}
|
||||
|
||||
.device-visual-bow--floating {
|
||||
animation: device-bow-float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes device-bow-float {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0) rotate(-0.5deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10rpx) rotate(0.5deg);
|
||||
}
|
||||
}
|
||||
|
||||
.device-status-badge,
|
||||
.device-action-badge {
|
||||
display: flex;
|
||||
|
||||
@@ -1,44 +1,15 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from "vue";
|
||||
import { getDeviceBatteryAPI } from "@/apis";
|
||||
import useStore from "@/store";
|
||||
import { storeToRefs } from "pinia";
|
||||
|
||||
const power = ref(0);
|
||||
const timer = ref(null);
|
||||
let disposed = false;
|
||||
let requestInFlight = false;
|
||||
|
||||
const refreshPower = async () => {
|
||||
if (disposed || requestInFlight) return;
|
||||
requestInFlight = true;
|
||||
try {
|
||||
const data = await getDeviceBatteryAPI();
|
||||
if (!disposed) power.value = data.battery;
|
||||
} catch (_) {
|
||||
// 电量轮询失败时等待下一轮，避免产生未处理的 Promise 拒绝。
|
||||
} finally {
|
||||
requestInFlight = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await refreshPower();
|
||||
if (disposed) return;
|
||||
timer.value = setInterval(() => {
|
||||
void refreshPower();
|
||||
}, 1000 * 10);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
disposed = true;
|
||||
clearInterval(timer.value);
|
||||
timer.value = null;
|
||||
});
|
||||
const store = useStore();
|
||||
const { deviceBattery: power } = storeToRefs(store);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<image src="../../../static/b-power.png" mode="widthFix" />
|
||||
<view>电量{{ power || 1 }}%</view>
|
||||
<view>{{ power === null ? "电量--" : `电量${power}%` }}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 172 KiB After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 107 KiB After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 519 B After Width: | Height: | Size: 433 B |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 630 KiB After Width: | Height: | Size: 162 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 519 B After Width: | Height: | Size: 433 B |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 190 KiB After Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.1 KiB After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 479 B |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 178 KiB After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 202 KiB After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 202 KiB After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 875 B After Width: | Height: | Size: 371 B |
Binary file not shown.
|
After Width: | Height: | Size: 294 B |
|
Before Width: | Height: | Size: 687 B After Width: | Height: | Size: 687 B |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 347 KiB After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 681 B After Width: | Height: | Size: 329 B |
Binary file not shown.
|
Before Width: | Height: | Size: 895 B After Width: | Height: | Size: 413 B |
Binary file not shown.
|
Before Width: | Height: | Size: 972 B After Width: | Height: | Size: 444 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 841 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 587 B |
+54
-3
@@ -17,6 +17,15 @@ const getDefaultDevice = () => ({
|
||||
deviceName: "",
|
||||
});
|
||||
|
||||
const getDefaultDeviceStatus = () => ({
|
||||
battery: null,
|
||||
version: "",
|
||||
online: false,
|
||||
netType: "",
|
||||
onlineDuration: null,
|
||||
receivedAt: 0,
|
||||
});
|
||||
|
||||
const getDefaultGame = () => ({
|
||||
roomID: "",
|
||||
inBattle: false,
|
||||
@@ -102,6 +111,8 @@ export default defineStore("store", {
|
||||
online: false,
|
||||
// 设备电量属于运行时状态，null 表示当前没有有效数据。
|
||||
deviceBattery: null,
|
||||
// WebSocket 实时推送的设备状态，不参与持久化。
|
||||
deviceStatus: getDefaultDeviceStatus(),
|
||||
game: {
|
||||
roomID: "",
|
||||
inBattle: false,
|
||||
@@ -136,7 +147,7 @@ export default defineStore("store", {
|
||||
this.rankData = { ...(data || {}) };
|
||||
},
|
||||
updateOnline(online) {
|
||||
this.online = online;
|
||||
this.setDeviceOnline(online);
|
||||
},
|
||||
updateDeviceBattery(value) {
|
||||
if (value === null || value === undefined || value === "") {
|
||||
@@ -149,6 +160,43 @@ export default defineStore("store", {
|
||||
? Math.min(100, Math.max(0, battery))
|
||||
: null;
|
||||
},
|
||||
updateDeviceStatus(status = {}) {
|
||||
const battery = Number(status.battery ?? status.power);
|
||||
const onlineDuration = Number(status.onlineDuration);
|
||||
const online = status.online === true;
|
||||
const nextStatus = {
|
||||
battery: Number.isFinite(battery)
|
||||
? Math.min(100, Math.max(0, battery))
|
||||
: null,
|
||||
version: String(status.version ?? "").trim(),
|
||||
online,
|
||||
netType: String(status.netType ?? "").trim().toLowerCase(),
|
||||
onlineDuration:
|
||||
Number.isFinite(onlineDuration) && onlineDuration >= 0
|
||||
? onlineDuration
|
||||
: null,
|
||||
receivedAt: Date.now(),
|
||||
};
|
||||
|
||||
this.deviceStatus = nextStatus;
|
||||
this.online = online;
|
||||
this.deviceBattery = online ? nextStatus.battery : null;
|
||||
},
|
||||
setDeviceOnline(online) {
|
||||
const nextOnline = online === true;
|
||||
this.online = nextOnline;
|
||||
if (nextOnline) {
|
||||
this.deviceStatus = { ...this.deviceStatus, online: true };
|
||||
return;
|
||||
}
|
||||
this.deviceBattery = null;
|
||||
this.deviceStatus = getDefaultDeviceStatus();
|
||||
},
|
||||
clearDeviceStatus() {
|
||||
this.online = false;
|
||||
this.deviceBattery = null;
|
||||
this.deviceStatus = getDefaultDeviceStatus();
|
||||
},
|
||||
async updateUser(user = {}) {
|
||||
this.user = { ...getDefaultUser(), ...user };
|
||||
this.user.lvlName = getLvlNameByScore(this.user.scores, this.config.randInfos)
|
||||
@@ -158,13 +206,15 @@ export default defineStore("store", {
|
||||
);
|
||||
},
|
||||
updateDevice(deviceId, deviceName) {
|
||||
if (String(this.device.deviceId || "") !== String(deviceId || "")) {
|
||||
this.clearDeviceStatus();
|
||||
}
|
||||
this.device.deviceId = deviceId;
|
||||
this.device.deviceName = deviceName;
|
||||
},
|
||||
clearDevice() {
|
||||
this.device = getDefaultDevice();
|
||||
this.online = false;
|
||||
this.deviceBattery = null;
|
||||
this.clearDeviceStatus();
|
||||
},
|
||||
async updateConfig(config) {
|
||||
this.config = config;
|
||||
@@ -214,6 +264,7 @@ export default defineStore("store", {
|
||||
device: getDefaultDevice(),
|
||||
online: false,
|
||||
deviceBattery: null,
|
||||
deviceStatus: getDefaultDeviceStatus(),
|
||||
game: getDefaultGame(),
|
||||
dailyCount: getDefaultDailyCount(),
|
||||
deviceChargingDialogVisible: false,
|
||||
|
||||
+23
-6
@@ -77,17 +77,33 @@ function createWebSocket(token, onMessage) {
|
||||
socketTask.onMessage((res) => {
|
||||
if (socket !== socketTask) return;
|
||||
|
||||
const { data, event } = JSON.parse(res.data);
|
||||
let response;
|
||||
try {
|
||||
response = JSON.parse(res.data);
|
||||
} catch (err) {
|
||||
console.error("WebSocket 消息解析失败", err);
|
||||
return;
|
||||
}
|
||||
|
||||
const { data, event, code, timestamp } = response || {};
|
||||
if (event === "pong") return;
|
||||
if (data.type) {
|
||||
if (event === "/addons/shoot/battery") {
|
||||
if ((code == null || Number(code) === 0) && onMessage && data && typeof data === "object") {
|
||||
onMessage({ event, data, code, timestamp });
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (data?.type) {
|
||||
if (ENABLE_REALTIME_MESSAGE_LOG) {
|
||||
console.log("收到 WebSocket 消息", getMessageTypeName(data.type));
|
||||
}
|
||||
if (onMessage) onMessage({ ...(data.data || {}), type: data.type });
|
||||
return;
|
||||
}
|
||||
if (onMessage && data.updates) onMessage(data.updates);
|
||||
const msg = data.updates[0];
|
||||
const updates = Array.isArray(data?.updates) ? data.updates : [];
|
||||
if (!updates.length) return;
|
||||
if (onMessage) onMessage(updates);
|
||||
const msg = updates[0];
|
||||
if (msg) {
|
||||
if (ENABLE_REALTIME_MESSAGE_LOG) {
|
||||
console.log(
|
||||
@@ -101,9 +117,9 @@ function createWebSocket(token, onMessage) {
|
||||
} else if (msg.constructor === MESSAGETYPES.LvlUpdate) {
|
||||
uni.setStorageSync("latestLvl", msg.lvl);
|
||||
} else if (msg.constructor === MESSAGETYPES.DeviceOnline) {
|
||||
uni.$emit("update-online");
|
||||
uni.$emit("update-online", true);
|
||||
} else if (msg.constructor === MESSAGETYPES.DeviceOffline) {
|
||||
uni.$emit("update-online");
|
||||
uni.$emit("update-online", false);
|
||||
} else if (msg.constructor === MESSAGETYPES.DeviceCharging) {
|
||||
uni.$emit("device-charging");
|
||||
}
|
||||
@@ -121,6 +137,7 @@ function createWebSocket(token, onMessage) {
|
||||
stopHeartbeat();
|
||||
socket = null;
|
||||
isConnecting = false;
|
||||
uni.$emit("shoot-socket-disconnected");
|
||||
|
||||
if (manualClose || kickedOut) return;
|
||||
await handleUnexpectedClose(onMessage);
|
||||
|
||||
Reference in New Issue
Block a user