EpicSoul/subPackages/memorialAlbum/detail.vue

<template>
	<view class="memorial-detail">
		<!-- 轮播图区域 -->
		<view class="banner-content">
			<swiper class="top-banner" :circular="true" :interval="6000" :duration="800" :indicator-dots="false"
				:autoplay="true" @change="swiperChange">
				<swiper-item v-for="(item, index) in topBanner" :key="index">
					<image class="top-banner" :src="showImg(item)" mode="aspectFill"></image>
				</swiper-item>
			</swiper>

			<view class="dot-container">
				<view :class="['dot-line', index == swiperIndex ? 'active' : '']" v-for="(item, index) in topBanner"
					:key="index"></view>
			</view>

			<!-- 页码指示器 -->
			<view class="page-indicator">
				<text class="page-text">{{ swiperIndex + 1 }}/{{ topBanner.length }}</text>
			</view>
		</view>

		<!-- 数字资产信息卡片 -->
		<view class="asset-info-card">
			<view class="card-header">
				<text class="asset-title">{{ detailInfo.goodsName }}</text>
			</view>

			<view class="info-row">
				<text class="info-label">发行数量：</text>
				<text class="info-value">{{ detailInfo.publishQuantity||0 }}份</text>
			</view>

			<view class="divider"></view>

			<view class="info-row">
				<text class="info-label">数字资产所有方：</text>
				<text class="info-value">{{ detailInfo.ownPart||'-' }}</text>
			</view>

			<view class="info-row">
				<text class="info-label">数字资产权利方：</text>
				<text class="info-value">{{ detailInfo.powerPart||'-' }}</text>
			</view>
			<view class="info-row">
				<text class="info-label">授权品牌：</text>
				<text class="info-value">{{ detailInfo.authorizeBrand||'-' }}</text>
			</view>
			<!-- 收藏信息 -->
			<view class="collection-info">
				<view class="collection-header">— 收藏信息 —</view>
				<view class="collector-info">
					<text class="collector-label">收藏者</text>
					<text class="collector-name">{{ detailInfo.nickname||'--' }}</text>
					<text class="collection-number">编号</text>
					<text class="collection-code">{{ detailInfo.code||'--' }}</text>
					<text class="collection-time-label">收藏时间</text>
					<text class="collection-time">{{ detailInfo.activeTime||'--' }}</text>
				</view>
			</view>
		</view>

		<!-- 认证信息卡片 -->
		<view class="cert-info-card">
			<view class="cert-header">— 认证信息 —</view>

			<view class="cert-row">
				<text class="cert-label">授权码</text>
				<text class="cert-value">{{ detailInfo.activeCode||"--" }}</text>
			</view>
		</view>

		<!-- 藏品详情卡片 -->
		<view class="product-detail-card">
			<view class="product-header">— 藏品详情 —</view>
			<view class="product-content">
				<view class="" v-html="detailInfo.detailUrl">
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "MemorialDetail",
		data() {
			return {
				swiperIndex: 0,
				detailInfo: {

				},
				topBanner: []
			};
		},
		onLoad(options) {
			// 获取传入的参数
			if (options.id) {
				this.loadDetailInfo(options.id);
			}
		},
		methods: {
			swiperChange(e) {
				this.swiperIndex = e.detail.current;
			},
			// 加载详情信息
			async loadDetailInfo(id) {
				try {
					this.Post({
						orderChildId: id
					}, `/framework/order/ipOrderDetail`, "DES").then((res) => {
						if (res.code == 200) {
							res.data.detailUrl = this.addImgStyleToHtml(res.data.detailUrl)
							this.detailInfo = res.data;
							this.topBanner = res.data.hdUrl.split(',')
							
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
							});
						}
					});
					// 模拟数据加载
					console.log("加载纪念册详情，ID:", id);
				} catch (error) {
					console.error("加载详情失败:", error);
					uni.showToast({
						title: "加载失败",
						icon: "none",
					});
				}
			},

			// 预览主图
			previewMainImage() {
				const imageUrl = this.showImg(this.detailInfo.image);
				uni.previewImage({
					urls: [imageUrl],
					current: imageUrl,
				});
			},

			// 图片路径处理
			showImg(img) {
				if (!img) return "";
				if (img.startsWith("http")) {
					return img;
				}
				const NEWAPIURL = "https://epic.js-dyyj.com";
				return `${NEWAPIURL}${img}`;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.memorial-detail {
		min-height: 100vh;
		background: #f8f9fa;
		padding-bottom: env(safe-area-inset-bottom);
	}

	// 主图区域
	.main-image-section {
		width: 100%;
		height: 600rpx;
		background: #f0f0f0;
		display: flex;
		align-items: center;
		justify-content: center;

		.main-image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	// 通用卡片样式
	.asset-info-card,
	.cert-info-card,
	.product-detail-card {
		margin: 20rpx;
		background: white;
		border-radius: 16rpx;
		padding: 32rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	}

	// 数字资产信息卡片
	.asset-info-card {
		.card-header {
			margin-bottom: 32rpx;

			.asset-title {
				font-size: 36rpx;
				font-weight: 600;
				color: #333;
				line-height: 1.4;
			}
		}

		.info-row {
			display: flex;
			margin-bottom: 20rpx;
			align-items: flex-start;

			.info-label {
				font-size: 28rpx;
				color: #666;
				margin-right: 16rpx;
				flex-shrink: 0;
			}

			.info-value {
				font-size: 28rpx;
				color: #333;
				flex: 1;
			}
		}

		.divider {
			height: 1rpx;
			background: #e0e0e0;
			margin: 24rpx 0;
		}

		// 收藏信息
		.collection-info {
			margin-top: 40rpx;
			padding: 32rpx;
			background: #f8f9fa;
			border-radius: 12rpx;
			border: 2rpx solid #e0e0e0;

			.collection-header {
				text-align: center;
				font-size: 28rpx;
				color: #666;
				margin-bottom: 24rpx;
				font-weight: 500;
			}

			.collector-info {
				display: grid;
				grid-template-columns: auto auto;
				gap: 16rpx 24rpx;
				text-align: center;

				.collector-label,
				.collection-number,
				.collection-time-label {
					font-size: 24rpx;
					color: #666;
				}

				.collector-name,
				.collection-code,
				.collection-time {
					font-size: 26rpx;
					color: #333;
					font-weight: 500;
				}

				.collection-code {
					font-family: "Courier New", monospace;
				}

				.collection-time {
					font-family: "Courier New", monospace;
				}
			}
		}
	}

	// 认证信息卡片
	.cert-info-card {
		.cert-header {
			text-align: center;
			font-size: 28rpx;
			color: #666;
			margin-bottom: 32rpx;
			font-weight: 500;
		}

		.cert-row {
			margin-bottom: 24rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #f0f0f0;

			&:last-child {
				margin-bottom: 0;
				padding-bottom: 0;
				border-bottom: none;
			}

			.cert-label {
				display: block;
				font-size: 26rpx;
				color: #666;
				margin-bottom: 8rpx;
			}

			.cert-value {
				display: block;
				font-size: 24rpx;
				color: #333;
				font-family: "Courier New", monospace;
				word-break: break-all;
				line-height: 1.5;
			}
		}
	}

	// 藏品详情卡片
	.product-detail-card {
		.product-header {
			text-align: center;
			font-size: 28rpx;
			color: #666;
			margin-bottom: 32rpx;
			font-weight: 500;
		}

		.product-content {
			.product-description {
				font-size: 28rpx;
				color: #333;
				line-height: 1.6;
			}
		}
	}

	.banner-content {
		width: 100%;
		height: 700rpx;
		position: relative;

		.top-banner {
			width: 100%;
			height: 100%;
		}

		.dot-container {
			position: absolute;
			bottom: 43rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			left: 0;

			.dot-line {
				width: 52rpx;
				height: 4rpx;
				margin: 0 8rpx;
				background: RGBA(189, 170, 173, 0.8);

				&.active {
					background: #94fafa;
				}
			}
		}

		.page-indicator {
			position: absolute;
			bottom: 20rpx;
			right: 20rpx;
			// background: rgba(0, 0, 0, 0.5);
			border-radius: 10rpx;
			padding: 10rpx 20rpx;

			.page-text {
				font-size: 24rpx;
				color: #fff;
				font-weight: 500;
			}
		}
	}
</style>