sfms3.0-uniapp/src/mycomponents/common/comMessage.vue

<template name="show-modal">
	<view>
		<u-modal v-model="show" :title-style="{color: 'red'}" :title="title" :showTitle="false"
			:showConfirmButton="false" ref="modal">
			<view class="slot-content">
				<slot name="icon">
					<image class="icon" :src="icon" />
				</slot>
				<slot name="content">
					<rich-text class="content" :nodes="content">
					</rich-text>

				</slot>
				<view class='split_line'></view>
				<slot name="button">
					<view class="uni-flex uni-row u-col-center space-between" style="width: 100%;height: 48px;">
						<view v-if="showCancelButton" class="cance_button" @tap="cancelClose">
							<text :style="{'color':cancelColor}">{{ cancelText }}</text>
						</view>
						<u-line direction="col" length="100%"></u-line>
						<view v-if="showConfirmButton" class="confirm_button" @tap="confirmClose">
							<text :style="{'color':confirmColor}">{{confirmText}}</text>
							<text v-if="showConfirmCountdown">({{seconds}}s关闭)</text>
						</view>
					</view>
				</slot>
			</view>
		</u-modal>
	</view>
</template>

<script setup lang="ts">
	/**
	 * modal 模态框
	 * @description 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作
	 * */
	 import {
	 	ref,
	 	getCurrentInstance
	 } from 'vue'
	const timer = ref(null)
	const show = ref(false) // 是否显示
	const iconType = ref('消息')
	const icon = ref('../../static/icons/error-circle.svg')
	const title = ref('')
	const content = ref('') // 提示内容
	const cancelText = ref('取消') // 取消按钮的文字  
	const confirmText = ref('确定') // 确认按钮文字  
	const showCancel = ref(true) //  是否显示取消按钮，默认为 true  
	const confirmColor = ref('#007aff') // 确定按钮颜色 
	const cancelColor = ref(null) // 取消按钮颜色 
	const showConfirmButton = ref(true) // 是否显示确认按钮 
	const showConfirmCountdown = ref(true) // 是否显示确定倒计时 
	const showCancelButton = ref(true) // 是否显示取消按钮 
	const showClose = ref(false)
	const confirm = ref(false) //为 true 时，表示用户点击了确定按钮
	const cancel = ref(false) //为 true 时，表示用户点击了取消
	const isDisabled = ref(true) //为 true 时，表示用户可以点击，反之则不可以
	const seconds = ref(0)
	const success = () => {

	}
	const open = () => {
		show.value = true;
		isDisabled.value = true;
	}
	const close = () => {
		show.value = false
		isDisabled.value = false;
	}
	const confirmClose = () => {
		if (!isDisabled.value) return
		isDisabled.value = false
		// console.log('确定点击')
		if (show.value) {
			show.value = false;
			clearInterval(timer.value) //清空timer
			success({
				// cancel: false,
				confirm: true,
			});
		}
	}
	const cancelClose = () => {
		if (!isDisabled.value) return
		isDisabled.value = false
		clearInterval(timer.value) //清空timer
		show.value = false
		success({
			// cancel: true,
			confirm: false,
		});
	}
	// 打开消息弹框(确定+倒计时)
	const showMessage = (mContent, callback) => {
		showConfirmCountdownModal("消息", mContent, callback);
	}
	// 打开成功弹框(确定+倒计时)
	const showSuccessMessage = (mContent, callback) => {
		showConfirmCountdownModal("成功", mContent, callback);
	}
	// 打开失败弹框(确定）
	const showErrorMessage = (mContent, callback) => {
		
			console.log(333)
		showConfirmModal("失败", mContent, callback);
	}

	// 显示崩溃消息(无确定）
	const showBreakMessage = (mContent, callback) => {
			showNoButtonModal("失败", mContent, callback);
		}

		// 打开疑问弹框(取消+确定）
		const showQuestionMessage = (mContent, callback) => {
			showSelectModal("疑问", mContent, callback);
		}

	// 打开警告弹框(确定+倒计时)
	const showWarningMessage = (mContent, callback) => {
		showConfirmCountdownModal("警告", mContent, callback);
	}

	// 打开失败弹框(确定+倒计时)
	const showConfirmCountdownFailModal = (mContent, callback) => {
			showConfirmCountdownModal("失败", mContent, callback);
		}

		// 打开消息弹框(确定）
		const showConfirmMessageModal = (mContent, callback) => {
			showConfirmModal("消息", mContent, callback);
		}

	// 打开成功弹框(确定）
	const showConfirmSuccessModall = (mContent, callback) => {
		showConfirmModal("成功", mContent, callback);
	}


	// 打开警告弹框(确定）
	const showConfirmWarningModal = (mContent, callback) => {
		showConfirmModal("警告", mContent, callback);
	}

	// 打开疑问弹框(确定）
	const showConfirmQuestionModal = (mContent, callback) => {
		showConfirmModal("疑问", mContent, callback);
	}

	// 初始化弹框并打开(确定）
	const showNoButtonModal = (mIconType, mContent, callback) => {
		showModal({
			iconType: mIconType,
			content: mContent,
			showConfirmButton: false,
			showCancelButton: false,
			success: function(res) {
				if (callback != undefined) {
					if (res.confirm == true) {
						callback(true);
					} else {
						callback(false);
					}
				}

			}
		});
	}
	// 初始化弹框并打开(确定）
	const showConfirmModal = (mIconType, mContent, callback) => {
		console.log(222)
		showModal({
			iconType: mIconType,
			content: mContent,
			showCancelButton: false,
			success: function(res) {
				if (callback != undefined) {
					if (res.confirm == true) {
						callback(true);
					} else {
						callback(false);
					}
				}

			}
		});
	}

	// 打开消息弹框(取消+确定）
	const showSelectMessageModal = (mContent, callback) => {
		showSelectModal("消息", mContent, callback);
	}

	// 打开成功弹框(取消+确定）
	const showSelectSuccessModal = (mContent, callback) => {
		showSelectModal("成功", mContent, callback);
	}

	// 打开失败弹框(取消+确定）
	const showSelectFailModal = (mContent, callback) => {
		showSelectModal("失败", mContent, callback);
	}

	// 打开警告弹框(取消+确定）
	const showSelectWarningModal = (mContent, callback) => {
		showSelectModal("警告", mContent, callback);
	}

	// 初始化弹框并打开(取消+确定）
	const showSelectModal = (mIconType, mContent, callback) => {
		showModal({
			iconType: mIconType,
			content: mContent,
			success: function(res) {
				if (callback != undefined) {
					if (res.confirm == true) {
						callback(true);
						console.log('用户点击确定')
					} else {
						callback(false);
						console.log('用户点击取消')
					}
				}

			}
		});
	}

	// 打开疑问弹框(确定+倒计时)
	const showConfirmCountdownQuestionModal = (mContent, callback) => {
		showConfirmCountdownModal("疑问", mContent, callback);
	}

	// 初始化弹框并打开(确定+倒计时)
	const showConfirmCountdownModal = (mIconType, mContent, callback) => {
		showModal({
			iconType: mIconType,
			content: mContent,
			showCancelButton: false,
			showConfirmCountdown: true,
			success: function(res) {
				if (callback != undefined) {
					if (res.confirm == true) {
						callback(true);
					} else {
						callback(false);
					}
				}
			}
		});
	}

	// 打开消息弹框(取消+确定+倒计时)
	const showSelectCountdownMessageModal = (mContent, callback) => {
		showSelectCountdownModal("消息", mContent, callback);
	}

	// 打开成功弹框(取消+确定+倒计时)
	const showSelectCountdownSuccessModal = (mContent, callback) => {
		showSelectCountdownModal("成功", mContent, callback);
	}

	// 打开失败弹框(取消+确定+倒计时)
	const showSelectCountdownFailModal = (mContent, callback) => {
		showSelectCountdownModal("失败", mContent, callback);
	}

	// 打开警告弹框(取消+确定+倒计时)
	const showSelectCountdownWarningModal = (mContent, callback) => {
		showSelectCountdownModal("警告", mContent, callback);
	}

	// 打开疑问弹框(取消+确定+倒计时)
	const showSelectCountdownQuestionModal = (mContent, callback) => {
		showSelectCountdownModal("疑问", mContent, callback);
	}

	// 初始化弹框并打开(取消+确定+倒计时)
	const showSelectCountdownModal = (mIconType, mContent, callback) => {
		showModal({
			iconType: mIconType,
			content: mContent,
			showConfirmCountdown: true,
			success: function(res) {
				if (callback != undefined) {
					if (res.confirm == true) {
						callback(true);
						console.log('用户点击确定')
					} else {
						callback(false);
						console.log('用户点击取消')
					}
				}
			}
		});
	}

	// 初始化弹框并打开
	const showModal = (data) => {
		if (data.iconType) {
			iconType.value = data.iconType
			switch (data.iconType) {
				case '消息':
					icon.value = '/static/icons/error-circle.svg';
					break;
				case '成功':
					icon.value = '/static/icons/checkmark-circle.svg';
					break;
				case '失败':
					icon.value = '/static/icons/close-circle.svg';
					break;
				case '警告':
					icon.value = '/static/icons/warning.svg';
					break;
				case '疑问':
					icon.value = '/static/icons/question-circle.svg';
					break;
				default:
					break;
			}
		}
		// image
		if (data.title) {
			title.value = data.title
		}
		if (data.content) {
			content.value = data.content
		} else {
			content.value = ''
		}
		if (data.cancelText) {
			cancelText.value = data.cancelText
		} else {
			cancelText.value = '取消'
		}
		if (data.confirmText) {
			confirmText.value = data.confirmText
		} else {
			confirmText.value = '确定'
		}

		if (data.showCancel === false || data.showCancel === true) {
			showCancel.value = data.showCancel
		} else {
			showCancel.value = true
		}

		if (data.confirmColor) {
			confirmColor.value = data.confirmColor
		} else {
			confirmColor.value = '#007aff'
		}

		if (data.cancelColor) {
			cancelColor.value = data.cancelColor
		} else {
			cancelColor.value = '#666F83'
		}

		if (data.showConfirmButton === false || data.showConfirmButton === true) {
			showConfirmButton.value = data.showConfirmButton
		} else {
			showConfirmButton.value = true
		}

		if (data.showConfirmCountdown === false || data.showConfirmCountdown === true) {
			showConfirmCountdown.value = data.showConfirmCountdown
		} else {
			showConfirmCountdown.value = false
		}

		if (data.showCancelButton === false || data.showCancelButton === true) {
			showCancelButton.value = data.showCancelButton
		} else {
			showCancelButton.value = true
		}

		if (data.success) {
			success = data.success
		} else {
			success = () => {}
		}
		setTimeout(res => {
			open();
		}, 500)
		if (showConfirmCountdown.value) {
			startTimer();
		}

	}

	const startTimer = () => {
		seconds.value = 3;
		clearInterval(timer.value)
		timer.value = setInterval(() => {
			seconds.value--
			// console.log("倒计时时间", this.seconds);
			if (seconds.value <= 0) {
				timeUp()
				return
			}
		}, 1000)
	}

	const timeUp = () => {
		// clearInterval(this.timer)
		console.log('时间到')
		confirmClose();
	}
	defineExpose({ showErrorMessage }) // 提供 open 方法，用于打开弹窗

</script>
<style lang="scss" scoped>
	.slot-content {
		font-size: 36rpx;
		display: flex; //弹性布局
		flex-direction: column; //垂直排列
		align-items: center; //子元素居中
		// background-image: url()
	}

	.icon {
		width: 70rpx;
		height: 70rpx;
		opacity: 1; //透明度
		margin-top: 16px;
	}

	.title {
		font-size: 35rpx;
	}

	.content {
		width: 100%;
		margin-top: 16px;
		margin-bottom: 16px;
		margin-left: 8px;
		margin-right: 8px;
		font-size: 32rpx;
		text-align: center;
	}

	.cance_button {
		width: 100%;
		margin-top: 10px;
		margin-bottom: 10px;
		font-size: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.confirm_button {
		width: 100%;
		margin-top: 10px;
		margin-bottom: 10px;
		font-size: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.confirm_text {
		// color: $uni-color-primary;
	}

	.def_text {
		color: $uni-color-primary;
	}
</style>