shoot-miniprograms/src/components/ShootProgress2.vue

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

watch(
  () => props.tips,
  (newVal) => {
    if (newVal.includes("红队"))
      barColor.value = "linear-gradient( 180deg, #FFA0A0 0%, #FF6060 100%)";
    if (newVal.includes("蓝队"))
      barColor.value = "linear-gradient( 180deg, #9AB3FF 0%, #4288FF 100%)";
    if (newVal.includes("重回")) return;
    if (newVal.includes("红队") || newVal.includes("蓝队")) {
      if (timer.value) clearInterval(timer.value);
      remain.value = props.total;
      timer.value = setInterval(() => {
        if (remain.value > 0) remain.value--;
      }, 1000);
    }
  },
  {
    immediate: true,
  }
);

const updateRemain = (value) => {
  if (Math.ceil(value) === remain.value || Math.floor(value) === remain.value)
    return;
  if (timer.value) clearInterval(timer.value);
  remain.value = Math.round(value);
  timer.value = setInterval(() => {
    if (remain.value > 0) remain.value--;
  }, 1000);
};

onMounted(() => {
  uni.$on("update-ramain", updateRemain);
});

onBeforeUnmount(() => {
  uni.$off("update-ramain", updateRemain);
  if (timer.value) clearInterval(timer.value);
});
</script>

<template>
  <view class="container">
    <image :src="RoundGoldImages[props.currentRound]" mode="widthFix" />
    <view
      :style="{
        justifyContent: tips.includes('红队') ? 'flex-end' : 'flex-start',
      }"
    >
      <view
        :style="{
          width: `${(remain / total) * 100}%`,
          background: barColor,
          right: tips.includes('红队') ? 0 : 'unset',
        }"
      />
      <text>剩余{{ remain }}秒</text>
    </view>
  </view>
</template>

<style scoped>
.container {
  width: 50vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container > image {
  width: 360rpx;
  height: 80rpx;
  transform: translateY(20rpx);
}
.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;
  transition: all 1s linear;
}
.container > view:last-child > text {
  font-size: 18rpx;
  color: #fff;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
</style>