update:重构排位赛

src/pages/team-battle/components/ShootProgress2.vue

@@ -0,0 +1,215 @@
+<script setup>
+import {ref, watch, onMounted, onBeforeUnmount} from "vue";
+import {RoundGoldImages} from "@/constants";
+
+const props = defineProps({
+  tips: {
+    type: String,
+    default: "",
+  },
+  total: {
+    type: Number,
+    default: 15,
+  },
+  currentRound: {
+    type: String,
+    default: "round1",
+  },
+});
+
+const barColor = ref("");
+const remain = ref(15);
+const timer = ref(null);
+const loading = ref(false);
+const transitionStyle = ref("all 1s linear");
+const currentTeam = ref(null);
+const MIN_TICK_MS = 1;
+const ZERO_EVENT = "team-battle-progress-zero";
+const COUNTDOWN_READY_EVENT = "team-battle-countdown-ready";
+
+const clearCountdownTimer = () => {
+  if (timer.value) {
+    clearInterval(timer.value);
+    timer.value = null;
+  }
+};
+
+const setTransitionByTick = (tickMs) => {
+  transitionStyle.value = `all ${Math.max(MIN_TICK_MS, Math.round(tickMs || 1000))}ms linear`;
+};
+
+const emitProgressZero = () => {
+  uni.$emit(ZERO_EVENT);
+};
+
+const emitCountdownReady = () => {
+  uni.$emit(COUNTDOWN_READY_EVENT);
+};
+
+const updateRemain = (value) => {
+  if (value.stop) {
+    clearCountdownTimer();
+    return;
+  }
+  // zeroThenReset：ToSomeoneShoot 到达时，若进度条仍在倒计时则先瞬间清零（约 150ms 停留）再显示下一玩家满值
+  // 若进度条已到 0（loading 状态），直接切换满值
+  if (value.zeroThenReset) {
+    clearCountdownTimer();
+    const wasNonZero = remain.value > 0;
+    // 更新下一玩家颜色和方向（在清零和满值时均生效）
+    currentTeam.value = value.team;
+    if (value.team === 'red') barColor.value = "linear-gradient( 180deg, #FFA0A0 0%, #FF6060 100%)";
+    if (value.team === 'blue') barColor.value = "linear-gradient( 180deg, #9AB3FF 0%, #4288FF 100%)";
+    transitionStyle.value = "none";
+    if (wasNonZero) {
+      // 瞬间清零，停留约 150ms 后切换为满值
+      remain.value = 0;
+      loading.value = true;
+      setTimeout(() => {
+        remain.value = value.value;
+        loading.value = false;
+        setTimeout(() => { transitionStyle.value = "all 1s linear"; }, 50);
+      }, 150);
+    } else {
+      // 已在底部，直接切换满值
+      remain.value = value.value;
+      loading.value = false;
+      setTimeout(() => { transitionStyle.value = "all 1s linear"; }, 50);
+    }
+    return;
+  }
+  loading.value = false;
+  currentTeam.value = value.team
+  if (value.team === 'red')
+    barColor.value = "linear-gradient( 180deg, #FFA0A0 0%, #FF6060 100%)";
+  if (value.team === 'blue')
+    barColor.value = "linear-gradient( 180deg, #9AB3FF 0%, #4288FF 100%)";
+  const nextVal = Math.max(0, Math.round(Number(value.value) || 0));
+  const nextTickMs = Math.max(MIN_TICK_MS, Math.round(Number(value.tickMs) || 1000));
+  if (value.reset) {
+    // 重置前先清除旧计时器，防止超时未射箭时旧 interval 残留，导致进度条震荡
+    clearCountdownTimer();
+    // 重置时瞬间跳满格，禁用 CSS 过渡避免从旧值「涨到满」的动画
+    transitionStyle.value = "none";
+    remain.value = nextVal;
+    loading.value = nextVal <= 0;
+    setTimeout(() => {
+      setTransitionByTick(nextTickMs);
+    }, 50);
+    return;
+  }
+  // 如果剩余时间增加（如轮次切换重置），瞬间变化无动画；否则保持动画
+  if (nextVal >= remain.value) {
+    transitionStyle.value = "none";
+    remain.value = nextVal;
+    setTimeout(() => {
+      setTransitionByTick(nextTickMs);
+    }, 50);
+  } else {
+    remain.value = nextVal;
+    setTransitionByTick(nextTickMs);
+  }
+
+  // 启动前先清除旧计时器，防止多次 {stop:false} 事件叠加多个 interval
+  clearCountdownTimer();
+  if (nextVal <= 0) {
+    loading.value = true;
+    emitProgressZero();
+    return;
+  }
+  timer.value = setInterval(() => {
+    if (remain.value > 0) remain.value--;
+    if (remain.value <= 0) {
+      remain.value = 0;
+      loading.value = true;
+      clearCountdownTimer();
+      emitProgressZero();
+      return;
+    }
+    loading.value = false;
+  }, nextTickMs);
+  emitCountdownReady();
+};
+
+watch(
+    () => props.tips,
+    (newVal) => {
+
+    },
+    {
+      immediate: true,
+    }
+);
+
+onMounted(() => {
+  uni.$on("update-remain", updateRemain);
+});
+
+onBeforeUnmount(() => {
+  uni.$off("update-remain", updateRemain);
+  clearCountdownTimer();
+});
+</script>
+
+<template>
+  <view class="container">
+    <image :src="RoundGoldImages[props.currentRound]" mode="widthFix"/>
+    <view
+        :style="{
+        justifyContent: currentTeam==='red' ? 'flex-end' : 'flex-start',
+      }"
+    >
+      <view
+          :style="{
+          width: `${(remain / total) * 100}%`,
+          background: barColor,
+          right: currentTeam==='red' ? 0 : 'unset',
+          transition: transitionStyle,
+        }"
+      />
+      <text v-if="!loading">剩余{{ remain }}秒</text>
+      <text v-else>···</text>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 50vw;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.container > image {
+  width: 380rpx;
+  height: 80rpx;
+  transform: translateY(18rpx);
+}
+
+.container > view:last-child {
+  width: 100%;
+  text-align: center;
+  background-color: #444444;
+  border-radius: 20px;
+  height: 24rpx;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+
+.container > view:last-child > view {
+  height: 24rpx;
+  border-radius: 15px;
+}
+
+.container > view:last-child > text {
+  font-size: 18rpx;
+  color: #fff;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+</style>