LocalLivingServicesUniapp/components/modal/index.vue

<template>
	<u-popup v-model="show" mode="center"
		bgColor="transparent"
		:customStyle="{ width: '100%' }"
		:mask-close-able="closeOnClickOverlay"
		:closeOnClickOverlay="closeOnClickOverlay"
		@close="onCancel">
		<view class="modal-box" :class="[type]">
			<view class="modal-header" v-if="!!title">
				<text>{{ title }}</text>
			</view>
			<view class="modal-content">
				<slot v-if="$slots.content" name="content"></slot>
				<text v-else>{{ content }}</text>
			</view>
			<view class="modal-footer">
				<template v-if="$slots.buttons">
					<slot name="buttons"></slot>
				</template>
				<template v-else>
					<button class="btn cancel"
						v-if="showCancelButton"
						@click="onCancel()"
					>{{ cancelText }}</button>
					<button class="btn submit"
						v-if="showConfirmButton"
						@click="onSubmit()"
					>{{ confirmText }}</button>
				</template>
			</view>
		</view>
	</u-popup>
</template>

<script>
export default {
	name: "",
	props: {
		title: {
			default: '',
			type: String
		},
		// success, warning
		type: {
			default: '',
			type: String
		},
		content: {
			default: '',
			type: String
		},
		cancelText: {
			default: '取消',
			type: String
		},
		confirmText: {
			default: '确认',
			type: String
		},
		showCancelButton: {
			default: true,
			type: Boolean
		},
		showConfirmButton: {
			default: true,
			type: Boolean
		},
        // 点击遮罩是否关闭弹窗
        closeOnClickOverlay: {
            type: Boolean,
            default: false
        },
	},
	data() {
		return {
			show: false,
			timer: null,
			callback: null
		};
	},
	mounted() {
		
	},
	methods: {
		onOpen(duration = 0, callback) {
			this.show = true;

			if (duration > 0) {
				// 清除之前的定时器（防止多次调用）
				if (this.timer) clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					this.show = false;
					callback && callback();
				}, duration);
			}
			if (!duration && callback) {
				this.callback = callback;
			}
		},
		onCancel() {
			this.$emit('cancel');
			this.show = false;
		},
		onSubmit() {
			this.callback && this.callback();
			this.$emit('confirm');
			this.show = false;
		},
	}
}
</script>

<style lang="scss" scoped>
::v-deep .u-popup {
	flex: initial;
}
::v-deep .u-mode-center-box {
	background: transparent;
}
.modal-box {
	width: calc(100vw - 150rpx);
	// margin: 0 75rpx;
	border-radius: 16rpx;
	background: #fff;
	.modal-header {
		margin: 0 24rpx;
		padding: 18rpx 0;
		text-align: center;
		border-bottom: 1rpx solid #EEEEEE;
		text {
			font-weight: 500;
			font-size: 34rpx;
			color: #333333;
		}
	}
	.modal-content {
		// min-height: 164rpx;
		padding: 42rpx 40rpx;
		text-align: center;
		text {
			font-weight: 400;
			font-size: 28rpx;
			color: #232832;
		}
	}
	.modal-footer {
		padding: 16rpx 24rpx;
		border-top: 1rpx solid #EEEEEE;
		gap: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.btn {
			width: 100%;
			font-weight: 400;
			font-size: 28rpx;
			line-height: 68rpx;
			border-radius: 54rpx;
			&::after {
				border: none;
			}
		}
		.cancel {
			color: #999999;
			border: 1rpx solid #CCCCCC;
			background: #FFFFFF;
		}
		.submit {
			color: #FFFFFF;
			border: 1rpx solid #449AFF;
			background: #449AFF;
		}
	}
	&.success {
		background: linear-gradient(180deg, #E0F8E3 0%, #FFFFFF 25%);
	}
	&.warning {
		background: linear-gradient( 180deg, #FFEFE2 0%, #FFFFFF 35%);
	}
}
</style>