You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
339 lines
7.9 KiB
339 lines
7.9 KiB
<template>
|
|
<view class="memorial-detail">
|
|
<!-- 主图区域 -->
|
|
<view class="main-image-section">
|
|
<image
|
|
:src="showImg(detailInfo.image)"
|
|
mode="aspectFill"
|
|
class="main-image"
|
|
@click="previewMainImage"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 数字资产信息卡片 -->
|
|
<view class="asset-info-card">
|
|
<view class="card-header">
|
|
<text class="asset-title">{{ detailInfo.title }}</text>
|
|
</view>
|
|
|
|
<view class="info-row">
|
|
<text class="info-label">发行数量：</text>
|
|
<text class="info-value">{{ detailInfo.totalSupply }}份</text>
|
|
</view>
|
|
|
|
<view class="divider"></view>
|
|
|
|
<view class="info-row">
|
|
<text class="info-label">数字资产所有方：</text>
|
|
<text class="info-value">{{ detailInfo.owner }}</text>
|
|
</view>
|
|
|
|
<view class="info-row">
|
|
<text class="info-label">数字资产权利方：</text>
|
|
<text class="info-value">{{ detailInfo.rightHolder }}</text>
|
|
</view>
|
|
|
|
<view class="info-row">
|
|
<text class="info-label">数字资产所有方：</text>
|
|
<text class="info-value">{{ detailInfo.assetOwner }}</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.collector }}</text>
|
|
<text class="collection-number">编号</text>
|
|
<text class="collection-code">{{ detailInfo.collectionCode }}</text>
|
|
<text class="collection-time-label">收藏时间</text>
|
|
<text class="collection-time">{{ detailInfo.collectionTime }}</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.certificateCode }}</text>
|
|
</view>
|
|
|
|
<view class="cert-row">
|
|
<text class="cert-label">合约地址</text>
|
|
<text class="cert-value">{{ detailInfo.contractAddress }}</text>
|
|
</view>
|
|
|
|
<view class="cert-row">
|
|
<text class="cert-label">交易HASH</text>
|
|
<text class="cert-value">{{ detailInfo.transactionHash }}</text>
|
|
</view>
|
|
|
|
<view class="cert-row">
|
|
<text class="cert-label">钱包地址</text>
|
|
<text class="cert-value">{{ detailInfo.walletAddress }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 藏品详情卡片 -->
|
|
<view class="product-detail-card">
|
|
<view class="product-header">— 藏品详情 —</view>
|
|
<view class="product-content">
|
|
<!-- 这里可以放置藏品的详细描述内容 -->
|
|
<text class="product-description">{{ detailInfo.description }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "MemorialDetail",
|
|
data() {
|
|
return {
|
|
detailInfo: {
|
|
id: "",
|
|
title: "这里是数字资产的名称",
|
|
totalSupply: "2000",
|
|
owner: "XXX博物馆",
|
|
rightHolder: "江苏大运河公司",
|
|
assetOwner: "江苏大运河公司",
|
|
collector: "XXX用户",
|
|
collectionCode: "#001-0050/1000",
|
|
collectionTime: "2025-085-04 15:20:20",
|
|
certificateCode: "SUA-DA-01-20250729A123456-001-0050/1000-v1",
|
|
contractAddress: "0xd4efaba236f7c110fe85fcbcde5489a7a3c71ec3",
|
|
transactionHash: "0xd412da236f7c110fe81ewl5fcbcde5489a7a3c7",
|
|
walletAddress: "0x8df5d733a0dd127022f7740be4f9c10ec8a23b",
|
|
image: "/uploads/20250729/42fe2364167c2342076c4e094df3d288.png",
|
|
description: "这里是藏品的详细描述信息...",
|
|
},
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
// 获取传入的参数
|
|
if (options.id) {
|
|
this.loadDetailInfo(options.id);
|
|
}
|
|
},
|
|
methods: {
|
|
// 加载详情信息
|
|
async loadDetailInfo(id) {
|
|
try {
|
|
// 这里应该调用实际的API获取详情数据
|
|
// const response = await this.getMemorialDetail(id);
|
|
// this.detailInfo = response.data;
|
|
|
|
// 模拟数据加载
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|