|
|
@@ -26,6 +26,21 @@
|
|
|
<img class="works1" src="../assets/img/icon-quanyibaohu@3x.png" alt="" />
|
|
|
<div class="works2">该作品已在保存至区块链并进行权益保护</div>
|
|
|
</div>
|
|
|
+ <div class="content2">
|
|
|
+ <el-collapse v-model="activeNames1" :accordion="false">
|
|
|
+ <el-collapse-item name="1" v-if="info.tokenId">
|
|
|
+ <template slot="title">
|
|
|
+ <img class="imgs" src="../assets/icon-lianshangxinxi.png" alt="" />
|
|
|
+ <span>链上信息</span>
|
|
|
+ </template>
|
|
|
+ <div class="info4">
|
|
|
+ <div class="text1">Hash地址：{{ info.txHash }}</div>
|
|
|
+ <div class="text1">区块高度： {{ info.blockNumber }}</div>
|
|
|
+ <div class="text1">令牌ID： {{ info.tokenId }}</div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="top-info">
|
|
|
<div class="title">
|
|
|
@@ -118,12 +133,12 @@
|
|
|
<div class="bor"></div>
|
|
|
<div v-for="(item, index) in init" :key="index">
|
|
|
<div @click="privilegeFn(item)">
|
|
|
- <img v-if="item.opened" class="img" :src="item.icon[2]" alt="" />
|
|
|
- <img v-if="!item.opened" class="img" :src="item.icon[3]" alt="" />
|
|
|
+ <img v-if="item.opened" class="img2" :src="item.icon[2]" alt="" />
|
|
|
+ <img v-if="!item.opened" class="img2" :src="item.icon[3]" alt="" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-if="properties.length != 0">
|
|
|
+ <div style="margin-top: 30px" v-if="properties.length != 0">
|
|
|
<div class="time">
|
|
|
<div class="time1">商品特性</div>
|
|
|
</div>
|
|
|
@@ -136,20 +151,9 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
<div class="content" v-loading="loading">
|
|
|
<el-collapse v-model="activeNames" :accordion="false">
|
|
|
- <el-collapse-item name="1" v-if="info.tokenId">
|
|
|
- <template slot="title">
|
|
|
- <img class="imgs" src="../assets/icon-lianshangxinxi.png" alt="" />
|
|
|
- <span>链上信息</span>
|
|
|
- </template>
|
|
|
- <div class="info4">
|
|
|
- <div class="text1">Hash地址：{{ info.txHash }}</div>
|
|
|
- <div class="text1">区块高度： {{ info.blockNumber }}</div>
|
|
|
- <div class="text1">令牌ID： {{ info.tokenId }}</div>
|
|
|
- </div>
|
|
|
- </el-collapse-item>
|
|
|
-
|
|
|
<el-collapse-item name="2">
|
|
|
<template slot="title">
|
|
|
<img class="imgs" src="../assets/icon-miaoshu.png" alt="" />
|
|
|
@@ -164,15 +168,15 @@
|
|
|
<div v-html="info.detail"></div>
|
|
|
</div>
|
|
|
</el-collapse-item>
|
|
|
- <div v-if="list.length != 0">
|
|
|
+ <div v-if="tableData.length != 0">
|
|
|
<el-collapse-item name="3">
|
|
|
<template slot="title">
|
|
|
<img class="imgs" src="../assets/info_icon_jiaoyijilu.png" alt="" />
|
|
|
<span>交易历史</span>
|
|
|
</template>
|
|
|
<el-table :data="tableData" stripe style="width: 100%">
|
|
|
- <el-table-column prop="realName" label="用户" width="555"> </el-table-column>
|
|
|
- <el-table-column prop="name" label="操作" width="555"> </el-table-column>
|
|
|
+ <el-table-column prop="fromUser" label="用户" width="555"> </el-table-column>
|
|
|
+ <el-table-column prop="operation" label="操作" width="455"> </el-table-column>
|
|
|
<el-table-column prop="createdAt" label="时间"> </el-table-column>
|
|
|
</el-table>
|
|
|
</el-collapse-item>
|
|
|
@@ -194,6 +198,7 @@
|
|
|
<collection-info v-for="(item, index) in relateds" :key="item.id" :info.sync="relateds[index]">
|
|
|
</collection-info>
|
|
|
</div>
|
|
|
+ <!-- 悄悄话 -->
|
|
|
<el-dialog append-to-body class="abb" :visible.sync="show2" title="提示">
|
|
|
<img
|
|
|
@click="openedFn"
|
|
|
@@ -203,7 +208,8 @@
|
|
|
/>
|
|
|
<div class="Whisper1">点击图标打开悄悄话,(隐藏内容，只能开启一次)</div>
|
|
|
</el-dialog>
|
|
|
- <el-dialog append-to-body :visible.sync="show3">
|
|
|
+ <!-- 悄悄话 -->
|
|
|
+ <el-dialog append-to-body :visible.sync="show3" :before-close="handleClose2">
|
|
|
<div class="title2">
|
|
|
<img class="img" :src="init2.icon[1]" alt="" />
|
|
|
<div class="title3">{{ init2.name }}</div>
|
|
|
@@ -211,17 +217,37 @@
|
|
|
<div class="border"></div>
|
|
|
<div class="name">藏有创作者填写的隐藏内容，持有者才能打开</div>
|
|
|
<div class="name1">
|
|
|
- 说明：<span>{{ init2.description }}</span>
|
|
|
+ 说明：<span>{{ init2.remark || '暂无' }}</span>
|
|
|
</div>
|
|
|
+ <div v-if="init2.openTime" class="timename"><span class="time">开启时间：</span>{{ init2.openTime }}</div>
|
|
|
</el-dialog>
|
|
|
- <el-dialog append-to-body :visible.sync="show4">
|
|
|
+ <!-- 其余三个 -->
|
|
|
+ <el-dialog append-to-body :visible.sync="show4" :before-close="handleClose">
|
|
|
<div class="title2" v-if="list2">
|
|
|
<div class="title3">{{ list2.name }}</div>
|
|
|
</div>
|
|
|
<div class="border"></div>
|
|
|
- <div class="name" v-if="list2.name == '版权权利'">该特权将证明持有者拥有该作品版权使用权力</div>
|
|
|
- <div class="name1">
|
|
|
- 说明：<span>{{ list2.description }}</span>
|
|
|
+ <div class="name">{{ list2.description }}</div>
|
|
|
+ <div class="name1" v-if="list2.type != 'code'">
|
|
|
+ <img class="qrcodeImg" v-if="list2.type == 'qrcode'" :src="list2.detail" alt="" />
|
|
|
+ <div class="qrcode1" v-if="list2.type == 'qrcode'">扫描二维码进行票务核销</div>
|
|
|
+ 说明：<span>{{ list2.remark || '暂无' }}</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="list2.type == 'code'">
|
|
|
+ <div class="id">
|
|
|
+ {{ list2.id }}
|
|
|
+ <!-- <img @click="copy" src="../../assets/svgs/copy_icon.svg" alt="" /> -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <span class="span">说明：</span> <span>{{ list2.remark || '暂无' }}</span>
|
|
|
+ <div class="border"></div>
|
|
|
+ <div class="code">每次交易都会产生校验码</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="list2.openTime">
|
|
|
+ <div v-if="list2.type == 'qrcode'" class="timename">
|
|
|
+ <span class="time">截止时间：</span>{{ list2.openTime }}
|
|
|
+ </div>
|
|
|
+ <div v-else class="timename"><span class="time">打开时间：</span>{{ list2.openTime }}</div>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
|
|
|
@@ -253,6 +279,7 @@ export default {
|
|
|
blindBoxItems: [],
|
|
|
swiperOptions: {},
|
|
|
activeNames: ['2', '3'],
|
|
|
+ activeNames1: ['1'],
|
|
|
relateds: [],
|
|
|
boxOptions: { slidesPerView: 4, spaceBetween: 24, autoplay: true },
|
|
|
loading: true,
|
|
|
@@ -295,6 +322,14 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ handleClose2() {
|
|
|
+ this.show3 = false;
|
|
|
+ this.getDetail();
|
|
|
+ },
|
|
|
+ handleClose() {
|
|
|
+ this.show4 = false;
|
|
|
+ this.getDetail();
|
|
|
+ },
|
|
|
Whisper() {
|
|
|
if (!this.init2.once) {
|
|
|
this.show2 = true;
|
|
|
@@ -311,7 +346,6 @@ export default {
|
|
|
privilegeFn(init) {
|
|
|
this.list2 = init;
|
|
|
if (!init.once) {
|
|
|
- console.log(this.list2.icon[1]);
|
|
|
this.show4 = true;
|
|
|
this.$http
|
|
|
.post('/asset/usePrivilege', {
|
|
|
@@ -327,7 +361,6 @@ export default {
|
|
|
this.show2 = false;
|
|
|
this.show3 = true;
|
|
|
if (!this.init2.once) {
|
|
|
- this.show = true;
|
|
|
this.$http
|
|
|
.post('/asset/usePrivilege', {
|
|
|
assetId: this.info.id,
|
|
|
@@ -345,7 +378,8 @@ export default {
|
|
|
assetId: this.info.id
|
|
|
})
|
|
|
.then(res => {
|
|
|
- this.list = res;
|
|
|
+ this.tableData = res;
|
|
|
+ console.log(this.tableData);
|
|
|
});
|
|
|
},
|
|
|
getDetail() {
|
|
|
@@ -529,16 +563,58 @@ export default {
|
|
|
}
|
|
|
.name1 {
|
|
|
width: 288px;
|
|
|
- min-height: 100px;
|
|
|
padding: 10px;
|
|
|
background: #f5f7fa;
|
|
|
border-radius: 4px;
|
|
|
color: #939599;
|
|
|
margin-bottom: 11px;
|
|
|
+ .qrcodeImg {
|
|
|
+ width: 93px;
|
|
|
+ height: 93px;
|
|
|
+ border-radius: 11px;
|
|
|
+ margin-left: 98px;
|
|
|
+ }
|
|
|
+ .qrcode1 {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 18px;
|
|
|
+ margin: 12px 0px 12px 78px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .timename {
|
|
|
+ color: #ff4f50;
|
|
|
+ font-size: 12px;
|
|
|
+ padding-bottom: 12px;
|
|
|
+ }
|
|
|
+ .time {
|
|
|
+ color: #939599;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .id {
|
|
|
+ width: 300px;
|
|
|
+ height: 42px;
|
|
|
+ background: #f5f7fa;
|
|
|
+ border-radius: 24px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 42px;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ color: #303133;
|
|
|
}
|
|
|
span {
|
|
|
color: #303133;
|
|
|
}
|
|
|
+ .span {
|
|
|
+ color: #939599;
|
|
|
+ }
|
|
|
+ .code {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 18px;
|
|
|
+ padding-bottom: 12px;
|
|
|
+ }
|
|
|
.name {
|
|
|
font-size: 12px;
|
|
|
font-weight: 400;
|
|
|
@@ -659,6 +735,15 @@ export default {
|
|
|
padding-left: 16px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+ .img2 {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ padding-left: 50px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ // .img2:nth-last-child(1) {
|
|
|
+ // padding-left: 16px;
|
|
|
+ // }
|
|
|
}
|
|
|
.works {
|
|
|
display: flex;
|
|
|
@@ -678,6 +763,54 @@ export default {
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
+ .content2 {
|
|
|
+ .info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 16px;
|
|
|
+ background: #1c1e26;
|
|
|
+ &.rad {
|
|
|
+ border-radius: 8px 8px 0px 0px;
|
|
|
+ margin-top: 30px;
|
|
|
+ }
|
|
|
+ .info1 {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 68px;
|
|
|
+ .imgs {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .info2 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info3 {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .border {
|
|
|
+ height: 1px;
|
|
|
+ background: #494a4d;
|
|
|
+ border-radius: 1px;
|
|
|
+ margin: 0 16px;
|
|
|
+ }
|
|
|
+ .info4 {
|
|
|
+ color: #fff;
|
|
|
+ padding: 16px;
|
|
|
+ width: 400px;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap !important;
|
|
|
+ text-overflow: ellipsis !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
.title {
|
|
|
display: flex;
|
|
|
margin-top: 10px;
|
|
|
@@ -782,8 +915,6 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.price {
|
|
|
- // width: 678px;
|
|
|
- // height: 220px;
|
|
|
padding: 0 16px;
|
|
|
background: #1f2230;
|
|
|
border-radius: 0px 0px 8px 8px;
|
|
|
@@ -845,7 +976,6 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.card {
|
|
|
- // width: 590px;
|
|
|
height: 112px;
|
|
|
border-radius: 0px 0px 8px 8px;
|
|
|
background: #1f2230;
|
|
|
@@ -857,9 +987,7 @@ export default {
|
|
|
width: 120px;
|
|
|
height: 62px;
|
|
|
text-align: center;
|
|
|
- border-radius: 4px;
|
|
|
- border: 1px solid;
|
|
|
- border-image: linear-gradient(135deg, rgba(0, 255, 203, 1), rgba(0, 110, 255, 1)) 1 1;
|
|
|
+ .line();
|
|
|
.box2 {
|
|
|
font-size: 14px;
|
|
|
font-weight: 400;
|
|
|
@@ -1046,6 +1174,56 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+/deep/.content2 {
|
|
|
+ margin-top: 30px;
|
|
|
+ .el-collapse-item__wrap {
|
|
|
+ // border-bottom: 1px solid #494a4d;
|
|
|
+ border-bottom-width: 0;
|
|
|
+ }
|
|
|
+ .el-collapse {
|
|
|
+ border-width: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-collapse-item__header {
|
|
|
+ background-color: #1c1e26;
|
|
|
+ padding-left: 16px;
|
|
|
+ height: 68px;
|
|
|
+ border-bottom-width: 0;
|
|
|
+ img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ font-size: 16px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .el-collapse-item__content {
|
|
|
+ background-color: #1f2230;
|
|
|
+ height: 120px !important;
|
|
|
+ }
|
|
|
+ .el-table {
|
|
|
+ background-color: transparent;
|
|
|
+ padding: 0 16px;
|
|
|
+ tr {
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ th {
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ &::before {
|
|
|
+ content: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-collapse-item {
|
|
|
+ &:last-child {
|
|
|
+ .el-collapse-item__wrap {
|
|
|
+ border-width: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
.list {
|
|
|
margin: -16px;
|
|
|
|
