Web_TracerMethodology/components/app-confirm/app-confirm.vue

<template>
	<!-- 全局确认弹窗，依赖已全局注册的 uni-popup -->
	<uni-popup ref="popup" type="center" :mask-click="false">
		<view class="confirm-card" :class="[type]">
			<view class="title" v-if="title">{{ title }}</view>
			<view class="content" v-if="content">{{ content }}</view>
			<view class="actions">
				<view class="btn btn-cancel" @click="onCancel">{{ cancelText }}</view>
				<view class="btn btn-confirm" :class="[type]" @click="onConfirm">{{ confirmText }}</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
export default {
	data() {
		return {
			// 文案配置
			title: '',
			content: '',
			confirmText: '确定',
			cancelText: '取消',
			// 类型：default | danger
			type: 'default',
			// Promise 的 resolve/reject 引用
			_resolve: null,
			_reject: null
		}
	},
	methods: {
		// 打开弹窗
		open(options = {}) {
			// 合并配置
			this.title = options.title || '提示';
			this.content = options.content || '';
			this.confirmText = options.confirmText || '确定';
			this.cancelText = options.cancelText || '取消';
			this.type = options.type || 'default';
			// 打开并返回 Promise
			this.$refs.popup && this.$refs.popup.open();
			return new Promise((resolve) => {
				this._resolve = resolve;
			});
		},
		// 确认
		onConfirm() {
			this.$refs.popup && this.$refs.popup.close();
			this._resolve && this._resolve(true);
		},
		// 取消
		onCancel() {
			this.$refs.popup && this.$refs.popup.close();
			this._resolve && this._resolve(false);
		}
	}
}
</script>

<style lang="less">
.confirm-card {
	min-width: 560rpx;
	max-width: 680rpx;
	background: #fff;
	border-radius: 16rpx;
	padding: 28rpx 28rpx 20rpx;
	box-sizing: border-box;
}
.confirm-card .title {
	font-size: 32rpx;
	font-weight: 600;
	color: #1f2333;
	margin-bottom: 16rpx;
}
.confirm-card .content {
	font-size: 28rpx;
	line-height: 42rpx;
	color: #4b5563;
	margin-bottom: 24rpx;
}
.confirm-card .actions {
	display: flex;
	justify-content: flex-end;
	gap: 16rpx;
}
.confirm-card .btn {
	min-width: 140rpx;
	height: 64rpx;
	border-radius: 12rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	padding: 0 24rpx;
	box-sizing: border-box;
}
.confirm-card .btn-cancel {
	background: #f3f4f6;
	color: #374151;
}
.confirm-card .btn-confirm.default {
	background: #3377FF;
	color: #fff;
}
.confirm-card .btn-confirm.danger {
	background: #ef4444;
	color: #fff;
}
</style>