悬浮

src/main/pc-space/src/views/AssetDetail.vue

@@ -418,7 +418,7 @@ export default {
                 }
                 if (res.privileges) {
                     this.init = res.privileges.filter(item => {
-                        return item.name !== '悄悄话';
+                        return item.name !== '悄悄话' && item.name !== '加密空间';
                     });
                 }
                 this.loading = false;
@@ -844,13 +844,13 @@ export default {
                 cursor: pointer;
             }
             .iconBox {
-                margin-left: -34px;
+                margin-left: -20px;
                 display: flex;
                 align-items: center;
                 .img2 {
                     width: 24px;
                     height: 24px;
-                    padding-left: 52px;
+                    padding-left: 38px;
                     cursor: pointer;
                 }
             }

src/main/pc-space/src/views/CollectionDetail.vue

@@ -115,9 +115,17 @@
                     <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
+                            v-if="init2"
+                            @mouseenter="isShowPopover(init2.name, true)"
+                            @mouseleave="isShowPopover(init2.name, false)"
+                            style="position: relative; width: 24px; margin-left: 16px"
+                        >
+                            <img v-if="init2.opened" class="img" :src="init2.icon[2]" alt="" />
+                            <img v-else class="img" :src="init2.icon[0]" alt="" />
+                            <div class="hoverTips" v-if="popoverStatus[init2.name]">
+                                <p>这是一段文字描述</p>
+                            </div>
                         </div>
                         <div class="del" v-else>铸造者未设置</div>
                     </div>
@@ -126,9 +134,16 @@
                     <!-- <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)">
+                            <div
+                                style="position: relative"
+                                @mouseenter="isShowPopover(item.name, true)"
+                                @mouseleave="isShowPopover(item.name, false)"
+                            >
                                 <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 class="hoverTips" v-if="popoverStatus[item.name]">
+                                    <p>{{ item.description }}</p>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -176,18 +191,6 @@
                         <div v-html="info.detail"></div>
                     </div>
                 </el-collapse-item>
-
-                <!-- <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="date" label="日期" width="180"> </el-table-column>
-                        <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
-                        <el-table-column prop="address" label="地址"> </el-table-column>
-                    </el-table>
-                </el-collapse-item> -->
             </el-collapse>
         </div>
         <div class="nft" v-if="relateds.length > 0">
@@ -210,59 +213,6 @@
             >
             </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>
@@ -280,6 +230,14 @@ export default {
     data() {
         return {
             tableData: [],
+            popoverStatus: {
+                悄悄话: false,
+                版权权利: false,
+                加密空间: false,
+                票务: false,
+                兑换锁链: false,
+                铸造: false
+            },
             show: false,
             show2: false,
             show3: false,
@@ -326,65 +284,13 @@ 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);
-        //             });
-        //     }
-        // },
+        isShowPopover(type, flag) {
+            for (let key in this.popoverStatus) {
+                if (type === key) {
+                    this.popoverStatus[key] = flag;
+                }
+            }
+        },
         getDetail() {
             this.$http
                 .get('/collection/get/' + this.$route.query.id)
@@ -400,7 +306,7 @@ export default {
                     }
                     if (res.privileges) {
                         this.init = res.privileges.filter(item => {
-                            return item.name !== '悄悄话';
+                            return item.name !== '悄悄话' && item.name !== '加密空间';
                         });
                     }
                     if (res.type === 'BLIND_BOX') {
@@ -737,6 +643,11 @@ export default {
             }
             .box {
                 width: 235px;
+                .img {
+                    width: 24px;
+                    height: 24px;
+                    cursor: pointer;
+                }
             }
             .del {
                 font-size: 14px;
@@ -746,23 +657,40 @@ export default {
                 line-height: 24px;
                 padding-left: 16px;
             }
-            .img {
-                width: 24px;
-                height: 24px;
-                padding-left: 16px;
-                cursor: pointer;
-            }
+            // .img {
+            //     width: 24px;
+            //     height: 24px;
+            //     padding-left: 16px;
+            //     cursor: pointer;
+            // }
             .iconBox {
-                margin-left: -34px;
+                margin-left: -22px;
                 display: flex;
                 align-items: center;
                 .img2 {
                     width: 24px;
                     height: 24px;
-                    padding-left: 50px;
+                    padding-left: 36px;
                     cursor: pointer;
                 }
             }
+
+            .hoverTips {
+                position: absolute;
+                width: 220px;
+                height: 50px;
+                background: #fff;
+                border-radius: 5px;
+                top: 34px;
+                left: 0px;
+                &::before {
+                    display: inline-block;
+                    width: 10px;
+                    height: 10px;
+                    border: 5px solid transparent;
+                    border-bottom-color: red;
+                }
+            }
         }
         .card {
             height: 112px;

src/main/pc-space/src/views/Send.vue

@@ -169,11 +169,6 @@ export default {
                 'https://nfttest.9space.vip/wx/redirect?redirectUrl=https://nfttest.9space.vip/payOrder/gift/weixin_pc?id=' +
                     this.idOrder
             );
-            // return resolveUrl(
-            //     this.$baseUrl,
-            //     'https://nfttest.9space.vip/wx/redirect?redirectUrl=https://nfttest.9space.vip/payOrder/weixin_pc?id=' +
-            //         this.idOrder
-            // );
         }
     },
     methods: {
@@ -203,33 +198,29 @@ export default {
             let _this = this;
             _this.minters = parseInt(time / 60) > 0 ? parseInt(time / 60) : 0;
             _this.seconds = parseInt(time - _this.minters * 60);
-            try {
-                if (_this.minters > 0) {
-                    _this.closeTime = setInterval(() => {
-                        _this.seconds--;
-                        if (_this.seconds <= 0) {
-                            _this.minters--;
-                            if (_this.minters == -1) {
-                                _this.minters = 0;
-                                _this.seconds = 0;
-                                clearInterval(_this.closeTime);
-                            } else {
-                                _this.seconds = 60;
-                            }
-                        }
-                    }, 1000);
-                } else {
-                    _this.closeTime = setInterval(() => {
-                        _this.seconds--;
-                        if (_this.seconds <= 0) {
+            if (_this.minters > 0) {
+                _this.closeTime = setInterval(() => {
+                    _this.seconds--;
+                    if (_this.seconds <= 0) {
+                        _this.minters--;
+                        if (_this.minters == -1) {
                             this.show = false;
+                            _this.minters = 0;
                             _this.seconds = 0;
                             clearInterval(_this.closeTime);
+                        } else {
+                            _this.seconds = 60;
                         }
-                    }, 1000);
-                }
-            } catch (err) {
-                console.log(err);
+                    }
+                }, 1000);
+            } else {
+                _this.closeTime = setInterval(() => {
+                    _this.seconds--;
+                    if (_this.seconds <= 0) {
+                        _this.seconds = 0;
+                        clearInterval(_this.closeTime);
+                    }
+                }, 1000);
             }
         },
         submit() {

src/main/pc-space/src/views/Submit.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <el-dialog center title="支付订单" :visible.sync="show" width="680px">
+        <el-dialog center title="支付订单" :visible.sync="show" width="680px" :before-close="handleClose">
             <div class="page" v-loading="loading">
                 <div v-if="list2">
                     <div>选择兑换券</div>
@@ -124,6 +124,7 @@ export default {
         return {
             show: false,
             show2: false,
+            payTimeout: undefined,
             // url: '/userCoupon/all',
             chooseId: '',
             org: '',
@@ -185,9 +186,6 @@ export default {
         if (this.isLogin) {
             this.add();
         }
-        if (this.matchedTime1 == 0) {
-            this.show = false;
-        }
     },
     methods: {
         initTime(dingdanId, initTime) {
@@ -213,34 +211,30 @@ export default {
             let _this = this;
             _this.minters = parseInt(time / 60) > 0 ? parseInt(time / 60) : 0;
             _this.seconds = parseInt(time - _this.minters * 60);
-            try {
-                if (_this.minters > 0) {
-                    _this.closeTime = setInterval(() => {
-                        _this.seconds--;
-                        if (_this.seconds <= 0) {
-                            _this.minters--;
-                            if (_this.minters == -1) {
-                                _this.minters = 0;
-                                _this.seconds = 0;
-                                clearInterval(_this.closeTime);
-                            } else {
-                                _this.seconds = 60;
-                            }
-                        }
-                    }, 1000);
-                } else {
-                    _this.closeTime = setInterval(() => {
-                        _this.seconds--;
-                        if (_this.seconds <= 0) {
-                            console.log(222);
+            if (_this.minters > 0) {
+                _this.closeTime = setInterval(() => {
+                    _this.seconds--;
+                    if (_this.seconds <= 0) {
+                        _this.minters--;
+
+                        if (_this.minters == -1) {
                             this.show = false;
+                            _this.minters = 0;
                             _this.seconds = 0;
                             clearInterval(_this.closeTime);
+                        } else {
+                            _this.seconds = 60;
                         }
-                    }, 1000);
-                }
-            } catch (err) {
-                console.log(err);
+                    }
+                }, 1000);
+            } else {
+                _this.closeTime = setInterval(() => {
+                    _this.seconds--;
+                    if (_this.seconds <= 0) {
+                        _this.seconds = 0;
+                        clearInterval(_this.closeTime);
+                    }
+                }, 1000);
             }
         },
         add() {
@@ -273,11 +267,32 @@ export default {
             this.chooseId = info.id;
             this.$store.commit('setCouponInfo', info);
         },
+        handleClose() {
+            this.show = false;
+            if (this.payTimeout) {
+                clearInterval(this.payTimeout);
+            }
+        },
+        payWatch() {
+            //监控支付状态
+            let url = '/order/create?collectionId=' + this.$route.query.id + '&qty=1';
+            if (this.status != 'PROCESSING') {
+                this.payTimeout = setInterval(() => {
+                    this.$http.post(url).then(res => {
+                        if (res.status === 'PROCESSING') {
+                            clearInterval(this.payTimeout);
+                            // this.status = res.status;
+                            this.show = false;
+                        }
+                    });
+                }, 10000);
+            }
+        },
         submit() {
             // console.log(this.$baseUrl);
             // if (this.payMethods === 'DCEP') {
             //     this.wait();
-            // }
+            // }搞
             let url = '/order/create?collectionId=' + this.$route.query.id + '&qty=1';
             if (this.couponInfo) {
                 url += '&couponId=' + this.couponInfo.id;
@@ -285,12 +300,15 @@ export default {
             this.$http
                 .post(url)
                 .then(res => {
-                    // console.log(res);
-                    this.initTime(res.id, res.createdAt);
+                    // console.log(res)
                     if (this.money) {
+                        // 没有代金券
+                        this.initTime(res.id, res.createdAt);
                         this.status = res.status;
                         this.id = res.id;
+                        this.payWatch();
                     } else {
+                        // 有代金券
                         this.$message.success('支付成功');
                         setTimeout(() => {
                             this.$router.replace('/collectionorder');