uniProject/pages/xinshuxue/components/tishiDl.vue

<template>
	<!-- 弹窗 -->
	<view>
		<uni-popup ref="popupRef" :animation="false" :is-mask-click="false" mask-background-color="rgba(0,0,0, 0.76);">
			<view class="ezy-tip-dialog tip-e-dialog ">
				<view class="close-btn" @click="handleClose"></view>
				<view class="e-img kx-e-img"></view>
				<view class="text-score">完成了本节基础课程的学习</view>
				<view class="time-tip-box" v-if="times">({{count}}S)</view>
			</view>
		</uni-popup>
	</view>
</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>