partnerApp/components/modules/user/authModal.vue

<template>
	<view class="page">
		<u-mask :show="localAuthShow" class="dis a-c j-c">
			<view class="auth-wrap">
				<view class="header">
					<text>实名认证</text>
					<image src="../../../static/image/user/auth.png" mode="aspectFit"></image>
				</view>
				<view class="content dis f-c a-c">
					<text>您好，成为 <text class="highlight">晋掌柜平台使用人</text>，需要先对您的身份信息进行核对，建议您先实名认证再进行车险报价等业务。</text>
					<view class="dis a-c j-s" style="width: 100%;margin-top: 72rpx;">
						<view class="btn1" @click.stop="onMaskClick">
							<text>取消</text>
						</view>
						<view class="btn" @click.stop="onBtnClick">
							<text>好的，去认证</text>
						</view>
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		name: 'AuthPopup',
		props: {
			authShow: {
				type: Boolean,
				default: true,
			},
		},
		data() {
			return {
				localAuthShow: this.authShow
			};
		},
		watch: {
			authShow(newVal) {
				this.localAuthShow = newVal;
			},
		},
		methods: {
			onBtnClick() {
				this.$emit('btnClick');
				uni.navigateTo({
					url: "/pages/user/authInfo"
				})

			},
			onMaskClick() {
				this.$emit('maskClick');
			},
		}
	};
</script>

<style lang="scss" scoped>
	.auth-wrap {
		width: 570rpx;
		height: 390rpx;
		border-radius: 12rpx;
		position: relative;

		.header {
			width: 100%;
			height: 118rpx;
			background: linear-gradient(0deg, #4FA4F7 0%, #306CF1 100%);
			border-radius: 12rpx 12rpx 0 0;
			position: absolute;
			padding: 20rpx 30rpx;

			text {
				font-size: 40rpx;
				color: #FFFFFF;
				font-weight: bold;
				line-height: 1.5;
			}

			image {
				position: absolute;
				width: 180rpx;
				height: 180rpx;
				right: 30rpx;
				top: -82rpx;
			}
		}

		.content {
			position: relative;
			height: 390rpx;
			background: linear-gradient(180deg, #EBF3FF 0%, #FFFFFF 100%);
			border-radius: 12rpx;
			margin-top: 98rpx;
			padding: 56rpx 30rpx;

			>text {
				color: #333;
				font-size: 28rpx;
			}

			.highlight {
				color: #0052FF;
				font-weight: bold;
			}

			.btn1 {
				background: #FFFFFF;
				box-shadow: 0px 4rpx 10rpx 0px rgba(0, 82, 255, 0.1);
				border-radius: 8rpx;
				border: 1px solid #4F88FD;
				font-size: 32rpx;
				color: #4F88FD;
				padding: 8rpx 44rpx;
			}

			.btn {
				background: linear-gradient(90deg, #0153FF 0%, #0D89FF 100%);
				box-shadow: 0 4rpx 10rpx 0 rgba(0, 82, 255, 0.1);
				border-radius: 8rpx;
				padding: 8rpx 60rpx;
				border: 1px solid #0D89FF;
				color: #FFFFFF;
				font-size: 32rpx;
			}
		}
	}
</style>