update：代码备份
This commit is contained in:
@@ -0,0 +1,177 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from "vue";
|
||||
import { onShow, onHide } from "@dcloudio/uni-app";
|
||||
import Container from "@/components/Container.vue";
|
||||
import SButton from "@/components/SButton.vue";
|
||||
|
||||
import { aimRenewAPI, laserAimAPI, laserCloseAPI } from "@/apis";
|
||||
import { MESSAGETYPES } from "@/constants";
|
||||
// import audioManager from "@/audioManager";
|
||||
|
||||
const guides = [
|
||||
{
|
||||
title: "箭头面向靶子",
|
||||
src: "https://static.shelingxingqiu.com/attachment/2025-10-30/ddv9p5fk5wscg7hrfo.png",
|
||||
},
|
||||
{
|
||||
title: "摆出拉弓姿势",
|
||||
src: "https://static.shelingxingqiu.com/attachment/2025-10-30/ddv9p5fk5b7ljrhx3o.png",
|
||||
},
|
||||
{
|
||||
title: "调整瞄准器",
|
||||
src: "https://static.shelingxingqiu.com/attachment/2025-10-29/dduexjgrcxf9wjaiv4.png",
|
||||
},
|
||||
];
|
||||
|
||||
const done = ref(true);
|
||||
let aimRenewTimer = null;
|
||||
let pageMounted = false;
|
||||
let pageVisible = false;
|
||||
let aimSessionVersion = 0;
|
||||
|
||||
const stopAimRenew = () => {
|
||||
if (!aimRenewTimer) return;
|
||||
clearInterval(aimRenewTimer);
|
||||
aimRenewTimer = null;
|
||||
};
|
||||
|
||||
const startAimRenew = () => {
|
||||
stopAimRenew();
|
||||
aimRenewTimer = setInterval(() => {
|
||||
aimRenewAPI();
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const openAimSession = async (sessionVersion) => {
|
||||
try {
|
||||
await laserAimAPI();
|
||||
} catch (error) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
!pageMounted ||
|
||||
!pageVisible ||
|
||||
sessionVersion !== aimSessionVersion
|
||||
) {
|
||||
void laserCloseAPI().catch(() => {});
|
||||
return;
|
||||
}
|
||||
|
||||
startAimRenew();
|
||||
};
|
||||
|
||||
const stopAimSession = (closeLaser = true) => {
|
||||
const wasVisible = pageVisible;
|
||||
pageVisible = false;
|
||||
aimSessionVersion += 1;
|
||||
stopAimRenew();
|
||||
|
||||
if (closeLaser && wasVisible) {
|
||||
void laserCloseAPI().catch(() => {});
|
||||
}
|
||||
};
|
||||
|
||||
const onComplete = async () => {
|
||||
stopAimSession(false);
|
||||
await laserCloseAPI();
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
function onReceiveMessage(messages = []) {
|
||||
messages.forEach((msg) => {
|
||||
if (msg.constructor === MESSAGETYPES.Calibration) {
|
||||
done.value = true;
|
||||
uni.setStorageSync("calibration", true);
|
||||
// audioManager.play("激光已校准");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
pageVisible = true;
|
||||
const sessionVersion = ++aimSessionVersion;
|
||||
if (pageMounted) void openAimSession(sessionVersion);
|
||||
});
|
||||
|
||||
onHide(() => {
|
||||
stopAimSession();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
uni.$on("socket-inbox", onReceiveMessage);
|
||||
pageMounted = true;
|
||||
if (pageVisible) void openAimSession(aimSessionVersion);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
pageMounted = false;
|
||||
stopAimSession();
|
||||
uni.$off("socket-inbox", onReceiveMessage);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Container title="校准智能弓">
|
||||
<view class="container">
|
||||
<view v-for="(guide, index) in guides" :key="guide.title" class="guide">
|
||||
<view>
|
||||
<text>{{ index + 1 }}</text>
|
||||
<text>{{ guide.title }}</text>
|
||||
</view>
|
||||
<image :src="guide.src" mode="widthFix" />
|
||||
</view>
|
||||
<text>请完成以上步骤校准智能弓</text>
|
||||
<SButton
|
||||
:onClick="onComplete"
|
||||
width="60vw"
|
||||
:rounded="40"
|
||||
:disabled="!done"
|
||||
>
|
||||
我已校准
|
||||
</SButton>
|
||||
</view>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.guide {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
color: #ffffff;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
.guide > view {
|
||||
width: 100%;
|
||||
margin: 25rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.guide > view > text:first-child {
|
||||
font-size: 24rpx;
|
||||
background: #e89024;
|
||||
border-radius: 50%;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
line-height: 32rpx;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
.guide > image {
|
||||
width: 630rpx;
|
||||
height: 250rpx;
|
||||
}
|
||||
.container > text {
|
||||
font-size: 24rpx;
|
||||
color: #fff9;
|
||||
margin: 30rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,88 @@
|
||||
import { bindDeviceAPIV2 } from "@/apis";
|
||||
|
||||
export function useDeviceBinding({
|
||||
token,
|
||||
confirmBindTip,
|
||||
binding,
|
||||
updateDevice,
|
||||
deviceDetails,
|
||||
refreshDeviceStatus,
|
||||
}) {
|
||||
const showBindFailurePage = () => {
|
||||
uni.hideToast();
|
||||
uni.navigateTo({
|
||||
url: "/pages/device/device-bind-failure",
|
||||
fail: (error) => {
|
||||
console.error("打开绑定失败页失败", error);
|
||||
uni.showToast({ title: "二维码不正确，请重新扫码", icon: "none" });
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleScan = () => {
|
||||
uni.scanCode({
|
||||
onlyFromCamera: true,
|
||||
scanType: ["qrCode"],
|
||||
success: (result) => {
|
||||
if (!result?.result) {
|
||||
showBindFailurePage();
|
||||
return;
|
||||
}
|
||||
token.value = result.result;
|
||||
confirmBindTip.value = true;
|
||||
},
|
||||
fail: (error) => {
|
||||
const message = String(error?.errMsg || error?.message || "");
|
||||
if (/cancel|取消/i.test(message)) return;
|
||||
showBindFailurePage();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const confirmBind = async () => {
|
||||
if (!token.value || binding.value) return;
|
||||
binding.value = true;
|
||||
try {
|
||||
const result = await bindDeviceAPIV2(token.value);
|
||||
confirmBindTip.value = false;
|
||||
if (result?.binded) {
|
||||
uni.showToast({
|
||||
title: "设备已绑定其他账号，请解绑后再绑定",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
const deviceId = String(result?.deviceId || "").trim();
|
||||
const deviceName = String(result?.name || result?.deviceName || "").trim();
|
||||
if (!deviceId || !deviceName) {
|
||||
confirmBindTip.value = false;
|
||||
token.value = "";
|
||||
showBindFailurePage();
|
||||
return;
|
||||
}
|
||||
const applyBoundDevice = () => {
|
||||
updateDevice(deviceId, deviceName);
|
||||
deviceDetails.value = result || {};
|
||||
void refreshDeviceStatus();
|
||||
};
|
||||
uni.navigateTo({
|
||||
url: `/pages/device/device-bind-success?deviceId=${encodeURIComponent(deviceId)}`,
|
||||
success: applyBoundDevice,
|
||||
fail: (navigationError) => {
|
||||
applyBoundDevice();
|
||||
console.error("打开绑定成功页失败", navigationError);
|
||||
uni.showToast({ title: "绑定成功，请返回查看设备", icon: "none" });
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("绑定设备失败", error);
|
||||
confirmBindTip.value = false;
|
||||
token.value = "";
|
||||
showBindFailurePage();
|
||||
} finally {
|
||||
binding.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
return { confirmBind, handleScan, showBindFailurePage };
|
||||
}
|
||||
@@ -0,0 +1,129 @@
|
||||
import { computed, ref } from "vue";
|
||||
import { getDeviceBatteryAPI, getMyDevicesAPI, unbindDeviceAPI } from "@/apis";
|
||||
|
||||
export const DEVICE_NAME_STORAGE_KEY = "device_name_overrides";
|
||||
|
||||
export function useDeviceStatus({
|
||||
user,
|
||||
device,
|
||||
online,
|
||||
updateDevice,
|
||||
updateOnline,
|
||||
clearDevice,
|
||||
unbindDialogVisible,
|
||||
}) {
|
||||
const deviceStatus = ref({});
|
||||
const deviceDetails = ref({});
|
||||
|
||||
const isDeviceOnline = computed(
|
||||
() => deviceStatus.value.online === true || online.value === true
|
||||
);
|
||||
const statusText = computed(() => (isDeviceOnline.value ? "已连接" : "未连接"));
|
||||
const statusClass = computed(() =>
|
||||
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 batteryText = computed(() =>
|
||||
battery.value ? `${battery.value}%` : "暂无数据"
|
||||
);
|
||||
const networkText = computed(() => {
|
||||
const netType = String(deviceStatus.value.netType || "").toLowerCase();
|
||||
if (netType === "wifi") return "WiFi";
|
||||
if (netType === "4g") return "4G";
|
||||
return isDeviceOnline.value ? "在线" : "未连接";
|
||||
});
|
||||
const maskedDeviceId = computed(() => {
|
||||
const id = String(device.value.deviceId || "");
|
||||
if (!id) return "暂无设备编号";
|
||||
if (id.length <= 3) return id;
|
||||
return `${"*".repeat(Math.min(5, id.length - 3))}${id.slice(-3)}`;
|
||||
});
|
||||
const deviceRows = computed(() => [
|
||||
{ label: "设备型号", value: deviceDetails.value.model || "射灵智能弓" },
|
||||
{ label: "当前电量", value: batteryText.value },
|
||||
{ label: "连接方式", value: networkText.value },
|
||||
{ label: "设备编号", value: maskedDeviceId.value },
|
||||
]);
|
||||
|
||||
const getDeviceNameOverrides = () => {
|
||||
const value = uni.getStorageSync(DEVICE_NAME_STORAGE_KEY);
|
||||
return value && typeof value === "object" ? value : {};
|
||||
};
|
||||
|
||||
const refreshDeviceStatus = async () => {
|
||||
if (!device.value.deviceId) return;
|
||||
try {
|
||||
const result = await getDeviceBatteryAPI();
|
||||
deviceStatus.value = result || {};
|
||||
updateOnline(result?.online === true);
|
||||
} catch (error) {
|
||||
deviceStatus.value = {};
|
||||
console.log("获取设备状态失败", error);
|
||||
}
|
||||
};
|
||||
|
||||
const syncDeviceBinding = async () => {
|
||||
if (!user.value.id) return;
|
||||
try {
|
||||
const devices = await getMyDevicesAPI();
|
||||
if (Array.isArray(devices?.bindings) && devices.bindings.length > 0) {
|
||||
const currentDevice = devices.bindings[0];
|
||||
const nameOverrides = getDeviceNameOverrides();
|
||||
deviceDetails.value = currentDevice;
|
||||
updateDevice(
|
||||
currentDevice.deviceId,
|
||||
nameOverrides[currentDevice.deviceId] ||
|
||||
currentDevice.deviceName ||
|
||||
currentDevice.name ||
|
||||
"我的智能弓"
|
||||
);
|
||||
await refreshDeviceStatus();
|
||||
return;
|
||||
}
|
||||
clearDevice();
|
||||
deviceStatus.value = {};
|
||||
deviceDetails.value = {};
|
||||
} catch (error) {
|
||||
console.log("同步设备绑定失败", error);
|
||||
}
|
||||
};
|
||||
|
||||
const unbindDevice = async () => {
|
||||
if (!device.value.deviceId) return;
|
||||
try {
|
||||
await unbindDeviceAPI(device.value.deviceId);
|
||||
uni.setStorageSync("calibration", false);
|
||||
clearDevice();
|
||||
deviceStatus.value = {};
|
||||
deviceDetails.value = {};
|
||||
unbindDialogVisible.value = false;
|
||||
uni.showToast({ title: "解绑成功", icon: "success" });
|
||||
} catch (error) {
|
||||
console.error("解绑设备失败", error);
|
||||
if (error?.type === "DEVICE_BIND_INVALID") {
|
||||
clearDevice();
|
||||
unbindDialogVisible.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
batteryText,
|
||||
deviceDetails,
|
||||
deviceRows,
|
||||
getDeviceNameOverrides,
|
||||
isDeviceOnline,
|
||||
maskedDeviceId,
|
||||
networkText,
|
||||
refreshDeviceStatus,
|
||||
statusClass,
|
||||
statusText,
|
||||
syncDeviceBinding,
|
||||
unbindDevice,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,156 @@
|
||||
<script setup>
|
||||
import Container from "@/components/Container.vue";
|
||||
|
||||
// 失败页由设备页进入，返回时优先回到上一页；页面栈异常时兜底回到设备页。
|
||||
const goBackToDevicePage = () => {
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack({ delta: 1 });
|
||||
return;
|
||||
}
|
||||
uni.redirectTo({ url: "/pages/device/my-device" });
|
||||
};
|
||||
|
||||
// 返回设备页后沿用原有扫码绑定流程，不在结果页重复处理二维码数据。
|
||||
const retryScan = () => {
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
success: () => uni.$emit("device-bind-retry-scan"),
|
||||
});
|
||||
return;
|
||||
}
|
||||
uni.redirectTo({ url: "/pages/device/my-device?retryScan=1" });
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="device-bind-failure-page">
|
||||
<Container
|
||||
:bgType="12"
|
||||
bgColor="transparent"
|
||||
:onBack="goBackToDevicePage"
|
||||
headerClass="bind-failure-header"
|
||||
:scroll="false"
|
||||
:usePageScroll="true"
|
||||
>
|
||||
<view class="bind-failure-page">
|
||||
<view class="bind-failure-scene">
|
||||
<view class="bind-failure-hero-wrap">
|
||||
<view class="bind-failure-hero-shadow"></view>
|
||||
<image
|
||||
class="bind-failure-hero"
|
||||
src="../../static/device-assets/device-bind-failure-hero.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
</view>
|
||||
<view class="bind-failure-message">
|
||||
<text>二维码不正确，</text>
|
||||
<text>仅支持扫描射灵智能弓箭的设备二维码。</text>
|
||||
</view>
|
||||
<view class="bind-failure-retry" @click="$clickSound(retryScan)">
|
||||
<text>重新扫码</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</Container>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.device-bind-failure-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.bind-failure-header {
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* 与绑定成功页共用固定画布，页面内的视觉尺寸全部按 375 宽设计稿换算为 rpx。 */
|
||||
.bind-failure-page {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bind-failure-scene {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bind-failure-hero-wrap,
|
||||
.bind-failure-message,
|
||||
.bind-failure-retry {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.bind-failure-hero-wrap {
|
||||
top: 568rpx;
|
||||
left: 244rpx;
|
||||
width: 260rpx;
|
||||
height: 222rpx;
|
||||
}
|
||||
|
||||
.bind-failure-hero-shadow {
|
||||
position: absolute;
|
||||
left: 22rpx;
|
||||
bottom: 0;
|
||||
width: 238rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.bind-failure-hero {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 260rpx;
|
||||
height: 222rpx;
|
||||
}
|
||||
|
||||
.bind-failure-message {
|
||||
top: 824rpx;
|
||||
left: 122rpx;
|
||||
display: flex;
|
||||
width: 504rpx;
|
||||
min-height: 80rpx;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
font-family: PingFang SC-Regular;
|
||||
font-size: 28rpx;
|
||||
font-weight: normal;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bind-failure-retry {
|
||||
top: 960rpx;
|
||||
left: 195rpx;
|
||||
display: flex;
|
||||
width: 360rpx;
|
||||
height: 70rpx;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2rpx solid #ffd947;
|
||||
border-radius: 78rpx;
|
||||
color: #ffd947;
|
||||
font-size: 26rpx;
|
||||
line-height: 26rpx;
|
||||
pointer-events: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,248 @@
|
||||
<script setup>
|
||||
import { computed, ref } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import Container from "@/components/Container.vue";
|
||||
import { getDeviceDetailAPI, getHomeData } from "@/apis";
|
||||
|
||||
const bindResult = ref({
|
||||
isFirstBind: false,
|
||||
expireDate: "",
|
||||
});
|
||||
|
||||
const bindSuccessHero = computed(() =>
|
||||
bindResult.value.isFirstBind
|
||||
? "../../static/device-assets/device-bind-success-hero-first.png"
|
||||
: "../../static/device-assets/device-bind-success-hero-nonfirst.png"
|
||||
);
|
||||
const bindRewardExpireDate = computed(() => bindResult.value.expireDate);
|
||||
|
||||
// 与会员页使用相同的到期时间格式，设备详情接口本身不提供会员有效期。
|
||||
const formatVipDate = (value) => {
|
||||
if (!value) return "";
|
||||
const numericValue = Number(value);
|
||||
const timestamp = Number.isNaN(numericValue)
|
||||
? new Date(value).getTime()
|
||||
: numericValue < 1000000000000
|
||||
? numericValue * 1000
|
||||
: numericValue;
|
||||
const date = new Date(timestamp);
|
||||
if (Number.isNaN(date.getTime())) return "";
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const day = String(date.getDate()).padStart(2, "0");
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
|
||||
const loadBindResult = async (deviceId) => {
|
||||
if (!deviceId) return;
|
||||
try {
|
||||
const data = await getDeviceDetailAPI(deviceId);
|
||||
if (data?.detail?.isFirstBind !== true) return;
|
||||
bindResult.value.isFirstBind = true;
|
||||
|
||||
try {
|
||||
const homeData = await getHomeData();
|
||||
bindResult.value.expireDate = formatVipDate(
|
||||
homeData?.user?.normalVipExpiredAt
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("获取赠送会员有效期失败", error);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取设备详情失败", error);
|
||||
}
|
||||
};
|
||||
|
||||
const toFirstTryPage = () => {
|
||||
uni.navigateTo({ url: "/pages/first-try" });
|
||||
};
|
||||
|
||||
// 成功页由设备页 navigateTo 进入，优先返回上一页；页面栈异常时兜底回到设备页。
|
||||
const goBackToDevicePage = () => {
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack({ delta: 1 });
|
||||
return;
|
||||
}
|
||||
uni.redirectTo({ url: "/pages/device/my-device" });
|
||||
};
|
||||
|
||||
onLoad((options = {}) => {
|
||||
bindResult.value = {
|
||||
isFirstBind: false,
|
||||
expireDate: "",
|
||||
};
|
||||
void loadBindResult(options.deviceId);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="device-bind-success-page">
|
||||
<Container
|
||||
:bgType="12"
|
||||
bgColor="transparent"
|
||||
:onBack="goBackToDevicePage"
|
||||
headerClass="bind-success-header"
|
||||
:scroll="false"
|
||||
:usePageScroll="true"
|
||||
>
|
||||
<view class="bind-success-page">
|
||||
<view
|
||||
class="bind-success-scene"
|
||||
:class="{ 'bind-success-scene--first': bindResult.isFirstBind }"
|
||||
>
|
||||
<image
|
||||
class="bind-success-confetti"
|
||||
src="../../static/device-assets/device-bind-success-confetti.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<image class="bind-success-hero" :src="bindSuccessHero" mode="aspectFit" />
|
||||
<image
|
||||
class="bind-success-title-image"
|
||||
src="../../static/device-assets/device-bind-success-title.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<view v-if="bindResult.isFirstBind" class="bind-reward-card">
|
||||
<image
|
||||
class="bind-reward-gift"
|
||||
src="../../static/device-assets/device-bind-success-reward-gift.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text class="bind-reward-text">
|
||||
新设备首次绑定礼包：
|
||||
<text class="bind-reward-highlight">6个月射灵会员</text>
|
||||
已自动发放至本账号<text v-if="bindRewardExpireDate">，有效期{{ bindRewardExpireDate }}</text>。
|
||||
</text>
|
||||
</view>
|
||||
<view class="bind-success-tutorial" @click="$clickSound(toFirstTryPage)">
|
||||
<text>立即查看新手教程</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</Container>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.device-bind-success-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.bind-success-header {
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* 绑定结果页使用固定画布，背景和前景素材按蓝湖 375 x 812 画布定位。 */
|
||||
.bind-success-page {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bind-success-scene {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bind-success-confetti,
|
||||
.bind-success-hero,
|
||||
.bind-success-title-image,
|
||||
.bind-reward-card,
|
||||
.bind-success-tutorial {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.bind-success-confetti {
|
||||
top: 488rpx;
|
||||
left: 78rpx;
|
||||
width: 588rpx;
|
||||
height: 508rpx;
|
||||
}
|
||||
|
||||
.bind-success-hero {
|
||||
top: 568rpx;
|
||||
left: 244rpx;
|
||||
width: 260rpx;
|
||||
height: 222rpx;
|
||||
}
|
||||
|
||||
.bind-success-scene--first .bind-success-confetti {
|
||||
top: 314rpx;
|
||||
}
|
||||
|
||||
.bind-success-scene--first .bind-success-hero {
|
||||
top: 400rpx;
|
||||
}
|
||||
|
||||
.bind-success-title-image {
|
||||
top: 828rpx;
|
||||
left: 216rpx;
|
||||
width: 316rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
.bind-success-scene--first .bind-success-title-image {
|
||||
top: 660rpx;
|
||||
}
|
||||
|
||||
.bind-reward-card {
|
||||
top: 768rpx;
|
||||
left: 170rpx;
|
||||
width: 508rpx;
|
||||
height: 152rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 16rpx 16rpx 16rpx 90rpx;
|
||||
border-radius: 16rpx 64rpx 16rpx 64rpx;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.bind-reward-gift {
|
||||
position: absolute;
|
||||
top: -18rpx;
|
||||
left: -100rpx;
|
||||
width: 178rpx;
|
||||
height: 176rpx;
|
||||
}
|
||||
|
||||
.bind-reward-text {
|
||||
display: block;
|
||||
width: 380rpx;
|
||||
height: 120rpx;
|
||||
color: #ffffff;
|
||||
font-family: PingFang SC-Regular;
|
||||
font-size: 28rpx;
|
||||
font-weight: normal;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.bind-reward-highlight {
|
||||
color: #ffd947;
|
||||
}
|
||||
|
||||
.bind-success-tutorial {
|
||||
top: 960rpx;
|
||||
left: 195rpx;
|
||||
display: flex;
|
||||
width: 360rpx;
|
||||
height: 70rpx;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2rpx solid #ffd947;
|
||||
border-radius: 78rpx;
|
||||
color: #ffd947;
|
||||
font-size: 26rpx;
|
||||
line-height: 26rpx;
|
||||
pointer-events: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,110 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import SButton from "@/components/SButton.vue";
|
||||
import DeviceChargingDialog from "@/components/DeviceChargingDialog.vue";
|
||||
|
||||
import { capsuleHeight } from "@/util";
|
||||
|
||||
const images = [
|
||||
"https://static.shelingxingqiu.com/mall/images/mall_01.jpg",
|
||||
"https://static.shelingxingqiu.com/mall/images/mall_02.jpg",
|
||||
"https://static.shelingxingqiu.com/mall/images/mall_03.jpg",
|
||||
"https://static.shelingxingqiu.com/mall/images/mall_04.jpg",
|
||||
"https://static.shelingxingqiu.com/mall/images/mall_05.jpg",
|
||||
"https://static.shelingxingqiu.com/mall/images/mall_06.jpg",
|
||||
"https://static.shelingxingqiu.com/mall/images/mall_07.jpg",
|
||||
"https://static.shelingxingqiu.com/mall/images/mall_08.jpg",
|
||||
"https://static.shelingxingqiu.com/mall/images/mall_09.jpg",
|
||||
];
|
||||
|
||||
const addBg = ref(false);
|
||||
|
||||
const onScrollView = (e) => {
|
||||
addBg.value = e.detail.scrollTop > 100;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<view
|
||||
class="header"
|
||||
:style="{
|
||||
paddingTop: capsuleHeight + 'px',
|
||||
}"
|
||||
>
|
||||
<image
|
||||
:style="{ opacity: addBg ? 1 : 0 }"
|
||||
src="https://static.shelingxingqiu.com/shootmini/static/app-bg.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<navigator open-type="navigateBack">
|
||||
<image class="header-back" src="../../static/back.png" mode="widthFix" />
|
||||
</navigator>
|
||||
<text
|
||||
:style="{ opacity: addBg ? 1 : 0, color: '#fff', fontWeight: 'bold' }"
|
||||
>
|
||||
</text>
|
||||
</view>
|
||||
<scroll-view scroll-y @scroll="onScrollView" :style="{ height: '100vh' }">
|
||||
<view class="images">
|
||||
<image
|
||||
v-for="src in images"
|
||||
:key="src"
|
||||
:src="src"
|
||||
mode="widthFix"
|
||||
show-menu-by-longpress
|
||||
/>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<DeviceChargingDialog />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
.header-bg {
|
||||
width: 100%;
|
||||
}
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
}
|
||||
.header-back {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin: 0px 15px;
|
||||
margin-top: 5px;
|
||||
position: relative;
|
||||
}
|
||||
.header > image:first-child {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
.header > text {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
transition: all 0.5s ease;
|
||||
position: relative;
|
||||
}
|
||||
.images {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.images > image {
|
||||
width: 100vw;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,961 @@
|
||||
<script setup>
|
||||
import { computed, onMounted, onUnmounted, ref } from "vue";
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app";
|
||||
import Container from "@/components/Container.vue";
|
||||
import ScreenHint from "@/components/ScreenHint.vue";
|
||||
import ModalDialog from "@/components/ModalDialog.vue";
|
||||
import { laserAimAPI } from "@/apis";
|
||||
import useStore from "@/store";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useDeviceBinding } from "./composables/useDeviceBinding";
|
||||
import {
|
||||
DEVICE_NAME_STORAGE_KEY,
|
||||
useDeviceStatus,
|
||||
} from "./composables/useDeviceStatus";
|
||||
|
||||
const store = useStore();
|
||||
const { updateDevice, updateOnline, clearDevice } = store;
|
||||
const { user, device, online } = storeToRefs(store);
|
||||
|
||||
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 token = ref("");
|
||||
const binding = ref(false);
|
||||
const retryScanOnShow = ref(false);
|
||||
const calibration = ref(false);
|
||||
|
||||
const {
|
||||
deviceDetails,
|
||||
deviceRows,
|
||||
getDeviceNameOverrides,
|
||||
isDeviceOnline,
|
||||
maskedDeviceId,
|
||||
refreshDeviceStatus,
|
||||
statusClass,
|
||||
statusText,
|
||||
syncDeviceBinding,
|
||||
unbindDevice,
|
||||
} = useDeviceStatus({
|
||||
user,
|
||||
device,
|
||||
online,
|
||||
updateDevice,
|
||||
updateOnline,
|
||||
clearDevice,
|
||||
unbindDialogVisible,
|
||||
});
|
||||
|
||||
const { confirmBind, handleScan } = useDeviceBinding({
|
||||
token,
|
||||
confirmBindTip,
|
||||
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 containerBgType = computed(() =>
|
||||
isScanPage.value ? 12 : 0
|
||||
);
|
||||
const containerBgColor = computed(() =>
|
||||
containerBgType.value === 12 || containerBgType.value === -1
|
||||
? "transparent"
|
||||
: "#050b19"
|
||||
);
|
||||
|
||||
// 解绑前展示统一确认弹窗，避免误触解除绑定。
|
||||
const openUnbindDialog = () => {
|
||||
unbindDialogVisible.value = true;
|
||||
};
|
||||
|
||||
const closeUnbindDialog = () => {
|
||||
unbindDialogVisible.value = false;
|
||||
};
|
||||
|
||||
const openNameEditor = () => {
|
||||
editingName.value = device.value.deviceName || "我的智能弓";
|
||||
nameEditorVisible.value = true;
|
||||
};
|
||||
|
||||
const closeNameEditor = () => {
|
||||
nameEditorVisible.value = false;
|
||||
};
|
||||
|
||||
// 当前接口列表没有设备改名接口，先更新页面和本地缓存，后端接口接入时可替换为请求。
|
||||
const confirmName = () => {
|
||||
const name = String(editingName.value || "").trim();
|
||||
if (!name) {
|
||||
uni.showToast({ title: "请输入设备名", icon: "none" });
|
||||
return;
|
||||
}
|
||||
if (name.length > 10 || !/^[\u4e00-\u9fa5A-Za-z0-9_-]+$/.test(name)) {
|
||||
uni.showToast({ title: "设备名格式不正确", icon: "none" });
|
||||
return;
|
||||
}
|
||||
updateDevice(device.value.deviceId, name);
|
||||
deviceDetails.value = { ...deviceDetails.value, deviceName: name };
|
||||
const nameOverrides = getDeviceNameOverrides();
|
||||
nameOverrides[device.value.deviceId] = name;
|
||||
uni.setStorageSync(DEVICE_NAME_STORAGE_KEY, nameOverrides);
|
||||
nameEditorVisible.value = false;
|
||||
uni.showToast({ title: "设备名已更新", icon: "success" });
|
||||
};
|
||||
|
||||
const toDeviceIntroPage = () => {
|
||||
uni.navigateTo({ url: "/pages/device/device-intro" });
|
||||
};
|
||||
|
||||
const joinWifi = () => {
|
||||
uni.navigateTo({ url: "/pages/device/ota-wifi" });
|
||||
};
|
||||
|
||||
const goFirmwareUpdate = () => {
|
||||
if (!isDeviceOnline.value) {
|
||||
uni.showToast({ title: "请先开启智能弓", icon: "none" });
|
||||
return;
|
||||
}
|
||||
uni.navigateTo({ url: "/pages/device/ota-wifi" });
|
||||
};
|
||||
|
||||
const goCalibration = async () => {
|
||||
try {
|
||||
await laserAimAPI();
|
||||
uni.navigateTo({ url: "/pages/device/calibration" });
|
||||
} catch (error) {
|
||||
uni.showToast({ title: "设备未连接，暂时无法调瞄", icon: "none" });
|
||||
}
|
||||
};
|
||||
|
||||
const copyEmail = () => {
|
||||
uni.setClipboardData({
|
||||
data: "shelingxingqiu@163.com",
|
||||
success: () => uni.showToast({ title: "邮箱已复制", icon: "success" }),
|
||||
});
|
||||
};
|
||||
|
||||
const openQr = () => {
|
||||
qrSaved.value = false;
|
||||
qrVisible.value = true;
|
||||
};
|
||||
|
||||
const closeTip = () => {
|
||||
showTip.value = false;
|
||||
};
|
||||
|
||||
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,
|
||||
});
|
||||
});
|
||||
}
|
||||
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 = {}) => {
|
||||
retryScanOnShow.value = options.retryScan === "1";
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
uni.$on("device-bind-retry-scan", handleScan);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
uni.$off("device-bind-retry-scan", handleScan);
|
||||
});
|
||||
|
||||
onShow(async () => {
|
||||
calibration.value = uni.getStorageSync("calibration");
|
||||
await syncDeviceBinding();
|
||||
if (retryScanOnShow.value) {
|
||||
retryScanOnShow.value = false;
|
||||
handleScan();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="my-device-page" :class="{ 'my-device-page--scan': isScanPage }">
|
||||
<Container
|
||||
:bgType="containerBgType"
|
||||
:bgColor="containerBgColor"
|
||||
:scroll="!isScanPage"
|
||||
: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>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else-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" />
|
||||
</button>
|
||||
<view class="scan-title">
|
||||
<text>请扫描</text>
|
||||
<text class="highlight-text">射灵智能弓箭</text>
|
||||
<text>设备上的二维码</text>
|
||||
</view>
|
||||
<view class="benefit-copy">
|
||||
<text>新设备首次绑定账号可获赠</text>
|
||||
<text class="highlight-text">6个月射灵会员礼包</text>
|
||||
<text>，</text>
|
||||
<text>该礼包仅可使用一次，请确保当前登录账号为您本人账号。</text>
|
||||
</view>
|
||||
<button class="help-link" hover-class="none" @click="showTip = true">
|
||||
<text>没找到二维码或遇到问题></text>
|
||||
</button>
|
||||
<button class="product-link" hover-class="none" @click="toDeviceIntroPage">
|
||||
<text>还没有射灵智能弓箭？点我获取></text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="device-page">
|
||||
|
||||
<view class="device-card">
|
||||
<view class="device-card-header">
|
||||
<view class="device-status" :class="statusClass">
|
||||
<view class="status-dot"></view>
|
||||
<text>{{ statusText }}</text>
|
||||
</view>
|
||||
<view class="edit-name" @click="openNameEditor">修改设备名</view>
|
||||
</view>
|
||||
<view class="device-identity">
|
||||
<image class="device-avatar" src="../../static/device-assets/my-device-avatar.png" mode="aspectFill" />
|
||||
<view class="device-identity-text">
|
||||
<text class="device-name">{{ device.deviceName || "我的智能弓" }}</text>
|
||||
<text class="device-id">{{ maskedDeviceId }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="device-stats">
|
||||
<view v-for="item in deviceRows" :key="item.label" class="device-stat">
|
||||
<text class="device-stat-label">{{ item.label }}</text>
|
||||
<text class="device-stat-value">{{ item.value }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="device-actions">
|
||||
<view class="action-item" @click="toDeviceIntroPage">
|
||||
<text class="action-icon">⌁</text>
|
||||
<text>设备介绍</text>
|
||||
</view>
|
||||
<view class="action-item" @click="goCalibration">
|
||||
<text class="action-icon">⌖</text>
|
||||
<text>弓箭调瞄</text>
|
||||
</view>
|
||||
<view class="action-item" @click="goFirmwareUpdate">
|
||||
<text class="action-icon">↻</text>
|
||||
<text>固件更新</text>
|
||||
</view>
|
||||
<view class="action-item" @click="joinWifi">
|
||||
<text class="action-icon">◌</text>
|
||||
<text>WIFI设置</text>
|
||||
</view>
|
||||
<view class="action-item" @click="openQr">
|
||||
<text class="action-icon">▦</text>
|
||||
<text>设备二维码</text>
|
||||
</view>
|
||||
<view class="action-item action-item--danger" @click="openUnbindDialog">
|
||||
<text class="action-icon">⊗</text>
|
||||
<text>解除绑定</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="calibration" class="calibration-tip">
|
||||
<text>如有场地或距离变化，请重新校准以保证智能弓射箭精准度</text>
|
||||
<view @click="goCalibration">重新校准</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<ScreenHint mode="square" :show="showTip" :onClose="closeTip">
|
||||
<view class="scan-tips">
|
||||
<text class="scan-tips-title">扫码绑定射灵弓箭</text>
|
||||
<text class="scan-tips-subtitle">设备底部二维码样例</text>
|
||||
<image
|
||||
class="scan-tips-qr"
|
||||
src="../../static/device-assets/my-device-unbound-qr-sample.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<text class="scan-tips-note">【注】已被绑定的弓箭无法再次绑定。</text>
|
||||
<view class="scan-tips-contact">
|
||||
<text>如有任何疑问，请随时联系：</text>
|
||||
<button hover-class="none" @click="copyEmail">shelingxingqiu@163.com</button>
|
||||
</view>
|
||||
</view>
|
||||
</ScreenHint>
|
||||
|
||||
<ScreenHint :show="confirmBindTip" :onClose="closeConfirmBindTip">
|
||||
<view class="confirm-bind">
|
||||
<text>智能弓箭和系统账号需一一对应，你确定要将当前登录用户账号绑定这把弓箭吗？绑定后不可随意更换。</text>
|
||||
<view class="confirm-actions">
|
||||
<view
|
||||
class="primary-action"
|
||||
:class="{ 'primary-action--disabled': binding }"
|
||||
@click="confirmBind"
|
||||
>
|
||||
{{ binding ? "绑定中..." : "确认绑定" }}
|
||||
</view>
|
||||
<view class="secondary-action" @click="confirmBindTip = false">取消</view>
|
||||
</view>
|
||||
</view>
|
||||
</ScreenHint>
|
||||
|
||||
<ModalDialog
|
||||
:show="unbindDialogVisible"
|
||||
title="解除设备绑定"
|
||||
content="解除绑定后，将无法使用智能弓箭进行对战，确定继续吗？"
|
||||
cancelText="取消"
|
||||
confirmText="解除绑定"
|
||||
:onCancel="closeUnbindDialog"
|
||||
:onConfirm="unbindDevice"
|
||||
></ModalDialog>
|
||||
|
||||
<view v-if="nameEditorVisible" class="name-mask" @click="closeNameEditor">
|
||||
<view class="name-sheet" @click.stop>
|
||||
<view class="name-input-row">
|
||||
<input
|
||||
v-model="editingName"
|
||||
class="name-input"
|
||||
focus
|
||||
maxlength="10"
|
||||
confirm-type="done"
|
||||
placeholder="请输入设备名（最长10个汉字）"
|
||||
placeholder-class="name-placeholder"
|
||||
@confirm="confirmName"
|
||||
/>
|
||||
<view class="name-confirm" @click="confirmName">确定</view>
|
||||
</view>
|
||||
<text class="name-helper">仅支持中文、英文、数字、下划线、减号</text>
|
||||
</view>
|
||||
</view>
|
||||
</Container>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.my-device-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.my-device-page--scan {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scan-code,
|
||||
.device-page {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 100rpx);
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.scan-code {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
justify-content: flex-start;
|
||||
padding-top: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.unbound-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 100rpx);
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 170rpx 32rpx 160rpx;
|
||||
}
|
||||
|
||||
.scan-entry,
|
||||
.help-link,
|
||||
.product-link {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.scan-entry::after,
|
||||
.help-link::after,
|
||||
.product-link::after {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.scan-entry {
|
||||
display: flex;
|
||||
width: 276rpx;
|
||||
height: 276rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.scan-entry image {
|
||||
width: 276rpx;
|
||||
height: 276rpx;
|
||||
}
|
||||
|
||||
.scan-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-top: 48rpx;
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
line-height: 40rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.benefit-copy {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20rpx;
|
||||
color: rgba(255, 255, 255, 0.74);
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
line-height: 44rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.help-link {
|
||||
margin-top: 72rpx;
|
||||
color: #ffd947;
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.product-link {
|
||||
position: fixed;
|
||||
bottom: 104rpx;
|
||||
bottom: calc(env(safe-area-inset-bottom) + 104rpx);
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
color: #ffd947;
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.highlight-text {
|
||||
color: #fed847;
|
||||
}
|
||||
|
||||
.device-page {
|
||||
padding: 36rpx 32rpx 80rpx;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.device-card {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 24rpx;
|
||||
background: linear-gradient(145deg, rgba(45, 54, 76, 0.96), rgba(19, 25, 43, 0.98));
|
||||
}
|
||||
|
||||
.device-card {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.device-card-header,
|
||||
.device-identity,
|
||||
.device-stats,
|
||||
.confirm-actions,
|
||||
.name-input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.device-card-header {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.device-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
margin-right: 12rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.device-status--online {
|
||||
color: #62e4a1;
|
||||
}
|
||||
|
||||
.device-status--online .status-dot {
|
||||
background: #62e4a1;
|
||||
box-shadow: 0 0 16rpx rgba(98, 228, 161, 0.8);
|
||||
}
|
||||
|
||||
.device-status--offline {
|
||||
color: #ff6e6e;
|
||||
}
|
||||
|
||||
.device-status--offline .status-dot {
|
||||
background: #ff6e6e;
|
||||
}
|
||||
|
||||
.edit-name {
|
||||
color: #fed847;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.device-identity {
|
||||
margin-top: 42rpx;
|
||||
}
|
||||
|
||||
.device-avatar {
|
||||
width: 144rpx;
|
||||
height: 144rpx;
|
||||
margin-right: 26rpx;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
|
||||
.device-identity-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.device-name {
|
||||
color: #ffffff;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.device-id {
|
||||
margin-top: 14rpx;
|
||||
color: rgba(255, 255, 255, 0.52);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.device-stats {
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-top: 40rpx;
|
||||
padding-top: 28rpx;
|
||||
border-top: 1rpx solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.device-stat {
|
||||
width: 48%;
|
||||
margin-bottom: 22rpx;
|
||||
}
|
||||
|
||||
.device-stat-label,
|
||||
.device-stat-value {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.device-stat-label {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.device-stat-value {
|
||||
margin-top: 8rpx;
|
||||
color: #ffffff;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.device-actions {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 28rpx;
|
||||
border-radius: 24rpx;
|
||||
background: rgba(30, 38, 58, 0.88);
|
||||
}
|
||||
|
||||
.action-item {
|
||||
display: flex;
|
||||
width: 33.3333%;
|
||||
height: 142rpx;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.action-item--danger {
|
||||
color: #ff9898;
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
display: flex;
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12rpx;
|
||||
border: 1rpx solid currentColor;
|
||||
border-radius: 50%;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.calibration-tip {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 24rpx;
|
||||
padding: 20rpx 24rpx;
|
||||
border-radius: 16rpx;
|
||||
background: rgba(40, 127, 255, 0.12);
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
font-size: 22rpx;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
|
||||
.calibration-tip > text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.calibration-tip > view {
|
||||
margin-left: 18rpx;
|
||||
color: #5bbdff;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.primary-action,
|
||||
.secondary-action {
|
||||
display: flex;
|
||||
min-width: 150rpx;
|
||||
height: 68rpx;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 34rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.primary-action {
|
||||
color: #111111;
|
||||
background: #fed847;
|
||||
}
|
||||
|
||||
.primary-action--disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.secondary-action {
|
||||
color: #ffffff;
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
|
||||
.scan-tips {
|
||||
display: flex;
|
||||
width: 90%;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
margin-top: 20%;
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.scan-tips-title {
|
||||
color: #fed847;
|
||||
font-size: 32rpx;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
|
||||
.scan-tips-subtitle {
|
||||
margin-top: 14rpx;
|
||||
color: rgba(255, 255, 255, 0.72);
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.scan-tips-qr {
|
||||
width: 100%;
|
||||
margin-top: 12rpx;
|
||||
border-radius: 14rpx;
|
||||
}
|
||||
|
||||
.scan-tips-note {
|
||||
margin-top: 16rpx;
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.scan-tips-contact {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-top: 12rpx;
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.scan-tips button {
|
||||
padding: 0;
|
||||
color: #39a8ff;
|
||||
background: transparent;
|
||||
font-size: 30rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.confirm-bind {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 26rpx;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
|
||||
.confirm-actions {
|
||||
justify-content: space-between;
|
||||
margin-top: 24rpx;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.confirm-actions > view {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.qr-page {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 100rpx);
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
background: radial-gradient(circle at 50% 46%, rgba(95, 78, 58, 0.9), rgba(8, 10, 25, 1) 70%);
|
||||
}
|
||||
|
||||
.qr-page::before,
|
||||
.qr-page::after {
|
||||
position: absolute;
|
||||
width: 620rpx;
|
||||
height: 1rpx;
|
||||
content: "";
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
box-shadow: 0 180rpx rgba(255, 255, 255, 0.05), 0 360rpx rgba(255, 255, 255, 0.04), 0 540rpx rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.qr-page::before {
|
||||
top: 380rpx;
|
||||
left: -160rpx;
|
||||
transform: rotate(48deg);
|
||||
}
|
||||
|
||||
.qr-page::after {
|
||||
top: 420rpx;
|
||||
right: -160rpx;
|
||||
transform: rotate(-48deg);
|
||||
}
|
||||
|
||||
.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%;
|
||||
min-height: calc(100vh - 100rpx);
|
||||
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;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
align-items: flex-end;
|
||||
background: rgba(0, 0, 0, 0.68);
|
||||
}
|
||||
|
||||
.name-sheet {
|
||||
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);
|
||||
}
|
||||
|
||||
.name-input-row {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.name-input {
|
||||
flex: 1;
|
||||
height: 76rpx;
|
||||
padding: 0 22rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 14rpx;
|
||||
color: #ffffff;
|
||||
background: rgba(0, 0, 0, 0.22);
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.name-placeholder {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.name-helper {
|
||||
display: block;
|
||||
margin-top: 18rpx;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 22rpx;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user