完善我的弓箭流程

src/apis.js

@@ -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/getBinding?deviceId=9ZF9oVXs`,
-      // url: `${BASE_URL}/user/device/getBindings`,
+      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);

src/components/Guide.vue

@@ -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;

src/pages.json

@@ -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": {

src/pages/device-intro.vue

@@ -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>

src/pages/equipment-debug.vue

@@ -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>

src/pages/index.vue

@@ -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 {

src/pages/my-device.vue

@@ -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) {
+  if (addDevice.value.deviceId) {
-    const result = await bindDeviceAPI(device.value);
+    await bindDeviceAPI(addDevice.value);
-    console.log("结果：", result);
+    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 v-if="justBind" class="just-bind">
-      <view>
+      <view class="device-binded">
-        <view>
+        <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,
+.scan-code,
-.step-2 {
+.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 {
+.device-binded {
-  justify-content: center;
-}
-.step-2 > view:first-child {
   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 {
+.device-binded > view > image {
-  width: 16vw;
-  margin: 0 20px;
-}
-.step-2 > view:first-child > 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>