sfms3.0-uniapp/components/show-modal/show-modal.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>

				<scroll-view scroll-y="true" style="max-height: 200px;">
					<rich-text class="content" :nodes="content">
					</rich-text>
				</scroll-view>


				<u-line></u-line>
				<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="$u.throttle(cancelClose, 500)">
							<text :style="{'color':cancelColor}">{{ cancelText }}</text>
						</view>
						<u-line direction="col" length="100%"></u-line>
						<view v-if="showConfirmButton" class="confirm_button" @tap="$u.throttle(confirmClose, 500)">
							<text :style="{'color':confirmColor}">{{confirmText}}</text>
							<text v-if="showConfirmCountdown">({{seconds}}s关闭)</text>
						</view>
					</view>
				</slot>
			</view>
		</u-modal>
	</view>
</template>

<script>
	/**
	 * modal 模态框
	 * @description 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作
	 * */
	export default {
		data() {
			return {
				timer: null,
				show: false, // 是否显示
				iconType: '消息',
				icon: '../../static/icons/error-circle.svg',
				title: '', // 提示标题
				content: '', // 提示内容
				cancelText: '取消', // 取消按钮的文字  
				confirmText: '确定', // 确认按钮文字  
				showCancel: true, // 是否显示取消按钮，默认为 true
				confirmColor: '#007aff', // 确定按钮颜色
				cancelColor: null, // 取消按钮颜色
				showConfirmButton: true, // 是否显示确认按钮
				showConfirmCountdown: true, // 是否显示确定倒计时
				showCancelButton: true, // 是否显示取消按钮
				showClose: false,
				confirm: false, //为 true 时，表示用户点击了确定按钮
				cancel: false, //为 true 时，表示用户点击了取消
				seconds: 0,
				success: () => {} // 回调方法
			}
		},


		methods: {
			open() {
				this.show = true;
			},
			close() {
				this.$.refs.modal.popupClose();
			},
			confirmClose() {
				if (this.show) {
					this.show = false;
					clearInterval(this.timer) //清空timer
					this.$.refs.modal.popupClose();
					this.success({
						// cancel: false,
						confirm: true,
					});
				}
			},

			cancelClose() {
				clearInterval(this.timer) //清空timer
				this.$.refs.modal.popupClose();
				this.success({
					// cancel: true,
					confirm: false,
				});
			},

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

			// 打开成功弹框(确定）
			showConfirmSuccessModal(mContent, callback) {
				this.showConfirmModal("成功", mContent, callback);
			},

			// 打开失败弹框(确定）
			showConfirmFailModal(mContent, callback) {
				this.showConfirmModal("失败", mContent, callback);
			},

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

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

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

					}
				});
			},

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

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

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

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

			// 打开疑问弹框(取消+确定）
			showSelectQuestionModal(mContent, callback) {
				this.showSelectModal("疑问", mContent, callback);
			},

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

					}
				});
			},

			// 打开消息弹框(确定+倒计时)
			showConfirmCountdownMessageModal(mContent, callback) {
				this.showConfirmCountdownModal("消息", mContent, callback);
			},

			// 打开成功弹框(确定+倒计时)
			showConfirmCountdownSuccessModal(mContent, callback) {
				this.showConfirmCountdownModal("成功", mContent, callback);
			},

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

			// 打开警告弹框(确定+倒计时)
			showConfirmCountdownWarningModal(mContent, callback) {
				this.showConfirmCountdownModal("警告", mContent, callback);
			},

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

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

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

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

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

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

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

			// 初始化弹框并打开(取消+确定+倒计时)
			showSelectCountdownModal(mIconType, mContent, callback) {
				this.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('用户点击取消')
							}
						}
					}
				});
			},

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

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

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

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

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

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

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

				if (data.success) {
					this.success = data.success
				} else {
					this.success = () => {}
				}
				setTimeout(res => {
					this.show = true;
				}, 500)
				if (this.showConfirmCountdown) {
					this.startTimer();
				}

			},

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

			timeUp() {
				// clearInterval(this.timer)
				console.log('时间到')
				this.confirmClose();
			},

		},



	}
</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 {
		margin-top: 16px;
		margin-bottom: 16px;
		margin-left: 8px;
		margin-right: 8px;
		font-size: 32rpx;
		text-align: center;
		word-wrap: break-word;
		word-break: break-all;
		white-space: pre-line;


	}

	.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>