完善我的弓箭流程
This commit is contained in:
kron
294
src/pages/my-device.vue
Normal file
294
src/pages/my-device.vue
Normal file
@@ -0,0 +1,294 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user