|
|
@@ -100,7 +100,35 @@
|
|
|
>立即购买</el-button
|
|
|
>
|
|
|
</div>
|
|
|
+ <div class="init">
|
|
|
+ <div class="name">类型</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 class="box" v-if="init2 != ''">
|
|
|
+ <div v-if="init2">
|
|
|
+ <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 class="del" v-else>铸造者未设置</div>
|
|
|
+ </div>
|
|
|
|
|
|
+ <div class="bor"></div>
|
|
|
+ <!-- <div v-if="init"> -->
|
|
|
+ <div class="iconBox" v-if="init.length > 0">
|
|
|
+ <div v-for="(item, index) in init" :key="index">
|
|
|
+ <div @click.stop="privilegeFn(item)">
|
|
|
+ <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 class="del" v-else>铸造者未设置</div>
|
|
|
+ <!-- </div> -->
|
|
|
+ </div>
|
|
|
<div v-if="properties.length > 0">
|
|
|
<div class="time">
|
|
|
<div class="time1">商品特性</div>
|
|
|
@@ -171,7 +199,59 @@
|
|
|
<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"
|
|
|
+ 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 append-to-body v-if="init2" :visible.sync="show3" :before-close="handleClose2">
|
|
|
+ <div class="title2">
|
|
|
+ <img class="img" v-if="init2.icon" :src="init2.icon[1]" alt="" />
|
|
|
+ <div class="title3">悄悄话</div>
|
|
|
+ </div>
|
|
|
+ <div class="border"></div>
|
|
|
+ <div class="name">藏有创作者填写的隐藏内容,持有者才能打开</div>
|
|
|
+ <div class="name1">
|
|
|
+ 说明:<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" :before-close="handleClose">
|
|
|
+ <div class="title2">
|
|
|
+ <div class="title3">{{ list2.name }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="border"></div>
|
|
|
+ <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="copy">
|
|
|
+ <div class="id">
|
|
|
+ {{ list2.id }}
|
|
|
+ </div>
|
|
|
+ <img class="copyImg" @click="copy" src="../assets/user/copy_icon@3x (1).png" 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>
|
|
|
<submit ref="sub"></submit>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -189,13 +269,20 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
tableData: [],
|
|
|
+ show: false,
|
|
|
+ show2: false,
|
|
|
+ show3: false,
|
|
|
+ show4: false,
|
|
|
info: {},
|
|
|
blindBoxItems: [],
|
|
|
swiperOptions: {},
|
|
|
activeNames: ['2', '3'],
|
|
|
relateds: [],
|
|
|
boxOptions: { slidesPerView: 4, spaceBetween: 24, autoplay: true },
|
|
|
- loading: true
|
|
|
+ loading: true,
|
|
|
+ init2: [],
|
|
|
+ init: [],
|
|
|
+ list2: []
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -224,6 +311,65 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ copy() {
|
|
|
+ this.$copyText(this.list2.id).then(
|
|
|
+ e => {
|
|
|
+ this.$message.success('复制成功');
|
|
|
+ },
|
|
|
+ e => {
|
|
|
+ this.$message.warning('复制失败');
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ handleClose2() {
|
|
|
+ this.show3 = false;
|
|
|
+ this.getDetail();
|
|
|
+ },
|
|
|
+ handleClose() {
|
|
|
+ this.show4 = false;
|
|
|
+ this.getDetail();
|
|
|
+ },
|
|
|
+ Whisper() {
|
|
|
+ if (!this.init2.once) {
|
|
|
+ this.show2 = true;
|
|
|
+ this.$http
|
|
|
+ .post('/asset/usePrivilege', {
|
|
|
+ assetId: this.info.id,
|
|
|
+ privilegeId: this.init2.id
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ console.log(res);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ privilegeFn(init) {
|
|
|
+ this.list2 = init;
|
|
|
+ if (!init.once) {
|
|
|
+ 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.$http
|
|
|
+ .post('/asset/usePrivilege', {
|
|
|
+ assetId: this.info.id,
|
|
|
+ privilegeId: this.init2.id
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ console.log(res);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
getDetail() {
|
|
|
this.$http
|
|
|
.get('/collection/get/' + this.$route.query.id)
|
|
|
@@ -232,6 +378,16 @@ export default {
|
|
|
this.loading = false;
|
|
|
this.getTime(res.startTime);
|
|
|
this.getRelated(res.ownerId);
|
|
|
+ if (res.privileges) {
|
|
|
+ this.init2 = res.privileges.find(item => {
|
|
|
+ return item.name === '悄悄话';
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (res.privileges) {
|
|
|
+ this.init = res.privileges.filter(item => {
|
|
|
+ return item.name !== '悄悄话';
|
|
|
+ });
|
|
|
+ }
|
|
|
if (res.type === 'BLIND_BOX') {
|
|
|
return this.$http.post(
|
|
|
'/blindBoxItem/all',
|
|
|
@@ -318,12 +474,10 @@ export default {
|
|
|
background: #1a1a1a;
|
|
|
.top {
|
|
|
display: flex;
|
|
|
-
|
|
|
.top-left {
|
|
|
width: 460px;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
-
|
|
|
.top-info {
|
|
|
flex-grow: 1;
|
|
|
margin-left: 30px;
|
|
|
@@ -513,6 +667,86 @@ export default {
|
|
|
border-radius: 8px;
|
|
|
}
|
|
|
}
|
|
|
+ .init {
|
|
|
+ background: #1c1e26;
|
|
|
+ border-radius: 8px 8px 0px 0px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .name {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 28px;
|
|
|
+ margin: 0 !important;
|
|
|
+ padding-left: 16px;
|
|
|
+ width: 130px;
|
|
|
+ &.name1 {
|
|
|
+ width: 220px;
|
|
|
+ }
|
|
|
+ &.name2 {
|
|
|
+ width: 313px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ .del {
|
|
|
+ font-size: 14px;
|
|
|
+ width: 220px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 24px;
|
|
|
+ padding-left: 16px;
|
|
|
+ }
|
|
|
+ .img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ padding-left: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .iconBox {
|
|
|
+ margin-left: -34px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .img2 {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ padding-left: 50px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.card {
|
|
|
// width: 590px;
|
|
|
height: 112px;
|