shoot-miniprograms/src/pages/add-device.vue

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