295 lines
7.2 KiB
Vue
295 lines
7.2 KiB
Vue
<script setup>
|
||
import { ref, onMounted } from "vue";
|
||
import Container from "@/components/Container.vue";
|
||
import CoachComment from "@/components/CoachComment.vue";
|
||
import SButton from "@/components/SButton.vue";
|
||
import { bindDeviceAPI, getMyDevicesAPI, unbindDeviceAPI } from "@/apis";
|
||
import useStore from "@/store";
|
||
import { storeToRefs } from "pinia";
|
||
const showTip = ref(false);
|
||
const confirmBindTip = ref(false);
|
||
const device = ref({
|
||
id: "wefefweee",
|
||
deviceName: "DS3F298SDfF",
|
||
});
|
||
const addDevice = ref();
|
||
const loading = ref(true);
|
||
const store = useStore();
|
||
const { user } = storeToRefs(store);
|
||
const justBind = ref(false);
|
||
|
||
const step = ref(1);
|
||
|
||
onMounted(async () => {
|
||
const result = await getMyDevicesAPI();
|
||
loading.value = false;
|
||
device.value = result.bindings[0] || {};
|
||
});
|
||
|
||
// 扫描二维码方法
|
||
const handleScan = () => {
|
||
const { user } = useStore();
|
||
if (!user.id) {
|
||
return uni.showToast({
|
||
title: "请先登录",
|
||
icon: "none",
|
||
});
|
||
}
|
||
// 调用扫码API
|
||
uni.scanCode({
|
||
// 只支持扫码二维码
|
||
onlyFromCamera: true,
|
||
scanType: ["qrCode"],
|
||
success: async (res) => {
|
||
addDevice.value = JSON.parse(atob(res.result));
|
||
confirmBindTip = true;
|
||
},
|
||
fail: (err) => {
|
||
console.error("扫码失败：", err);
|
||
uni.showToast({
|
||
title: "扫码失败",
|
||
icon: "error",
|
||
});
|
||
},
|
||
});
|
||
};
|
||
|
||
const confirmBind = async () => {
|
||
if (addDevice.value.deviceId) {
|
||
await bindDeviceAPI(addDevice.value);
|
||
justBind.value = true;
|
||
uni.showToast({
|
||
title: "绑定成功",
|
||
icon: "success",
|
||
});
|
||
step.value = 2;
|
||
}
|
||
};
|
||
|
||
const toFristTryPage = () => {
|
||
uni.navigateTo({
|
||
url: "/pages/first-try",
|
||
});
|
||
};
|
||
|
||
const unbindDevice = async () => {
|
||
await unbindDeviceAPI(device.value.deviceId);
|
||
uni.showToast({
|
||
title: "解绑成功",
|
||
icon: "success",
|
||
});
|
||
device.value = {};
|
||
};
|
||
|
||
const toDeviceIntroPage = () => {
|
||
uni.navigateTo({
|
||
url: "/pages/device-intro",
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<Container title="弓箭绑定">
|
||
<view v-if="!loading && !device.deviceId" class="scan-code">
|
||
<view @click="handleScan">
|
||
<image src="../static/scan.png" mode="widthFix" />
|
||
<text>扫码绑定弓箭</text>
|
||
</view>
|
||
<view @click="() => (showTip = true)">
|
||
<view>找不到我的弓箭？</view>
|
||
<view>我还没有弓箭</view>
|
||
</view>
|
||
<CoachComment
|
||
mode="square"
|
||
:show="showTip"
|
||
:onClose="() => (showTip = false)"
|
||
>
|
||
<view class="scan-tips">
|
||
<text>不知道如何连接弓箭</text>
|
||
<text>1. 先确认弓箭是智能弓箭</text>
|
||
<text>2.确认开启手机的摄像头权限；</text>
|
||
<text>3. 开启进入绑定弓箭功能，扫弓箭二维码</text>
|
||
<image src="../static/scan-tip.png" mode="widthFix" />
|
||
<text>4. 连接成功后</text>
|
||
<view>联系在线客服</view>
|
||
</view>
|
||
</CoachComment>
|
||
<CoachComment
|
||
:show="confirmBindTip"
|
||
:onClose="() => (confirmBindTip = false)"
|
||
>
|
||
<view class="confirm-bind">
|
||
<text
|
||
>智能弓箭和系统账号需一一对应，你确定要将<text
|
||
:style="{ color: '#fed847' }"
|
||
>当前登录用户账号</text
|
||
>绑定<text :style="{ color: '#fed847' }">这把弓箭</text>吗？
|
||
绑定后不可随意更换。</text
|
||
>
|
||
<view>
|
||
<view @click="confirmBind">确认绑定</view>
|
||
<view @click="() => (confirmBindTip = false)">取消</view>
|
||
</view>
|
||
</view>
|
||
</CoachComment>
|
||
</view>
|
||
<view v-if="justBind" class="just-bind">
|
||
<view class="device-binded">
|
||
<view @click="toDeviceIntroPage">
|
||
<image src="../static/device-icon.png" mode="widthFix" />
|
||
<text>{{ device.deviceName }}</text>
|
||
</view>
|
||
<image src="../static/bind-success.png" mode="widthFix" />
|
||
<view>
|
||
<image
|
||
:src="user.avatarUrl"
|
||
mode="widthFix"
|
||
:style="{ borderRadius: '50%' }"
|
||
/>
|
||
<text>{{ user.nickName }}</text>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<text>恭喜，你的弓箭和账号已成功绑定！</text>
|
||
<text :style="{ color: '#fed847' }">已赠送6个月射灵世界会员</text>
|
||
<text>赶快进入新手试炼场体验一下吧！</text>
|
||
</view>
|
||
<SButton :onClick="toFristTryPage">进入新手试炼</SButton>
|
||
</view>
|
||
<view v-if="!loading && device.deviceId && !justBind" class="has-device">
|
||
<view class="device-binded">
|
||
<view @click="toDeviceIntroPage">
|
||
<image src="../static/device-icon.png" mode="widthFix" />
|
||
<text>{{ device.deviceName }}</text>
|
||
</view>
|
||
<image src="../static/bind.png" mode="widthFix" />
|
||
<view>
|
||
<image
|
||
:src="user.avatarUrl"
|
||
mode="widthFix"
|
||
:style="{ borderRadius: '50%' }"
|
||
/>
|
||
<text>{{ user.nickName }}</text>
|
||
</view>
|
||
</view>
|
||
<SButton :onClick="unbindDevice">解绑</SButton>
|
||
</view>
|
||
</Container>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.scan-code,
|
||
.just-bind,
|
||
.has-device {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.scan-code > view:first-child {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 40%;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
}
|
||
.scan-code > view:first-child > image {
|
||
width: 100%;
|
||
margin-bottom: 20px;
|
||
}
|
||
.scan-code > view:nth-child(2) {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.scan-code > view:nth-child(2) > view {
|
||
color: #39a8ff;
|
||
font-size: 14px;
|
||
margin: 10px;
|
||
}
|
||
.scan-tips {
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-size: 14px;
|
||
transform: translateX(10px) translateY(65px);
|
||
}
|
||
.scan-tips > text {
|
||
margin-bottom: 2px;
|
||
}
|
||
.scan-tips > text:first-child {
|
||
color: #fed847;
|
||
margin-bottom: 10px;
|
||
}
|
||
.scan-tips > view:last-child {
|
||
color: #39a8ff;
|
||
margin-top: 5px;
|
||
}
|
||
.scan-tips > image {
|
||
width: 100%;
|
||
margin-bottom: 10px;
|
||
}
|
||
.confirm-bind {
|
||
transform: translateY(36px);
|
||
}
|
||
.confirm-bind > view:last-child {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 20px;
|
||
}
|
||
.confirm-bind > view:last-child > view {
|
||
width: 48%;
|
||
border-radius: 20px;
|
||
background-color: #fed847;
|
||
color: #000;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
}
|
||
.confirm-bind > view:last-child > view:nth-child(2) {
|
||
color: #fff;
|
||
background-color: #fff3;
|
||
}
|
||
.device-binded {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
margin: 75px 0;
|
||
}
|
||
.device-binded > view {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.device-binded > view > image {
|
||
width: 24vw;
|
||
margin-bottom: 5px;
|
||
border-radius: 10px;
|
||
}
|
||
.device-binded > image {
|
||
width: 16vw;
|
||
margin: 0 20px;
|
||
}
|
||
.has-device,
|
||
.just-bind {
|
||
justify-content: flex-start;
|
||
}
|
||
.has-device > view:nth-child(2),
|
||
.just-bind > view:nth-child(2) {
|
||
color: #fff9;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
margin: 75px 0;
|
||
}
|
||
.has-device > view:nth-child(2) > text,
|
||
.just-bind > view:nth-child(2) > text {
|
||
margin: 5px;
|
||
}
|
||
</style>
|