完成绑定设备UI

src/components/CoachComment.vue

@@ -14,13 +14,26 @@ const props = defineProps({
     type: Function,
     default: () => {},
   },
+  mode: {
+    type: String,
+    default: "normal",
+  },
 });
 </script>
 
 <template>
   <view class="container" :style="{ display: show ? 'flex' : 'none' }">
     <view class="scale-in">
-      <image src="../static/coach-comment.png" mode="widthFix" />
+      <image
+        v-if="mode === 'normal'"
+        src="../static/coach-comment.png"
+        mode="widthFix"
+      />
+      <image
+        v-if="mode === 'square'"
+        src="../static/prompt-bg-square.png"
+        mode="widthFix"
+      />
       <slot />
     </view>
     <IconButton

src/pages.json

@@ -6,6 +6,12 @@
         "navigationBarTitleText": "首页"
       }
     },
+    {
+      "path": "pages/add-device",
+      "style": {
+        "navigationBarTitleText": "弓箭绑定"
+      }
+    },
     {
       "path": "pages/user",
       "style": {

src/pages/add-device.vue

@@ -0,0 +1,243 @@
+<script setup>
+import { ref } 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 useStore from "@/store";
+import { storeToRefs } from "pinia";
+const showTip = ref(false);
+const confirmBindTip = ref(false);
+const device = ref({
+  id: "",
+  deviceName: "DS3F298SDfF",
+});
+const store = useStore();
+const { user } = storeToRefs(store);
+
+const step = ref(1);
+
+// 扫描二维码方法
+const handleScan = () => {
+  const { user } = useStore();
+  if (!user.id) {
+    return uni.showToast({
+      title: "请先登录",
+      icon: "none",
+    });
+  }
+  // 调用扫码API
+  uni.scanCode({
+    // 只支持扫码二维码
+    onlyFromCamera: true,
+    scanType: ["qrCode"],
+    success: async (res) => {
+      device.value = JSON.parse(atob(res.result));
+      confirmBindTip = true;
+    },
+    fail: (err) => {
+      console.error("扫码失败：", err);
+      uni.showToast({
+        title: "扫码失败",
+        icon: "error",
+      });
+    },
+  });
+};
+
+const confirmBind = async () => {
+  if (device.value.id) {
+    const result = await bindDeviceAPI(device.value);
+    console.log("结果：", result);
+    uni.showToast({
+      title: "绑定成功",
+      icon: "success",
+    });
+    step.value = 2;
+  }
+};
+
+const toFristTryPage = () => {
+  uni.navigateTo({
+    url: "/pages/first-try",
+  });
+};
+</script>
+
+<template>
+  <Container title="弓箭绑定">
+    <view v-if="step === 1" class="step-1">
+      <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="step === 2" class="step-2">
+      <view>
+        <view>
+          <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" />
+          <text>{{ user.nickName }}</text>
+        </view>
+      </view>
+      <view>
+        <text>恭喜，你的弓箭和账号已成功绑定！</text>
+        <text :style="{ color: '#fed847' }">已赠送6个月射灵世界会员</text>
+        <text>赶快进入新手试炼场体验一下吧！</text>
+      </view>
+      <SButton :onClick="toFristTryPage">进入新手试炼</SButton>
+    </view>
+  </Container>
+</template>
+
+<style scoped>
+.step-1,
+.step-2 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  width: 100%;
+  height: 100%;
+}
+.step-1 > view:first-child {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 40%;
+  color: #fff;
+  font-size: 14px;
+}
+.step-1 > view:first-child > image {
+  width: 100%;
+  margin-bottom: 20px;
+}
+.step-1 > view:nth-child(2) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.step-1 > 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;
+}
+.step-2 {
+  justify-content: center;
+}
+.step-2 > view:first-child {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 14px;
+}
+.step-2 > view:first-child > 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 {
+  width: 24vw;
+  margin-bottom: 5px;
+  border-radius: 10px;
+}
+.step-2 > view:nth-child(2) {
+  color: #fff9;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 14px;
+  margin: 50px 0;
+}
+.step-2 > view:nth-child(2) > text {
+  margin: 5px;
+}
+</style>

src/pages/index.vue

@@ -44,6 +44,12 @@ const toQquipmentPage = () => {
   });
 };
 
+const toAddDevicePage = () => {
+  uni.navigateTo({
+    url: "/pages/add-device",
+  });
+};
+
 // 获取全局配置
 const getConfig = async () => {
   try {
@@ -82,7 +88,7 @@ onMounted(() => {
             mode="widthFix"
             @click="toQquipmentPage"
           />
-          <text>我的弓箭</text>
+          <text @click="toAddDevicePage">我的弓箭</text>
           <image
             src="../static/a2@2x.png"
             mode="widthFix"