157 lines
3.4 KiB
Vue
157 lines
3.4 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-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="https://static.shelingxingqiu.com/shootmini/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>
|