H5-frontend/business/time-hint.vue

<template>
	<view class="modal" v-if="visible">
		<view class="modal-content">
			<image :src="config.ossPathPerfixs + '/pop-up-bg.png'" mode="aspectFill" class="modal-content-bg"></image>
			<view class="modal-content-box">
				<view class="modal-content-box-title">
					<text class="modal-content-box-title-text">{{ title }}</text>
				</view>
				<view class="modal-content-box-section" v-html="innerHtml" v-if="innerHtml"></view>
				<fs-empty padding="100rpx 0" imageWidth="200rpx" v-else></fs-empty>
				<view class="modal-content-box-footer-btn">
					<fs-button round type="primary" @click="handleSubmit" :disabled="isDisabled">
						<text>我已知晓</text>
						<text v-if="timerNum > 0">({{ timerNum }}s)</text>
					</fs-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
// import timeHint from '@/business/time-hint'
// <time-hint v-if="isShowtimeHint" :text="info.importantInfo" @change="handleReserve"></time-hint>
import config from '@/utils/config'

const props = defineProps({
	time: {
		type: Number,
		default: 5
	},
	title: {
		type: String,
		default: '温馨提示'
	},
	text: {
		type: String,
		default: ''
	}
})

const emits = defineEmits(['change'])

const visible = ref(false)
const timer = ref(null)
const timerNum = ref(0)
const isDisabled = computed(() => timerNum.value > 0)
const innerHtml = ref('')

onMounted(() => {
	innerHtml.value = props.text
	visible.value = true
	timerNum.value = props.time
	timer.value = setInterval(() => {
		if (timerNum.value <= 0) return clearInterval(timer.value)
		timerNum.value -= 1
	}, 1000)
})

const handleSubmit = () => {
	if (isDisabled.value) return uni.showToast({ title: `${timerNum.value}s后可关闭`, icon: 'none' })
	closeModal()
}

const closeModal = () => {
	visible.value = false
	emits('change', false)
}
</script>

<style lang="scss" scoped>
.modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: flex;
	justify-content: center;
	align-items: center;

	.modal-content {
		width: 100vw;
		padding: 50rpx 70rpx 70rpx 70rpx;
		border-radius: 50rpx;
		position: relative;

		.modal-content-bg {
			position: absolute;
			width: 100vw;
			height: 600rpx;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.modal-content-box {
			position: relative;
			z-index: 1;

			.modal-content-box-title {
				font-size: 36rpx;
				padding-bottom: 20rpx;
				font-weight: 700;
				text-align: center;
				color: #333;
				position: relative;

				&-text {
					position: relative;
					z-index: 1;
				}

				&::after {
					content: '';
					position: absolute;
					z-index: 0;
					bottom: 20rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 160rpx;
					height: 16rpx;
					border-radius: 8rpx;
					background-image: linear-gradient(90deg, #0871FF 0%, #00EEA8 100%);
				}
			}

			.modal-content-box-section {
				height: 340rpx;
				overflow-y: auto;
				word-wrap: break-word;
			}

			.modal-content-box-footer-btn {
				padding-top: 20rpx;
				text-align: center;
			}
		}
	}
}
</style>