update：提交我的设备改版
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user