悬浮

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

@@ -127,9 +127,17 @@
                     <div class="name">{{ info.category || '暂无' }}</div>
                     <div class="bor"></div>
                     <div class="box" v-if="init2 != ''">
-                        <div v-if="init2">
+                        <div
+                            v-if="init2"
+                            @mouseenter="isShowPopover(init2.name, true)"
+                            @mouseleave="isShowPopover(init2.name, false)"
+                            style="position: relative; width: 24px; margin-left: 16px"
+                        >
                             <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 class="hoverTips" v-if="popoverStatus[init2.name]">
+                                <p>{{ init2.description }}</p>
+                            </div>
                         </div>
                         <div class="del" v-else>铸造者未设置</div>
                     </div>
@@ -138,9 +146,19 @@
                     <!-- <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
+                                style="position: relative"
+                                @mouseenter="isShowPopover(item.name, true)"
+                                @mouseleave="isShowPopover(item.name, false)"
+                            >
+                                <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 class="hoverTips" v-if="popoverStatus[item.name]">
+                                    <div class="span">{{ item.name }}</div>
+                                    <p>{{ item.description }}</p>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -280,6 +298,14 @@ export default {
     mixins: [asset, product],
     data() {
         return {
+            popoverStatus: {
+                悄悄话: false,
+                版权权利: false,
+                加密空间: false,
+                票务: false,
+                兑换锁链: false,
+                铸造: false
+            },
             show: false,
             show2: false,
             show3: false,
@@ -337,6 +363,13 @@ export default {
         }
     },
     methods: {
+        isShowPopover(type, flag) {
+            for (let key in this.popoverStatus) {
+                if (type === key) {
+                    this.popoverStatus[key] = flag;
+                }
+            }
+        },
         copy() {
             this.$copyText(this.list2.id).then(
                 e => {
@@ -840,7 +873,7 @@ export default {
             .img {
                 width: 24px;
                 height: 24px;
-                padding-left: 21px;
+                padding-left: 2px;
                 cursor: pointer;
             }
             .iconBox {
@@ -854,6 +887,38 @@ export default {
                     cursor: pointer;
                 }
             }
+            .hoverTips {
+                position: absolute;
+                width: 188px;
+                background: #fff;
+                border-radius: 4px;
+                top: 34px;
+                left: 0px;
+                .span {
+                    font-size: 16px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #000000;
+                    line-height: 24px;
+                    text-align: center;
+                    padding-top: 12px;
+                }
+                p {
+                    padding: 12px 16px;
+                    font-size: 14px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #939599;
+                    line-height: 24px;
+                }
+                &::before {
+                    display: inline-block;
+                    width: 10px;
+                    height: 10px;
+                    border: 5px solid transparent;
+                    border-bottom-color: red;
+                }
+            }
         }
         .works {
             display: flex;

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

@@ -86,7 +86,7 @@
                     </div>
                     <div class="price1 num">
                         <div class="num1">
-                            <div class="price2 num2">单词限购 1 件</div>
+                            <div class="price2 num2">单次限购 1 件</div>
                             <!-- <span class="span">{{ info.total }}</span> -->
                         </div>
                         <div class="price2 num2">已售 {{ info.sale }} / 剩余 {{ info.stock }}</div>
@@ -124,7 +124,7 @@
                             <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>
+                                <p>{{ init2.description }}</p>
                             </div>
                         </div>
                         <div class="del" v-else>铸造者未设置</div>
@@ -142,6 +142,7 @@
                                 <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]">
+                                    <div class="span">{{ item.name }}</div>
                                     <p>{{ item.description }}</p>
                                 </div>
                             </div>
@@ -657,12 +658,6 @@ export default {
                 line-height: 24px;
                 padding-left: 16px;
             }
-            // .img {
-            //     width: 24px;
-            //     height: 24px;
-            //     padding-left: 16px;
-            //     cursor: pointer;
-            // }
             .iconBox {
                 margin-left: -22px;
                 display: flex;
@@ -677,12 +672,28 @@ export default {
 
             .hoverTips {
                 position: absolute;
-                width: 220px;
-                height: 50px;
+                width: 188px;
                 background: #fff;
-                border-radius: 5px;
+                border-radius: 4px;
                 top: 34px;
                 left: 0px;
+                .span {
+                    font-size: 16px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #000000;
+                    line-height: 24px;
+                    text-align: center;
+                    padding-top: 12px;
+                }
+                p {
+                    padding: 12px 16px;
+                    font-size: 14px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #939599;
+                    line-height: 24px;
+                }
                 &::before {
                     display: inline-block;
                     width: 10px;

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

@@ -275,17 +275,45 @@ export default {
         },
         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);
+                    this.$http
+                        .get('/collection/get/' + this.$route.query.id)
+                        .then(res => {
+                            if (res.status === 'PROCESSING') {
+                                clearInterval(this.payTimeout);
+                                // this.status = res.status;
+                                this.show = false;
+                            }
+                            if (res.type === 'BLIND_BOX') {
+                                return this.$http.post(
+                                    '/blindBoxItem/all',
+                                    {
+                                        query: {
+                                            blindBoxId: res.id
+                                        }
+                                    },
+                                    { body: 'json' }
+                                );
+                            } else {
+                                return Promise.resolve();
+                            }
+                        })
+                        .then(res => {
+                            if (res) {
+                                this.blindBoxItems = res.content;
+                            } else {
+                                this.blindBoxItems = [];
+                            }
+                        });
+                    // this.$http.post(url).then(res => {
+                    //     if (res.status === 'PROCESSING') {
+                    //         clearInterval(this.payTimeout);
+                    //         // this.status = res.status;
+                    //         this.show = false;
+                    //     }
+                    // });
+                }, 1000);
             }
         },
         submit() {