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.
576 lines
12 KiB
576 lines
12 KiB
<template>
|
|
<view class="memorial-detail">
|
|
<!-- 轮播图区域 -->
|
|
<view class="content">
|
|
<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>
|
|
<view class="asset-title">
|
|
{{ detailInfo.goodsName }}
|
|
</view>
|
|
|
|
<!-- 发行数量胶囊 -->
|
|
<view class="issue-quantity-pill">
|
|
<text class="pill-text"
|
|
>发行数量: {{ detailInfo.publishQuantity || 0 }}份</text
|
|
>
|
|
</view>
|
|
|
|
<!-- 收藏信息区域 -->
|
|
<view class="info-section">
|
|
<view
|
|
class="info-row"
|
|
style="flex-direction: row; justify-content: space-around;flex-wrap: wrap;"
|
|
>
|
|
<view class="info-item">
|
|
<text class="info-label">收藏者</text>
|
|
<text class="info-value">{{
|
|
(userInfo && userInfo.nickname) || "--"
|
|
}}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="info-label">编号</text>
|
|
<text class="info-value">{{ detailInfo.code || "--" }}</text>
|
|
</view>
|
|
<view class="info-item" style="width: 100%;">
|
|
<text class="info-label">收藏时间</text>
|
|
<text class="info-value">{{ detailInfo.activeTime || "--" }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 分割线 -->
|
|
<view class="section-divider"></view>
|
|
|
|
<!-- 资产权利信息区域 -->
|
|
<view class="info-section">
|
|
<view class="info-row">
|
|
<view class="info-item">
|
|
<text class="info-label">数字资产所有方</text>
|
|
<text class="info-value">{{ detailInfo.ownPart || "--" }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="info-label">数字资产权利方</text>
|
|
<text class="info-value">{{ detailInfo.powerPart || "--" }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="info-label">授权品牌</text>
|
|
<text class="info-value">{{
|
|
detailInfo.authorizeBrand || "--"
|
|
}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 分割线 -->
|
|
<view class="section-divider"></view>
|
|
|
|
<!-- 授权码和下载按钮区域 -->
|
|
<view class="auth-section">
|
|
<view class="auth-code-item">
|
|
<text class="info-label">授权码</text>
|
|
<text class="auth-code-value">{{
|
|
detailInfo.activeCode || "--"
|
|
}}</text>
|
|
</view>
|
|
<view class="download-button" @click="handleDownload">
|
|
<text class="download-text">点击下载</text>
|
|
</view>
|
|
</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: [],
|
|
userInfo: null,
|
|
orderChildId:''
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
let userInfo = uni.getStorageSync("userInfo");
|
|
if (userInfo) {
|
|
this.userInfo = JSON.parse(userInfo);
|
|
}
|
|
// 获取传入的参数
|
|
if (options.id) {
|
|
this.orderChildId = 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,
|
|
});
|
|
},
|
|
// 处理下载按钮点击
|
|
handleDownload() {
|
|
// 获取主图URL
|
|
const imageUrl = this.topBanner[0];
|
|
// 下载图片到本地
|
|
this.Post(
|
|
{
|
|
orderChildId: this.orderChildId,
|
|
},
|
|
`/framework/order/download`,
|
|
"DES"
|
|
).then((res) => {
|
|
});
|
|
uni.downloadFile({
|
|
url: imageUrl,
|
|
success: (res) => {
|
|
if (res.statusCode === 200) {
|
|
// 保存到相册
|
|
uni.saveImageToPhotosAlbum({
|
|
filePath: res.tempFilePath,
|
|
success: () => {
|
|
uni.showToast({
|
|
title: "图片已保存到相册",
|
|
icon: "success",
|
|
});
|
|
},
|
|
fail: (err) => {
|
|
uni.showToast({
|
|
title: "保存失败，请检查权限",
|
|
icon: "none",
|
|
});
|
|
},
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
title: "下载失败",
|
|
icon: "none",
|
|
});
|
|
}
|
|
},
|
|
fail: (err) => {
|
|
uni.showToast({
|
|
title: "下载失败",
|
|
icon: "none",
|
|
});
|
|
},
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</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-title {
|
|
font-size: 44rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
line-height: 1.4;
|
|
text-align: center;
|
|
margin-top: 45rpx;
|
|
}
|
|
// 数字资产信息卡片
|
|
.asset-info-card {
|
|
.card-header {
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
margin-bottom: 20rpx;
|
|
align-items: center;
|
|
|
|
.info-label {
|
|
font-size: 28rpx;
|
|
color: #989898;
|
|
margin-right: 16rpx;
|
|
flex-shrink: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.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: #000000;
|
|
margin-bottom: 32rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.product-content {
|
|
.product-description {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
line-height: 1.6;
|
|
}
|
|
}
|
|
}
|
|
|
|
.banner-content {
|
|
width: 100%;
|
|
height: 1624rpx;
|
|
position: relative;
|
|
|
|
.top-banner {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
.content {
|
|
margin: 30rpx;
|
|
background: white;
|
|
border-radius: 16rpx;
|
|
padding: 20rpx;
|
|
box-shadow: 0 4rpx 20rpx #00ff02;
|
|
}
|
|
|
|
// 发行数量胶囊
|
|
.issue-quantity-pill {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 30rpx 0;
|
|
|
|
.pill-text {
|
|
background: linear-gradient(135deg, #00fffe, #00ff08);
|
|
border-radius: 50rpx;
|
|
padding: 10rpx 20rpx;
|
|
font-size: 24rpx;
|
|
color: #333333;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
// 信息区域
|
|
.info-section {
|
|
margin: 20rpx 0;
|
|
|
|
.info-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8rpx;
|
|
padding: 16rpx;
|
|
align-items: center;
|
|
.info-label {
|
|
font-size: 24rpx;
|
|
color: #989898;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 分割线
|
|
.section-divider {
|
|
height: 2rpx;
|
|
background: #e5e5e5;
|
|
margin: 30rpx 0;
|
|
}
|
|
|
|
// 授权码和下载按钮区域
|
|
.auth-section {
|
|
margin: 20rpx 0;
|
|
|
|
.auth-code-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8rpx;
|
|
padding: 16rpx;
|
|
margin-bottom: 30rpx;
|
|
align-items: center;
|
|
|
|
.info-label {
|
|
font-size: 24rpx;
|
|
color: #989898;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.auth-code-value {
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
font-family: "Courier New", monospace;
|
|
font-weight: bold;
|
|
word-break: break-all;
|
|
padding: 12rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
}
|
|
|
|
.download-button {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: linear-gradient(135deg, #00fffe, #00ff08);
|
|
width: 334rpx;
|
|
border-radius: 20rpx;
|
|
padding: 15rpx 40rpx;
|
|
transition: all 0.3s ease;
|
|
margin: 0 auto;
|
|
|
|
&:active {
|
|
transform: scale(0.95);
|
|
box-shadow: 0 2rpx 10rpx rgba(119, 243, 249, 0.5);
|
|
}
|
|
|
|
.download-text {
|
|
margin: 0 auto;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|