|
|
@@ -57,11 +57,11 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="price-line" v-if="info.salable">
|
|
|
- <div class="price"><i class="font_family icon-icon_jiage"></i>{{ info.price }}</div>
|
|
|
+ <!-- <div class="price"><i class="font_family icon-icon_jiage"></i>{{ info.price }}</div>
|
|
|
<div class="price-sub" v-if="info.originalPrice">¥{{ info.originalPrice || 0 }}</div>
|
|
|
<div class="sub" v-if="info.royalties">
|
|
|
含 <span>{{ info.royalties }}%</span> 版税
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<div class="flex1"></div>
|
|
|
<div class="text" v-if="info.salable && info.total > 0">
|
|
|
<span>已售 {{ info.sale }}</span>
|
|
|
@@ -78,108 +78,167 @@
|
|
|
size="mini"
|
|
|
>选择其他编号</van-button
|
|
|
> -->
|
|
|
- <div class="flex1"></div>
|
|
|
<!-- <like-button :isLike="info.liked" @click="likeProduct">
|
|
|
{{ info.likes }}
|
|
|
</like-button> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <driver />
|
|
|
- <van-cell
|
|
|
- value="进入主页"
|
|
|
- is-link
|
|
|
- class="creator"
|
|
|
- :to="{
|
|
|
- path: '/creatorDetail',
|
|
|
- query: {
|
|
|
- id: info.minterId
|
|
|
- }
|
|
|
- }"
|
|
|
- >
|
|
|
- <template #icon>
|
|
|
- <van-image width="40" height="40" :src="info.minterAvatar" fit="cover" radius="100" />
|
|
|
- </template>
|
|
|
- <template #title>
|
|
|
- <div class="text1">{{ info.minter }}</div>
|
|
|
- <div class="text2">铸造者</div>
|
|
|
- </template>
|
|
|
- </van-cell>
|
|
|
-
|
|
|
- <driver />
|
|
|
- <div class="top">
|
|
|
- <div class="top1">
|
|
|
- <div class="text1">类型</div>
|
|
|
- <div v-if="info.category" class="text2">{{ info.category }}</div>
|
|
|
- <div v-else class="text5">铸造者未设置</div>
|
|
|
- </div>
|
|
|
- <div class="top1">
|
|
|
- <div class="text1">悄悄话</div>
|
|
|
- <div class="text2 text3" v-if="init2">
|
|
|
- <img class="img" :src="init2.icon[0]" alt="" />
|
|
|
- <div class="text4" :class="{ prim: init2.opened }">
|
|
|
- {{ init2.opened ? '已打开' : '未打开' }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="text5" v-else>铸造者未设置</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="titleIcon">持有特权<span>（灰色表示已使用）</span></div>
|
|
|
- <div class="prive">
|
|
|
- <div v-if="init">
|
|
|
- <div v-for="(item, index) in init" :key="index">
|
|
|
- <div class="prive1">
|
|
|
- <img class="img" :src="item.icon[0]" alt="" />
|
|
|
- <div class="prive2">{{ item.name }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div v-if="!init" class="conName">铸造者未设置</div>
|
|
|
- <div class="conName" v-else>铸造者未设置</div>
|
|
|
<!-- </template> -->
|
|
|
<div class="goods">
|
|
|
- <div class="goods-info">
|
|
|
- <div class="page-title">商品特性</div>
|
|
|
- <div class="specific-list" v-if="properties.length > 0">
|
|
|
- <div class="specific-item" v-for="(item, index) in properties" :key="index">
|
|
|
- <div class="text1">{{ item.name }}</div>
|
|
|
- <div class="text2">{{ item.value }}</div>
|
|
|
+ <van-collapse v-model="activeNames">
|
|
|
+ <van-collapse-item name="01" class="goods-info">
|
|
|
+ <template #title>
|
|
|
+ <div class="page-title">用户信息</div>
|
|
|
+ </template>
|
|
|
+ <div class="user">
|
|
|
+ <van-cell
|
|
|
+ class="creator"
|
|
|
+ :to="{
|
|
|
+ path: '/creatorDetail',
|
|
|
+ query: {
|
|
|
+ id: info.minterId
|
|
|
+ }
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <template #icon>
|
|
|
+ <van-image width="32" height="32" :src="info.minterAvatar" fit="cover" radius="100" />
|
|
|
+ </template>
|
|
|
+ <template #title>
|
|
|
+ <div class="text1">{{ info.minter }}</div>
|
|
|
+ <div class="text2">铸造者</div>
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ <van-cell
|
|
|
+ class="creator"
|
|
|
+ :to="{
|
|
|
+ path: '/creatorDetail',
|
|
|
+ query: {
|
|
|
+ id: info.ownerId
|
|
|
+ }
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <template #icon>
|
|
|
+ <van-image
|
|
|
+ width="32"
|
|
|
+ height="32"
|
|
|
+ class="user-img"
|
|
|
+ :src="info.ownerAvatar || require('../../assets/svgs/img_default_photo.svg')"
|
|
|
+ fit="cover"
|
|
|
+ radius="100"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template #title>
|
|
|
+ <div class="text1 van-ellipsis">{{ info.owner }}</div>
|
|
|
+ <div class="text2">持有者</div>
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div v-else class="textName">铸造者未设置</div>
|
|
|
- </div>
|
|
|
- <div class="goods-info">
|
|
|
- <div class="page-title">链上信息</div>
|
|
|
- <div class="page-text" v-if="info.txHash || info.blockNumber || info.tokenId">
|
|
|
- Hash地址：{{ info.txHash }}<br />
|
|
|
- 区块高度： {{ info.blockNumber }}<br />
|
|
|
- 令牌ID： {{ info.tokenId }}
|
|
|
- </div>
|
|
|
- <div v-else class="textName">铸造者未设置</div>
|
|
|
- </div>
|
|
|
- <div class="goods-info">
|
|
|
- <div class="page-title">盲盒详情</div>
|
|
|
- <swiper v-if="boxs.length > 0" :slidesPerView="'auto'" :spaceBetween="20" class="detail-swiper">
|
|
|
- <swiper-slide v-for="(item, index) in boxs" :key="index">
|
|
|
- <van-image
|
|
|
- width="100%"
|
|
|
- height="170"
|
|
|
- :src="getImg(item, '', 1000)"
|
|
|
- fit="cover"
|
|
|
- radius="12"
|
|
|
- @click="preview(index, boxs)"
|
|
|
- />
|
|
|
- </swiper-slide>
|
|
|
- </swiper>
|
|
|
- <div v-else class="textName">铸造者未设置</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="goods-info">
|
|
|
- <div class="page-title">作品描述</div>
|
|
|
- <div v-if="info.detail" class="page-text page-detail" v-html="info.detail"></div>
|
|
|
- <div v-else class="textName">铸造者未设置</div>
|
|
|
- </div>
|
|
|
+ </van-collapse-item>
|
|
|
+ <van-collapse-item name="002" class="goods-info top1">
|
|
|
+ <template #title>
|
|
|
+ <div class="page-title">类型</div>
|
|
|
+ </template>
|
|
|
+ <div v-if="info.category" style="margin-top: 12px; font-size: 12px" class="text2">
|
|
|
+ {{ info.category }}
|
|
|
+ </div>
|
|
|
+ <div v-else class="tips">铸造者未设置</div>
|
|
|
+ </van-collapse-item>
|
|
|
+ <van-collapse-item name="00" class="goods-info init">
|
|
|
+ <template #title>
|
|
|
+ <div class="page-title">悄悄话</div>
|
|
|
+ </template>
|
|
|
+ <div class="qiaohua" v-if="init2">
|
|
|
+ <img class="img" :src="init2.icon[0]" alt="" />
|
|
|
+ <div class="text4" :class="{ prim: init2.opened }">
|
|
|
+ {{ init2.opened ? '已打开' : '未打开' }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tips" v-else>铸造者未设置</div>
|
|
|
+ </van-collapse-item>
|
|
|
+ <van-collapse-item name="0" class="goods-info">
|
|
|
+ <template #title>
|
|
|
+ <div class="titleIcon">持有特权<span>（灰色表示已使用）</span></div>
|
|
|
+ </template>
|
|
|
+ <div class="prive" v-if="init.length > 0">
|
|
|
+ <div v-for="(item, index) in init" :key="index">
|
|
|
+ <div class="prive1">
|
|
|
+ <img class="img" :src="item.icon[0]" alt="" />
|
|
|
+ <div class="prive2">{{ item.name }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="init.length === 0" class="tips">铸造者未设置</div>
|
|
|
+ </van-collapse-item>
|
|
|
+ <van-collapse-item name="1" class="goods-info">
|
|
|
+ <template #title>
|
|
|
+ <div class="page-title">商品特性</div>
|
|
|
+ </template>
|
|
|
+ <div class="specific-list" v-if="properties.length > 0">
|
|
|
+ <div class="specific-item" v-for="(item, index) in properties" :key="index">
|
|
|
+ <div class="text1">{{ item.name }}</div>
|
|
|
+ <div class="text2">{{ item.value }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else class="textName">铸造者未设置</div>
|
|
|
+ </van-collapse-item>
|
|
|
+ <van-collapse-item name="2" class="goods-info">
|
|
|
+ <template #title>
|
|
|
+ <div class="page-title">链上信息</div>
|
|
|
+ </template>
|
|
|
+ <div class="page-text" v-if="info.txHash || info.blockNumber || info.tokenId">
|
|
|
+ Hash地址：{{ info.txHash }}<br />
|
|
|
+ 区块高度： {{ info.blockNumber }}<br />
|
|
|
+ 令牌ID： {{ info.tokenId }}
|
|
|
+ </div>
|
|
|
+ <div v-else class="textName">铸造者未设置</div>
|
|
|
+ </van-collapse-item>
|
|
|
+ <van-collapse-item name="3" class="goods-info">
|
|
|
+ <template #title>
|
|
|
+ <div class="page-title">盲盒详情</div>
|
|
|
+ </template>
|
|
|
+ <swiper v-if="boxs.length > 0" :slidesPerView="'auto'" :spaceBetween="20" class="detail-swiper">
|
|
|
+ <swiper-slide v-for="(item, index) in boxs" :key="index">
|
|
|
+ <van-image
|
|
|
+ width="100%"
|
|
|
+ height="170"
|
|
|
+ :src="getImg(item, '', 1000)"
|
|
|
+ fit="cover"
|
|
|
+ radius="12"
|
|
|
+ @click="preview(index, boxs)"
|
|
|
+ />
|
|
|
+ </swiper-slide>
|
|
|
+ </swiper>
|
|
|
+ <div v-else class="textName">铸造者未设置</div>
|
|
|
+ </van-collapse-item>
|
|
|
+ <van-collapse-item name="4" class="goods-info">
|
|
|
+ <template #title>
|
|
|
+ <div class="page-title">作品描述</div>
|
|
|
+ </template>
|
|
|
+ <div v-if="info.detail" class="page-text page-detail" v-html="info.detail"></div>
|
|
|
+ <div v-else class="textName">铸造者未设置</div>
|
|
|
+ </van-collapse-item>
|
|
|
+ <van-collapse-item name="5" class="goods-info">
|
|
|
+ <template #title>
|
|
|
+ <div class="page-title">交易记录</div>
|
|
|
+ </template>
|
|
|
+ <div v-if="list.length > 0">
|
|
|
+ <div class="content" v-for="item in list" :key="item.id">
|
|
|
+ <!-- <img class="img" :src="list.avatar" alt="" /> -->
|
|
|
+ <div class="init">
|
|
|
+ <div style="width: 100%">
|
|
|
+ <div class="text1">{{ item.fromUser || '保密' }}</div>
|
|
|
+ <div class="text2">
|
|
|
+ <div class="text3">{{ item.operation }}{{ item.price }}</div>
|
|
|
+ <div class="text4">{{ item.createdAt }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else style="display: flex; justify-content: center; margin-top: 10px">暂无购买记录</div>
|
|
|
+ </van-collapse-item>
|
|
|
+ </van-collapse>
|
|
|
</div>
|
|
|
<div class="btn van-safe-area-bottom" v-if="info.isAppointment">
|
|
|
<div class="btns">
|
|
|
@@ -201,27 +260,7 @@
|
|
|
|
|
|
<!-- <driver /> -->
|
|
|
|
|
|
- <van-collapse v-model="activeName" accordion>
|
|
|
- <van-collapse-item class="activeName" title="交易记录" name="1">
|
|
|
- <div v-if="list.length > 0">
|
|
|
- <div class="content" v-for="item in list" :key="item.id">
|
|
|
- <!-- <img class="img" :src="list.avatar" alt="" /> -->
|
|
|
- <div class="init">
|
|
|
- <div style="width: 100%">
|
|
|
- <div class="text1">{{ item.fromUser || '保密' }}</div>
|
|
|
- <div class="text2">
|
|
|
- <div class="text3">{{ item.operation }}{{ item.price }}</div>
|
|
|
- <div class="text4">{{ item.createdAt }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div v-else style="display: flex; justify-content: center; margin-top: 10px">暂无购买记录</div>
|
|
|
- </van-collapse-item>
|
|
|
- </van-collapse>
|
|
|
-
|
|
|
- <driver />
|
|
|
+ <!-- <driver /> -->
|
|
|
|
|
|
<post ref="post" :info="info" noButton />
|
|
|
</div>
|
|
|
@@ -257,7 +296,8 @@ export default {
|
|
|
blindBoxItems: [],
|
|
|
init: [],
|
|
|
init2: null,
|
|
|
- list: []
|
|
|
+ list: [],
|
|
|
+ activeNames: []
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -404,13 +444,12 @@ export default {
|
|
|
.prive {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- width: 100%;
|
|
|
flex-wrap: wrap;
|
|
|
.prive1 {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- margin: 16px 15px 0;
|
|
|
+ margin: 16px 16px 0 0;
|
|
|
width: 94px;
|
|
|
height: 32px;
|
|
|
color: #000;
|
|
|
@@ -427,7 +466,9 @@ export default {
|
|
|
margin-right: 4px;
|
|
|
}
|
|
|
.prive2 {
|
|
|
+ font-size: @font1;
|
|
|
text-align: center;
|
|
|
+ margin-left: 10px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -475,6 +516,7 @@ export default {
|
|
|
.price-line {
|
|
|
display: flex;
|
|
|
align-items: flex-end;
|
|
|
+ margin-top: 12px;
|
|
|
.sub {
|
|
|
flex-grow: 1;
|
|
|
margin-left: 5px;
|
|
|
@@ -513,7 +555,10 @@ export default {
|
|
|
|
|
|
.info-bottom {
|
|
|
display: flex;
|
|
|
- position: relative;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
margin-top: 4px;
|
|
|
height: 24px;
|
|
|
.text1 {
|
|
|
@@ -557,13 +602,13 @@ export default {
|
|
|
align-items: center;
|
|
|
padding: 24px 16px 24px;
|
|
|
.van-cell__title {
|
|
|
- margin-left: 12px;
|
|
|
+ margin-left: 6px !important;
|
|
|
.text1 {
|
|
|
- font-size: @font2;
|
|
|
- line-height: 24px;
|
|
|
+ font-size: @font1;
|
|
|
+ line-height: 20px;
|
|
|
}
|
|
|
.text2 {
|
|
|
- font-size: @font2;
|
|
|
+ font-size: @font1;
|
|
|
color: @text3;
|
|
|
line-height: 22px;
|
|
|
}
|
|
|
@@ -578,14 +623,14 @@ export default {
|
|
|
font-weight: 400;
|
|
|
color: #939599;
|
|
|
line-height: 24px;
|
|
|
- padding: 10px 0 0 16px;
|
|
|
+ // padding: 10px 0 0 16px;
|
|
|
}
|
|
|
.titleIcon {
|
|
|
font-size: @font2;
|
|
|
font-weight: bold;
|
|
|
color: #ffffff;
|
|
|
line-height: 24px;
|
|
|
- padding: 30px 0 0 16px;
|
|
|
+ // padding: 30px 0 0 16px;
|
|
|
}
|
|
|
span {
|
|
|
font-size: @font2;
|
|
|
@@ -638,16 +683,14 @@ span {
|
|
|
color: @text3;
|
|
|
}
|
|
|
}
|
|
|
- .text5 {
|
|
|
- font-size: @font2;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #939599;
|
|
|
- line-height: 24px;
|
|
|
- padding-left: 10px;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
+.tips {
|
|
|
+ font-size: @font1;
|
|
|
+ color: @text3;
|
|
|
+ line-height: 24px;
|
|
|
+ padding-top: 12px;
|
|
|
+}
|
|
|
.buy {
|
|
|
width: 100%;
|
|
|
display: block;
|
|
|
@@ -694,7 +737,7 @@ span {
|
|
|
}
|
|
|
}
|
|
|
.goods {
|
|
|
- padding: 30px 16px 0px;
|
|
|
+ padding: 20px 16px 0px;
|
|
|
|
|
|
.page-title {
|
|
|
font-size: @font2;
|
|
|
@@ -707,7 +750,7 @@ span {
|
|
|
}
|
|
|
}
|
|
|
.content {
|
|
|
- padding: 0px 16px;
|
|
|
+ // padding: 0px 16px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
width: 343px;
|
|
|
@@ -719,42 +762,49 @@ span {
|
|
|
border-radius: 50%;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
- .init {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- width: 100%;
|
|
|
- .text1 {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- color: #ffffff;
|
|
|
- line-height: 24px;
|
|
|
- }
|
|
|
- .text2 {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- width: 100%;
|
|
|
- .text3 {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
- color: @text3;
|
|
|
- line-height: 24px;
|
|
|
- }
|
|
|
- .text4 {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
- color: @text3;
|
|
|
- line-height: 24px;
|
|
|
- }
|
|
|
+}
|
|
|
+.qiaohua {
|
|
|
+ border-radius: 4px;
|
|
|
+ background: linear-gradient(45deg, rgba(253, 251, 96, 1), rgba(254, 181, 74, 1), rgba(255, 143, 62, 1));
|
|
|
+ position: relative;
|
|
|
+ width: 94px;
|
|
|
+ display: flex;
|
|
|
+ height: 30px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 12px;
|
|
|
+ .img {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ .text4 {
|
|
|
+ color: #fdfb60;
|
|
|
+ &.prim {
|
|
|
+ color: @text3;
|
|
|
}
|
|
|
+ margin-left: 10px;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ font-size: @font1;
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: @bg;
|
|
|
+ position: absolute;
|
|
|
+ top: 1px;
|
|
|
+ left: 1px;
|
|
|
+ right: 1px;
|
|
|
+ bottom: 1px;
|
|
|
+ z-index: 0;
|
|
|
}
|
|
|
}
|
|
|
.specific-list {
|
|
|
padding: 10px 0 0;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
overflow-x: auto;
|
|
|
}
|
|
|
.textName {
|
|
|
@@ -792,17 +842,17 @@ span {
|
|
|
}
|
|
|
|
|
|
.text1 {
|
|
|
- font-size: @font2;
|
|
|
+ font-size: @font1;
|
|
|
color: @text3;
|
|
|
- line-height: 24px;
|
|
|
+ line-height: 18px;
|
|
|
z-index: 1;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
.text2 {
|
|
|
- font-size: @font2;
|
|
|
+ font-size: @font1;
|
|
|
color: #ffffff;
|
|
|
- line-height: 24px;
|
|
|
+ line-height: 18px;
|
|
|
z-index: 1;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
@@ -870,6 +920,7 @@ span {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
+ padding-bottom: 50px;
|
|
|
}
|
|
|
.bg-img {
|
|
|
display: block;
|
|
|
@@ -1008,4 +1059,27 @@ span {
|
|
|
padding: 14px 50px !important;
|
|
|
border-top: 1px solid #313233;
|
|
|
}
|
|
|
+
|
|
|
+/deep/.goods-info {
|
|
|
+ .van-cell {
|
|
|
+ padding: 0 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.user {
|
|
|
+ padding: 12px 0 0;
|
|
|
+ display: flex;
|
|
|
+ .creator {
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-img {
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.van-cell__title {
|
|
|
+ margin-left: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
panhui
