|
|
|
@ -1,53 +1,61 @@ |
|
|
|
<template> |
|
|
|
<view class="memorial-detail"> |
|
|
|
<!-- 主图区域 --> |
|
|
|
<view class="main-image-section"> |
|
|
|
<image |
|
|
|
:src="showImg(detailInfo.image)" |
|
|
|
mode="aspectFill" |
|
|
|
class="main-image" |
|
|
|
@click="previewMainImage" |
|
|
|
/> |
|
|
|
<!-- 轮播图区域 --> |
|
|
|
<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.title }}</text> |
|
|
|
<text class="asset-title">{{ detailInfo.goodsName }}</text> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="info-row"> |
|
|
|
<text class="info-label">发行数量：</text> |
|
|
|
<text class="info-value">{{ detailInfo.totalSupply }}份</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.owner }}</text> |
|
|
|
<text class="info-value">{{ detailInfo.ownPart||'-' }}</text> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="info-row"> |
|
|
|
<text class="info-label">数字资产权利方：</text> |
|
|
|
<text class="info-value">{{ detailInfo.rightHolder }}</text> |
|
|
|
<text class="info-value">{{ detailInfo.powerPart||'-' }}</text> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="info-row"> |
|
|
|
<text class="info-label">数字资产所有方：</text> |
|
|
|
<text class="info-value">{{ detailInfo.assetOwner }}</text> |
|
|
|
<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.collector }}</text> |
|
|
|
<text class="collector-name">{{ detailInfo.nickname||'--' }}</text> |
|
|
|
<text class="collection-number">编号</text> |
|
|
|
<text class="collection-code">{{ detailInfo.collectionCode }}</text> |
|
|
|
<text class="collection-code">{{ detailInfo.code||'--' }}</text> |
|
|
|
<text class="collection-time-label">收藏时间</text> |
|
|
|
<text class="collection-time">{{ detailInfo.collectionTime }}</text> |
|
|
|
<text class="collection-time">{{ detailInfo.activeTime||'--' }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -57,23 +65,8 @@ |
|
|
|
<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> |
|
|
|
<text class="cert-label">授权码</text> |
|
|
|
<text class="cert-value">{{ detailInfo.activeCode||"--" }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
@ -81,35 +74,24 @@ |
|
|
|
<view class="product-detail-card"> |
|
|
|
<view class="product-header">— 藏品详情 —</view> |
|
|
|
<view class="product-content"> |
|
|
|
<!-- 这里可以放置藏品的详细描述内容 --> |
|
|
|
<text class="product-description">{{ detailInfo.description }}</text> |
|
|
|
<view class="" v-html="detailInfo.detailUrl"> |
|
|
|
|
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
export default { |
|
|
|
export default { |
|
|
|
name: "MemorialDetail", |
|
|
|
data() { |
|
|
|
return { |
|
|
|
swiperIndex: 0, |
|
|
|
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: "这里是藏品的详细描述信息...", |
|
|
|
|
|
|
|
}, |
|
|
|
topBanner: [] |
|
|
|
}; |
|
|
|
}, |
|
|
|
onLoad(options) { |
|
|
|
@ -119,13 +101,27 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
swiperChange(e) { |
|
|
|
this.swiperIndex = e.detail.current; |
|
|
|
}, |
|
|
|
// 加载详情信息 |
|
|
|
async loadDetailInfo(id) { |
|
|
|
try { |
|
|
|
// 这里应该调用实际的API获取详情数据 |
|
|
|
// const response = await this.getMemorialDetail(id); |
|
|
|
// this.detailInfo = response.data; |
|
|
|
|
|
|
|
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) { |
|
|
|
@ -156,18 +152,18 @@ export default { |
|
|
|
return `${NEWAPIURL}${img}`; |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.memorial-detail { |
|
|
|
.memorial-detail { |
|
|
|
min-height: 100vh; |
|
|
|
background: #f8f9fa; |
|
|
|
padding-bottom: env(safe-area-inset-bottom); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 主图区域 |
|
|
|
.main-image-section { |
|
|
|
// 主图区域 |
|
|
|
.main-image-section { |
|
|
|
width: 100%; |
|
|
|
height: 600rpx; |
|
|
|
background: #f0f0f0; |
|
|
|
@ -180,21 +176,21 @@ export default { |
|
|
|
height: 100%; |
|
|
|
object-fit: cover; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 通用卡片样式 |
|
|
|
.asset-info-card, |
|
|
|
.cert-info-card, |
|
|
|
.product-detail-card { |
|
|
|
// 通用卡片样式 |
|
|
|
.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 { |
|
|
|
// 数字资产信息卡片 |
|
|
|
.asset-info-card { |
|
|
|
.card-header { |
|
|
|
margin-bottom: 32rpx; |
|
|
|
|
|
|
|
@ -277,10 +273,10 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 认证信息卡片 |
|
|
|
.cert-info-card { |
|
|
|
// 认证信息卡片 |
|
|
|
.cert-info-card { |
|
|
|
.cert-header { |
|
|
|
text-align: center; |
|
|
|
font-size: 28rpx; |
|
|
|
@ -316,10 +312,10 @@ export default { |
|
|
|
line-height: 1.5; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 藏品详情卡片 |
|
|
|
.product-detail-card { |
|
|
|
// 藏品详情卡片 |
|
|
|
.product-detail-card { |
|
|
|
.product-header { |
|
|
|
text-align: center; |
|
|
|
font-size: 28rpx; |
|
|
|
@ -335,5 +331,52 @@ export default { |
|
|
|
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> |
1054425342@qq.com
2 months ago