1054425342@qq.com
3 months ago
11 changed files with 1050 additions and 105 deletions
@ -0,0 +1,706 @@ |
|||
<template> |
|||
<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-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="product-info"> |
|||
<!-- 标题和标签 --> |
|||
<view class="title-section"> |
|||
<view class="product-title">食在苏州｜世界美食之都巡礼</view> |
|||
<view class="tags-container"> |
|||
<view class="limit-tag">限量</view> |
|||
<view class="limit-count">1000份</view> |
|||
<view class="remaining">剩余 900份</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 价格和收藏 --> |
|||
<view class="price-section"> |
|||
<view class="price-container"> |
|||
<text class="currency">¥</text> |
|||
<text class="price">699.00</text> |
|||
</view> |
|||
<view class="collect-container"> |
|||
<image |
|||
class="heart-icon" |
|||
src="https://epic.js-dyyj.com/uploads/20250728/2f3ae212c01fa3b67be81abc5723cf5c.png" |
|||
@click.stop="handleLikeClick(item, index)" |
|||
></image> |
|||
<text class="collect-count">1700收藏</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 权益信息 --> |
|||
<view class="equity-section"> |
|||
<view class="equity-row"> |
|||
<view class="equity-item"> |
|||
<view class="equity-label">创作数字资产所属方者</view> |
|||
<view class="equity-value">苏州xxx博物馆</view> |
|||
</view> |
|||
<view class="equity-item"> |
|||
<view class="equity-label">数字资产权力方</view> |
|||
<view class="equity-value">江苏大运河见</view> |
|||
</view> |
|||
<view class="equity-item"> |
|||
<view class="equity-label">备案平台</view> |
|||
<view class="equity-value">江苏文交所</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 权益信息标题 --> |
|||
<view class="equity-title"> |
|||
<view class="title-line"></view> |
|||
<text class="title-text">权益信息</text> |
|||
<view class="title-line"></view> |
|||
</view> |
|||
|
|||
<!-- 权益详情 --> |
|||
<view class="equity-details"> |
|||
<!-- 显示前两个权益项 --> |
|||
<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" |
|||
> |
|||
<text class="icon-text">{{ |
|||
isEquityExpanded ? "收起" : "展开" |
|||
}}</text> |
|||
<text class="icon-arrow" :class="{ expanded: isEquityExpanded }" |
|||
>▼</text |
|||
> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- Tab切换区域 --> |
|||
<view class="tab-nav"> |
|||
<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> |
|||
<view class="tab-section"> |
|||
<!-- Tab导航 --> |
|||
|
|||
<!-- Tab内容 --> |
|||
<view class="tab-content"> |
|||
<!-- 登记证书 --> |
|||
<view v-if="currentTab === 0" class="tab-panel"> |
|||
<view class="certificate-container"> |
|||
<image |
|||
class="certificate-image" |
|||
src="https://epic.js-dyyj.com/uploads/20250731/d7d5be03617e3cce94dc34e8de426395.png" |
|||
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> |
|||
</view> |
|||
|
|||
<!-- 数据商品详情 --> |
|||
<view v-if="currentTab === 2" class="tab-panel"> |
|||
<image |
|||
:src=" |
|||
showImg('/uploads/20250731/ecf91ddfb9f89658a7d82e3ff846f71c.png') |
|||
" |
|||
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> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 立即购买按钮 --> |
|||
<view class="purchase-section"> |
|||
<view class="purchase-button" @click="handlePurchase"> |
|||
<text class="purchase-text">立即购买</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
topBanner: [ |
|||
"/uploads/20250731/5f6f00e6f037c5ca03423b3ed190c20d.png", |
|||
"/uploads/20250731/5f6f00e6f037c5ca03423b3ed190c20d.png", |
|||
], |
|||
list: [], |
|||
swiperIndex: 0, |
|||
isEquityExpanded: false, // 权益详情展开状态 |
|||
currentTab: 0, // 当前选中的tab索引 |
|||
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" }, |
|||
], |
|||
}; |
|||
}, |
|||
computed: { |
|||
// 根据展开状态显示不同数量的权益项 |
|||
displayEquityList() { |
|||
return this.isEquityExpanded |
|||
? this.equityList |
|||
: this.equityList.slice(0, 2); |
|||
}, |
|||
}, |
|||
methods: { |
|||
swiperChange(e) { |
|||
this.swiperIndex = e.detail.current; |
|||
}, |
|||
|
|||
// 切换权益详情展开收起状态 |
|||
toggleEquityExpand() { |
|||
this.isEquityExpanded = !this.isEquityExpanded; |
|||
}, |
|||
// 处理购买点击 |
|||
handlePurchase() { |
|||
console.log("立即购买"); |
|||
// 这里可以添加购买逻辑 |
|||
}, |
|||
// 处理收藏点击 |
|||
handleLikeClick(item, index) { |
|||
console.log("收藏点击", item, index); |
|||
// 这里可以添加收藏逻辑 |
|||
}, |
|||
// 切换tab |
|||
switchTab(index) { |
|||
this.currentTab = index; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.detail-container { |
|||
background: #f5f5f5; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
.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: #ff1e55; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.product-info { |
|||
background: white; |
|||
padding: 40rpx 30rpx; |
|||
margin: 20rpx; |
|||
border-radius: 20rpx 20rpx 0 0; |
|||
padding-bottom: 20rpx; |
|||
|
|||
.title-section { |
|||
margin-bottom: 30rpx; |
|||
|
|||
.product-title { |
|||
font-size: 31rpx; |
|||
font-weight: bold; |
|||
color: #000000; |
|||
line-height: 1.4; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.tags-container { |
|||
display: flex; |
|||
align-items: center; |
|||
flex-wrap: wrap; |
|||
|
|||
.limit-tag { |
|||
background: #ff1e55; |
|||
color: white; |
|||
padding: 8rpx 16rpx; |
|||
font-size: 20rpx; |
|||
border-radius: 6rpx 0 0 6rpx; |
|||
} |
|||
|
|||
.limit-count { |
|||
background: #f0f0f0; |
|||
color: #000000; |
|||
padding: 8rpx 16rpx; |
|||
font-size: 20rpx; |
|||
border-radius: 0rpx 6rpx 6rpx 0; |
|||
} |
|||
|
|||
.remaining { |
|||
color: #808080; |
|||
font-size: 17rpx; |
|||
margin-left: auto; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.price-section { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 40rpx; |
|||
|
|||
.price-container { |
|||
display: flex; |
|||
align-items: baseline; |
|||
|
|||
.currency { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.price { |
|||
font-size: 40rpx; |
|||
color: #333; |
|||
font-weight: bold; |
|||
font-family: "Futura"; |
|||
} |
|||
} |
|||
|
|||
.collect-container { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 10rpx; |
|||
|
|||
.heart-icon { |
|||
width: 35rpx; |
|||
height: 29rpx; |
|||
transition: all 0.3s ease; |
|||
flex-shrink: 0; |
|||
|
|||
&.liked { |
|||
opacity: 1; |
|||
filter: hue-rotate(320deg) saturate(2); |
|||
} |
|||
|
|||
&:active { |
|||
transform: scale(1.2); |
|||
} |
|||
} |
|||
|
|||
.collect-count { |
|||
color: #231815; |
|||
font-size: 28rpx; |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.equity-section { |
|||
margin-bottom: 40rpx; |
|||
border-top: 0.5rpx solid #e5e5e5; |
|||
border-bottom: 0.5rpx solid #e5e5e5; |
|||
padding: 40rpx 0; |
|||
|
|||
.equity-row { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
gap: 20rpx; |
|||
|
|||
.equity-item { |
|||
text-align: left; |
|||
|
|||
.equity-label { |
|||
font-size: 23rpx; |
|||
color: #231815; |
|||
font-weight: bold; |
|||
margin-bottom: 10rpx; |
|||
line-height: 1.3; |
|||
} |
|||
|
|||
.equity-value { |
|||
font-size: 20rpx; |
|||
color: #595757; |
|||
font-weight: 500; |
|||
line-height: 1.3; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.equity-title { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin: 40rpx 0 30rpx; |
|||
|
|||
.title-line { |
|||
width: 30rpx; |
|||
height: 2rpx; |
|||
background: #ff1e55; |
|||
} |
|||
|
|||
.title-text { |
|||
padding: 0 30rpx; |
|||
font-size: 25rpx; |
|||
color: #ff1e55; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
|
|||
.equity-details { |
|||
.equity-detail-item { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-bottom: 20rpx; |
|||
line-height: 1.5; |
|||
|
|||
.detail-content-wrapper { |
|||
display: flex; |
|||
flex: 1; |
|||
|
|||
.detail-label { |
|||
font-size: 23rpx; |
|||
color: #231815; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.detail-content { |
|||
font-size: 23rpx; |
|||
color: #231815; |
|||
flex: 1; |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
|
|||
.toggle-icon { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 8rpx; |
|||
cursor: pointer; |
|||
padding: 10rpx; |
|||
margin-left: 20rpx; |
|||
|
|||
.icon-text { |
|||
font-size: 22rpx; |
|||
color: #666; |
|||
} |
|||
|
|||
.icon-arrow { |
|||
font-size: 20rpx; |
|||
color: #666; |
|||
transition: transform 0.3s ease; |
|||
transform: rotate(0deg); |
|||
|
|||
&.expanded { |
|||
transform: rotate(180deg); |
|||
} |
|||
} |
|||
|
|||
&:active { |
|||
opacity: 0.7; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
// Tab导航 |
|||
.tab-nav { |
|||
margin: 0 40rpx; |
|||
margin-top: 40rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.tab-item { |
|||
padding: 10rpx 20rpx; |
|||
text-align: center; |
|||
color: #3e3a39; |
|||
cursor: pointer; |
|||
transition: all 0.3s ease; |
|||
|
|||
&.active { |
|||
background-color: #ff1e55; |
|||
color: #fff; |
|||
border-radius: 20rpx 20rpx 0 0; |
|||
} |
|||
|
|||
.tab-text { |
|||
font-size: 23rpx; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
} |
|||
// Tab切换区域 |
|||
.tab-section { |
|||
margin: 0 20rpx; |
|||
background-color: #fff; |
|||
border-radius: 20rpx; |
|||
overflow: hidden; |
|||
margin-bottom: calc(20px + constant(safe-area-inset-bottom)); |
|||
margin-bottom: calc(20px + env(safe-area-inset-bottom)); |
|||
|
|||
// Tab内容 |
|||
.tab-content { |
|||
padding: 30rpx; |
|||
|
|||
.tab-panel { |
|||
min-height: 400rpx; |
|||
|
|||
// 证书容器 |
|||
.certificate-container { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
.certificate-image { |
|||
width: 100%; |
|||
max-width: 600rpx; |
|||
height: auto; |
|||
border-radius: 12rpx; |
|||
} |
|||
} |
|||
|
|||
// 信息内容 |
|||
.info-content { |
|||
padding: 20rpx 0; |
|||
|
|||
.info-item { |
|||
display: flex; |
|||
margin-bottom: 20rpx; |
|||
align-items: flex-start; |
|||
|
|||
.info-label { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
min-width: 160rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.info-value { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
flex: 1; |
|||
line-height: 1.5; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 权益信息内容 |
|||
.equity-info-content { |
|||
padding: 20rpx 0; |
|||
|
|||
.equity-info-item { |
|||
display: flex; |
|||
margin-bottom: 20rpx; |
|||
align-items: flex-start; |
|||
|
|||
.equity-info-label { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
min-width: 160rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.equity-info-value { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
flex: 1; |
|||
line-height: 1.5; |
|||
} |
|||
} |
|||
|
|||
.equity-description { |
|||
margin-top: 30rpx; |
|||
padding: 20rpx; |
|||
background-color: #f8f9fa; |
|||
border-radius: 12rpx; |
|||
|
|||
.description-text { |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
line-height: 1.6; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 立即购买按钮 |
|||
.purchase-section { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
background: white; |
|||
padding: 20rpx 30rpx 40rpx; |
|||
border-top: 1rpx solid #e5e5e5; |
|||
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; |
|||
background: linear-gradient(135deg, #ff1e55 0%, #ff4081 100%); |
|||
border-radius: 44rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
box-shadow: 0 8rpx 20rpx rgba(255, 30, 85, 0.3); |
|||
transition: all 0.3s ease; |
|||
|
|||
&:active { |
|||
transform: scale(0.98); |
|||
box-shadow: 0 4rpx 10rpx rgba(255, 30, 85, 0.2); |
|||
} |
|||
|
|||
.purchase-text { |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
color: white; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 为底部按钮预留空间 |
|||
.detail-container { |
|||
padding-bottom: 140rpx; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue