开宝箱白名单弹窗奖励

src/views/home/awardDialog.vue

@@ -100,6 +100,48 @@
         <div class="btn" v-if="awardData.isNewUser == 0" @click="toComplete">Done</div>
         <div class="btn" v-else @click="ExploreDialog">Confirm</div>
       </div>
+      <div v-else-if="eventName == 'box_event'">
+        <div class="top">
+          <div class="top-title" v-if="awardData.items.length != 0">{{ dialogTitle }}</div>
+          <div class="top-close" @click="ExploreDialog">
+            <img src="./../../assets/common/CloseButton.png" alt="">
+          </div>
+        </div>
+        <div class="content" v-if="awardData.items.length != 0">
+          <div class="content-points">
+            <div>Points</div>
+            <div>
+              <span>X {{ awardData.score }}</span>
+              <img src="./../../assets/common/Icon_Points.png" alt="">
+            </div>
+          </div>
+          <div class="content-list">
+            <li v-for="(item, index) in awardData.items" :key="index">
+              <div class="title">{{ item.name }}</div>
+              <div v-if="item.name == 'NFT'" class="box-img nft">
+                <img src="@/assets/common/Normal_GIF_1.gif" alt="">
+              </div>
+              <div v-else class="box-img">
+                <img src="@/assets/common/whitelist01.png" alt="">
+              </div>
+              <!-- <div class="box-bg"></div> -->
+              <div class="amount">
+              </div>
+            </li>
+          </div>
+        </div>
+        <div class="content" v-else>
+          <div class="points-title">{{ dialogTitle }}</div>
+          <div class="points-amount">
+            <div>Points</div>
+            <div>
+              <span>X {{ awardData.score }}</span>
+              <img src="./../../assets/common/Icon_Points.png" alt="">
+            </div>
+          </div>
+        </div>
+        <div class="btn" @click="ExploreDialog">Confirm</div>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -226,6 +268,10 @@ div {
                   height: 100%;
                 }
               }
+              .nft {
+                width: 160px;
+                height: 200px;
+              }
               .box-bg {
                 width: 160px;
                 height: 120px;

src/views/home/boxBtm.vue

@@ -207,10 +207,9 @@
                   <img src="./../../assets/common/Icon_Points.png" alt />
                 </div>
                 <div v-if="row.items !== undefined && row.items.length > 0">
-                  <span
+                  <span>{{ row.items[0].name }}</span>
-                    v-if="row.items !== undefined && row.items.length > 0"
+                  <img v-if="row.items[0].name == 'nft'" src="./../../assets/common/common_icon_NFT.png" alt />
-                  >{{ row.items[0].name }}</span>
+                  <img v-else src="./../../assets/common/wallet-yes.png" alt />
-                  <img src="./../../assets/common/whitelist01.png" alt />
                 </div>
               </div>
             </template>
@@ -1136,6 +1135,7 @@ export default {
                       div:nth-child(2) {
                         width: 105px;
                         margin-left: 20px;
+                        font-size: 14px;
                         display: flex;
                         align-items: center;
                         img {
@@ -1198,7 +1198,11 @@ export default {
     }
   }
   .box-loading {
-    display: none;
+    // position: absolute;
+    // top: -200%;
+    // left: -200%;
+    width: 0;
+    height: 0;
   }
 }
 </style>

src/views/home/index.vue

@@ -603,7 +603,7 @@
           </div>
         </div>
         <div class="box-btm">
-          <BoxBtm ref="boxList" @toExplore="toExplore" @awardDialog="activityDialog" />
+          <BoxBtm ref="boxList" @toExplore="toExplore" @awardDialog="boxAwardDialog" />
         </div>
       </div>
     </div>
@@ -1308,6 +1308,14 @@ export default {
       this.ExploreDialogVisible = true;
     },
 
+    boxAwardDialog(val) {
+      this.awardData = val;
+      this.eventName = "box_event";
+      this.dialogTitle = "Congratulations";
+      this.getUserState();
+      this.ExploreDialogVisible = true;
+    },
+
     // 签到奖励
     checkAwardDialog(val) {
       this.awardData = val;