155 lines
3.2 KiB
Vue
155 lines
3.2 KiB
Vue
<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-already-bound-page">
|
||
<Container
|
||
:bgType="12"
|
||
bgColor="transparent"
|
||
:onBack="goBackToDevicePage"
|
||
headerClass="already-bound-header"
|
||
:scroll="false"
|
||
:usePageScroll="true"
|
||
>
|
||
<view class="already-bound-page">
|
||
<view class="already-bound-scene">
|
||
<view class="already-bound-hero-wrap">
|
||
<view class="already-bound-hero-shadow"></view>
|
||
<image
|
||
class="already-bound-hero"
|
||
src="/static/device-assets/device-already-bound-hero.png"
|
||
mode="aspectFit"
|
||
/>
|
||
</view>
|
||
<view class="already-bound-message">
|
||
<text>该设备已经绑定了其他账号，</text>
|
||
<text>如需绑定本账号，请先解除绑定。</text>
|
||
</view>
|
||
<view class="already-bound-retry" @click="$clickSound(retryScan)">
|
||
<text>重新扫码</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</Container>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.device-already-bound-page {
|
||
position: relative;
|
||
min-height: 100vh;
|
||
background: transparent;
|
||
}
|
||
|
||
.already-bound-header {
|
||
position: relative;
|
||
z-index: 20;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
/* 与现有绑定结果页保持相同的 375 宽画布尺寸。 */
|
||
.already-bound-page {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 1;
|
||
width: 100%;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.already-bound-scene {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.already-bound-hero-wrap,
|
||
.already-bound-message,
|
||
.already-bound-retry {
|
||
position: absolute;
|
||
}
|
||
|
||
.already-bound-hero-wrap {
|
||
top: 568rpx;
|
||
left: 244rpx;
|
||
width: 260rpx;
|
||
height: 222rpx;
|
||
}
|
||
|
||
.already-bound-hero-shadow {
|
||
position: absolute;
|
||
left: 22rpx;
|
||
bottom: 0;
|
||
width: 238rpx;
|
||
height: 40rpx;
|
||
border-radius: 50%;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.already-bound-hero {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 260rpx;
|
||
height: 222rpx;
|
||
}
|
||
|
||
.already-bound-message {
|
||
top: 804rpx;
|
||
left: 110rpx;
|
||
display: flex;
|
||
width: 530rpx;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
color: #fff;
|
||
font-family: PingFang SC-Regular;
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.already-bound-retry {
|
||
top: 930rpx;
|
||
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>
|