school_uni/package1/components/ie-auth-dialog/ie-auth-dialog.vue

<template>
	<view v-if="visible" class="auth-mask" @touchmove.stop.prevent="noop" @tap.stop="cancel">
		<view class="auth-card" @tap.stop>
			<view class="auth-glow auth-glow-a"></view>
			<view class="auth-glow auth-glow-b"></view>
			<view class="auth-badge">{{ badge }}</view>
			<view class="auth-title">{{ title }}</view>
			<view class="auth-content">{{ content }}</view>
			<view class="auth-steps" v-if="steps && steps.length">
				<view class="auth-step" v-for="(step, index) in steps" :key="step">
					<view class="step-dot">{{ index + 1 }}</view>
					<view>{{ step }}</view>
				</view>
			</view>
			<view class="auth-actions">
				<view class="auth-btn ghost" @tap="cancel">{{ cancelText }}</view>
				<view class="auth-btn primary" @tap="confirm">{{ confirmText }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'IeAuthDialog',
		data() {
			return {
				visible: false,
				badge: 'i/e 安全认证',
				title: '',
				content: '',
				confirmText: '继续',
				cancelText: '暂不继续',
				steps: [],
				resolver: null
			}
		},
		created() {
			uni.$on('ie-auth-dialog:show', this.show)
		},
		beforeDestroy() {
			uni.$off('ie-auth-dialog:show', this.show)
		},
		methods: {
			show(options = {}) {
				if (typeof options.handled === 'function') {
					options.handled()
				}
				this.badge = options.badge || 'i/e 安全认证'
				this.title = options.title || '进阶实名认证'
				this.content = options.content || ''
				this.confirmText = options.confirmText || '继续'
				this.cancelText = options.cancelText || '暂不继续'
				this.steps = options.steps || []
				this.resolver = options.resolve || null
				this.visible = true
			},
			confirm() {
				this.close(true)
			},
			cancel() {
				this.close(false)
			},
			close(value) {
				this.visible = false
				if (this.resolver) {
					this.resolver(value)
				}
				this.resolver = null
			},
			noop() {}
		}
	}
</script>

<style lang="scss" scoped>
	.auth-mask {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 99998;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 48rpx;
		background: rgba(13, 18, 34, 0.48);
		backdrop-filter: blur(18rpx);
	}

	.auth-card {
		position: relative;
		width: 100%;
		overflow: hidden;
		padding: 46rpx 38rpx 34rpx;
		border-radius: 46rpx;
		background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,249,255,.96));
		border: 1rpx solid rgba(255,255,255,.88);
		box-shadow: 0 34rpx 90rpx rgba(28, 35, 74, .28);
	}

	.auth-glow {
		position: absolute;
		border-radius: 999rpx;
		filter: blur(4rpx);
		opacity: .72;
	}

	.auth-glow-a {
		right: -80rpx;
		top: -90rpx;
		width: 230rpx;
		height: 230rpx;
		background: rgba(169,255,231,.78);
	}

	.auth-glow-b {
		left: -70rpx;
		bottom: 120rpx;
		width: 190rpx;
		height: 190rpx;
		background: rgba(255,126,179,.22);
	}

	.auth-badge {
		position: relative;
		display: inline-flex;
		padding: 10rpx 18rpx;
		border-radius: 999rpx;
		color: #6c55d8;
		background: rgba(122,77,255,.09);
		font-size: 22rpx;
		font-weight: 800;
	}

	.auth-title {
		position: relative;
		margin-top: 22rpx;
		color: #11162a;
		font-size: 42rpx;
		line-height: 54rpx;
		font-weight: 900;
	}

	.auth-content {
		position: relative;
		margin-top: 16rpx;
		color: rgba(17,22,42,.62);
		font-size: 26rpx;
		line-height: 42rpx;
	}

	.auth-steps {
		position: relative;
		margin-top: 26rpx;
		padding: 22rpx;
		border-radius: 28rpx;
		background: rgba(241,247,255,.82);
	}

	.auth-step {
		display: flex;
		align-items: center;
		gap: 16rpx;
		min-height: 48rpx;
		color: rgba(17,22,42,.72);
		font-size: 24rpx;
		font-weight: 700;
	}

	.step-dot {
		width: 34rpx;
		height: 34rpx;
		line-height: 34rpx;
		text-align: center;
		border-radius: 50%;
		color: #11162a;
		background: #a9ffe7;
		font-size: 20rpx;
		font-weight: 900;
	}

	.auth-actions {
		position: relative;
		display: flex;
		gap: 18rpx;
		margin-top: 34rpx;
	}

	.auth-btn {
		flex: 1;
		height: 84rpx;
		line-height: 84rpx;
		text-align: center;
		border-radius: 999rpx;
		font-size: 27rpx;
		font-weight: 900;
	}

	.auth-btn.ghost {
		color: rgba(17,22,42,.56);
		background: rgba(17,22,42,.06);
	}

	.auth-btn.primary {
		color: #11162a;
		background: linear-gradient(135deg, #a9ffe7, #ffcf7b);
		box-shadow: 0 16rpx 32rpx rgba(76, 209, 184, .22);
	}
</style>