feiniao-youwei-uniapp/components/levelSuccessPopup/levelSuccessPopup.vue

<template>
	<up-popup :show="showPopup" mode="center" @close="handleClose" bgColor="transparent" overlayOpacity="0.8">
		<view class="level-popup" @click="handleClose">
			<image class="medal-icon" :src="`${config.BASIC_IMG}img/medal-icon-1.png`"></image>
			<view class="level-cont">
				<view class="level-text">
					<view class="text">V1-青铜等级</view>
					<text>您的能量已达到 100分</text>
				</view>
				<view class="award-cont">
					<view class="title">奖励明细</view>
					<view class="gift">
						<image class="icon" :src="`${config.BASIC_IMG}img/biscuits.png`"></image>
						<text>曲奇饼干兑换券一份</text>
					</view>
					<view class="tips">
						已发放到 <text>个人中心-优惠券</text>
					</view>
				</view>
				<view class="button-group">
					<view class="btn">开心收下</view>
					<up-icon class="close" name="close-circle-fill" size="30" color="rgba(255, 255, 255, 0.7)"></up-icon>
				</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import config from "@/api/config.js"
	import {
		ref,
		watch
	} from "vue";
	
	const props = defineProps({
		show: {
			type: Boolean,
			defalut: false,
		},
	});
	
	const showPopup = ref(false);
	const handleClose = ()=>{
		showPopup.value = false
	}
	
	watch(
		() => props.show,
		() => {
			showPopup.value = true;
		}
	);
</script>

<style lang="scss" scoped>
.level-popup{
	width: 100vw;
	.medal-icon{
		min-width: 750rpx;
		height: 750rpx;
	}
	.level-cont{
		margin-top: -200rpx;
		.level-text{
			text-align: center;
			font-size: 28rpx;
			color: #fff;
			
			.text{
				font-size: 52rpx;
				font-family: 'PangMenZhengDao';
			}
		}
		.award-cont{
			text-align: center;
			.title{
				font-size: 28rpx;
				margin: 46rpx 0;
				color: #fff;
				position: relative;
				&::before{
					content: '';
					position: absolute;
					top: 50%;
					left: calc(50% - 168rpx);
					width: 100rpx;
					height: 2rpx;
					background-image: linear-gradient(90deg,#000,#fff);
				}
				&::after{
					content: '';
					position: absolute;
					top: 50%;
					right: calc(50% - 168rpx);
					width: 100rpx;
					height: 2rpx;
					background-image: linear-gradient(90deg,#fff,#000);
				}
			}
			.gift{
				margin: 20rpx auto;
				font-family: 'PangMenZhengDao';
				background: rgba(255, 255, 255, 0.26);
				border-radius: 10rpx;
				color: #fff;
				width: 472rpx;
				padding: 14rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;
				.icon{
					width: 108rpx;
					height: 74rpx;
					margin-right: 20rpx;
				}
			}
			.tips{
				font-size: 24rpx;
				color: #999999;
				text{
					color: #EE8F00;
				}
			}
		}
		.button-group {
			margin: 64rpx auto;
			width: 312rpx;
			.btn {
				font-size: 44rpx;
				padding: 20rpx 0;
				border-radius: 50rpx;
				font-family: "PangMenZhengDao";
				color: #954600;
				background: linear-gradient(120deg, #FFE6B2, #FFC339);
				text-align: center;
			}
			.close{
				margin-top: 64rpx;
				justify-content: center;
			}
		}
	}
}
</style>