61 lines
1.2 KiB
Vue
61 lines
1.2 KiB
Vue
<script setup>
|
|
import { ref, watch, onMounted, onUnmounted } from "vue";
|
|
const props = defineProps({
|
|
start: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const count = ref(4);
|
|
const timer = ref(null);
|
|
const isIos = ref(true);
|
|
watch(
|
|
() => props.start,
|
|
(newVal) => {
|
|
if (newVal) {
|
|
if (timer.value) clearInterval(timer.value);
|
|
count.value = 4;
|
|
timer.value = setInterval(() => {
|
|
if (count.value <= 1) {
|
|
clearInterval(timer.value);
|
|
}
|
|
count.value -= 1;
|
|
}, 1000);
|
|
}
|
|
},
|
|
{
|
|
immediate: true,
|
|
}
|
|
);
|
|
onMounted(() => {
|
|
const deviceInfo = uni.getDeviceInfo();
|
|
isIos.value = deviceInfo.osName === "ios";
|
|
});
|
|
onUnmounted(() => {
|
|
if (timer.value) clearInterval(timer.value);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<view class="container" :style="{ top: `calc(50% - ${isIos ? 56 : 64}px)` }">
|
|
<view class="number pump-in" v-if="count === 3">3</view>
|
|
<view class="number pump-in" v-if="count === 2">2</view>
|
|
<view class="number pump-in" v-if="count === 1">1</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
position: absolute;
|
|
top: calc(50% - 64px);
|
|
left: calc(50% - 30px);
|
|
}
|
|
.number {
|
|
color: #fff9;
|
|
font-size: 88px;
|
|
width: 60px;
|
|
text-align: center;
|
|
}
|
|
</style>
|