|
|
|
@ -1,72 +1,105 @@ |
|
|
|
<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 |
|
|
|
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> |
|
|
|
<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 |
|
|
|
: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 class="asset-title"> |
|
|
|
{{ detailInfo.goodsName }} |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 数字资产信息卡片 --> |
|
|
|
<view class="asset-info-card"> |
|
|
|
<view class="card-header"> |
|
|
|
<text class="asset-title">{{ detailInfo.goodsName }}</text> |
|
|
|
<!-- 发行数量胶囊 --> |
|
|
|
<view class="issue-quantity-pill"> |
|
|
|
<text class="pill-text" |
|
|
|
>发行数量: {{ detailInfo.publishQuantity || 0 }}份</text |
|
|
|
> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="info-row"> |
|
|
|
<text class="info-label">发行数量：</text> |
|
|
|
<text class="info-value">{{ detailInfo.publishQuantity||0 }}份</text> |
|
|
|
<!-- 收藏信息区域 --> |
|
|
|
<view class="info-section"> |
|
|
|
<view |
|
|
|
class="info-row" |
|
|
|
style="flex-direction: row; justify-content: space-around" |
|
|
|
> |
|
|
|
<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"> |
|
|
|
<text class="info-label">收藏时间</text> |
|
|
|
<text class="info-value">{{ detailInfo.activeTime || "--" }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="divider"></view> |
|
|
|
|
|
|
|
<view class="info-row"> |
|
|
|
<text class="info-label">数字资产所有方：</text> |
|
|
|
<text class="info-value">{{ detailInfo.ownPart||'-' }}</text> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 分割线 --> |
|
|
|
<view class="section-divider"></view> |
|
|
|
|
|
|
|
<!-- 资产权利信息区域 --> |
|
|
|
<view class="info-section"> |
|
|
|
<view class="info-row"> |
|
|
|
<text class="info-label">数字资产权利方：</text> |
|
|
|
<text class="info-value">{{ detailInfo.powerPart||'-' }}</text> |
|
|
|
<view class="info-item"> |
|
|
|
<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.authorizeBrand||'-' }}</text> |
|
|
|
<view class="info-item"> |
|
|
|
<text class="info-label">数字资产权利方</text> |
|
|
|
<text class="info-value">{{ detailInfo.powerPart || "--" }}</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 class="info-item"> |
|
|
|
<text class="info-label">授权品牌</text> |
|
|
|
<text class="info-value">{{ |
|
|
|
detailInfo.authorizeBrand || "--" |
|
|
|
}}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 认证信息卡片 --> |
|
|
|
<view class="cert-info-card"> |
|
|
|
<view class="cert-header">— 认证信息 —</view> |
|
|
|
<!-- 分割线 --> |
|
|
|
<view class="section-divider"></view> |
|
|
|
|
|
|
|
<view class="cert-row"> |
|
|
|
<text class="cert-label">授权码</text> |
|
|
|
<text class="cert-value">{{ detailInfo.activeCode||"--" }}</text> |
|
|
|
<!-- 授权码和下载按钮区域 --> |
|
|
|
<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> |
|
|
|
|
|
|
|
@ -74,9 +107,7 @@ |
|
|
|
<view class="product-detail-card"> |
|
|
|
<view class="product-header">— 藏品详情 —</view> |
|
|
|
<view class="product-content"> |
|
|
|
<view class="" v-html="detailInfo.detailUrl"> |
|
|
|
|
|
|
|
</view> |
|
|
|
<view class="" v-html="detailInfo.detailUrl"> </view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -88,13 +119,16 @@ |
|
|
|
data() { |
|
|
|
return { |
|
|
|
swiperIndex: 0, |
|
|
|
detailInfo: { |
|
|
|
|
|
|
|
}, |
|
|
|
topBanner: [] |
|
|
|
detailInfo: {}, |
|
|
|
topBanner: [], |
|
|
|
userInfo: null, |
|
|
|
}; |
|
|
|
}, |
|
|
|
onLoad(options) { |
|
|
|
let userInfo = uni.getStorageSync("userInfo"); |
|
|
|
if (userInfo) { |
|
|
|
this.userInfo = JSON.parse(userInfo); |
|
|
|
} |
|
|
|
// 获取传入的参数 |
|
|
|
if (options.id) { |
|
|
|
this.loadDetailInfo(options.id); |
|
|
|
@ -107,14 +141,17 @@ |
|
|
|
// 加载详情信息 |
|
|
|
async loadDetailInfo(id) { |
|
|
|
try { |
|
|
|
this.Post({ |
|
|
|
orderChildId: id |
|
|
|
}, `/framework/order/ipOrderDetail`, "DES").then((res) => { |
|
|
|
this.Post( |
|
|
|
{ |
|
|
|
orderChildId: id, |
|
|
|
}, |
|
|
|
`/framework/order/ipOrderDetail`, |
|
|
|
"DES" |
|
|
|
).then((res) => { |
|
|
|
if (res.code == 200) { |
|
|
|
res.data.detailUrl = this.addImgStyleToHtml(res.data.detailUrl) |
|
|
|
res.data.detailUrl = this.addImgStyleToHtml(res.data.detailUrl); |
|
|
|
this.detailInfo = res.data; |
|
|
|
this.topBanner = res.data.hdUrl.split(',') |
|
|
|
|
|
|
|
this.topBanner = res.data.hdUrl.split(","); |
|
|
|
} else { |
|
|
|
uni.showToast({ |
|
|
|
title: res.msg, |
|
|
|
@ -141,15 +178,48 @@ |
|
|
|
current: imageUrl, |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
// 图片路径处理 |
|
|
|
showImg(img) { |
|
|
|
if (!img) return ""; |
|
|
|
if (img.startsWith("http")) { |
|
|
|
return img; |
|
|
|
// 处理下载按钮点击 |
|
|
|
handleDownload() { |
|
|
|
// 获取主图URL |
|
|
|
const imageUrl = this.topBanner[0]; |
|
|
|
console.log(imageUrl); |
|
|
|
// 下载图片到本地 |
|
|
|
uni.downloadFile({ |
|
|
|
url: imageUrl, |
|
|
|
success: (res) => { |
|
|
|
console.log(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", |
|
|
|
}); |
|
|
|
} |
|
|
|
const NEWAPIURL = "https://epic.js-dyyj.com"; |
|
|
|
return `${NEWAPIURL}${img}`; |
|
|
|
}, |
|
|
|
fail: (err) => { |
|
|
|
console.log(err); |
|
|
|
uni.showToast({ |
|
|
|
title: "下载失败", |
|
|
|
icon: "none", |
|
|
|
}); |
|
|
|
}, |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
@ -188,30 +258,31 @@ |
|
|
|
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-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: flex-start; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.info-label { |
|
|
|
font-size: 28rpx; |
|
|
|
color: #666; |
|
|
|
color: #989898; |
|
|
|
margin-right: 16rpx; |
|
|
|
flex-shrink: 0; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.info-value { |
|
|
|
@ -319,9 +390,9 @@ |
|
|
|
.product-header { |
|
|
|
text-align: center; |
|
|
|
font-size: 28rpx; |
|
|
|
color: #666; |
|
|
|
color: #000000; |
|
|
|
margin-bottom: 32rpx; |
|
|
|
font-weight: 500; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
|
|
|
|
.product-content { |
|
|
|
@ -335,12 +406,13 @@ |
|
|
|
|
|
|
|
.banner-content { |
|
|
|
width: 100%; |
|
|
|
height: 700rpx; |
|
|
|
height: 1624rpx; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.top-banner { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
border-radius: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.dot-container { |
|
|
|
@ -379,4 +451,119 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.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> |
1054425342@qq.com
2 months ago