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

<script setup>
import { ref, onMounted } from "vue";
import Container from "@/components/Container.vue";
import ScreenHint from "@/components/ScreenHint.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 addDevice = ref();
const store = useStore();
const { updateDevice } = store;
const { user, device } = storeToRefs(store);
const justBind = ref(false);

// 扫描二维码方法
const handleScan = () => {
  // 调用扫码API
  uni.scanCode({
    // 只支持扫码二维码
    onlyFromCamera: true,
    scanType: ["qrCode"],
    success: async (res) => {
      const base64Decode = (str) => {
        // 将 base64 转换为 utf8 字符串
        const bytes = wx.base64ToArrayBuffer(str);
        return String.fromCharCode.apply(null, new Uint8Array(bytes));
      };

      addDevice.value = JSON.parse(base64Decode(res.result));
      confirmBindTip.value = true;
    },
    fail: (err) => {
      console.error("扫码失败：", err);
      uni.showToast({
        title: "扫码失败",
        icon: "error",
      });
    },
  });
};

const confirmBind = async () => {
  if (!justBind.value && addDevice.value.id) {
    await bindDeviceAPI(addDevice.value);
    updateDevice(addDevice.value.id, addDevice.value.name);
    confirmBindTip.value = false;
    justBind.value = true;
    uni.showToast({
      title: "绑定成功",
      icon: "success",
    });
  }
};

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",
  });
};

const backToHome = () => {
  uni.navigateBack();
};
</script>

<template>
  <Container title="弓箭绑定">
    <view v-if="!device.deviceId" class="scan-code">
      <view @click="handleScan">
        <image src="../static/scan.png" mode="widthFix" />
        <text>扫码绑定弓箭</text>
      </view>
      <view>
        <view @click="() => (showTip = true)">找不到我的弓箭？</view>
        <view @click="toDeviceIntroPage">我还没有弓箭</view>
      </view>
      <ScreenHint
        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>
      </ScreenHint>
      <ScreenHint
        :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>
      </ScreenHint>
    </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.avatar || '../static/user-icon.png'"
            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 :style="{ marginTop: '15px' }">
        <SButton :onClick="backToHome" backgroundColor="#fff3" color="#fff"
          >返回首页</SButton
        >
      </view>
    </view>
    <view v-if="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.avatar || '../static/user-icon.png'"
            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;
  margin: 35% 0;
}
.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;
}
.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 {
  color: #fff9;
  font-size: 14px;
}
.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: 100px 0;
}
.device-binded > view {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.device-binded > view > image {
  width: 24vw;
  height: 24vw;
  margin-bottom: 5px;
  border-radius: 10px;
}
.device-binded > view > text {
  width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.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>