|
|
|
@ -2,37 +2,21 @@ |
|
|
|
<view class="detail-container"> |
|
|
|
<!-- 轮播图区域 --> |
|
|
|
<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 |
|
|
|
> |
|
|
|
<text class="page-text">{{ swiperIndex + 1 }}/{{ topBanner.length }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
@ -55,11 +39,9 @@ |
|
|
|
<text class="price">699.00</text> |
|
|
|
</view> |
|
|
|
<view class="collect-container"> |
|
|
|
<image |
|
|
|
class="heart-icon" |
|
|
|
<image class="heart-icon" |
|
|
|
src="https://epic.js-dyyj.com/uploads/20250728/2f3ae212c01fa3b67be81abc5723cf5c.png" |
|
|
|
@click.stop="handleLikeClick(item, index)" |
|
|
|
></image> |
|
|
|
@click.stop="handleLikeClick(item, index)"></image> |
|
|
|
<text class="collect-count">1700收藏</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -92,27 +74,17 @@ |
|
|
|
<!-- 权益详情 --> |
|
|
|
<view class="equity-details"> |
|
|
|
<!-- 显示前两个权益项 --> |
|
|
|
<view |
|
|
|
class="equity-detail-item" |
|
|
|
v-for="(item, index) in displayEquityList" |
|
|
|
:key="index" |
|
|
|
> |
|
|
|
<view class="equity-detail-item" v-for="(item, index) in displayEquityList" :key="index"> |
|
|
|
<view class="detail-content-wrapper"> |
|
|
|
<text class="detail-label">{{ item.label }}</text> |
|
|
|
<text class="detail-content">{{ item.content }}</text> |
|
|
|
</view> |
|
|
|
<!-- 在最后一个显示项的右侧添加展开收起图标 --> |
|
|
|
<view |
|
|
|
v-if="index === displayEquityList.length - 1" |
|
|
|
class="toggle-icon" |
|
|
|
@click="toggleEquityExpand" |
|
|
|
> |
|
|
|
<view v-if="index === displayEquityList.length - 1" class="toggle-icon" @click="toggleEquityExpand"> |
|
|
|
<text class="icon-text">{{ |
|
|
|
isEquityExpanded ? "收起" : "展开" |
|
|
|
}}</text> |
|
|
|
<text class="icon-arrow" :class="{ expanded: isEquityExpanded }" |
|
|
|
>▼</text |
|
|
|
> |
|
|
|
<text class="icon-arrow" :class="{ expanded: isEquityExpanded }">▼</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -120,12 +92,8 @@ |
|
|
|
|
|
|
|
<!-- Tab切换区域 --> |
|
|
|
<view class="tab-nav"> |
|
|
|
<view |
|
|
|
v-for="(tab, index) in tabList" |
|
|
|
:key="index" |
|
|
|
:class="['tab-item', { active: currentTab === index }]" |
|
|
|
@click="switchTab(index)" |
|
|
|
> |
|
|
|
<view v-for="(tab, index) in tabList" :key="index" :class="['tab-item', { active: currentTab === index }]" |
|
|
|
@click="switchTab(index)"> |
|
|
|
<text class="tab-text">{{ tab.name }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -137,75 +105,30 @@ |
|
|
|
<!-- 登记证书 --> |
|
|
|
<view v-if="currentTab === 0" class="tab-panel"> |
|
|
|
<view class="certificate-container"> |
|
|
|
<image |
|
|
|
class="certificate-image" |
|
|
|
<image class="certificate-image" |
|
|
|
src="https://epic.js-dyyj.com/uploads/20250731/d7d5be03617e3cce94dc34e8de426395.png" |
|
|
|
mode="widthFix" |
|
|
|
></image> |
|
|
|
mode="widthFix"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- IP资产详情 --> |
|
|
|
<view v-if="currentTab === 1" class="tab-panel"> |
|
|
|
<view class="info-content"> |
|
|
|
<view class="info-item"> |
|
|
|
<text class="info-label">IP资产名称：</text> |
|
|
|
<text class="info-value">食在苏州｜世界美食之都巡礼</text> |
|
|
|
</view> |
|
|
|
<view class="info-item"> |
|
|
|
<text class="info-label">创作者：</text> |
|
|
|
<text class="info-value">苏州xxx博物馆</text> |
|
|
|
</view> |
|
|
|
<view class="info-item"> |
|
|
|
<text class="info-label">发行数量：</text> |
|
|
|
<text class="info-value">1000份</text> |
|
|
|
</view> |
|
|
|
<view class="info-item"> |
|
|
|
<text class="info-label">发行时间：</text> |
|
|
|
<text class="info-value">2024年6月16日</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<image :src=" |
|
|
|
showImg('/uploads/20250731/0d8cb190c358c0cf52fab89bb98a0373.jpg') |
|
|
|
" style="width: 100%" mode="widthFix"></image> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 数据商品详情 --> |
|
|
|
<view v-if="currentTab === 2" class="tab-panel"> |
|
|
|
<image |
|
|
|
:src=" |
|
|
|
<image :src=" |
|
|
|
showImg('/uploads/20250731/ecf91ddfb9f89658a7d82e3ff846f71c.png') |
|
|
|
" |
|
|
|
style="width: 100%" |
|
|
|
mode="widthFix" |
|
|
|
></image> |
|
|
|
" style="width: 100%" mode="widthFix"></image> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 权益信息 --> |
|
|
|
<view v-if="currentTab === 3" class="tab-panel"> |
|
|
|
<view class="equity-info-content"> |
|
|
|
<view |
|
|
|
class="equity-info-item" |
|
|
|
v-for="(item, index) in equityList" |
|
|
|
:key="index" |
|
|
|
> |
|
|
|
<text class="equity-info-label">{{ item.label }}</text> |
|
|
|
<text class="equity-info-value">{{ item.content }}</text> |
|
|
|
</view> |
|
|
|
<view class="equity-description"> |
|
|
|
<text class="description-text"> |
|
|
|
本数字文创作品基于区块链技术发行，具有唯一性和不可篡改性。持有者享有以下权益： |
|
|
|
1. |
|
|
|
数字资产所有权：获得该数字文创作品的完整所有权，包括展示、收藏等权利； |
|
|
|
2. |
|
|
|
实物权益兑换：可凭此数字资产兑换相应的实物文创产品，包括限量版公仔、纪念品等； |
|
|
|
3. |
|
|
|
文化体验权益：享受苏州相关文化场所的优惠门票、专属活动参与资格等特殊权益； |
|
|
|
4. |
|
|
|
增值收益权：作为限量发行的数字资产，具有一定的收藏价值和增值潜力； |
|
|
|
5. |
|
|
|
社区会员权益：加入专属收藏者社区，享受优先购买新品、参与线下活动等会员特权。 |
|
|
|
注：以上权益的具体实施细则以官方最终解释为准，部分权益可能存在时效性限制。 |
|
|
|
</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<image :src=" |
|
|
|
showImg('/uploads/20250731/83af15ea93f0cd91eb780a7bb240257a.jpg') |
|
|
|
" style="width: 100%" mode="widthFix"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -231,26 +154,42 @@ export default { |
|
|
|
swiperIndex: 0, |
|
|
|
isEquityExpanded: false, // 权益详情展开状态 |
|
|
|
currentTab: 0, // 当前选中的tab索引 |
|
|
|
tabList: [ |
|
|
|
{ name: "登记证书" }, |
|
|
|
{ name: "IP资产详情" }, |
|
|
|
{ name: "资源商品详情" }, |
|
|
|
{ name: "权益信息详情" }, |
|
|
|
tabList: [{ |
|
|
|
name: "登记证书" |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "IP资产详情" |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "资源商品详情" |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "资源商品详情" |
|
|
|
}, |
|
|
|
], |
|
|
|
equityList: [ |
|
|
|
// 权益列表数据 |
|
|
|
{ label: "权益1：", content: "数字资产*1、数字资产*1" }, |
|
|
|
{ label: "权益2：", content: "IP文创公仔*1、IP文创公仔*1" }, |
|
|
|
{ label: "权益3：", content: "XX园林门票*1、XX园林门票*1" }, |
|
|
|
{ |
|
|
|
label: "权益1：", |
|
|
|
content: "数字资产*1、数字资产*1" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "权益2：", |
|
|
|
content: "IP文创公仔*1、IP文创公仔*1" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "权益3：", |
|
|
|
content: "XX园林门票*1、XX园林门票*1" |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
// 根据展开状态显示不同数量的权益项 |
|
|
|
displayEquityList() { |
|
|
|
return this.isEquityExpanded |
|
|
|
? this.equityList |
|
|
|
: this.equityList.slice(0, 2); |
|
|
|
return this.isEquityExpanded ? |
|
|
|
this.equityList : |
|
|
|
this.equityList.slice(0, 2); |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
@ -374,7 +313,7 @@ export default { |
|
|
|
|
|
|
|
.remaining { |
|
|
|
color: #808080; |
|
|
|
font-size: 17rpx; |
|
|
|
font-size: 22rpx; |
|
|
|
margin-left: auto; |
|
|
|
} |
|
|
|
} |
|
|
|
@ -542,12 +481,14 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// Tab导航 |
|
|
|
.tab-nav { |
|
|
|
margin: 0 40rpx; |
|
|
|
margin-top: 40rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
.tab-item { |
|
|
|
padding: 10rpx 20rpx; |
|
|
|
text-align: center; |
|
|
|
@ -567,6 +508,7 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// Tab切换区域 |
|
|
|
.tab-section { |
|
|
|
margin: 0 20rpx; |
|
|
|
@ -675,6 +617,7 @@ export default { |
|
|
|
z-index: 100; |
|
|
|
padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx); |
|
|
|
padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx); |
|
|
|
|
|
|
|
.purchase-button { |
|
|
|
width: 100%; |
|
|
|
height: 88rpx; |
|
|
|
|
1054425342@qq.com
3 months ago