142 lines
2.9 KiB
Vue
142 lines
2.9 KiB
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);
|
|
const loading = ref(false);
|
|
const transitionStyle = ref("all 1s linear");
|
|
const currentTeam = ref(null);
|
|
|
|
const updateRemain = (value) => {
|
|
if (value.stop) {
|
|
if (timer.value) clearInterval(timer.value);
|
|
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%)";
|
|
if (value.reset) {
|
|
remain.value = value.value;
|
|
return;
|
|
}
|
|
const newVal = Math.round(value.value);
|
|
// 如果剩余时间增加（如轮次切换重置），瞬间变化无动画；否则保持动画
|
|
if (newVal >= remain.value) {
|
|
transitionStyle.value = "none";
|
|
remain.value = newVal;
|
|
setTimeout(() => {
|
|
transitionStyle.value = "all 1s linear";
|
|
}, 50);
|
|
} else {
|
|
remain.value = newVal;
|
|
}
|
|
|
|
timer.value = setInterval(() => {
|
|
loading.value = remain.value === 0;
|
|
if (remain.value > 0) remain.value--;
|
|
}, 1000);
|
|
};
|
|
|
|
watch(
|
|
() => props.tips,
|
|
(newVal) => {
|
|
|
|
},
|
|
{
|
|
immediate: true,
|
|
}
|
|
);
|
|
|
|
onMounted(() => {
|
|
uni.$on("update-remain", updateRemain);
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
uni.$off("update-remain", updateRemain);
|
|
if (timer.value) clearInterval(timer.value);
|
|
});
|
|
</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>
|