tijian_BJRR/北京仁仁体检小程序/pages/main/order/countdown/countdown.vue

<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2023年5月30日 12:53:12
	 */
	import {
		ref,
		onMounted,
		onBeforeUnmount
	} from 'vue'
	import {
		$response
	} from '@/api'
	onMounted(() => {
		countdownAction()
	})
	const page_show = ref(true)
	onBeforeUnmount(() => {
		page_show.value = false
	})
	const $emit = defineEmits(['changeStatus'])
	const props = defineProps({
		time: {
			type: String,
			default: ''
		},
		id: {
			type: Number,
			default: 0
		}
	});
	const countdown = ref('')
	const countdownAction = () => {
		if (!page_show.value) return
		if (!props.time) countdown.value = ''
		let targetTime = new Date(props.time);
		let currentTime = new Date();
		let timeDiff = targetTime.getTime() - currentTime.getTime();
		let secondsDiff = Math.floor(timeDiff / 1000);
		let time = (60 * 60 * 2) + secondsDiff
		if (time > 0) {
			let seconds = time;
			let hours = Math.floor(seconds / 3600);
			let minutes = Math.floor((seconds % 3600) / 60);
			let remainingSeconds = seconds % 60;
			let timeString = hours + '小时' + minutes + '分钟' + remainingSeconds + '秒';
			countdown.value = timeString
			setTimeout(() => {
				countdownAction()
			}, 1000)
		} else {
			$emit('changeStatus', props.id, 3)
			countdown.value = '已过期'
		}
	}
</script>
<template>
	<view>{{ countdown }}</view>
</template>
<style scoped>

</style>