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

<template>
	<up-popup :show="showPopup" @close="handleClose" mode="center" bgColor="transparent" overlayOpacity="0.8">
		<view class="success-popup">
			<view class="success-title">恭喜你，已守护成功！</view>
			<view class="success-content">
				<image class="right-star" :src="`${config.BASIC_IMG}img/treePage/star.png`" alt="" />
				<image class="left-star" :src="`${config.BASIC_IMG}img/treePage/star.png`" alt="" />
				<view class="card">
					<image class="img" mode="aspectFill" :src="getImageUrl(treeObj.filename)" alt="" />
					<view class="code">{{treeObj.code}}</view>
				</view>
			</view>
			<view class="button" @click="handleClose">我知道了</view>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		ref,
		watch
	} from "vue";
	import config from "@/api/config.js"
	const resize = "?x-oss-process=image/resize,w_1000";

	const props = defineProps({
		show: {
			type: Boolean,
			defalut: false,
		},
		treeData: {
			type: Object,
			defalut: () => {},
		},
	});

	const getImageUrl = (filename) =>{
		if (filename?.startsWith("https")) {
			return filename; // 直接使用完整 URL
		} else {
			return config.BASE_IMG_URL + filename + resize; // 拼接基础 URL
		}
	};

	const showPopup = ref(false);

	const handleClose = () => {
		showPopup.value = false;
		emit('closedGuardSuccessPopup')
	};

	const treeObj = ref({})

	watch(
		() => props.show,
		() => {
			showPopup.value = true
			treeObj.value = {
				...props.treeData.treeImages[0],
				code: props.treeData.buyList[0].code
			}
		}
	);

	const emit = defineEmits(['closedGuardSuccessPopup'])
</script>

<style lang="scss" scoped>
	@import "@/static/style/mixin.scss";

	.success-popup {
		width: 90vw;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.success-title {
			font-size: 56rpx;
			text-align: center;
			@include ossBg("treePage/ribbon.png");
			margin-bottom: 42rpx;
			font-family: "PangMenZhengDao";
			padding: 14rpx 46rpx 0;
			line-height: 130rpx;
		}

		.success-content {
			width: 88%;
			border-radius: 40rpx;
			padding: 14rpx;
			background: rgba(255, 255, 255, 0.15);
			box-shadow: 0 0 12rpx 0 rgba(255, 255, 255, 0.63) inset;
			box-sizing: border-box;
			backdrop-filter: blur(8rpx);
			position: relative;

			.right-star {
				width: 56rpx;
				height: 54rpx;
				position: absolute;
				top: 110rpx;
				right: -38rpx;
			}

			.left-star {
				width: 64rpx;
				height: 62rpx;
				position: absolute;
				top: 280rpx;
				left: -36rpx;
			}

			.card {
				position: relative;
				color: #000;
				border-radius: 32rpx;

				.img {
					border-radius: 32rpx;
					width: 100%;
					height: 646rpx;
				}

				.code {
					position: absolute;
					top: 0;
					left: calc(50% - 340rpx / 2);
					background: rgba(26, 26, 26, 0.5);
					font-size: 24rpx;
					color: #fff;
					padding: 12rpx 30rpx;
					border-radius: 4rpx 4rpx 20rpx 20rpx;
				}
			}
		}

		.button {
			font-size: 32rpx;
			color: #fff;
			padding: 20rpx 144rpx;
			border: 2rpx solid #fff;
			border-radius: 50rpx;
			text-align: center;
			margin: 50rpx 0 40rpx;
			background-image: linear-gradient(120deg, #00d4ff, #008eff);
		}
	}
</style>