Merge branch 'test' into feat-vip

2026-07-03 17:04:09 +08:00
parent 6aa3c6fd6c 8b11e41957
commit 3c7467fbdf
42 changed files with 2351 additions and 90 deletions
@@ -0,0 +1,429 @@
+<script setup>
+import { computed } from "vue";
+import { getDeviceBatteryAPI } from "@/apis";
+
+const OTA_MIN_BATTERY = 50;
+const OTA_LOW_BATTERY_TEXT = "电量不足 50%，暂不支持 OTA 升级";
+const OTA_OFFLINE_TEXT = "请先开启智能弓";
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  state: {
+    type: String,
+    default: "new_version", // new_version | update_progress | update_success | update_failure
+  },
+  version: {
+    type: String,
+    default: "",
+  },
+  progress: {
+    type: Number,
+    default: 40,
+  },
+  // 副标题：如“新版本将优化智能弓体验”
+  description: {
+    type: String,
+    default: "",
+  },
+  // 详细说明：如“升级前请确保：...”
+  changelog: {
+    type: String,
+    default: "",
+  },
+  forceUpdate: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["update", "skip", "close", "done", "retry"]);
+
+const isNewVersion = computed(() => props.state === "new_version");
+const isProgress = computed(() => props.state === "update_progress");
+const isSuccess = computed(() => props.state === "update_success");
+const isFailure = computed(() => props.state === "update_failure");
+// Clamp progress to keep the progress bar width within its container.
+const progressValue = computed(() => Math.min(100, Math.max(0, Number(props.progress) || 0)));
+
+// 点击立即更新前先校验设备在线状态，再校验设备电量。
+const handleUpdateClick = async () => {
+  try {
+    const deviceStatus = await getDeviceBatteryAPI();
+    if (deviceStatus?.online !== true) {
+      uni.showToast({
+        title: OTA_OFFLINE_TEXT,
+        icon: "none",
+      });
+      return;
+    }
+
+    if (Number(deviceStatus?.battery) <= OTA_MIN_BATTERY) {
+      uni.showToast({
+        title: OTA_LOW_BATTERY_TEXT,
+        icon: "none",
+      });
+      return;
+    }
+  } catch (err) {
+    emit("update");
+    return;
+  }
+  emit("update");
+};
+</script>
+
+<template>
+  <view v-if="visible" class="ota-mask">
+    <!-- 图标 + 弹窗卡片 容器 -->
+    <view
+      class="ota-outer"
+      :class="isNewVersion ? 'outer-new' : 'outer-result'"
+    >
+      <!-- 悬浮图标（溢出卡片顶部） -->
+      <image
+        v-if="isNewVersion"
+        src="../static/ota/ota-mascot.png"
+        mode="aspectFit"
+        class="float-icon float-mascot"
+      />
+      <image
+        v-else-if="isSuccess"
+        src="../static/ota/check-char.png"
+        mode="aspectFit"
+        class="float-icon float-check"
+      />
+      <image
+        v-else-if="isFailure"
+        src="../static/ota/close-char.png"
+        mode="aspectFit"
+        class="float-icon float-close"
+      />
+      <image
+        v-else-if="isProgress"
+        src="../static/ota/target-char.png"
+        mode="aspectFit"
+        class="float-icon float-target"
+      />
+
+      <!-- 弹窗卡片：overflow:visible 允许按钮溢出底部，背景图通过 ota-bg-clip 独立裁剪保持圆角 -->
+      <view class="ota-dialog">
+        <view class="ota-bg-clip">
+          <image src="../static/ota/ota-bg.png" mode="aspectFill" class="ota-bg" />
+        </view>
+        <view
+          class="ota-content"
+          :class="{ 'content-new': isNewVersion, 'content-result': isProgress || isSuccess || isFailure }"
+        >
+
+          <!-- 发现新版本：new-ver.png 已包含标题图，不再重复文字；版本号使用 ota-ver.png 胶囊背景 -->
+          <block v-if="isNewVersion">
+            <image src="../static/ota/new-ver.png" mode="aspectFit" class="new-ver-img" />
+            <view v-if="version" class="version-tag-wrap">
+              <image src="../static/ota/ota-ver.png" mode="aspectFit" class="version-tag-bg-img" />
+              <text class="version-tag">{{ version }}</text>
+            </view>
+            <!-- 副标题：如“新版本将优化智能弓体验”，离下方详情 12rpx -->
+            <text v-if="description" class="desc-text">{{ description }}</text>
+            <!-- 详细说明：如“升级前请确保：...” -->
+            <text v-if="changelog" class="changelog-text">{{ changelog }}</text>
+            <view class="btn-group">
+              <view class="primary-btn" @click="handleUpdateClick">
+                <text class="primary-btn-text">立即更新</text>
+              </view>
+              <text v-if="!forceUpdate" class="skip-text" @click="emit('skip')">暂不更新</text>
+            </view>
+          </block>
+
+          <!-- 更新成功：图片左边距 34rpx，文案左边距 44rpx，按钮浮动底部居中 -->
+          <block v-else-if="isSuccess">
+            <image src="../static/ota/update-ok.png" mode="aspectFit" class="result-title-img" style="width: 220rpx; height: 62rpx;" />
+            <text class="dialog-desc">请关机并重启智能弓</text>
+            <view class="btn-group-result">
+              <view class="primary-btn" @click="emit('done')">
+                <text class="primary-btn-text">完成</text>
+              </view>
+            </view>
+          </block>
+
+          <!-- 更新中：复用成功标题图，正文区域展示进度条，无底部按钮 -->
+          <block v-else-if="isProgress">
+            <image src="../static/ota/update_progress.png" mode="aspectFit" class="result-title-img" style="width: 220rpx; height: 62rpx;" />
+            <view class="progress-wrap">
+              <view class="progress-track">
+                <view class="progress-fill" :style="{ width: `${progressValue}%` }"></view>
+              </view>
+            </view>
+          </block>
+
+          <!-- 更新失败：图片左边距 34rpx，文案左对齐 44rpx，按钮浮动底部居中 -->
+          <block v-else-if="isFailure">
+            <image src="../static/ota/update-fail.png" mode="aspectFit" class="result-title-img" style="width: 222rpx; height: 62rpx;" />
+            <text class="dialog-desc">请确保：</text>
+            <text class="dialog-desc">1、智能弓已开启</text>
+            <text class="dialog-desc">2、网路连接稳定</text>
+            <view class="btn-group-result">
+              <view class="primary-btn" @click="emit('retry')">
+                <text class="primary-btn-text">重试</text>
+              </view>
+            </view>
+          </block>
+
+        </view>
+      </view>
+    </view>
+
+    <!-- 关闭按钮（仅新版本状态，非强制更新时，位于弹窗下方） -->
+    <view
+      v-if="(isNewVersion || isFailure) && !forceUpdate"
+      class="ota-close-below"
+      @click="emit('close')"
+    >
+      <image src="../static/sicon/close.png" mode="aspectFit" style="width: 56rpx; height: 56rpx;" />
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.ota-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 外层容器：相对定位，为浮动图标创造溢出空间 */
+.ota-outer {
+  position: relative;
+  overflow: visible;
+}
+/* 设计图：吉祥物向上突出弹窗顶部 40px（375px基准）× 2 = 80rpx */
+.outer-new {
+  padding-top: 80rpx;
+}
+.outer-result {
+  padding-top: 80rpx;
+  padding-bottom: 66rpx;
+}
+
+/* 浮动图标（绝对定位，位于卡片顶部上方） */
+.float-icon {
+  position: absolute;
+  z-index: 2;
+}
+/* 吉祥物尺寸：设计图 149×109px（375px基准）× 2 = 298×218rpx */
+.float-mascot {
+  width: 298rpx;
+  height: 218rpx;
+  top: -5px;
+  right: -74rpx;
+}
+.float-check {
+  width: 194rpx;
+  height: 166rpx;
+  top: 20px;
+  right: 30rpx;
+}
+.float-close {
+  width: 194rpx;
+  height: 164rpx;
+  top: 20px;
+  right: 30rpx;
+}
+.float-target {
+  width: 194rpx;
+  height: 166rpx;
+  top: 20px;
+  right: 30rpx;
+}
+
+/* 弹窗卡片：overflow:visible 允许按钮溢出底部，背景通过 ota-bg-clip 独立裁剪 */
+.ota-dialog {
+  position: relative;
+  width: 482rpx;
+  border-radius: 24rpx;
+  border: 2rpx solid #F9D5A1;
+  overflow: visible;
+  background-color: #392F1D;
+}
+/* 背景图裁剪层：独立 overflow:hidden + border-radius 保持圆角效果 */
+.ota-bg-clip {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 24rpx;
+  overflow: hidden;
+  z-index: 0;
+}
+.ota-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.ota-content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  /* 按钮以外内容均左对齐 */
+  align-items: flex-start;
+}
+.content-new {
+  padding: 30rpx 0 40rpx 0;
+}
+.content-result {
+  padding: 30rpx 0 66rpx 0;
+}
+
+/* 发现新版本内容 */
+.new-ver-img {
+  width: 274rpx;
+  height: 62rpx;
+  /* 左边距 34rpx，去掉 margin-bottom */
+  margin-left: 34rpx;
+}
+/* 版本号胶囊容器：相对定位，使 ota-ver.png 作为背景衬底 */
+.version-tag-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 116rpx;
+  height: 44rpx;
+  /* 离标题图 -10rpx，左边距 50rpx，离下方副标题 22rpx */
+  margin-top: -10rpx;
+  margin-left: 50rpx;
+  margin-bottom: 22rpx;
+}
+/* ota-ver.png 胶囊背景图 */
+.version-tag-bg-img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+/* 版本号文字：浮于背景图之上 */
+.version-tag {
+  position: relative;
+  z-index: 1;
+  color: rgba(254, 222, 100, 1);
+  font-size: 24rpx;
+  padding: 8rpx 22rpx 4rpx 24rpx;
+}
+/* 副标题（如"新版本将优化智能弓体验"）：左边距 44rpx，离下方文案 12rpx */
+.desc-text {
+  font-weight: 500;
+  font-size: 26rpx;
+  color: #FFFFFF;
+  line-height: 36rpx;
+  text-align: left;
+  margin-left: 44rpx;
+  margin-bottom: 12rpx;
+}
+/* 详细说明文案（如“升级前请确保：...”）：左边距 44rpx */
+.changelog-text {
+  font-weight: 400;
+  font-size: 26rpx;
+  color: #FFFFFF;
+  line-height: 40rpx;
+  text-align: left;
+  margin-left: 44rpx;
+  margin-bottom: 0;
+}
+
+/* 按钮组（新版本状态）：离上方文案 30rpx，内部按钮间距 24rpx */
+.btn-group {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 30rpx;
+  gap: 24rpx;
+}
+/* 按钮组（结果状态）：绝对定位，溢出卡片底边 -35rpx 悬浮在底边中间 */
+.btn-group-result {
+  position: absolute;
+  bottom: -35rpx;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+/* 主按钮：按照设计规范 width: 232rpx, height: 70rpx */
+.primary-btn {
+  width: 232rpx;
+  height: 70rpx;
+  background-color: #FED847;
+  border-radius: 44rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.primary-btn-text {
+  font-weight: 500;
+  font-size: 26rpx;
+  color: #000000;
+  line-height: 36rpx;
+}
+/* 暂不更新：设计规范颜色 #5FADFF 蓝色 */
+.skip-text {
+  font-weight: 400;
+  font-size: 26rpx;
+  color: #5FADFF;
+  line-height: 36rpx;
+}
+
+/* 更新结果内容：图片左边距 34rpx，下边距 16rpx */
+.result-title-img {
+  margin-left: 34rpx;
+  margin-bottom: 16rpx;
+}
+/* 结果页文案：左对齐，左边距 44rpx，与 new_version 保持一致 */
+.dialog-desc {
+  font-weight: 400;
+  font-size: 26rpx;
+  color: #FFFFFF;
+  line-height: 40rpx;
+  text-align: left;
+  margin-left: 44rpx;
+}
+.progress-wrap {
+  width: 394rpx;
+  margin-top: 40rpx;
+  margin-left: 44rpx;
+}
+.progress-track {
+  width: 100%;
+  height: 18rpx;
+  background-color: rgba(255, 255, 255, 0.28);
+  border-radius: 999rpx;
+  overflow: hidden;
+}
+.progress-fill {
+  height: 100%;
+  background-color: #FED847;
+  border-radius: 999rpx;
+}
+
+/* 关闭按钮（位于弹窗下方） */
+.ota-close-below {
+  margin-top: 40rpx;
+  display: flex;
+  justify-content: center;
+}
+</style>
@@ -16,6 +16,11 @@ const props = defineProps({

 const rowCount = new Array(6).fill(0);

+const getRingText = (arrow) => {
+  if (!arrow) return "-";
+  if (arrow.ringX && arrow.ring) return "X环";
+  return arrow.ring ? `${arrow.ring}环` : "-";
+};
 const isMember = (player = {}) => player.vip === true || player.sVip === true;

 const getMemberNicknameClass = (player = {}) => [
@@ -52,23 +57,19 @@ const getMemberNicknameClass = (player = {}) => [
    <view>
      <view>
        <view v-for="(_, index) in rowCount" :key="index">
-          <text>{{
-            scores[0] && scores[0][index] ? `${scores[0][index].ring}环` : "-"
-          }}</text>
+          <text>{{ getRingText(scores[0]?.[index]) }}</text>
        </view>
      </view>
      <view>
        <view v-for="(_, index) in rowCount" :key="index">
-          <text>{{
-            scores[1] && scores[1][index] ? `${scores[1][index].ring}环` : "-"
-          }}</text>
+          <text>{{ getRingText(scores[1]?.[index]) }}</text>
        </view>
      </view>
    </view>
    <text
      >{{
        scores
-          .map((s) => s.reduce((last, next) => last + next.ring, 0))
+          .map((s) => (s || []).reduce((last, next) => last + next.ring, 0))
          .reduce((last, next) => last + next, 0)
      }}环</text
    >
@@ -16,7 +16,7 @@ import {

 import useStore from "@/store";
 const store = useStore();
-const { updateUser, updateDevice, updateOnline } = store;
+const { updateUser, updateDevice, updateOnline, clearDevice } = store;

 const props = defineProps({
  show: {
@@ -122,6 +122,8 @@ async function doLogin() {
      );
      const data = await getDeviceBatteryAPI();
      updateOnline(data.online);
+    } else {
+      clearDevice();
    }
    props.onClose();
  } catch (error) {