shoot-miniprograms/src/components/RoundEndTip.vue

<script setup>
import { ref, watch, onMounted, onUnmounted } from "vue";
const props = defineProps({
  isFinal: {
    type: Boolean,
    default: false,
  },
  round: {
    type: Number,
    default: 0,
  },
  bluePoint: {
    type: Number,
    default: 0,
  },
  redPoint: {
    type: Number,
    default: 0,
  },
  roundData: {
    type: Object,
    default: () => ({}),
  },
  onAutoClose: {
    type: Function,
    default: () => {},
  },
});
const count = ref(3);
const tiemr = ref(null);
function startCount() {
  if (tiemr.value) clearInterval(tiemr.value);
  tiemr.value = setInterval(() => {
    if (count.value === 0) {
      clearInterval(tiemr.value);
      props.onAutoClose();
    } else count.value -= 1;
  }, 1000);
}
watch(
  () => [props.isFinal, props.roundData],
  ([n_isFinal, n_roundData]) => {
    count.value = n_isFinal ? 10 : 3;
    startCount();
  }
);
onMounted(() => {
  startCount();
});
onUnmounted(() => {
  if (tiemr.value) clearInterval(tiemr.value);
});
</script>

<template>
  <view class="round-end-tip">
    <text>第{{ round }}轮射击结束</text>
    <block v-if="!isFinal">
      <view class="point-view1">
        <text>本轮蓝队</text>
        <text>{{
          (roundData.blueArrows || []).reduce(
            (last, next) => last + next.ring,
            0
          )
        }}</text>
        <text>环，红队</text>
        <text>{{
          (roundData.redArrows || []).reduce(
            (last, next) => last + next.ring,
            0
          )
        }}</text>
        <text>环</text>
      </view>
      <text v-if="bluePoint === 0 && redPoint === 0">
        本场比赛无人射箭，已取消
      </text>
      <text v-if="bluePoint === redPoint">
        红队、蓝队各得<text :style="{ color: '#fed847', margin: '0 5px' }">{{
          redPoint
        }}</text
        >分
      </text>
      <text v-if="bluePoint > redPoint">
        蓝队获胜，得<text :style="{ color: '#fed847', margin: '0 5px' }">{{
          bluePoint
        }}</text
        >分
      </text>
      <text v-if="bluePoint < redPoint">
        红队获胜，得<text :style="{ color: '#fed847', margin: '0 5px' }">{{
          redPoint
        }}</text
        >分
      </text>
    </block>
    <block v-if="isFinal">
      <view class="point-view2">
        <text>蓝队</text>
        <text>5</text>
        <text>分，红队</text>
        <text>5</text>
        <text>分</text>
      </view>
      <text>同分僵局！最后一箭定江山</text>
      <view class="final-shoot">
        <text>{{ count }}</text>
        <text>秒后蓝红双方</text>
        <text>决金箭</text>
        <text>一箭决胜负</text>
      </view>
    </block>
  </view>
</template>

<style scoped>
.round-end-tip {
  width: 100%;
  color: #fff9;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
}
.round-end-tip > text:first-child {
  font-size: 18px;
  color: #fff;
}
.point-view1 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 3px;
}
.point-view1 > text:nth-child(2),
.point-view1 > text:nth-child(4) {
  color: #fed847;
  margin: 0 5px;
}
.point-view2 {
  margin: 12px 0;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.point-view2 > text:nth-child(2),
.point-view2 > text:nth-child(4) {
  color: #fed847;
  width: 30px;
  text-align: center;
  font-size: 30px;
}
.final-shoot {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  font-size: 14px;
}
.final-shoot > text:nth-child(1) {
  width: 20px;
  text-align: right;
}
.final-shoot > text:nth-child(1),
.final-shoot > text:nth-child(3) {
  font-size: 18px;
  color: #fed847;
  margin-left: 10px;
  margin-right: 5px;
}
</style>