laoma/shoot-miniprograms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善我的弓箭流程

Browse Source
This commit is contained in:
kron
2025-05-31 14:17:56 +08:00
parent 0ee2eb7f51
commit 22617212d0
8 changed files with 149 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/apis.js
View File

@@ -146,15 +146,16 @@ export const unbindDeviceAPI = (deviceId) => {
});
};
export const getMyDeviceAPI = () => {
export const getMyDevicesAPI = () => {
return new Promise((resolve, reject) => {
uni.request({
url: `${BASE_URL}/user/device/getBinding?deviceId=9ZF9oVXs`,
// url: `${BASE_URL}/user/device/getBindings`,
// url: `${BASE_URL}/user/device/getBinding?deviceId=9ZF9oVXs`,
url: `${BASE_URL}/user/device/getBindings`,
method: "GET",
header: getAuthHeader(),
success: (res) => {
resolve(res.data);
const { code, data } = res.data;
if (code === 0) resolve(data);
},
fail: (err) => {
reject(err);

6
src/components/Guide.vue
View File

@@ -20,7 +20,7 @@ defineProps({
:src="
tall ? '../static/long-bubble-tall.png' : '../static/long-bubble.png'
"
:style="{ top: tall ? '-9%' : '-14%' }"
:style="{ top: tall ? '-6%' : '-12%' }"
mode="widthFix"
/>
<slot />
@@ -40,7 +40,7 @@ defineProps({
}
.container > view {
position: relative;
width: 80%;
width: 75%;
padding-right: 25px;
min-height: 55px;
display: flex;
@@ -49,7 +49,7 @@ defineProps({
.container > view > image {
position: absolute;
left: -7%;
width: 100%;
width: 98%;
}
.container > view {
color: #fff;

16
src/pages.json
View File

@@ -7,9 +7,15 @@
}
},
{
"path": "pages/add-device",
"path": "pages/my-device",
"style": {
"navigationBarTitleText": "弓箭绑定"
"navigationBarTitleText": "我的设备"
}
},
{
"path": "pages/device-intro",
"style": {
"navigationBarTitleText": "智能弓箭"
}
},
{
@@ -107,12 +113,6 @@
"style": {
"navigationBarTitleText": "排位赛"
}
},
{
"path": "pages/equipment-debug",
"style": {
"navigationBarTitleText": "弓箭调试"
}
}
],
"globalStyle": {

41
src/pages/device-intro.vue Normal file
View File

@@ -0,0 +1,41 @@
<script setup>
import Container from "@/components/Container.vue";
import SButton from "@/components/SButton.vue";
</script>
<template>
<Container title="智能弓箭">
<view class="container">
<image src="../static/1v1-bg.png" mode="widthFix" />
<text>商品形象图及配图标题</text>
<text
>在射灵世界中，等级是衡量您射箭技能的重要指标，而点数则是您提升等级的关键。具体的要求如下
每射出一支箭并上靶：无论您射出的箭命中哪个环数，只要箭成功上靶，您将获得1点基础点数。这是您积累点数的基本方式，每一次射击都是您向更高目标迈进的一步。
射出的箭命中7-9环：当您的箭命中7环、8环或9环时，除了获得1点基础点数外，还将额外获得0.5点基础点数；
射出的箭命中10环：命中10环是射箭中的最高成就，因此，当您的箭命中10环时，除了获得1点基础点数外，还将额外获得1点基础点数.即每次命中10环将总共获得？</text
>
<SButton>加官方企业微信订购（有优惠）</SButton>
</view>
</Container>
</template>
<style scoped>
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.container > image {
width: 80%;
}
.container > text {
color: #fff;
margin: 20px 0;
}
.container > text:nth-child(3) {
font-size: 14px;
color: #fff9;
margin-top: 0;
padding: 0 15px;
}
</style>

34
src/pages/equipment-debug.vue
View File

@@ -1,34 +0,0 @@
<script setup>
import Guide from "@/components/Guide.vue";
import BowTarget from "@/components/BowTarget.vue";
import SButton from "@/components/SButton.vue";
import Container from "@/components/Container.vue";
import { getMyDeviceAPI } from "@/apis";
const getMyDevice = async () => {
const result = await getMyDeviceAPI();
console.log("我的设备：", result);
};
</script>
<template>
<Container :bgType="1" title="弓箭调试">
<!-- <Guide>
<view class="guide-tips">
<text>请预先射几箭测试</text>
<text>确保射击距离有5米</text>
</view>
</Guide>
<BowTarget
avatar="../static/avatar.png"
:power="45"
tips="本次射程5.2米，已达距离要求"
/> -->
<view>
<!-- <SButton>准备好了直接开始</SButton> -->
<SButton :onClick="getMyDevice">获取我的设备</SButton>
</view>
</Container>
</template>
<style scoped></style>

15
src/pages/index.vue
View File

@@ -53,10 +53,10 @@ const toPractisePage = () => {
}
};
const toQquipmentPage = () => {
const toMyDevicePage = () => {
if (isLogin()) {
uni.navigateTo({
url: "/pages/equipment-debug",
url: "/pages/my-device",
});
}
};
@@ -94,7 +94,10 @@ onMounted(() => {
<UserHeader :user="user" showRank />
</block>
<block v-else>
<view @click="toLoginPage">
<view
@click="toLoginPage"
:style="{ marginTop: '20px', paddingLeft: '10px' }"
>
<text>微信登录</text>
</view>
</block>
@@ -105,9 +108,9 @@ onMounted(() => {
<image
src="../static/bow-bg.png"
mode="widthFix"
@click="toQquipmentPage"
@click="toMyDevicePage"
/>
<text @click="toAddDevicePage">我的弓箭</text>
<text>我的弓箭</text>
<image
src="../static/a2@2x.png"
mode="widthFix"
@@ -204,7 +207,7 @@ onMounted(() => {
.container {
height: calc(100vh - 220px);
padding: 20px 10px;
padding: 15px 10px;
}
.feature-grid {

115
src/pages/add-device.vue → src/pages/my-device.vue
View File

@@ -1,22 +1,31 @@
<script setup>
import { ref } from "vue";
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 } from "@/apis";
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: "",
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();
@@ -32,7 +41,7 @@ const handleScan = () => {
onlyFromCamera: true,
scanType: ["qrCode"],
success: async (res) => {
device.value = JSON.parse(atob(res.result));
addDevice.value = JSON.parse(atob(res.result));
confirmBindTip = true;
},
fail: (err) => {
@@ -46,9 +55,9 @@ const handleScan = () => {
};
const confirmBind = async () => {
if (device.value.id) {
const result = await bindDeviceAPI(device.value);
console.log("结果：", result);
if (addDevice.value.deviceId) {
await bindDeviceAPI(addDevice.value);
justBind.value = true;
uni.showToast({
title: "绑定成功",
icon: "success",
@@ -62,11 +71,26 @@ const toFristTryPage = () => {
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="step === 1" class="step-1">
<view v-if="!loading && !device.deviceId" class="scan-code">
<view @click="handleScan">
<image src="../static/scan.png" mode="widthFix" />
<text>扫码绑定弓箭</text>
@@ -109,15 +133,19 @@ const toFristTryPage = () => {
</view>
</CoachComment>
</view>
<view v-if="step === 2" class="step-2">
<view>
<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.png" mode="widthFix" />
<image src="../static/bind-success.png" mode="widthFix" />
<view>
<image :src="user.avatarUrl" mode="widthFix" />
<image
:src="user.avatarUrl"
mode="widthFix"
:style="{ borderRadius: '50%' }"
/>
<text>{{ user.nickName }}</text>
</view>
</view>
@@ -128,12 +156,31 @@ const toFristTryPage = () => {
</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>
.step-1,
.step-2 {
.scan-code,
.just-bind,
.has-device {
display: flex;
flex-direction: column;
align-items: center;
@@ -141,7 +188,7 @@ const toFristTryPage = () => {
width: 100%;
height: 100%;
}
.step-1 > view:first-child {
.scan-code > view:first-child {
display: flex;
flex-direction: column;
align-items: center;
@@ -149,16 +196,16 @@ const toFristTryPage = () => {
color: #fff;
font-size: 14px;
}
.step-1 > view:first-child > image {
.scan-code > view:first-child > image {
width: 100%;
margin-bottom: 20px;
}
.step-1 > view:nth-child(2) {
.scan-code > view:nth-child(2) {
display: flex;
flex-direction: column;
align-items: center;
}
.step-1 > view:nth-child(2) > view {
.scan-code > view:nth-child(2) > view {
color: #39a8ff;
font-size: 14px;
margin: 10px;
@@ -204,40 +251,44 @@ const toFristTryPage = () => {
color: #fff;
background-color: #fff3;
}
.step-2 {
justify-content: center;
}
.step-2 > view:first-child {
.device-binded {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 14px;
margin: 75px 0;
}
.step-2 > view:first-child > view {
.device-binded > view {
display: flex;
flex-direction: column;
align-items: center;
}
.step-2 > view:first-child > image {
width: 16vw;
margin: 0 20px;
}
.step-2 > view:first-child > view > image {
.device-binded > view > image {
width: 24vw;
margin-bottom: 5px;
border-radius: 10px;
}
.step-2 > view:nth-child(2) {
.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: 50px 0;
margin: 75px 0;
}
.step-2 > view:nth-child(2) > text {
.has-device > view:nth-child(2) > text,
.just-bind > view:nth-child(2) > text {
margin: 5px;
}
</style>

0
src/static/checked-green.png → src/static/bind-success.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB