|
|
@@ -105,18 +105,26 @@
|
|
|
</div>
|
|
|
<div class="init">
|
|
|
<div class="name">类型</div>
|
|
|
- <div class="name">悄悄话<span>（灰色表示已使用）</span></div>
|
|
|
- <div class="name">持有特权<span>（灰色表示已使用）</span></div>
|
|
|
+ <div class="name name1">悄悄话<span>（灰色表示已使用）</span></div>
|
|
|
+ <div class="name name2">持有特权<span>（灰色表示已使用）</span></div>
|
|
|
</div>
|
|
|
<div class="init1">
|
|
|
<div class="name">{{ info.category }}</div>
|
|
|
<div class="bor"></div>
|
|
|
- <div>111</div>
|
|
|
+ <div class="box">
|
|
|
+ <div>
|
|
|
+ <img @click="Whisper" v-if="init2.opened" class="img" :src="init2.icon[2]" alt="" />
|
|
|
+ <img @click="Whisper" v-else class="img" :src="init2.icon[0]" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="bor"></div>
|
|
|
- <div>11</div>
|
|
|
- <div>11</div>
|
|
|
- <div>11</div>
|
|
|
- <div>11</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.once" class="img" :src="item.icon[3]" alt="" /> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div v-if="properties.length > 0">
|
|
|
<div class="time">
|
|
|
@@ -189,6 +197,37 @@
|
|
|
<collection-info v-for="(item, index) in relateds" :key="item.id" :info.sync="relateds[index]">
|
|
|
</collection-info>
|
|
|
</div>
|
|
|
+ <el-dialog class="abb" :visible.sync="show2" title="提示">
|
|
|
+ <img
|
|
|
+ @click="openedFn"
|
|
|
+ class="imgBox"
|
|
|
+ src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-11-12-16-13-07DtWLMcPy.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <div class="Whisper1">点击图标打开悄悄话,(隐藏内容，只能开启一次)</div>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog :visible.sync="show3" title="提示">
|
|
|
+ <div class="title2">
|
|
|
+ <img class="img" :src="init2.icon[1]" alt="" />
|
|
|
+ <div class="title3">{{ init2.name }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="border"></div>
|
|
|
+ <div class="name">藏有创作者填写的隐藏内容，持有者才能打开</div>
|
|
|
+ <div class="name1">
|
|
|
+ 说明：<span>{{ init2.description }}</span>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog :visible.sync="show4" title="提示">
|
|
|
+ <div class="title2" v-if="list2">
|
|
|
+ <!-- <img class="img" :src="list2.icon[1]" alt="" /> -->
|
|
|
+ <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>
|
|
|
+ </el-dialog>
|
|
|
|
|
|
<send ref="send"></send>
|
|
|
<consignment-info ref="refFn"></consignment-info>
|
|
|
@@ -210,8 +249,9 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
show: false,
|
|
|
- showMore1: false,
|
|
|
- showMore2: false,
|
|
|
+ show2: false,
|
|
|
+ show3: false,
|
|
|
+ show4: false,
|
|
|
tableData: [],
|
|
|
info: {},
|
|
|
blindBoxItems: [],
|
|
|
@@ -220,7 +260,10 @@ export default {
|
|
|
relateds: [],
|
|
|
boxOptions: { slidesPerView: 4, spaceBetween: 24, autoplay: true },
|
|
|
loading: true,
|
|
|
- list: []
|
|
|
+ list: [],
|
|
|
+ init: [],
|
|
|
+ init2: [],
|
|
|
+ list2: []
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -253,6 +296,42 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ Whisper() {
|
|
|
+ if (!this.init2.opened) {
|
|
|
+ console.log(111);
|
|
|
+ this.show2 = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ privilegeFn(init) {
|
|
|
+ this.list2 = init;
|
|
|
+ if (!init.once && !init.opened) {
|
|
|
+ console.log(this.list2.icon[1]);
|
|
|
+ this.show4 = true;
|
|
|
+ this.$http
|
|
|
+ .post('/asset/usePrivilege', {
|
|
|
+ assetId: this.info.id,
|
|
|
+ privilegeId: init.id
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ console.log(res);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ openedFn() {
|
|
|
+ this.show2 = false;
|
|
|
+ this.show3 = true;
|
|
|
+ if (!this.init2.once) {
|
|
|
+ this.show = true;
|
|
|
+ this.$http
|
|
|
+ .post('/asset/usePrivilege', {
|
|
|
+ assetId: this.info.id,
|
|
|
+ privilegeId: this.init2.id
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ console.log(res);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
record() {
|
|
|
this.$http
|
|
|
.get('/asset/tokenHistory', {
|
|
|
@@ -266,6 +345,16 @@ export default {
|
|
|
getDetail() {
|
|
|
this.$http.get('/asset/get/' + this.$route.query.id).then(res => {
|
|
|
this.info = res;
|
|
|
+ this.init2 = res.privileges.find(item => {
|
|
|
+ return item.name === '悄悄话';
|
|
|
+ });
|
|
|
+ console.log(this.init2);
|
|
|
+ console.log(this.init2.icon[0]);
|
|
|
+ this.init = res.privileges.filter(item => {
|
|
|
+ return item.name !== '悄悄话';
|
|
|
+ });
|
|
|
+ console.log(this.init);
|
|
|
+ // console.log(this.init2.icon[0]);
|
|
|
this.loading = false;
|
|
|
this.getTime(res.startTime);
|
|
|
this.getRelated(res.ownerId);
|
|
|
@@ -397,6 +486,88 @@ export default {
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="less" scoped>
|
|
|
+/deep/ .el-dialog {
|
|
|
+ width: 340px;
|
|
|
+ background: #ffffff;
|
|
|
+ .title2 {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 12px;
|
|
|
+ .img {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ color: #ff4f50;
|
|
|
+ margin-right: 3px;
|
|
|
+ }
|
|
|
+ .title3 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ff4f50;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .border {
|
|
|
+ height: 1px;
|
|
|
+ background: #f2f3f5;
|
|
|
+ border-radius: 1px;
|
|
|
+ margin: 12px 0 6px;
|
|
|
+ }
|
|
|
+ .name1 {
|
|
|
+ width: 208px;
|
|
|
+ padding: 10px;
|
|
|
+ background: #f5f7fa;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #939599;
|
|
|
+ margin-bottom: 11px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ color: #303133;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 18px;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.abb {
|
|
|
+ /deep/ .el-dialog {
|
|
|
+ width: 340px;
|
|
|
+ background: rgb(209, 206, 18);
|
|
|
+ border-radius: 10px;
|
|
|
+ .con {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 12px 16px 0;
|
|
|
+ .Whisper {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .icon {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .imgBox {
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 30px 115px 22px;
|
|
|
+ }
|
|
|
+ .Whisper1 {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #303133;
|
|
|
+ line-height: 18px;
|
|
|
+ padding-bottom: 36px;
|
|
|
+ margin: 0 85px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
.container {
|
|
|
padding: 50px 50px 200px;
|
|
|
background: #1a1a1a;
|
|
|
@@ -422,6 +593,15 @@ export default {
|
|
|
font-weight: bold;
|
|
|
color: #ffffff;
|
|
|
line-height: 28px;
|
|
|
+ margin: 0 !important;
|
|
|
+ padding-left: 16px;
|
|
|
+ width: 130px;
|
|
|
+ &.name1 {
|
|
|
+ width: 220px;
|
|
|
+ }
|
|
|
+ &.name2 {
|
|
|
+ width: 360px;
|
|
|
+ }
|
|
|
}
|
|
|
span {
|
|
|
font-size: 14px;
|
|
|
@@ -429,19 +609,38 @@ export default {
|
|
|
color: #939599;
|
|
|
line-height: 24px;
|
|
|
}
|
|
|
+ .img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
}
|
|
|
- .init {
|
|
|
+ .init1 {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
height: 102px;
|
|
|
background: #1f2230;
|
|
|
border-radius: 0px 0px 8px 8px;
|
|
|
+ .name {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 24px;
|
|
|
+ padding-left: 16px;
|
|
|
+ }
|
|
|
.bor {
|
|
|
width: 1px;
|
|
|
height: 62px;
|
|
|
background: #494a4d;
|
|
|
border-radius: 1px;
|
|
|
}
|
|
|
+ .box {
|
|
|
+ width: 220px;
|
|
|
+ }
|
|
|
+ .img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ padding-left: 16px;
|
|
|
+ }
|
|
|
}
|
|
|
.works {
|
|
|
display: flex;
|
