shoot-miniprograms/src/components/ShootProgress.vue

<script setup>
import { ref, watch, onUnmounted } from "vue";
const props = defineProps({
  start: {
    type: Boolean,
    default: false,
  },
  tips: {
    type: String,
    default: "",
  },
  total: {
    type: Number,
    default: 90,
  },
  seq: {
    type: Number,
    default: 0,
  },
  onTimeIsUp: {
    type: Function,
    default: () => {},
  },
});

const barColor = ref("#fed847");

const remain = ref(props.total);
const timer = ref(null);

watch(
  () => props.tips,
  (newVal) => {
    if (newVal.includes("红队")) barColor.value = "#FF6060";
    if (newVal.includes("蓝队")) barColor.value = "#5FADFF";
  }
);

watch(
  () => props.seq,
  () => {
    if (timer.value) clearInterval(timer.value);
    remain.value = props.total;
    timer.value = setInterval(() => {
      if (remain.value > 0) {
        remain.value--;
      } else {
        props.onTimeIsUp();
      }
    }, 1000);
  }
);

watch(
  () => props.start,
  (newVal, oldVal) => {
    if (newVal === false) {
      if (timer.value) clearInterval(timer.value);
    }
    if (!oldVal && newVal === true) {
      setTimeout(() => {
        remain.value = props.total;
        timer.value = setInterval(() => {
          if (remain.value > 0) {
            remain.value--;
          } else {
            props.onTimeIsUp();
          }
        }, 1000);
      }, 3000);
    } else {
      if (timer.value) clearInterval(timer.value);
    }
  },
  {
    immediate: true,
  }
);

onUnmounted(() => {
  if (timer.value) clearInterval(timer.value);
});
</script>

<template>
  <view class="container">
    <view>
      <image src="../static/shooter.png" mode="widthFix" />
      <text>{{ remain === 0 ? "射箭时间到！" : tips }}</text>
      <button>
        <image src="../static/sound-yellow.png" mode="widthFix" />
      </button>
    </view>
    <view>
      <view
        :style="{
          width: `${(remain / total) * 100}%`,
          backgroundColor: barColor,
          right: tips.includes('红队') ? 0 : 'unset',
        }"
      />
      <text>剩余{{ remain }}秒</text>
    </view>
  </view>
</template>

<style scoped>
.container {
  width: 100vw;
}
.container > view:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  color: #fed847;
  z-index: 1;
  transform: translateX(-10px);
}
.container > view:first-child > image:first-child {
  width: 80px;
  transform: translateX(10px);
}
.container > view:first-child > button:last-child > image {
  width: 50px;
  transform: translateX(10px);
}
.container > view:last-child {
  z-index: -1;
  width: clac(100% - 30px);
  margin: 0 15px;
  text-align: center;
  background-color: #ffffff80;
  border-radius: 20px;
  margin-top: -20px;
  font-size: 12px;
  height: 20px;
  line-height: 20px;
  position: relative;
  overflow: hidden;
}
.container > view:last-child > view {
  position: absolute;
  height: 20px;
  border-radius: 20px;
  z-index: -1;
  transition: all 1s linear;
}
.container > view:last-child > text {
  z-index: 1;
  color: #000;
}
</style>