uniProject/pages/xinshuxue/components/tishiDl.vue

<template>
	<!-- 弹窗 -->
	<uni-popup ref="popupRef" :animation="false" :is-mask-click="false"
		mask-background-color="rgba(51, 137, 217, 0.95);">
		<view @click="handleClose">close</view>
		<view>
			<view class="text-score">完成了本节基础课程的学习</view>
			<view class="course-btn-box">
				<text v-if="times">({{count}}S)</text>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		nextTick,
		ref
	} from "vue"

	const times = ref(null)
	const count = ref(5);
	const popupRef = ref(null);


	function initTime() {
		times.value = setTimeout(() => {
			if (count.value == 0) {
				handleClose();
				return;
			}
			count.value--;
			initTime()
		}, 1000)
	}

	function clearTime() {
		clearTimeout(times.value);
		times.value = null;
		count.value = 5;
	}

	function handleClose() {
		clearTime();
		popupRef.value.close();
	}

	function open() {
		popupRef.value.open();
		nextTick(() => initTime())
	}

	defineExpose({
		open
	})
</script>

<style>
</style>