topfans/frontend/pages/castlove/success.vue

<template>
	<view class="success-container">
		<!-- 背景图片 -->
		<image class="background-image" src="/static/background/exhibitionSuccess.png" mode="aspectFill"></image>
		
		<!-- 蒙层 -->
		<view class="background-overlay"></view>
		
		<!-- Header组件 -->
		<Header :showBack="true" :showGuideIcon="false" :showTaskIcon="false" :showStarActivityIcon="false"  backIconColor="#e6e6e6" />
		
		<!-- 内容区域 -->
		<view class="content-wrapper">
			<!-- 成功提示文字 -->
			<view class="success-title">
				<text class="title-text">铸造成功</text>
			</view>
			
			<!-- 藏品展示区域 -->
			<view class="nft-display-section">
				<NftCard 
					:cover-image="nftData.image"
					:width="280"
					:height="280"
					:custom-style="nftCardStyle"
				/>
			</view>
			
			<!-- 铸造成功角色图片 -->
			<view class="character-section">
				<image 
					class="character-image" 
					src="/static/nft/mint-success-char.png" 
					mode="aspectFit"
				></image>
			</view>
			
			<!-- 查看详情按钮 -->
			<view class="button-section">
				<button class="btn-primary" @click="handleViewDetails">查看详情</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onUnload } from '@dcloudio/uni-app';
import Header from '../components/Header.vue';
import NftCard from '../components/NftCard.vue';

// 藏品数据
const nftData = ref({
	image: '',
	name: '',
	event: '',
	remark: '',
	materialType: ''
});

// NftCard 样式
const nftCardStyle = {
	position: 'relative',
	transform: 'rotate(-5deg)',
	overflow: 'hidden'
};

// 页面加载时获取数据
onMounted(() => {
	// 从全局存储读取数据
	try {
		const tempNftData = uni.getStorageSync('temp_nft_data');
		if (tempNftData) {
			const data = JSON.parse(tempNftData);
			nftData.value = {
				image: data.image || '',
				name: data.name || '未命名藏品',
				event: data.event || '',
				remark: data.remark || '',
				materialType: data.materialType || ''
			};
		}
	} catch (e) {
		console.error('读取藏品数据失败:', e);
		uni.showToast({
			title: '数据加载失败',
			icon: 'none'
		});
	}
});

// 查看详情（保留 temp_nft_data，避免第二次点击时 order_id 丢失）
const handleViewDetails = () => {
	let orderId = '';
	let assetId = '';
	try {
		const raw = uni.getStorageSync('temp_nft_data');
		if (raw) {
			const parsed = JSON.parse(raw);
			orderId = parsed.order_id || '';
			assetId = parsed.asset_id || '';
		}
	} catch (e) {
		console.error('读取铸造结果失败:', e);
	}

	if (!orderId && !assetId) {
		uni.showToast({ title: '订单信息已失效，请从星册查看', icon: 'none' });
		return;
	}

	const query = assetId
		? `asset_id=${encodeURIComponent(assetId)}`
		: `order_id=${encodeURIComponent(orderId)}`;
	uni.navigateTo({
		url: `/pages/asset-detail/asset-detail?${query}&from=castlove`,
	});
};

onUnload(() => {
	try {
		uni.removeStorageSync('temp_nft_data');
	} catch (e) {
		/* noop */
	}
});
</script>

<style scoped>

.success-container {
	position: relative;
	width: 100vw;
	height: 100vh;
	min-height: 100vh;
	overflow: hidden;
}

.background-image {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	object-fit: cover;
	min-width: 100%;
	min-height: 100%;
}

.background-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	background: rgba(0, 0, 0, 0.2);
}

.content-wrapper {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 200rpx 40rpx 100rpx;
	box-sizing: border-box;
}

/* 成功提示文字 */
.success-title {
	margin-bottom: 60rpx;
	animation: fadeInDown 0.6s ease-out;
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(-30rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.title-text {
	font-size: 72rpx;
	font-weight: bold;
	font-family: 'yt', sans-serif;
	color: #e6e6e6;
	text-shadow: 
		0 4rpx 20rpx rgba(255, 107, 157, 0.8),
		0 2rpx 10rpx rgba(0, 0, 0, 0.5);
}

/* 藏品展示区域 */
.nft-display-section {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 60rpx;
	animation: zoomIn 0.8s ease-out 0.2s both;
}

@keyframes zoomIn {
	from {
		opacity: 0;
		transform: scale(0.5);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* 铸造成功角色图片区域 */
.character-section {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 60rpx;
	animation: fadeInUp 0.8s ease-out 0.4s both;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.character-image {
	width: 500rpx;
	height: 500rpx;
	object-fit: contain;
}

/* 按钮区域 */
.button-section {
	width: 100%;
	max-width: 600rpx;
	display: flex;
	justify-content: center;
	animation: fadeIn 1s ease-out 0.6s both;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.btn-primary {
	width: 400rpx;
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 44rpx;
	font-size: 36rpx;
	font-family: 'yt', sans-serif;
	font-weight: 600;
	border: none;
	background: linear-gradient(165deg, #F0E4B1 0%, #F08399 50%, #B94E73 90%, #834B9E 100%);
	color: #e6e6e6;
	box-shadow: 
		0 0 20rpx rgba(255, 107, 157, 0.6),
		0 0 40rpx rgba(255, 140, 66, 0.4),
		0 4rpx 20rpx rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-primary::after {
	border: none;
}

.btn-primary:active {
	opacity: 0.9;
	transform: scale(0.98);
}
</style>