shoot-miniprograms/src/components/ScorePanel.vue

<script setup>
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
const props = defineProps({
  rowCount: {
    type: Number,
    default: 0,
  },
  total: {
    type: Number,
    default: 0,
  },
  scores: {
    type: Array,
    default: () => [],
  },
  fontSize: {
    type: Number,
    default: 25,
  },
  completeEffect: {
    type: Boolean,
    default: true,
  },
});
const items = ref(new Array(props.total).fill(9));
const width = ref(92);
const itemWidth = ref(0);
const bgImages = [
  "../static/complete-light1.png",
  "../static/complete-light2.png",
];
const bgIndex = ref(0);
watch(
  () => props.total,
  (newValue) => {
    items.value = new Array(newValue).fill(9);
  }
);
const timer = ref(null);
onMounted(() => {
  timer.value = setInterval(() => {
    bgIndex.value = bgIndex.value === 0 ? 1 : 0;
  }, 200);
});
onBeforeUnmount(() => {
  if (timer.value) {
    clearInterval(timer.value);
  }
});
</script>
<template>
  <view class="container">
    <image
      v-if="total > 0 && scores.length === total && completeEffect"
      :src="bgImages[bgIndex]"
      class="complete-light"
      :style="{
        width: `calc(${(100 / (rowCount + 2)) * rowCount}vw + ${
          (100 / (total * 2)) * (rowCount * 2 + (total === 12 ? 8 : 24))
        }px)`,
        height: `calc(${(100 / (rowCount + 2)) * (total / rowCount)}vw + ${
          (100 / (total * 2)) *
          ((total / rowCount) * 2 + (total === 12 ? 7 : 24))
        }px)`,
        top: `${total === 12 ? -2 : -3}vw`,
      }"
    />
    <view
      v-for="(_, index) in items"
      :key="index"
      class="score-item"
      :style="{
        width: 100 / (rowCount + 2) + 'vw',
        height: 100 / (rowCount + 2) + 'vw',
        lineHeight: 100 / (rowCount + 2) + 'vw',
        fontSize: fontSize + 'px',
        margin: 100 / (total * 2) + 'px',
      }"
    >
      <image src="../static/score-bg.png" mode="widthFix" />
      <text
        :style="{ fontWeight: scores[index] !== undefined ? 'bold' : 'normal' }"
        >{{ scores[index] !== undefined ? scores[index] : "-" }}</text
      >
    </view>
  </view>
</template>

<style scoped>
.container {
  width: 92vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 4vw;
  position: relative;
  padding: 1vw 0;
}
.score-item {
  /* background-image: url("../static/score-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; */
  color: #fed847;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.score-item > image {
  position: absolute;
  width: 100%;
  top: 5%;
}
.score-item > text {
  position: relative;
  margin-top: 2px;
}
.complete-light {
  position: absolute;
}
</style>