workApp/components/confirm-modal.vue

<template>
	<view v-if="visible" class="modal_mask" >
		<view class="modal_container" @click.stop>
			<view class="modal_header">
				<view class="header_left">
					<image src="/static/image/icon/icon_warn.png" class="warning_icon" mode="aspectFit"></image>
					<text class="header_title">{{ title }}</text>
				</view>
				<view class="close_btn" @click="handleClose">
					<image src="/static/image/icon/close.png" class="close_icon" mode="aspectFit"></image>
				</view>
			</view>
			<view class="modal_content">
				<text class="content_text">{{ content }}</text>
			</view>
			<view class="modal_footer">
				<view class="btn cancel_btn" @click="handleCancel">
					<text class="btn_text">{{ cancelText }}</text>
				</view>
				<view class="btn confirm_btn" @click="handleConfirm">
					<text class="btn_text">{{ confirmText }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
const props = defineProps({
	visible: {
		type: Boolean,
		default: false
	},
	title: {
		type: String,
		default: '提示'
	},
	content: {
		type: String,
		default: ''
	},
	cancelText: {
		type: String,
		default: '取消'
	},
	confirmText: {
		type: String,
		default: '确定'
	}
});

const emit = defineEmits(['close', 'cancel', 'confirm']);

const handleClose = () => {
	emit('close');
	emit('cancel');
};

const handleCancel = () => {
	emit('cancel');
};

const handleConfirm = () => {
	emit('confirm');
};
</script>

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

.modal_container {
	width: 90%;
	background-color: #FFFFFF;
	border-radius: 16rpx;
	overflow: hidden;
}

.modal_header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 96rpx;
	padding: 0 40rpx;
	background-color: #F5F7FA;

	.header_left {
		display: flex;
		align-items: center;
	}

	.warning_icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 16rpx;
	}

	.header_title {
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
	}

	.close_btn {
		width: 48rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.close_icon {
			width: 48rpx;
			height: 48rpx;
		}
	}
}

.modal_content {
	height: 198rpx;
	padding: 0 32rpx;
	border-bottom: 2rpx solid #DCDFE6;
	line-height: 198rpx;
	.content_text {
		font-size: 28rpx;
		color: #000000;
	}
}

.modal_footer {
	display: flex;
	padding: 28rpx 40rpx;
	justify-content: space-around;
	gap: 32rpx;
	.btn {
		height: 80rpx;
		width: 280rpx;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 0;

		.btn_text {
			font-size: 28rpx;
			font-weight: 500;
		}
	}

	.cancel_btn {
		background-color: #FFFFFF;
		border: 2rpx solid #DCDFE6;

		.btn_text {
			color: #666666;
		}
	}

	.confirm_btn {
		background-color: #2E64FA;
		border: 2rpx solid #2E64FA;

		.btn_text {
			color: #FFFFFF;
		}
	}
}
</style>