修复nft名称不显示

.env.development

@@ -17,6 +17,8 @@ VUE_APP_CHAIN_ID = '5611'
 
 VUE_APP_APP_NAME = 'CF UAW'
 
+VUE_APP_MODE = 'development'
+
 # 铭文的验证地址
 VUE_APP_SCRIPTION_ADDRESS='0xcd4bb3402f1a444a1af10f31946ed37dac0eac4d'
 # VUE_APP_SCRIPTION_ADDRESS='0x50A8e60041A206AcaA5F844a1104896224be6F39'

.env.production

@@ -1,5 +1,5 @@
 # API
-VUE_APP_API_URL = 'https://oauth-svr.cebggame.com/task'
+VUE_APP_API_URL = 'https://taskapi.cebggame.com'
 VUE_APP_WL_URL = 'https://nftwl.counterfire.games/wl_test'
 VUE_APP_CONFIG_URL = 'https://sepolia.infura.io/v3/b6bf7d3508c941499b10025c0776eaf8'
 
@@ -11,9 +11,11 @@ VUE_APP_NFT_URL = '0x59e751c2037B710090035B6ea928e0cce80aC03f'
 # BEB合约
 VUE_APP_BEB_URL = '0x1304E6AA241eE3C9ea44Db9e593e85Ae76eC41F1'
 
-VUE_APP_CHAIN_ID = '5611'
+VUE_APP_CHAIN_ID = '204'
 
 VUE_APP_APP_NAME = 'CF UAW'
 
+VUE_APP_MODE = 'production'
+
 VUE_APP_SCRIPTION_ADDRESS='0xcd4bb3402f1a444a1af10f31946ed37dac0eac4d'
-VUE_APP_CONTRACT='0x0Fd13D2CD0B6c679B6f92590E0b91C18DDe7BD3A'
+VUE_APP_CONTRACT='0x03B6f01EB419915B1F157e67C8263101ddd6E15e'

package-lock.json

@@ -1,13 +1,14 @@
 {
   "name": "uawgame",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "uawgame",
-      "version": "0.1.0",
+      "version": "0.1.1",
       "dependencies": {
+        "@cloudcare/browser-rum": "^3.1.11",
         "@walletconnect/ethereum-provider": "^2.11.2",
         "@walletconnect/modal": "^2.6.2",
         "axios": "^1.6.8",
@@ -20,6 +21,7 @@
         "postcss-px-to-viewport": "^1.1.1",
         "swiper": "^5.4.5",
         "vue": "^2.6.14",
+        "vue-gtag": "^1.16.1",
         "vue-loader": "^15.10.1",
         "vue-router": "^3.5.1",
         "vuex": "^3.6.2",
@@ -1850,6 +1852,28 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@cloudcare/browser-core": {
+      "version": "3.1.11",
+      "resolved": "https://registry.npmmirror.com/@cloudcare/browser-core/-/browser-core-3.1.11.tgz",
+      "integrity": "sha512-GX5UIyvznSIO11N2DCaHL7NcniogMYAo7f7AQKDIgGKpFM9s6QspwY43XituUC8veSBvlSiPdE72MTCJF9ACxA=="
+    },
+    "node_modules/@cloudcare/browser-rum": {
+      "version": "3.1.11",
+      "resolved": "https://registry.npmmirror.com/@cloudcare/browser-rum/-/browser-rum-3.1.11.tgz",
+      "integrity": "sha512-zVNV0TxpIhiC18ge3Gjqiuep5Z3VB8uJdFDtSSoKac/2nFUnILQGE7MMunIbA4yATOy2UzDqDIbcHH3a2DK1Kw==",
+      "dependencies": {
+        "@cloudcare/browser-core": "3.1.11",
+        "@cloudcare/browser-worker": "3.1.11"
+      }
+    },
+    "node_modules/@cloudcare/browser-worker": {
+      "version": "3.1.11",
+      "resolved": "https://registry.npmmirror.com/@cloudcare/browser-worker/-/browser-worker-3.1.11.tgz",
+      "integrity": "sha512-Rs1Nvb/38DmSX12TRHTgr6GjeUEWwkNrJLFPSohiOjEZVhq5gVVk/r3vutRs3hCaKW1Fh++ouMECzh1vp2rywA==",
+      "dependencies": {
+        "@cloudcare/browser-core": "3.1.11"
+      }
+    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.5.7",
       "resolved": "https://registry.npmmirror.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@@ -12992,6 +13016,14 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/vue-gtag": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmmirror.com/vue-gtag/-/vue-gtag-1.16.1.tgz",
+      "integrity": "sha512-5vs0pSGxdqrfXqN1Qwt0ZFXG0iTYjRMu/saddc7QIC5yp+DKgjWQRpGYVa7Pq+KbThxwzzMfo0sGi7ISa6NowA==",
+      "peerDependencies": {
+        "vue": "^2.0.0"
+      }
+    },
     "node_modules/vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmmirror.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "uawgame",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -10,6 +10,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@cloudcare/browser-rum": "^3.1.11",
     "@walletconnect/ethereum-provider": "^2.11.2",
     "@walletconnect/modal": "^2.6.2",
     "axios": "^1.6.8",
@@ -22,6 +23,7 @@
     "postcss-px-to-viewport": "^1.1.1",
     "swiper": "^5.4.5",
     "vue": "^2.6.14",
+    "vue-gtag": "^1.16.1",
     "vue-loader": "^15.10.1",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2",

public/cocojs/main.d2d93.js

@@ -76,7 +76,7 @@ window.boot = function () {
                         if (div) {
                             div.style.backgroundImage = '';
                         }
-                        console.log('Success to load scene: ' + launchScene);
+                        console.info('Success to load scene: ' + launchScene);
                     }
                 }
             }

public/index.html

@@ -5,29 +5,56 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <meta name="referrer" content="no-referrer">
-    <link rel="icon" href="/logo.png">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="icon" href="/favicon.ico">
+    <title>Hill's Treasure Hunt</title>
+    <link rel="apple-touch-icon" sizes="180x180" href="/src/img/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/src/img/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/src/img/favicon-16x16.png">
+    <link rel="manifest" href="/src/img/site.webmanifest">
+    <link rel="mask-icon" href="/src/img/safari-pinned-tab.svg" color="#5bbad5">
+    <meta name="msapplication-TileColor" content="#da532c">
+    <meta name="theme-color" content="#ffffff">
+    <meta
+      name="description"
+      content="Explore for chests; boost to unlock their full potential"
+    />
+    <meta
+      property="og:image"
+      content="https://mint.counterfire.games/mint.png"
+    />
+    <meta
+      property="twitter:image"
+      content="https://pbs.twimg.com/media/GLITHinbUAA1N8p?format=jpg&name=large"
+    />
   </head>
   <body>
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-4KSHDJ3MGL"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', 'G-4KSHDJ3MGL');
+    </script>
     <!-- built files will be auto injected -->
-    <script src="https://www.google.com/recaptcha/api.js?render=6Ld3xoIpAAAAABW7f5ImgAC6GcWLeDCbt5HPXqe2"></script>
+    <!-- <script src="https://www.google.com/recaptcha/api.js?render=6Ld3xoIpAAAAABW7f5ImgAC6GcWLeDCbt5HPXqe2"></script> -->
     <script th:inline="javascript">
       /**
       * 加载外部js
        */
       var loadSingleScript = function (src, isModule) {
         return new Promise((resolve, reject) => {
-          console.log(`>> begin load script: ${src}`);
+          console.info(`>> begin load script: ${src}`);
           let s = document.createElement('script');
           s.async = true;
           if (isModule)s.type = 'module';
           s.src =src;
           s.addEventListener('load', function () {
-            console.log(`<< finish load script: ${src}`);
+            console.info(`<< finish load script: ${src}`);
             s.parentNode.removeChild(s);
             s.removeEventListener('load', arguments.callee, false);
             resolve && resolve();

public/src/img/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

public/src/img/safari-pinned-tab.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2290 5110 c-30 -4 -80 -11 -110 -15 -30 -5 -64 -9 -75 -10 -11 -1
+-27 -5 -35 -7 -8 -3 -67 -17 -130 -33 -354 -86 -692 -252 -980 -481 -112 -89
+-328 -307 -411 -414 -223 -287 -394 -635 -475 -965 -55 -224 -67 -325 -70
+-590 -1 -137 2 -279 7 -315 5 -36 12 -83 15 -105 58 -426 274 -908 563 -1255
+55 -66 261 -274 317 -320 337 -277 697 -454 1105 -543 205 -45 279 -52 564
+-51 290 0 386 11 615 69 224 57 502 170 658 269 23 14 44 26 47 26 6 0 198
+131 205 140 3 3 21 17 40 30 19 14 42 32 51 40 8 8 46 42 84 75 96 85 185 178
+264 275 20 25 39 47 42 50 12 11 148 209 181 265 180 302 312 692 345 1025 15
+144 9 546 -10 665 -66 425 -225 807 -477 1150 -82 112 -124 160 -255 290 -345
+345 -749 570 -1220 680 -127 30 -182 39 -315 54 -88 11 -460 11 -540 1z"/>
+</g>
+</svg>

public/src/img/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "./android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "./android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

src/App.vue

@@ -18,6 +18,8 @@
   color: #2c3e50;
   background: url('@/assets/common/Bg.png') no-repeat;
   background-size: 100% 100%;
+  word-break: keep-all;
+  word-wrap: break-word;
 }
 .grecaptcha-badge {
   display: none !important
@@ -114,5 +116,7 @@ video {
 
   list-style: none;
   text-align: center;
+  word-break: keep-all;
+  word-wrap: break-word;
 }
 </style>

src/components/checkBtn.vue

@@ -1,36 +1,51 @@
 <template>
-  <el-button class="mybtn" :loading="timeLeft > 0" @click.stop="beginAction">{{ timeLeft > 0 ? timeLeft + 's' : title }}</el-button>
+  <el-button
+    class="mybtn"
+    :loading="timeLeft > 0"
+    @click.stop="beginAction"
+  >{{ timeLeft > 0 ? timeLeft + 's' : title }}</el-button>
 </template>
 
 <script>
-import {
-  apiCheckActivity,
-} from "@/utils/webapi.js";
+import { apiCheckActivity } from "@/utils/webapi.js";
+import { datafluxRum } from '@cloudcare/browser-rum'
 export default {
   props: {
     title: String,
     time: String,
-    dataid: String
+    itemData: Object
   },
   data() {
     return {
-      timeLeft: 0,
-    }
+      timeLeft: 0
+    };
+  },
+  computed: {
   },
   methods: {
     async beginAction() {
       try {
-        let { errcode, data } = await apiCheckActivity(this.dataid);
+        let { errcode, errmsg, data } = await apiCheckActivity(
+          this.itemData.id
+        );
+        datafluxRum.addRumGlobalContext('task_type',{
+          name: this.itemData.task+'Verify'
+        })
         if (errcode !== 0) {
+          if (errmsg == "twitter already binded") {
+            this.$showErr("twitter already binded");
+          } else if (errmsg == "discord already binded to another account") {
+            this.$showErr("discord already binded to another account");
+          } else {
             this.beginCountdown();
+          }
           return;
         }
         if (data.status === 2) {
-          this.$emit('stateupdate', data.status);
+          this.$emit("stateupdate", data.status);
           return;
         }
         this.beginCountdown();
-
       } catch (err) {
         this.beginCountdown();
       }
@@ -40,12 +55,13 @@ export default {
       let timer = setInterval(() => {
         this.timeLeft--;
         if (this.timeLeft <= 0) {
+          this.$showErr("Please try again");
           clearInterval(timer);
         }
       }, 1000);
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -58,7 +74,7 @@ export default {
   left: 50%;
   transform: translate(-50%, -50%);
   background: #fec25d;
-  background: url('@/assets/home/ButtonFollow.png') no-repeat;
+  background: url("@/assets/home/ButtonFollow.png") no-repeat;
   background-size: 100% 100%;
   color: unset;
   border: none;
@@ -71,7 +87,6 @@ export default {
 .mybtn.is-loading:before {
   background-color: unset;
 }
-
 </style>
 <style lang="scss">
 .mybtn .el-icon-loading {

src/components/errorDialog/errorDialog copy.vue

@@ -1,96 +0,0 @@
-<template>
-  <el-dialog :visible="dialogVisible" :before-close="handleClose" :closable="false" :show-close="false">
-    <div class="top">
-      <div class="top-title"></div>
-      <div class="top-close" @click="handleClose">
-        <img src="@/assets/common/CloseButton.png" alt />
-      </div>
-    </div>
-    <div class="content">
-      <div>{{ errorText }}</div>
-      <div>{{message}}</div>
-    </div>
-    <div class="btn" @click="handleClose">Confirm</div>
-    <!-- <div class="confirm-box">
-    <div class="confirm-title">
-      <span>错误提示</span>
-    </div>
-    <div class="confirm-context"> {{message}}</div>
-  </div>
-  <div  slot="footer" class="dialog-footer">
-    <a-button @click="handleClose" type="primary">Confirm</a-button>
-    </div>-->
-  </el-dialog>
-</template>
-<script>
-
-export default {
-  name: "iErrorMessage",
-  props: {
-    dialogVisible: Boolean,
-    errorText: String
-  },
-  data() {
-    return {};
-  },
-  methods: {
-    handleClose() {
-      this.$emit('handleClose')
-    }
-  }
-};
-</script>
-<style lang="scss" scoped>
-::v-deep .el-dialog {
-  border: 1px solid #924df2;
-  background: #1a1821;
-  width: 600px;
-  border-radius: 80px;
-  padding: 0px 50px;
-  .el-dialog__header {
-    padding: 0;
-  }
-  .el-dialog__body {
-    position: relative;
-    color: #fff;
-    .top {
-      display: flex;
-      height: 10px;
-      .top-title {
-        color: #fff;
-        font-size: 28px;
-        font-family: "Anton-Regular";
-      }
-      .top-close {
-        position: absolute;
-        top: -8%;
-        right: -15%;
-        width: 100px;
-        height: 100px;
-        cursor: pointer;
-        img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-    .content {
-      margin: 20px 0;
-      min-height: 100px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-    .btn {
-      width: 200px;
-      height: 50px;
-      line-height: 50px;
-      margin: 0 auto;
-      color: #000;
-      background: url("./../../assets/home/explore map button.png") no-repeat;
-      background-size: 100% 100%;
-      cursor: pointer;
-    }
-  }
-}
-</style>

src/components/errorDialog/errorDialog.vue

@@ -29,6 +29,7 @@ export default {
   },
   methods: {
     handleClose() {
+      this.nextAction && this.nextAction()
       this.dialogVisible = false;
     }
   }
@@ -72,7 +73,7 @@ export default {
       justify-content: center;
       align-items: center;
       color: #fff;
-      font-size: 14px;
+      font-size: 18px;
       padding-left: 21px;
     }
     .btn {

src/components/errorDialog/index.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import confirm from './errorDialog.vue';
 const iErrorMessage = Vue.extend(confirm);
-function showErrMsg(err) {
+function showErrMsg(err, action) {
 let errmsg = err
   // alert(err,'----')
   // let errmsg = err;
@@ -9,21 +9,68 @@ let errmsg = err
     errmsg = JSON.stringify(err);
   }
   if (errmsg.indexOf('insufficient tickets') > -1) {
-    errmsg = 'Insufficient exploration attempts'
+    errmsg = 'Not enough exploration attempts.'
   } else if(errmsg.indexOf('invalid opcode: opcode 0xd8 not defined') > -1) {
     errmsg = `Claim failed due to insufficient gas.`
   } else if(errmsg.indexOf('User rejected the request') > -1) {
-    errmsg = `User refuses to switch networks`
+    errmsg = `Please select the correct network to continue.`
   } else if(errmsg.indexOf('User denied transaction signature') > -1) {
-    errmsg = `User refuses to sign`
+    errmsg = `Signature required to proceed.`
   } else if(errmsg.indexOf('Internal JSON-RPC error') > -1) {
-    errmsg = `Insufficient gas fees`
+    errmsg = `Insufficient gas fees.`
   } else if(errmsg.indexOf('Hash: not available') > -1) {
-    errmsg = `Operation timed out. Please retry`
+    errmsg = `Operation timed out. Please retry.`
   } else if(errmsg.indexOf('chest already opened') > -1) {
-    errmsg = 'chest already opened'
-  // } else if(errmsg.indexOf('chest already opened') > -1) {
-  //   errmsg = 'Transaction failed please try again'
+    errmsg = 'This chest has been opened already'
+  } else if(errmsg.indexOf('check error: not found guild') > -1) {
+    errmsg = 'Transaction failed please try again'
+  } else if(errmsg.indexOf('execution reverted: TreasureHunt: paused') > -1) {
+    errmsg = 'Event starting soon. Please check back later'
+  } else if(errmsg.indexOf('waiting for chain confirm') > -1) {
+    errmsg = 'waiting for chain confirm'
+  } else if(errmsg.indexOf('voucher not found') > -1) {
+    errmsg = 'Invalid Redemption Code'
+  } else if(errmsg.indexOf('Can not be empty') > -1) {
+    errmsg = 'Redemption Code is required'
+  } else if(errmsg.indexOf('need connect discord first') > -1) {
+    errmsg = `Discord account unlinked. Please ensure the 'Connect Your Discord' quest is complete.`
+  } else if(errmsg.indexOf("You do not hold the required role in the 'Ink' Discord server") > -1) {
+    errmsg = `You do not hold the required role in the 'Ink' Discord server`
+  } else if(errmsg.indexOf("You do not hold the required role in the 'Counter Fire' Discord server") > -1) {
+    errmsg = `"You do not hold the required role in the 'Counter Fire' Discord server"`
+  } else if(errmsg.indexOf('Invalid Voucher Code') > -1) {
+    errmsg = 'Invalid Redemption Code'
+  } else if(errmsg.indexOf('voucher already used') > -1) {
+    errmsg = 'Redemption Code has already been used'
+  } else if(errmsg.indexOf('already claimed') > -1) {
+    errmsg = 'This reward chest has been claimed already'
+  } else if(errmsg.indexOf('had no role') > -1) {
+    errmsg = 'You do not hold the required role in the "Counter Fire" Discord server'
+  } else if(errmsg.indexOf('have not join guild') > -1) {
+    errmsg = 'You do not hold the required role in the "Counter Fire" Discord server'
+  } else if(errmsg.indexOf('twitter already binded') > -1) {
+    errmsg = 'This X account has already been linked'
+  } else if(errmsg.indexOf('discord already binded to another account') > -1) {
+    errmsg = 'This Discord account has already been linked'
+  } else if(errmsg.indexOf("Please complete the 'Connect Your X' quest first") > -1) {
+    errmsg = "Please complete the 'Connect Your X' quest first"
+  } else if(errmsg.indexOf("Please complete the 'Connect Your Discord' quest first") > -1) {
+    errmsg = "Please complete the 'Connect Your Discord' quest first"
+  } else if(errmsg.indexOf("maintance now, please try later") > -1) {
+    errmsg = "maintance now, please try later"
+  } else if(errmsg.indexOf("Delabs Game") > -1) {
+    errmsg = "You do not hold the required role in the 'Delabs Game' Discord server"
+  } else if(errmsg.indexOf('Please try again') > -1) {
+    errmsg = "Verification failed due to high traffic. Please attempt to verify again or try later"
+  } else if(errmsg.indexOf('already claimed') > -1) {
+    errmsg = "Already received"
+  } else if(errmsg.indexOf('You have already boosted the chest') > -1 
+    || errmsg.indexOf('The chest’s boost count has reached the upper limit') > -1
+    || errmsg.indexOf('Today’s boost count has been exhausted') > -1) {
+    // keep the errmsg
+  } else {
+    // 请重试
+    errmsg = 'An unknown on-chain interaction error has occurred. Our technical team cannot resolve this issue directly. Please use a blockchain explorer to check your wallet address and determine if the transaction was recorded or if another issue exists.'
   }
 
   const _confirm = new iErrorMessage({
@@ -31,6 +78,7 @@ let errmsg = err
       return {
         message: errmsg,
         dialogVisible: true,
+        nextAction: action
       };
     },
   });

src/components/header/index.vue

@@ -0,0 +1,516 @@
+<template>
+  <div class="box-top">
+    <div class="left">
+      <div class="left-top">
+        <div class="left-top-logo">
+          <img src="./../../assets/home/mint_Logo1.png" alt />
+        </div>
+        <div class="left-top-points">
+          <div class="left-top-points-left">
+            <li>
+              <div class="top">
+                <span class="textCol4">{{ usesInviteCount }}</span>
+                <div>
+                  <img src="./../../assets/common/Invites.png" alt />
+                </div>
+              </div>
+              <div class="btm">Invites</div>
+              <div class="hover-tips">Successful invitations</div>
+            </li>
+            <li>
+              <div class="top">
+                <span class="textCol3">{{ usesEnhanceCount }}</span>
+                <div>
+                  <img src="./../../assets/common/Icon_Boosting.png" alt />
+                </div>
+              </div>
+              <div class="btm">Boosts</div>
+              <div class="hover-tips">Remaining Daily Boosts</div>
+            </li>
+            <li>
+              <div class="top">
+                <span class="textCol2">{{ todayStepTicket }}</span>
+                <div>
+                  <img src="./../../assets/common/Icon_Explore.png" alt />
+                </div>
+              </div>
+              <div class="btm">Exploration</div>
+              <!-- <div class="hover-tips">Explorations Earned</div> -->
+            </li>
+            <li>
+              <div class="top">
+                <span class="textCol1">{{ usesPoints }}</span>
+                <div>
+                  <img src="./../../assets/common/Icon_Points.png" alt />
+                </div>
+              </div>
+              <div class="btm">Points</div>
+              <!-- <div class="hover-tips">Explorations Earned</div> -->
+            </li>
+            <div class="touxiang">
+              <UserImg :imgSrc="myTwitterAvatar" />
+            </div>
+          </div>
+          <!-- <div class="left-top-points-right">
+                  <img v-if="inWhiteList == 1" src="@/assets/common/wallet-yes.png" alt="">
+                  <img v-else src="@/assets/common/wallet-no.png" alt="">
+                  <div class="hover-tips">Partner NFT collection holders get extra rewards</div>
+          </div>-->
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="right-header">
+        <div class="right-header-left"></div>
+        <div class="right-header-right">
+          <div class="link">
+            <li v-for="(item, index) in linkList" :key="index">
+              <a :href="item.hrefLink" target="_blank" rel="noopener noreferrer">
+                <div>
+                  <img :src="item.imgSrc" alt />
+                </div>
+              </a>
+            </li>
+          </div>
+          <div class="wallet" @click="walletLogin">
+            <span v-if="!showAddress">Connect Wallet</span>
+            <div class="wallet-address" v-else>{{ showAddress }}</div>
+            <div class="wallet-btn">
+              <img
+                v-if="!showAddress"
+                class="hover-show"
+                src="./../../assets/home/Connect Menu1.png"
+                alt
+              />
+              <img v-else class="hover-none" src="@/assets/home/ICON03.png" alt />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="nav-btm">
+        <div class="nav">
+          <li
+            :class="{active: navIndex == index}"
+            v-for="(item, index) in navList"
+            :key="index"
+            @click="navBtn(index)"
+          >
+            <div class="nav-img">
+              <img v-if="navIndex == index" :src="item.imgSrc1" alt />
+              <img v-else :src="item.imgSrc" alt />
+            </div>
+          </li>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getToken } from "@/utils/cookies.js"
+import { formatShowAddress } from "@/utils/utils.js";
+import UserImg from "@/components/userImg.vue";
+export default {
+  components: {
+    UserImg
+  },
+  props: {
+    todayStepTicket: Number,
+    myTwitterAvatar: String,
+  },
+  data() {
+    return {
+      linkList: [
+        {
+          imgSrc: require("@/assets/common/Icon_Disc.png"),
+          hrefLink: "https://discord.gg/counterfire"
+        },
+        {
+          imgSrc: require("@/assets/common/Icon_X.png"),
+          hrefLink: "https://twitter.com/playCounterFire"
+        }
+      ],
+      navList: [
+        {
+          id: 1,
+          name: 1,
+          imgSrc: require("./../../assets/common/P1-up.png"),
+          imgSrc1: require("./../../assets/common/P1.png")
+        },
+        {
+          id: 2,
+          name: 2,
+          imgSrc: require("./../../assets/common/P2-up.png"),
+          imgSrc1: require("./../../assets/common/P2.png")
+        },
+        {
+          id: 4,
+          name: 4,
+          imgSrc: require("./../../assets/common/P3-up.png"),
+          imgSrc1: require("./../../assets/common/P3.png")
+        },
+        {
+          id: 3,
+          name: 3,
+          imgSrc: require("./../../assets/common/P5-up.png"),
+          imgSrc1: require("./../../assets/common/P5.png"),
+        },
+        {
+          id: 5,
+          name: 5,
+          imgSrc: require("./../../assets/common/P4-up.png"),
+          imgSrc1: require("./../../assets/common/P4.png")
+        }
+      ],
+      navIndex: 0,
+      token: "",
+    }
+  },
+  computed:{
+    showAddress() {
+      let address = this.$store.state.user.address;
+      return formatShowAddress(address);
+    },
+    usesPoints() {
+      return this.$store.state.user.userData?.scoreTotal || 0
+    },
+    usesEnhanceCount() {
+      return this.$store.state.user.userData?.enhanceCount || 0
+    },
+    usesInviteCount() {
+      return this.$store.state.user.userData?.inviteCount || 0
+    },
+  },
+  mounted() {
+    this.token = getToken()
+  },
+  methods: {
+    // nav 导航
+    navBtn(index) {
+      this.navIndex = index;
+      this.$emit('toNavBtn',index)
+    },
+    walletLogin() {
+      this.$emit('onWalletLogin')
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.box-top {
+        width: 100%;
+        // height: 100%;
+        display: flex;
+        justify-content: space-between;
+        .left {
+          width: 70%;
+          .left-top {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 20px 40px;
+            position: inherit;
+            z-index: 9;
+            .left-top-logo {
+              width: 200px;
+              height: 100px;
+              img {
+                width: 100%;
+                height: 100%;
+              }
+            }
+            .left-top-points {
+              border-radius: 15px;
+              display: flex;
+              align-items: center;
+              .left-top-points-left {
+                display: flex;
+                height: 50px;
+                background: url('@/assets/common/User-bar.png') no-repeat;
+                background-size: 100% 100%;
+                position: relative;
+                padding-right: 30px;
+                margin-right: 30px;
+                li {
+                  color: #fff;
+                  padding: 10px 20px 5px 40px;
+                  position: relative;
+                  .hover-tips {
+                    display: none;
+                    position: absolute;
+                    top: 35px;
+                    right: 0px;
+                    width: 240px;
+                    height: 100px;
+                    line-height: 90px;
+                    font-size: 14px;
+                    background: url('@/assets/common/WL .png') no-repeat;
+                    background-size: 100% 100%;
+                    z-index: 1;
+                  }
+                  .top {
+                    display: flex;
+                    justify-content: end;
+                    align-items: center;
+                    height: 16px;
+                    font-weight: 600;
+                    text-align: right;
+                    span {
+                      font-size: 16px;
+                    }
+                    .textCol1 {
+                      color: #9950fd;
+                    }
+                    .textCol2 {
+                      color: #fbc059;
+                    }
+                    .textCol3 {
+                      color: #0095ff;
+                    }
+                    div {
+                      width: 17px;
+                      height: 16px;
+                      margin-left: 5px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                      // img {
+                      //   width: 100%;
+                      //   height: 100%;
+                      // }
+                    }
+                  }
+                  .btm {
+                    font-size: 16px;
+                    color: #A8A5AC;
+                    text-align: right;
+                  }
+                }
+                li:nth-child(1) {
+                  cursor: pointer;
+                  img {
+                    width: 17px;
+                    height: 11px;
+                  }
+                  &:hover {
+                    .hover-tips {
+                      display: block;
+                    }
+                  }
+                }
+                li:nth-child(2) {
+                  cursor: pointer;
+                  img {
+                    width: 13px;
+                    height: 13px;
+                  }
+                  &:hover {
+                    .hover-tips {
+                      display: block;
+                      width: 300px;
+                    }
+                  }
+                }
+                li:nth-child(3) {
+                  .top {
+                    div {
+                      img {
+                        width: 15px;
+                        height: 15px;
+                      }
+                    }
+                  }
+                }
+                li:nth-child(4) {
+                  img {
+                    width: 12px;
+                    height: 16px;
+                  }
+                }
+                .touxiang {
+                  width: 60px;
+                  height: 60px;
+                  position: absolute;
+                  top: 50%;
+                  right: -20px;
+                  transform: translateY(-50%);
+                  div {
+                    width: 100%;
+                    height: 100%;
+                  }
+                }
+              }
+              .left-top-points-right {
+                margin-left: 40px;
+                width: 60px;
+                height: 60px;
+                cursor: pointer;
+                position: relative;
+                img {
+                  width: 100%;
+                  height: 100%;
+                }
+                .hover-tips {
+                  display: none;
+                  position: absolute;
+                  top: 35px;
+                  right: -60px;
+                  width: 590px;
+                  height: 120px;
+                  line-height: 110px;
+                  font-size: 14px;
+                  background: url('@/assets/common/WL .png') no-repeat;
+                  background-size: 100% 100%;
+                }
+                &:hover {
+                  .hover-tips {
+                    display: block;
+                  }
+                }
+              }
+            }
+          }
+        }
+        .right {
+          width: 28%;
+          padding: 20px 30px;
+          box-sizing: border-box;
+          .right-header {
+            display: flex;
+            justify-content: space-between;
+            margin: 10px 50px 10px 0;
+            .right-header-left {
+              .right-header-nav {
+                width: 160px;
+                display: flex;
+                align-items: center;
+                li {
+                  width: 40px;
+                  height: 40px;
+                  line-height: 40px;
+                  color: #fff;
+                  background: #432967;
+                  border-radius: 50%;
+                  margin-right: 10px;
+                  box-sizing: content-box;
+                  cursor: pointer;
+                  .nav-img {
+                    width: 100%;
+                    height: 100%;
+                    img {
+                      width: 100px;
+                      height: 100%;
+                    }
+                  }
+                }
+                .active {
+                  background: #9950fd;
+                }
+              }
+            }
+            .right-header-right {
+              display: flex;
+              cursor: pointer;
+              .link {
+                width: 100px;
+                height: 40px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background: #2d2738;
+                border-radius: 20px;
+                margin-right: 20px;
+                li {
+                  display: flex;
+                  align-items: center;
+                  margin: 0 10px;
+                  height: 40px;
+                  a {
+                    display: flex;
+                    align-items: center;
+                    div {
+                      display: flex;
+                      align-items: center;
+                      width: 16px;
+                      height: 15px;
+                      text-align: center;
+                      img {
+                        width: 100%;
+                        height: 100%;
+                      }
+                    }
+                  }
+                }
+              }
+              .wallet {
+                width: 140px;
+                height: 40px;
+                border-radius: 26px;
+                padding-left: 30px;
+                display: flex;
+                align-items: center;
+                background: #2d2738;
+                position: relative;
+                span {
+                  color: #fff;
+                  margin-right: 10px;
+                  font-size: 16px;
+                }
+                .wallet-address {
+                  font-size: 16px;
+                  color: #fff;
+                }
+                .wallet-btn {
+                  z-index: 999;
+                  position: absolute;
+                  top: -22px;
+                  right: -40px;
+                  width: 85px;
+                  height: 85px;
+                  .hover-show {
+                    display: block;
+                  }
+                  .hover-none {
+                    // display: none;
+                  }
+                  img {
+                    width: 100%;
+                    height: 100%;
+                  }
+                }
+              }
+            }
+          }
+          .nav-btm {
+            // width: 380px;
+            margin: 10px auto;
+            margin-bottom: 0px;
+            .nav {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              li {
+                width: 80px;
+                height: 80px;
+                line-height: 80px;
+                color: #fff;
+                border-radius: 50%;
+                cursor: pointer;
+                .nav-img {
+                  width: 100%;
+                  height: 100%;
+                  img {
+                    width: 100%;
+                    height: 100%;
+                  }
+                }
+              }
+              .active {
+                // background: #9950fd;
+              }
+            }
+          }
+        }
+      }
+</style>

src/components/loading.vue

@@ -5,7 +5,7 @@
         <div>
           <img src="@/assets/common/loding .png" alt />
         </div>
-        <p>Please wait. Data is currently loading </p>
+        <p>Please wait. Data is loading</p>
       </div>
     </el-dialog>
   </div>

src/components/walletDialog/index.vue

@@ -2,13 +2,13 @@
   <div class>
     <el-dialog class="dialog-wallet" :visible.sync="walletDialogVisible" :modal="false" :before-close="handleClose">
       <div class="dialog-header">
-        <div class="dialog-header-title">Please connect your wallet</div>
+        <div class="dialog-header-title">Connect Your Wallet</div>
         <div class="dialog-header-close" @click="handleClose">
           <img src="@/assets/common/CloseButton.png" alt />
         </div>
       </div>
       <div class="dialog-content">
-        <p>Connect your wallet to start your Counter Fire journey</p>
+        <p>Start your treasure hunt journey with Hill.</p>
         <div class="wallet-content">
           <li
             v-for="(item, index1) in isWalletList"
@@ -35,6 +35,8 @@
 // import { isWalletConnected, linkWallet, disconnectLink, loginWithEthereum } from './../../wallet/index.js';
 import { setToken, getToken } from './../../utils/cookies.js'
 import {Wallet} from '@/wallet/index.js'
+import { datafluxRum } from "@cloudcare/browser-rum";
+import marketVersion from '@/utils/version.js'
 
 export default {
   props: {
@@ -52,11 +54,11 @@ export default {
           name: "OKXwallet",
           value: "okxwallet",
           imgUrl: require("./../../assets/home/icon_OKXwallet.png")
-        },
-        {
-          name: "WalletConnect",
-          value: "connect",
-          imgUrl: require("./../../assets/home/icon_ConnectWallet.png")
+        // },
+        // {
+        //   name: "WalletConnect",
+        //   value: "connect",
+        //   imgUrl: require("./../../assets/home/icon_ConnectWallet.png")
         }
       ],
       isWallet: !!localStorage.getItem('walletName'),
@@ -74,7 +76,7 @@ export default {
       localStorage.setItem('walletName',val)
       localStorage.setItem('myAddress',res)
       this.myAddress = res
-      await this.getWalletConnected()
+      await this.getWalletConnected(val)
     },
     async disconnect() {
       let walletName = localStorage.getItem('walletName')
@@ -85,9 +87,12 @@ export default {
     },
 
     // 登录
-    async getWalletConnected() {
-      await this.$store.dispatch('user/login', this.activity)
+    async getWalletConnected(val) {
+      let require = {activity: this.activity, val}
+      await this.$store.dispatch('user/login', require)
       await this.$store.dispatch('user/fetchUserState')
+      this.eventGtag()
+      localStorage.setItem('myToken',localStorage.getItem('token') )
       location.reload()
     },
     
@@ -137,6 +142,16 @@ export default {
       localStorage.removeItem('walletName')
       // location.reload()
     },
+
+    // Google gtag打点
+    eventGtag() {
+      this.$gtag.event("login_info", {
+        address_type: this.myAddress,
+      })
+      datafluxRum.addRumGlobalContext('login_info', {
+        version: marketVersion,
+      });
+    },
   }
 };
 </script>
@@ -220,7 +235,7 @@ div {
                 // border: 2px solid #d5befa;
               }
             }
-            li:nth-child(4) {
+            li:nth-child(3) {
               padding-left: 0;
               background: url('@/assets/common/disconnect.png') no-repeat;
               background-size: 100% 100%;

src/main.js

@@ -7,6 +7,7 @@ import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import moment from 'moment'
 import axios from 'axios'
+import VueGtag from "vue-gtag";
 import iErrorMsg from './components/errorDialog/index.js'
 Vue.prototype.$axios = axios
 
@@ -22,6 +23,10 @@ Vue.filter('formatDate', function (value) {
   return moment(value).format('YYYY-MM-DD HH:mm:ss')
 })
 
+Vue.use(VueGtag, {
+  config: { id: "G-4KSHDJ3MGL" }
+}, router);
+
 // Vue.config.errorHandler = function(err, vm, info){
 //   //todo: show error message
 //   console.error('[vue error handler|error]: ', err)
@@ -33,6 +38,22 @@ Vue.filter('formatDate', function (value) {
 //     duration: 3 * 1000
 //   })
 // }
+//引入观测云rum的sdk
+import { datafluxRum } from '@cloudcare/browser-rum'
+datafluxRum.init({
+  applicationId: '20efe220_006a_11ef_941d_2d8bd5427e6e',
+  site: 'https://ap1-rum-openway.guance.one',
+  clientToken: '2OQwyC5Quls2McUi6QIUF7mzxD3ryhHDFwIMQHBBfUoiNCR_OQ',
+  env: process.env.VUE_APP_MODE,
+  version: '1.0.0',
+  service: 'browser',
+  sessionSampleRate: 100,
+  sessionReplaySampleRate: 70,
+  trackInteractions: true,
+  traceType: 'ddtrace', // 非必填，默认为ddtrace，目前支持 ddtrace、zipkin、skywalking_v3、jaeger、zipkin_single_header、w3c_traceparent 6种类型
+  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // 非必填，允许注入trace采集器所需header头部的所有请求列表。可以是请求的origin，也可以是是正则
+});
+// datafluxRum.startSessionReplayRecording()
 
 Vue.config.productionTip = false
 

src/router/index.js

@@ -11,7 +11,7 @@ const routes = [
     component: HomeView
   },
   {
-    path: '/home/:name/:box/:boxId',
+    path: '/home/:code',
     name: 'home',
     component: HomeView
   },

src/store/modules/user.js

@@ -24,8 +24,8 @@ const actions = {
     commit('updateToken', token)
     commit('updateLoginStatus', true)
   },
-  async login({ state, commit}, activity) {
-    let token = await new Wallet().loginWithEthereum(activity)
+  async login({ state, commit}, activityList) {
+    let token = await new Wallet().loginWithEthereum(activityList)
     commit('updateToken', token)
   },
   async fetchUserState({ state, commit }) {
@@ -40,7 +40,7 @@ const actions = {
 // mutations
 const mutations = {
   updateAddress(state, _address) {
-    console.log('update address: ', _address)
+    // console.info('update address: ', _address)
     state.address = _address
   },
   updateChain(state, _chainId) {
@@ -55,7 +55,7 @@ const mutations = {
     state.logined = _status
   },
   updateUserData(state, _data) {
-    console.log(_data)
+    // console.info(_data)
     state.userData = { ...state.userData, ..._data }
   }
 }

src/store/modules/wallet.js

@@ -32,12 +32,12 @@ const actions = {
 // mutations
 const mutations = {
   updateAddress(state, _address) {
-    console.log('update address: ', _address);
+    console.info('update address: ', _address);
     state.address = _address;
     state.connected = true;
   },
   updateChain(state, _chainId) {
-    console.log('update chain: ', _chainId);
+    console.info('update chain: ', _chainId);
     state.chainId = _chainId;
   },
   updateWalletName(state, _walletName) {

src/utils/debounce.js

@@ -0,0 +1,52 @@
+// 防抖
+export const debounce = (fn, delay) => {
+	var time = null
+	return function() {
+		let context = this;//记录一下this指向
+		let args = arguments;
+		//清除定时任务
+		if (time) clearTimeout(time);
+		time = setTimeout(function() {
+			time = null;
+			fn.apply(context, args)
+		}, delay)
+	}
+}
+
+export const throttle=(fn, delay) => {
+	// 时间戳
+	var timeTwo = 0 //new Date();
+	// 定时器
+	var timeThree = null;
+	return function() {
+		let context = this;
+		let args = arguments;
+		var now = new Date()
+
+		// !!!!时间戳实现【new Date()虽然获取结果不是时间戳但是计算结果会自动转化为时间戳】
+		// if(now-timeTwo>=delay){
+		//     fn.apply(context,args);
+		//     timeTwo=new Date();
+		// }
+
+		// !!!!定时器实现
+		// if (!timeThree) {
+		//     timeThree = setTimeout(function () {
+		//         fn.apply(context, args);
+		//         timeThree=null;
+		//     }, delay)
+		// }
+
+		// 结合 ps:最后一次触发在固定频率内会在延迟后触发
+		var wait = delay - (now - timeTwo)
+		clearTimeout(timeThree)
+		if (wait <= 0) {
+			fn.apply(context, args);
+			timeTwo = new Date();
+		} else {
+			timeThree = setTimeout(function() {
+				fn.apply(context, args);
+			}, delay)
+		}
+	}
+}

src/utils/version.js

@@ -0,0 +1,4 @@
+// const version = require('./package.json').version
+
+const marketVersion = '1.0.3'
+export default marketVersion

src/utils/webapi.js

@@ -2,6 +2,7 @@ const API_BASE = process.env.VUE_APP_API_URL.replace('/api', '');
 import CryptoJS from 'crypto-js'
 import axios from 'axios'
 import store from '@/store'
+import fp from '@/utils/fingerprint.js'
 
 const toJson = res => res.json();
 
@@ -65,10 +66,13 @@ export const loginNonce = async (address) => {
   return nonce;
 }
 
-export const loginWithSignature = async (message, signature, activity) => {
+export const loginWithSignature = async (message, signature, activity, wallet) => {
+  let fps = await fp.load();
+  let result = await fps.get()
+  const clientId = result.clientId;
   return fetch(`${API_BASE}/api/wallet/login`, {
     method: "POST",
-    body: JSON.stringify({ message, signature, activity }),
+    body: JSON.stringify({ message, signature, activity,clientId, wallet }),
     headers: { 
       "Content-Type": "application/json",
     },
@@ -197,6 +201,12 @@ export const apiCheckinClaim = async (days) => {
   return httpPost(url, { days })
 }
 
+// 检查签到领取奖励
+export const apiCheckinClaimLeak = async (day) => {
+  const url = `${API_BASE}/api/user/checkin`;
+  return httpPost(url, { day })
+}
+
 // 积分排行榜
 export const apiLeaderBoard = async (data) => {
   const url = `${API_BASE}/api/activity/leaderboard/${data.activity}/${data.page}`;
@@ -221,16 +231,16 @@ export const apiBoxOpen = async (chestId) => {
 
 
 export const checkReCaptcha = async(action) =>{
-  const site_key = '6Ld3xoIpAAAAABW7f5ImgAC6GcWLeDCbt5HPXqe2'
-  return new Promise((resolve,reject) => {
-    window.grecaptcha.ready(function() {
-      window.grecaptcha.execute(site_key, { action }).then(function(token) {
-        resolve && resolve(token)
-      }).catch(e => {
-        reject && reject(e)
-      })
-    });
-  })
+  // const site_key = '6Ld3xoIpAAAAABW7f5ImgAC6GcWLeDCbt5HPXqe2'
+  // return new Promise((resolve,reject) => {
+  //   window.grecaptcha.ready(function() {
+  //     window.grecaptcha.execute(site_key, { action }).then(function(token) {
+  //       resolve && resolve(token)
+  //     }).catch(e => {
+  //       reject && reject(e)
+  //     })
+  //   });
+  // })
 }
 
 // 转发推特
@@ -258,3 +268,15 @@ export const apiNftList = async () => {
   const url = `${API_BASE}/api/partner/nfts`;
   return httpPost(url, {})
 }
+
+// 领取NFT holder 奖励
+export const apiClaimNft = async (contract) => {
+  const url = `${API_BASE}/api/partner/claim`;
+  return httpPost(url, {contract})
+}
+
+// 宝箱激活码
+export const apiVoucherClaim = async (id) => {
+  const url = `${API_BASE}/api/voucher/claim`;
+  return httpPost(url, {id})
+}

src/views/home/awardDialog.vue

@@ -10,16 +10,16 @@
           </div>
         </div>
         <div class="content" v-if="awardData.chests.length != 0">
-          <div class="content-points">
+          <!-- <div class="content-points">
             <div>Points</div>
             <div>
               <span>X {{ awardData.score }}</span>
               <img src="./../../assets/common/Icon_Points.png" alt="">
             </div>
-          </div>
+          </div> -->
           <div class="content-list">
             <li v-if="level1.length !=0">
-              <div class="title">Normal Chest</div>
+              <div class="title">Common Chest</div>
               <div class="box-img">
                 <img :src="require(`./../../assets/box/box${level1[0].level}.png`)" alt="">
               </div>
@@ -29,7 +29,7 @@
               </div>
             </li>
             <li v-if="level2.length !=0">
-              <div class="title">Advanced Chest</div>
+              <div class="title">Rare Chest</div>
               <div class="box-img">
                 <img :src="require(`./../../assets/box/box${level2[0].level}.png`)" alt="">
               </div>
@@ -39,7 +39,7 @@
               </div>
             </li>
             <li v-if="level3.length !=0">
-              <div class="title">Epic  Chest</div>
+              <div class="title">Mythical Chest</div>
               <div class="box-img">
                 <img :src="require(`./../../assets/box/box${level3[0].level}.png`)" alt="">
               </div>
@@ -95,11 +95,53 @@
               <img src="./../../assets/common/Icon_Explore9.png" alt="">
             </div>
           </div>
-          <div>Complete tasks to get more rewards</div>
+          <!-- <div>Complete tasks to get more rewards</div> -->
         </div>
-        <div class="btn" v-if="awardData.isNewUser == 0" @click="toComplete">To complete</div>
+        <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

@@ -3,12 +3,13 @@
     <div class="box-btm-left">
       <div class="box-page">
         <div class="box-title">
-          <div class="box-title-top">
-            Boosting Records
-          </div>
+          <div class="box-title-top">Boost Records</div>
           <div class="line"></div>
         </div>
-        <div class="box-boosting-no" v-if="boostingList.length == 0">
+        <div
+          class="box-boosting-no"
+          v-if="boostingList.length == undefined || boostingList.length <= 0"
+        >
           <div>
             <p>None</p>
           </div>
@@ -17,90 +18,103 @@
           <li v-for="(item, index) in boostingList" :key="index">
             <div class="left">
               <div class="user-img" v-if="index == 0">
-                <img class="one-bg" src="./../../assets/common/Picture frame.png" alt="">
-                <img class="one-img" v-if="item.avatar != ''" :src="item.avatar" alt="">
-                <img class="one-img" v-else src="./../../assets/common/head_default.jpg" alt="">
+                <img class="one-bg" src="./../../assets/common/Picture frame.png" alt />
+                <img class="one-img" v-if="item.avatar != ''" :src="item.avatar" alt />
+                <img class="one-img" v-else src="./../../assets/common/head_default.jpg" alt />
               </div>
               <div class="user-img" v-else>
-                <img v-if="item.avatar != ''" :src="item.avatar" alt="">
-                <img src="./../../assets/common/head_default.jpg" alt="">
+                <img v-if="item.avatar != ''" :src="item.avatar" alt />
+                <img v-else src="./../../assets/common/head_default.jpg" alt />
               </div>
               <div class="user-name">{{ item.nickname }}</div>
             </div>
             <div class="right">
               <div class="records">{{ item.score }}</div>
               <div class="icon">
-                <img src="./../../assets/common/Icon_Points.png" alt="">
+                <img src="./../../assets/common/Icon_Points.png" alt />
               </div>
             </div>
           </li>
         </div>
-        
       </div>
       <div class="box-log">
         <div class="btn" @click="recordsDialogVisible = true">
           <div class="icon">
-            <img src="./../../assets/box/Icon_history.png" alt="">
+            <img src="./../../assets/box/Icon_history.png" alt />
           </div>
-          <div>History Records</div>
+          <div>Historical Records</div>
         </div>
         <div class="btn" @click="boostingDialogVisible = true">
           <div class="icon">
-            <img src="./../../assets/box/Icon_boost.png" alt="">
+            <img src="./../../assets/box/Icon_boost.png" alt />
           </div>
-          <div>Boosting Records</div>
+          <div>Boost Records</div>
         </div>
       </div>
     </div>
     <div class="box-btm-con">
+      <div class="videoContainer" v-if="boxData">
+        <video class="fullscreenVideo" id="bgVid" playsinline autoplay muted loop :src="require(`@/assets/video/chest_bg_${videoKey}.mp4`)">
+        </video>
+      </div>
       <div class="content-no" v-if="!boxData">
         <div class="box-img-no">
-          <img src="./../../assets/box/Unlock .png" alt="">
+          <img src="./../../assets/box/Unlock .png" alt />
         </div>
         <div class="box-to-explore">
-          <p>Explore to get more </p>
-          <p>treasure chests</p>
-          <div class="to-explore-btn" @click="toExplore">
-            To explore
-          </div>
+          <p>Earn Chests by Exploring</p>
+          <div class="to-explore-btn" @click="toExplore">Explore Now</div>
         </div>
       </div>
       <div class="content" v-else>
         <div class="box-btm-con-title">
           <div class="box-btm-con-title-top">
             <div class="icon">
-              <img src="./../../assets/box/Icon_Star_01.png" alt="">
+              <img src="./../../assets/box/Icon_Star_01.png" alt />
+            </div>
+            <div class="bonus">
+              <div>BONUS</div>
+              <div>
+                <span>+{{boxData.scoreBonus}}</span>&nbsp;
+                <img src="@/assets/common/Point_icon_b.png" alt />
+              </div>
             </div>
-            <div>BONUS!</div>
             <div class="icon">
-              <img src="./../../assets/box/Icon_Star_01.png" alt="">
+              <img src="./../../assets/box/Icon_Star_01.png" alt />
             </div>
           </div>
-          <div class="box-btm-con-title-btm">LEGENDARY</div>
+          <div class="box-btm-con-title-btm">
+            <span v-if="boxData.level == 1">COMMON</span>
+            <span v-else-if="boxData.level == 2">RARE</span>
+            <span v-else-if="boxData.level == 3">MYTHICAL</span>
+            <span v-else-if="boxData.level == 4">LEGENDARY</span>
+          </div>
         </div>
         <div class="box-btm-con-img">
           <div>
-            <img v-if="!boxData.level" src="./../../assets/box/Unlock .png" alt="">
-            <img v-else :src="require(`./../../assets/box/box0${boxData.level}.png`)" alt="">
+            <img v-if="!boxData.level" src="./../../assets/box/Unlock .png" alt />
+            <img v-else :src="require(`./../../assets/box/box0${boxData.level}.png`)" alt />
           </div>
         </div>
         <div class="box-btm-con-boost">
           <div class="boost">
-            <p>Invite friends to Boost,</p>
-            <p>Earn more rewards</p>
-            <div class="copy-btn" @click="copyLink(boxData)">
+            <p>Invite others to boost your chest for better rewards.</p>
+            <div class="copy-btn" @click="antiShake(boxData)">
               <div class="icon">
-                <img src="@/assets/box/Invite_icon.png" alt="">
+                <img src="@/assets/box/Invite_icon.png" alt />
               </div>
-              <div>Invite friends to Boost</div>
+              <div class="copy-text">Copy Chest Link</div>
             </div>
           </div>
         </div>
         <div class="box-btm-con-btn">
           <div class="box-btn-content">
             <div class="box-btm-con-btn-bar">
-              <div class="bar" ref="pendingBg"></div>
-              <div class="amount" v-if="(boxData.bounsCount < boxData.maxBounsCount)">{{ boxData.bounsCount }}/{{ boxData.maxBounsCount }}</div>
+              <div class="bar" :style="{width: filteredBoxBar+'%'}" ref="pendingBg"></div>
+              <div
+                class="amount"
+                v-if="(boxData.bounsCount < boxData.maxBounsCount)"
+              >{{ boxData.bounsCount }}/{{ boxData.maxBounsCount }}</div>
               <div class="max" v-else>MAX</div>
             </div>
             <div class="box-btm-con-btn-tips">* Opening treasure will consume a small amount of gas</div>
@@ -112,13 +126,13 @@
     <div class="box-btm-right">
       <div class="box-page">
         <div class="box-title">
-          <div class="box-title-top">
-            My treasure
+          <div class="box-title-top">My Inventory</div>
+          <div class="box-title-btm"></div>
         </div>
-          <div class="box-title-btm">
-          </div>
-        </div>
-        <div class="box-list-no" v-if="!currentPageItems">
+        <div
+          class="box-list-no"
+          v-if="currentPageItems.length == undefined || currentPageItems.length <= 0"
+        >
           <div>
             <p>None</p>
           </div>
@@ -126,15 +140,28 @@
         <div class="box-list" v-else>
           <li v-for="(item, index) in currentPageItems" :key="index" @click="getBoxData(item)">
             <div class="box-img" v-if="item.id == boxData.id">
-              <img :src="require(`./../../assets/box/box${item.level}.png`)" alt="">
+              <img :src="require(`./../../assets/box/box${item.level}.png`)" alt />
             </div>
             <div class="box-img" v-else>
-              <img class="box-hover-no" :src="require(`./../../assets/box/box0${item.level}.png`)" alt="">
-              <img class="box-hover-yes" :src="require(`./../../assets/box/box${item.level}.png`)" alt="">
+              <img
+                class="box-hover-no"
+                :src="require(`./../../assets/box/box0${item.level}.png`)"
+                alt
+              />
+              <img
+                class="box-hover-yes"
+                :src="require(`./../../assets/box/box${item.level}.png`)"
+                alt
+              />
             </div>
             <div class="box-bg"></div>
             <div class="box-name">
-              Boosting <span v-if="item.bounsCount == item.maxBounsCount" class="success">({{ item.bounsCount }}/{{ item.maxBounsCount }})</span><span v-else>({{ item.bounsCount }}/{{ item.maxBounsCount }})</span>
+              Boosting
+              <span
+                v-if="item.bounsCount == item.maxBounsCount"
+                class="success"
+              >({{ item.bounsCount }}/{{ item.maxBounsCount }})</span>
+              <span v-else>({{ item.bounsCount }}/{{ item.maxBounsCount }})</span>
             </div>
           </li>
         </div>
@@ -145,11 +172,17 @@
     </div>
 
     <!-- 开箱子记录 -->
-    <el-dialog class="records-dialog" :visible="recordsDialogVisible" :modal="false" :before-close="recordsHandleClose" :show-close="false">
+    <el-dialog
+      class="records-dialog"
+      :visible="recordsDialogVisible"
+      :modal="false"
+      :before-close="recordsHandleClose"
+      :show-close="false"
+    >
       <div class="top">
         <div class="top-title">Historical Records</div>
         <div class="top-close" @click="recordsDialogVisible = false">
-          <img src="./../../assets/common/CloseButton.png" alt="">
+          <img src="./../../assets/common/CloseButton.png" alt />
         </div>
       </div>
       <div class="content">
@@ -159,9 +192,7 @@
           </template>
           <el-table-column prop="rank" label="Action">Open the Treasure</el-table-column>
           <el-table-column label="Time">
-            <template
-              slot-scope="scope"
-            >{{ scope.row.time | formatDate }}</template>
+            <template slot-scope="scope">{{ scope.row.time | formatDate }}</template>
           </el-table-column>
           <!-- <el-table-column label="Username" :width="180">
             <template
@@ -173,11 +204,12 @@
               <div v-if="row.score" class="points">
                 <div>
                   <span>{{ row.score }}</span>
-                <img src="./../../assets/common/Icon_Points.png" alt="">
+                  <img src="./../../assets/common/Icon_Points.png" alt />
                 </div>
                 <div v-if="row.items !== undefined && row.items.length > 0">
-                  <span v-if="row.items !== undefined && row.items.length > 0">{{ row.items[0].name }}</span>
-                  <img src="./../../assets/common/whitelist01.png" alt="">
+                  <span>{{ row.items[0].name }}</span>
+                  <img v-if="row.items[0].name == 'NFT'" src="./../../assets/common/common_icon_NFT.png" alt />
+                  <img v-else src="./../../assets/common/wallet-yes.png" alt />
                 </div>
               </div>
             </template>
@@ -185,16 +217,26 @@
         </el-table>
       </div>
       <div class="btm">
-        <PaginationDialog  @onChangePage="onRecordsChangePage" :pageSize="recordsPageSize" :total="recordsList.length" />
+        <PaginationDialog
+          @onChangePage="onRecordsChangePage"
+          :pageSize="recordsPageSize"
+          :total="recordsList.length"
+        />
       </div>
     </el-dialog>
 
     <!-- 我的助力记录 -->
-    <el-dialog class="boosting-dialog" :visible="boostingDialogVisible" :modal="false" :before-close="boostingHandleClose" :show-close="false">
+    <el-dialog
+      class="boosting-dialog"
+      :visible="boostingDialogVisible"
+      :modal="false"
+      :before-close="boostingHandleClose"
+      :show-close="false"
+    >
       <div class="top">
         <div class="top-title">Boosting Records</div>
         <div class="top-close" @click="boostingDialogVisible = false">
-          <img src="./../../assets/common/CloseButton.png" alt="">
+          <img src="./../../assets/common/CloseButton.png" alt />
         </div>
       </div>
       <div class="content">
@@ -202,19 +244,14 @@
           <template slot="empty">
             <div>No Data</div>
           </template>
-          <el-table-column label="Action">Open the Treasure</el-table-column>
           <el-table-column label="Time">
-            <template
-              slot-scope="scope"
-            >{{ scope.row.time | formatDate }}</template>
+            <template slot-scope="scope">{{ scope.row.time | formatDate }}</template>
           </el-table-column>
           <el-table-column label="Username">
-            <template
-              slot-scope="scope"
-            >
+            <template slot-scope="scope">
               <div class="touxiang">
-              <UserImg :imgSrc="scope.row.avatar" />
-              {{ scope.row.nickname }}
+                <UserImg class="userImg" :imgSrc="scope.row.avatar" />
+                <span>{{ scope.row.nickname }}</span>
               </div>
             </template>
           </el-table-column>
@@ -222,36 +259,41 @@
             <template slot-scope="scope">
               <div class="points">
                 <span>{{ scope.row.score }}</span>
-                <img src="./../../assets/common/Icon_Points.png" alt="">
+                <img src="./../../assets/common/Icon_Points.png" alt />
               </div>
             </template>
           </el-table-column>
         </el-table>
       </div>
       <div class="btm">
-        <PaginationDialog  @onChangePage="onBoostingChangePage" :pageSize="boostingPageSize" :total="myRecordsList.length" />
+        <PaginationDialog
+          @onChangePage="onBoostingChangePage"
+          :pageSize="boostingPageSize"
+          :total="myRecordsList.length"
+        />
       </div>
     </el-dialog>
 
-    <Loading :Loading="isLoading" />
+    <Loading v-if="isLoading" :Loading="isLoading" />
   </div>
 </template>
 
 <script>
-import { getToken } from './../../utils/cookies.js'
-import Pagination from './../../components/pagination.vue'
-import { sendOpenChest, sendToChain } from './../../utils/chainapi.js'
-import { apiBoxOpen } from '@/utils/webapi.js'
-import PaginationDialog from '@/components/paginationDialog.vue'
-import Loading from '@/components/loading.vue'
-import UserImg from "@/components/userImg.vue"
+import { getToken } from "./../../utils/cookies.js";
+import Pagination from "./../../components/pagination.vue";
+import { sendOpenChest, sendToChain } from "./../../utils/chainapi.js";
+import { apiBoxOpen } from "@/utils/webapi.js";
+import PaginationDialog from "@/components/paginationDialog.vue";
+import Loading from "@/components/loading.vue";
+import UserImg from "@/components/userImg.vue";
+import { debounce, throttle } from "@/utils/debounce.js";
 
 export default {
   components: {
     Pagination,
     PaginationDialog,
     Loading,
-    UserImg,
+    UserImg
   },
   data() {
     return {
@@ -260,9 +302,7 @@ export default {
       pageBoxList: [],
       boxData: {},
       userData: {},
-      boostingList: [
-        
-      ],
+      boostingList: [],
       pageSize: 6,
       currentPage: 1,
       recordsDialogVisible: false,
@@ -270,92 +310,13 @@ export default {
       recordsPageSize: 8,
       recordsCurrentPage: 1,
       boostingDialogVisible: false,
-
-      // myRecordsList: [
-      //   {
-      //     username: 'username',
-      //     name: 'username',
-      //     points: '12',
-      //     address: 'addressaddress',
-      //     post: '0000',
-      //   },
-      //   {
-      //     username: 'username',
-      //     name: 'username',
-      //     points: '12',
-      //     address: 'addressaddress',
-      //     post: '0000',
-      //   },
-      //   {
-      //     username: 'username',
-      //     name: 'username',
-      //     points: '12',
-      //     address: 'addressaddress',
-      //     post: '0000',
-      //   },
-      //   {
-      //     username: 'username',
-      //     name: 'username',
-      //     points: '12',
-      //     address: 'addressaddress',
-      //     post: '0000',
-      //   },
-      //   {
-      //     username: 'username',
-      //     name: 'username',
-      //     points: '12',
-      //     address: 'addressaddress',
-      //     post: '0000',
-      //   },
-      //   {
-      //     username: 'username',
-      //     name: 'username',
-      //     points: '12',
-      //     address: 'addressaddress',
-      //     post: '0000',
-      //   },
-      //   {
-      //     username: 'username',
-      //     name: 'username',
-      //     points: '12',
-      //     address: 'addressaddress',
-      //     post: '0000',
-      //   },
-      //   {
-      //     username: 'username',
-      //     name: 'username',
-      //     points: '12',
-      //     address: 'addressaddress',
-      //     post: '0000',
-      //   },
-      //   {
-      //     username: 'username',
-      //     name: 'username',
-      //     points: '12',
-      //     address: 'addressaddress',
-      //     post: '0000',
-      //   },
-      //   {
-      //     username: 'username',
-      //     name: 'username',
-      //     points: '12',
-      //     address: 'addressaddress',
-      //     post: '0000',
-      //   },
-      //   {
-      //     username: 'username',
-      //     name: 'username',
-      //     points: '12',
-      //     address: 'addressaddress',
-      //     post: '0000',
-      //   }
-      // ],
-
       myRecordsList: [],
       boostingPageSize: 6,
       boostingCurrentPage: 1,
-      isLoading: false
-    }
+      isLoading: false,
+      originalNumber: 5,
+      divisor: 1,
+    };
   },
   computed: {
     // 计算当前页应该显示的数据
@@ -365,8 +326,8 @@ export default {
       // }
       let start = (this.currentPage - 1) * this.pageSize;
       let end = start + this.pageSize;
-      this.pageBoxList = this.boxList.slice(start, end)
-      this.boxData = this.pageBoxList[0]
+      this.pageBoxList = this.boxList.slice(start, end);
+      this.boxData = this.pageBoxList[0];
       return this.pageBoxList;
     },
 
@@ -377,78 +338,94 @@ export default {
       // }
       let start = (this.recordsCurrentPage - 1) * this.recordsPageSize;
       let end = start + this.recordsPageSize;
-      return this.recordsList.slice(start, end)
+      return this.recordsList.slice(start, end);
     },
 
     // 计算我的助力分页
     boostingCurrentPageItems() {
       if (this.myRecordsList.length == 0) {
-        return this.myRecordsList
+        return this.myRecordsList;
       }
       let start = (this.boostingCurrentPage - 1) * this.boostingPageSize;
       let end = start + this.boostingPageSize;
-      return this.myRecordsList.slice(start, end)
+      return this.myRecordsList.slice(start, end);
+    },
+
+    // 助力进度条
+    filteredBoxBar() {
+      if (this.boxData.bounsCount) {
+        return Math.floor(
+          (Number(this.boxData.bounsCount) /
+            Number(this.boxData.maxBounsCount)) *
+          100
+        );
+      } else {
+        return 0;
+      }
+    },
+    videoKey() {
+      if(this.filteredBoxBar <= 20) {
+        return 1
+      } else if(this.filteredBoxBar <= 40) {
+        return 2
+      } else if(this.filteredBoxBar <= 60) {
+        return 3
+      } else if(this.filteredBoxBar <= 80) {
+        return 4
+      } else if(this.filteredBoxBar <= 100) {
+        return 5
+      }
     },
   },
   mounted() {
-    this.token = getToken()
+    this.token = getToken();
     if (this.token) {
       this.$nextTick(() => {
-        this.getMyBoxList()
-        this.openBoxLog()
-        this.getMyHistoricalLog()
-      })
+        this.getMyBoxList();
+        this.openBoxLog();
+        this.getMyHistoricalLog();
+      });
     }
   },
   methods: {
     // 我的宝箱
     async getMyBoxList() {
-      let res = await this.$axios
-        .get(process.env.VUE_APP_API_URL+"/api/chest/list", {
+      let res = await this.$axios.get(
+        process.env.VUE_APP_API_URL + "/api/chest/list",
+        {
           params: {},
           headers: { Authorization: `Bearer ${this.token}` }
-        })
-      this.boxList = res.data.data
-      this.boxData = res.data.data[0]
-      if(this.boxList.length > 0) {
-        await this.getHistorical(this.boxData.id)
-        if(this.boxData.bounsCount == 0) {
-          this.$refs.pendingBg.style.width = '0%'
-        } else {
-          let pending = (Number(this.boxData.maxBounsCount) / Number(this.boxData.bounsCount))
-          this.$refs.pendingBg.style.width = `${pending}%`
         }
+      );
+      this.boxList = res.data.data;
+      this.boxData = res.data.data[0];
+      if (this.boxList !== undefined && this.boxList.length > 0) {
+        await this.getHistorical(this.boxData.id);
       }
     },
 
     // 分页
     onChangePage(val) {
-      this.currentPage = val
+      this.currentPage = val;
     },
 
     // 修改中间宝箱数据
     async getBoxData(data) {
-      this.boxData = data
-      await this.getHistorical(data.id)
-      if(this.boxData.bounsCount == 0) {
-        this.$refs.pendingBg.style.width = '0%'
-      } else {
-        let pending = (Number(this.boxData.bounsCount) / Number(this.boxData.maxBounsCount)) *100
-        this.$refs.pendingBg.style.width = `${pending}%`
-      }
+      this.boxData = data;
+      await this.getHistorical(data.id);
+      this.filteredBoxBar;
     },
     // 助力记录
     async getHistorical(id) {
-      let res = await this.$axios
-        .post(
+      let res = await this.$axios.post(
         process.env.VUE_APP_API_URL + "/api/chest/enhance/list",
         { chestid: id },
         {
           headers: { Authorization: `Bearer ${this.token}` }
         }
-        )
+      );
       if (res.data.errcode == 0) {
-          this.boostingList = res.data.data
+        this.boostingList = res.data.data;
       }
     },
 
@@ -456,87 +433,100 @@ export default {
     async openBoxToChain(id) {
       let address = this.$store.state.user.address;
       if (!this.$store.state.wallet.connected || !address) {
-        throw new Error('wallet not connected')
+        throw new Error("wallet not connected");
       }
-      let storeageKey
-      this.isLoading = true
+      let storeageKey;
+      this.isLoading = true;
       try {
-        storeageKey = await sendToChain('chest_open', address, id)
-      
+        storeageKey = await sendToChain("chest_open", address, id);
       } catch (err) {
-        this.$showErr(err)
-        this.isLoading = false
-        return 
+        this.$showErr(err);
+        this.isLoading = false;
+        return;
       }
 
       let serTimeId = setInterval(async () => {
         try {
-          let { errcode, errmsg, data } = await apiBoxOpen(id)
+          let { errcode, errmsg, data } = await apiBoxOpen(id);
           if (errcode) {
             if (errcode !== 12) {
               // 状态不是等待链上确认的, 都提示错误
-              this.$message.error(errmsg)
-              this.isLoading = false
-              clearInterval(serTimeId)
+              // this.$message.error(errmsg)'
+              this.isLoading = false;
+              clearInterval(serTimeId);
             }
           } else {
             // alert(`领取成功,显示奖励: ${JSON.stringify(data)}`)
-            this.getMyBoxList()
-            this.openBoxLog()
-            this.isLoading = false
-            this.$emit('awardDialog', data)
-            localStorage.removeItem(storeageKey)
-            clearInterval(serTimeId)
+            this.boostingList = [];
+            this.getMyBoxList();
+            this.openBoxLog();
+            this.boostingList = [];
+            this.isLoading = false;
+            this.$emit("awardDialog", data);
+            localStorage.removeItem(storeageKey);
+            clearInterval(serTimeId);
           }
         } catch (err) {
-          this.isLoading = false
+          this.isLoading = false;
           // this.$message.error(`claim task reward error: ${err}`)
         }
-      }, 3000)
+      }, 3000);
     },
 
     // 开箱子记录
     async openBoxLog() {
-      let res = await this.$axios.get(process.env.VUE_APP_API_URL+'/api/chest/open/history', {
+      let res = await this.$axios.get(
+        process.env.VUE_APP_API_URL + "/api/chest/open/history",
+        {
           params: {},
           headers: { Authorization: `Bearer ${this.token}` }
-        })
-        this.recordsList = res.data.data
+        }
+      );
+      this.recordsList = res.data.data;
     },
     rewBoxList() {
-      this.getMyBoxList()
+      this.getMyBoxList();
     },
 
     // 开箱记录分页
     onRecordsChangePage(val) {
-      this.recordsCurrentPage = val
+      this.recordsCurrentPage = val;
     },
 
     // 我的助力记录
     async getMyHistoricalLog() {
-      let res = await this.$axios.post(process.env.VUE_APP_API_URL+'/api/user/enhance/list', {},{headers: { Authorization: `Bearer ${this.token}` }})
+      let res = await this.$axios.post(
+        process.env.VUE_APP_API_URL + "/api/user/enhance/list",
+        {},
+        { headers: { Authorization: `Bearer ${this.token}` } }
+      );
       if (res.data.errcode == 0) {
-        this.myRecordsList = res.data.data
+        this.myRecordsList = res.data.data;
+      } else {
+        // console.info('[getMyHistoricalLog error]',res)
       }
     },
     // 我的助力记录分页
     onBoostingChangePage(val) {
-      this.boostingCurrentPage = val
+      this.boostingCurrentPage = val;
     },
 
     // 获取用户状态
     getUserState() {
-      this.$axios.get(process.env.VUE_APP_API_URL+'/api/user/state',{ params: '',
-          headers: { Authorization: `Bearer ${this.token}` },
-        }).then(res => {
-          localStorage.setItem('userData', JSON.stringify(res.data.data))
+      this.$axios
+        .get(process.env.VUE_APP_API_URL + "/api/user/state", {
+          params: "",
+          headers: { Authorization: `Bearer ${this.token}` }
         })
+        .then(res => {
+          localStorage.setItem("userData", JSON.stringify(res.data.data));
+        });
     },
 
     // 复制助力链接
     copyLink(data) {
-      this.userData = JSON.parse(localStorage.getItem("userData"))
-      let url = `${location.protocol}//${location.host}/home/new=${this.userData.code}/box=${data.shareCode}/id=${data.id}`
+      this.userData = JSON.parse(localStorage.getItem("userData"));
+      let url = `${location.protocol}//${location.host}/home/box=${data.shareCode}`;
       let oInput = document.createElement("input");
       oInput.value = url;
       document.body.appendChild(oInput);
@@ -545,21 +535,29 @@ export default {
       oInput.className = "oInput";
       oInput.style.display = "none";
       this.$message.success("Copy succeeded");
+      let address_type = localStorage.getItem("myAddress");
+      this.$gtag.event("invite_new", {
+        address_type: address_type
+      });
     },
 
+    antiShake: throttle(function(data) {
+      this.copyLink(data);
+    }, 5000),
+
     // 关闭弹窗
     recordsHandleClose() {
-      this.recordsDialogVisible = false
+      this.recordsDialogVisible = false;
     },
     boostingHandleClose() {
-      this.boostingDialogVisible = false
+      this.boostingDialogVisible = false;
     },
 
     // 去探索页面
     toExplore() {
-      this.$emit('toExplore', 1)
-    },
-  },
+      this.$emit("toExplore", 1);
+    }
+  }
 };
 </script>
 
@@ -600,7 +598,7 @@ export default {
             .user-img {
               width: 40px;
               height: 40px;
-              background: url('@/assets/common/Picture frame .png') no-repeat;
+              background: url("@/assets/common/Picture frame .png") no-repeat;
               background-size: 100% 100%;
               padding: 3px;
               img {
@@ -674,7 +672,7 @@ export default {
           transform: translate(-50%, -50%);
           width: 200px;
           height: 140px;
-          background: url('./../../assets/box/none01.png') no-repeat;
+          background: url("./../../assets/box/none01.png") no-repeat;
           background-size: 100% 100%;
           p {
             position: absolute;
@@ -730,8 +728,23 @@ export default {
     width: 720px;
     height: 700px;
     background: #fff;
-    background: url('./../../assets/box/Bg_chest.png') no-repeat;
-    background-size: 100% 100%;
+    background: #1a1821;
+    position: relative;
+    top: -20px;
+    .videoContainer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      // width: 720px;
+      // height: 700px;
+      width: 100%;
+      height: 100%;
+      z-index: 0;
+      video {
+        width: 100%;
+        height: 100%;
+      }
+    }
     .content-no {
       position: relative;
       height: 100%;
@@ -759,17 +772,18 @@ export default {
       }
     }
     .content {
+      position: inherit;
       .box-btm-con-title {
         width: 400px;
         // height: 100px;
         margin: 0 auto;
-        font-family: 'Anton-Regular';
+        margin-top: 20px;
+        font-family: "Anton-Regular";
         .box-btm-con-title-top {
           display: flex;
           justify-content: center;
           align-items: center;
           width: 100%;
-          color: #FFC35B;
           font-size: 58px;
           .icon {
             width: 25px;
@@ -782,6 +796,24 @@ export default {
               height: 100%;
             }
           }
+          .bonus {
+            display: flex;
+            height: 100px;
+            color: #ffc35b;
+            div {
+              display: flex;
+              align-items: center;
+              margin-left: 20px;
+              span {
+                font-size: 40px;
+                color: #fff;
+              }
+              img {
+                width: 30px;
+                height: 40px;
+              }
+            }
+          }
         }
         .box-btm-con-title-btm {
           font-size: 32px;
@@ -789,7 +821,7 @@ export default {
       }
       .box-btm-con-img {
         width: 400px;
-        height: 220px;
+        height: 240px;
         margin: 0 auto;
         div {
           width: 260px;
@@ -803,13 +835,16 @@ export default {
         }
       }
       .box-btm-con-boost {
+        position: inherit;
         width: 240px;
         // height: 100px;
         padding-top: 20px;
         box-sizing: border-box;
         margin: 0 auto;
+        z-index: 99;
         p {
-          font-size: 14px;
+          font-size: 16px;
+          font-weight: 700;
           line-height: 1.2;
         }
         .copy-btn {
@@ -817,8 +852,8 @@ export default {
           justify-content: center;
           align-items: center;
           padding: 20px 0px;
-          font-size: 12px;
-          background: url('@/assets/box/button_copy.png') no-repeat;
+          font-size: 14px;
+          background: url("@/assets/box/button_copy.png") no-repeat;
           background-size: 100% 100%;
           border-radius: 20px;
           cursor: pointer;
@@ -829,9 +864,14 @@ export default {
       }
       .box-btm-con-btn {
         width: 700px;
-        height: 200px;
+        height: 170px;
         margin: 0 auto;
+        position: relative;
         .box-btn-content {
+          position: absolute;
+          top: -60px;
+          left: 50%;
+          transform: translateX(-50%);
           height: 100%;
           position: relative;
           .box-btm-con-btn-bar {
@@ -847,13 +887,13 @@ export default {
             // justify-content: center;
             align-items: center;
             margin: 0 auto;
-            background: url('@/assets/box/Progress bar_MAX bg.png') no-repeat;
+            background: url("@/assets/box/Progress bar_MAX bg.png") no-repeat;
             background-size: 100% 100%;
             .bar {
               // width: 400px;
               height: 36px;
               border-radius: 20px;
-              background: url('@/assets/box/Progress bar_MAX.png') no-repeat;
+              background: url("@/assets/box/Progress bar_MAX.png") no-repeat;
               background-size: 100% 100%;
             }
             .amount {
@@ -873,7 +913,7 @@ export default {
             width: 400px;
             margin: 0 auto;
             margin-top: 10px;
-            font-size: 10px;
+            font-size: 12px;
             text-align: left;
             position: absolute;
             left: 50%;
@@ -885,9 +925,9 @@ export default {
             height: 200px;
             line-height: 200px;
             position: absolute;
-            top: 20%;
+            top: 15%;
             right: 5%;
-            background: url('@/assets/box/Button_Ceiling.png') no-repeat;
+            background: url("@/assets/box/Button_Ceiling.png") no-repeat;
             background-size: 100% 100%;
             cursor: pointer;
           }
@@ -955,7 +995,7 @@ export default {
             left: 50%;
             top: 30%;
             transform: translateX(-50%);
-            background: url('@/assets/box/Treasure Chest_bg.png') no-repeat;
+            background: url("@/assets/box/Treasure Chest_bg.png") no-repeat;
             background-size: 100% 100%;
             z-index: 0;
           }
@@ -993,7 +1033,7 @@ export default {
           transform: translate(-50%, -50%);
           width: 200px;
           height: 140px;
-          background: url('./../../assets/box/none01.png') no-repeat;
+          background: url("./../../assets/box/none01.png") no-repeat;
           background-size: 100% 100%;
           p {
             position: absolute;
@@ -1074,8 +1114,8 @@ export default {
                     color: #fff;
                     border: 0px;
                     .points {
-                      color: #9950FA;
-                      font-family: 'Poppins';
+                      color: #9950fa;
+                      font-family: "Poppins";
                       font-weight: 600;
                       font-size: 16px;
                       display: flex;
@@ -1095,6 +1135,7 @@ export default {
                       div:nth-child(2) {
                         width: 105px;
                         margin-left: 20px;
+                        font-size: 14px;
                         display: flex;
                         align-items: center;
                         img {
@@ -1106,7 +1147,15 @@ export default {
                     .touxiang {
                       display: flex;
                       align-items: center;
-                      justify-content: space-between;
+                      justify-content: center;
+                      .userImg {
+                        margin-right: 20px;
+                      }
+                      span {
+                        display: inline-block;
+                        width: 140px;
+                        text-align: left;
+                      }
                     }
                   }
                 }
@@ -1148,5 +1197,12 @@ export default {
       }
     }
   }
+  .box-loading {
+    // position: absolute;
+    // top: -200%;
+    // left: -200%;
+    width: 0;
+    height: 0;
+  }
 }
 </style>

src/views/home/calenView.vue

@@ -4,13 +4,14 @@
     </el-calendar> -->
     <div class="calen-list">
       <li v-for="(item,index) in current" :key="index">
-        <el-tooltip class="item" effect="dark" :content="item.day" :open-delay="100" placement="top-start">
+        <el-tooltip v-if="!item.claimed" class="item" effect="dark" :content="item.day" :open-delay="100" placement="top-start">
           <div class="weiqiandao" v-if="item.type == -1">
             <img src="@/assets/home/Icon_xross.png" alt="">
           </div>
           <div class="qiandao " v-if="item.type == 1">
             <img src="@/assets/home/Checkmark.png" alt="">
           </div>
+          <div class="louqian" v-if="item.type == 3" @click="getCheckinClaimLeak(item.day)">R</div>
           <div class="weidaoshijian" v-if="item.type == 0">{{ index+1 }}</div>
           <div class="weidaoshijian highlight" v-if="item.type == 2">{{ index+1 }}</div>
         </el-tooltip>
@@ -21,7 +22,7 @@
 
 <script>
 import { getToken } from '@/utils/cookies.js'
-import { apiCheckin } from '@/utils/webapi.js'
+import { apiCheckin, apiCheckinClaimLeak } from '@/utils/webapi.js'
 import { formatDate, getDayBegin } from '@/utils/utcdate.util.js'
 const ONE_DAY = 24 * 60 * 60 * 1000;
 
@@ -44,14 +45,20 @@ export default {
   methods: {
     // 初始化日历样式
     generateMonth() {
-      const days = Math.floor((this.activityData.endTime - this.activityData.startTime) /ONE_DAY)
+      let beginTime = new Date(this.activityData.startTime)
+      let endTime = new Date(this.activityData.endTime)
+      let i = 0
       const now = getDayBegin(new Date())
-      for(let i = 0; i < days; i++ ){
+      while(beginTime <= endTime) {
         let current = i * ONE_DAY + this.activityData.startTime
-        if(current <= this.activityData.endTime) {
-          const type = current < now ? -1 : 0
-          this.current.push({day: formatDate(new Date(current)), type, time: current, index: i + 1})
+        beginTime = new Date(current)
+        if (beginTime > endTime) {
+          break
         }
+        const day = formatDate(beginTime)
+        const type = current < now ? -1 : 0
+        this.current.push({day, type, time: current, index: i + 1})
+        i++
       }
       this.getCheckInit()
     },
@@ -59,6 +66,7 @@ export default {
     // 获取签到列表
     async getCheckInit(){
       // let dayTime = Math.round(new Date())
+      // debugger
       let token = getToken()
       let datas = []
       // 如果没登录, 就只显示日期
@@ -78,12 +86,23 @@ export default {
       for(let i = 0; i < this.current.length; i++) {
         if(map.has(this.current[i].day)) {
           this.current[i].type = 1
+          if(!map.get(this.current[i].day).claimed) {
+            this.current[i].type = 3
+          }
         } else if (this.current[i].day === today) {
           this.current[i].type = 2
         }
       }
     },
 
+    // 补领漏签
+    async getCheckinClaimLeak(days) {
+      let res = await apiCheckinClaimLeak(days)
+      // let { errcode,errmsg} = res
+      this.getCheckInit()
+      this.$emit('getCheckinLeak')
+    },
+
     // 签到后更新签到状态
     renewCheckInit() {
       this.getCheckInit()
@@ -183,5 +202,12 @@ export default {
     box-shadow: 0 0 10px #ffc107;
     border-radius: 13px;
   }
+  .louqian {
+    background: url('@/assets/home/Reissue.png') no-repeat;
+    background-size: 100% 100%;
+    border-radius: 10px;
+    color: #000 !important;
+    cursor: pointer;
+  }
 }
 </style>

src/views/home/gameView.vue

@@ -99,7 +99,7 @@ export default {
           if (errcode) {
             if (errcode !== 13) {
               // 状态不是等待链上确认的, 都提示错误
-              this.$message.error(errmsg)
+              // this.$message.error(errmsg)
               this.isLoading = false
               clearInterval(serTimeId)
             } 
@@ -108,16 +108,23 @@ export default {
             this.isLoading = false
             cc.mainAnim.setCurrPos(getTotalUsed)
             cc.mainAnim.setData(step)
+            if(step >=8) {
+              let stepTimeId = setInterval(() => {
+                this.$emit('awardDialog', data)
+                clearInterval(stepTimeId)
+              },8*2000)
+            } else {
               let stepTimeId = setInterval(() => {
                 this.$emit('awardDialog', data)
                 clearInterval(stepTimeId)
               },step*2000)
+            }
             localStorage.removeItem(storeageKey)
             clearInterval(serTimeId)
           }
         } catch (err) {
           this.isLoading = false
-          this.$message.error(`claim task reward error: ${err}`)
+          // this.$message.error(`claim task reward error: ${err}`)
         }
       }, 3000)
     },

src/views/home/helpDialog.vue

@@ -2,33 +2,75 @@
   <div>
     <el-dialog class="Explore-dialog" :visible.sync="helpDialogVisible" :modal="false" :before-close="helpDialog">
       <div class="top">
-        <div class="top-title">Boosting Chest</div>
+        <div class="top-title">Chest Boosting</div>
         <div class="top-close" @click="helpDialog">
           <img src="./../../assets/common/CloseButton.png" alt="">
         </div>
       </div>
       <div class="content">
         <div class="content-left">
+          <div class="videoContainer">
+            <video class="fullscreenVideo" id="bgVid" playsinline autoplay muted loop>
+              <source v-if="filteredBoxBar <= 20" src="@/assets/video/chest_bg_1.mp4" type="video/mp4" />
+              <source v-else-if="filteredBoxBar <= 40" src="@/assets/video/chest_bg_2.mp4" type="video/mp4" />
+              <source v-else-if="filteredBoxBar <= 60" src="@/assets/video/chest_bg_3.mp4" type="video/mp4" />
+              <source v-else-if="filteredBoxBar <= 80" src="@/assets/video/chest_bg_4.mp4" type="video/mp4" />
+              <source v-else-if="filteredBoxBar <= 100" src="@/assets/video/chest_bg_5.mp4" type="video/mp4" />
+            </video>
+          </div>
+          <div class="content-left-box">
             <div class="user-info">
               <div class="user-info-img">
-              <img v-if="!boxData.avatar" src="@/assets/common/head_default.jpg" alt="" >
-              <UserImg v-else :imgSrc="boxData.avatar" />
+                <UserImg :imgSrc="boxData.avatar" />
+              </div>
+              <div class="user-info-name" v-if="boxData.nickname">{{ boxData.nickname }}: <span>Please boost my chest! </span></div>
+              <div class="user-info-name" v-else>Username: <span>Please boost my chest! </span></div>
+            </div>
+            <div class="box-btm-con-title">
+              <div class="box-btm-con-title-top">
+                <div class="icon">
+                  <img src="./../../assets/box/Icon_Star_01.png" alt />
+                </div>
+                <div class="bonus">
+                  <div>BONUS </div>
+                  <div>
+                    <span> &nbsp;+{{boxData.scoreBonus}}</span>&nbsp;
+                    <img src="@/assets/common/Point_icon_b.png" alt />
+                  </div>
+                </div>
+                <div class="icon">
+                  <img src="./../../assets/box/Icon_Star_01.png" alt />
+                </div>
+              </div>
+              <div class="box-btm-con-title-btm">
+                <span v-if="boxData.level == 1">COMMON</span>
+                <span v-else-if="boxData.level == 2">RARE</span>
+                <span v-else-if="boxData.level == 3">MYTHICAL</span>
+                <span v-else-if="boxData.level == 4">LEGENDARY</span>
               </div>
-            <div class="user-info-name" v-if="boxData.nickname">{{ boxData.nickname }}: <span>Thank you for your support! </span></div>
-            <div class="user-info-name" v-else>UserName: <span>Thank you for your support! </span></div>
             </div>
             <div class="con">
               <img v-if="!boxData.level" src="./../../assets/box/Unlock .png" alt="">
               <img v-else :src="require(`./../../assets/box/box0${boxData.level}.png`)" alt="">
             </div>
+            <div class="box-btm-con-btn-bar">
+              <div class="bar" :style="{width: filteredBoxBar+'%'}" ref="pendingBg"></div>
+              <div
+                class="amount"
+                v-if="(boxData.chestCurrent < boxData.chestMax)"
+              >{{ boxData.chestCurrent }}/{{ boxData.chestMax }}</div>
+              <div class="max" v-else>MAX</div>
+            </div>
             <div class="btn" v-if="!token" @click="linkWallet">Wallet Connect</div>
             <div class="btn" v-else>
-            <div class="btn" @click="helpBtn">Boosting</div>
+              <div class="btn" @click="helpBtn">Boost</div>
+            </div>
+            <div class="box-btm-con-btn-tips">* Opening treasure will consume a small amount of gas</div>
           </div>
         </div>
         <div class="content-right">
           <div class="content-right-title">
-            Boosting Records
+           Chest Boost Points
           </div>
           <div class="line"></div>
           <div class="box-boosting-no" v-if="helpLogList == undefined || helpLogList.length <= 0">
@@ -97,7 +139,6 @@ export default {
       boxData: {},
       token: null,
       helpLogList: [],
-      boxId: '',
       boxCode: '',
       boxState: {},
       isNewUser: 0,
@@ -105,30 +146,40 @@ export default {
       isLoading: false,
     }
   },
+  computed: {
+    // 助力进度条
+    filteredBoxBar() {
+      if (this.boxData) {
+        return Math.floor(
+          (Number(this.boxData.chestCurrent) /
+            Number(this.boxData.chestMax)) *
+          100
+        );
+      } else {
+        return 0;
+      }
+    },
+  },
   mounted() {
     this.token = getToken()
-    if(this.$route.params.name) {
-      if(this.$route.params.boxId.split("id=")[1] != 'undefined') {
-        this.boxId = this.$route.params.boxId.split("id=")[1];
-        this.boxCode = this.$route.params.box.split("box=")[1];
+    if(this.$route.params.code) {
+      if(this.$route.params.code.split("=")[0] == 'box') {
+        this.boxCode = this.$route.params.code.split("=")[1];
         this.getBoxData()
         if(this.token) {
           this.getHelpBoxLog()
-          // this.helpConfirm()
-          this.initBoxState(this.boxCode,this.boxId)
-        }
-      // } else {
-      //   this.$emit('handleClose')
+          this.initBoxState(this.boxCode)
+        }
       }
     }
-    
   },
   methods: {
     // 宝箱信息接口
     async getBoxData() {
-      let res = await this.$axios.post(process.env.VUE_APP_API_URL+'/api/chest/enhance/state', {chestId: this.boxId},{})
+      let res = await this.$axios.post(process.env.VUE_APP_API_URL+'/api/chest/enhance/state', {code: this.boxCode},{})
       if(res.data.errcode == 0) {
         this.boxData = res.data.data
+        console.log(this.boxData)
       } else if(res.data.errcode == 14) {
         this.$showErr(res)
       }
@@ -136,42 +187,32 @@ export default {
 
     // 获取帮助的宝箱助力记录
     async getHelpBoxLog() {
-      if (this.$route.params.boxId != undefined) {
-        let rtoken = await checkReCaptcha("chest_share");
+      if (this.$route.params.code != undefined) {
+        // let rtoken = await checkReCaptcha("chest_share");
         let res = await this.$axios.post(
           process.env.VUE_APP_API_URL+"/api/chest/enhance/list",
-          { chestid: this.boxId, rtoken: rtoken },
+          {
+            code: this.boxCode
+            // , rtoken: rtoken 
+          },
           {
             headers: { Authorization: `Bearer ${this.token}` }
           }
         );
-        if (res.data.errcode == 0) {
+        // if (res.data.errcode == 0) {
           this.helpLogList = res.data.data;
-        }
-      }
-    },
-
-    // 领取助力奖励 || 判断是否是新用户
-    async helpConfirm() {
-      if(this.$route.params.name != undefined) {
-        let newInvite = this.$route.params.name.split("new=")[1];
-        // let rtoken = await checkReCaptcha("invite_user");
-        // let res = await this.$axios.get(process.env.VUE_APP_API_URL+"/api/activity/upload_invite_code", {
-        //   params: { code: newInvite, rtoken: rtoken },
-        //   headers: { Authorization: `Bearer ${this.token}` }
-        // });
-        let res = await apiUploadInviteCode(newInvite)
-        return
-        if (res.data.errcode == 0) {
-          this.isNewUser = 0
-        } else {
-          this.isNewUser = 1
-        }
+        // }
       }
     },
 
     // 宝箱助力
     async helpBtn() {
+      // debugger
+      if(this.boxState.isopened){
+        //todo:
+        this.$showErr('chest already opened')
+        return
+      }
       let address = localStorage.getItem("myAddress")
       // 3、是否已经助力此宝箱
       if(this.boxState.enhanced == 0) {
@@ -182,13 +223,13 @@ export default {
               // 4、开始助力
                 await this.sendEnhanceReq(this.boxCode)
             } else {
-          this.$showErr('Boosting limit')
+              this.$showErr('The chest’s boost count has reached the upper limit.')
             }
         } else {
-        this.$showErr('Insufficient boosting attempts')
+          this.$showErr('Today’s boost count has been exhausted.')
         }
       } else {
-        this.$showErr('Boosting already performed')
+        this.$showErr('You have already boosted the chest.')
       }
       
       
@@ -231,11 +272,13 @@ export default {
             await this.$store.dispatch('user/fetchUserState')
             localStorage.removeItem(storeageKey)
             clearInterval(serTimeId)
-          } else if (errcode !== 14) {
+          } else if (errcode === 13){
+            //nothing to do
+          }else {
             // 状态不是等待链上确认的, 都提示错误
             this.isLoading = false;
             this.$emit('handleClose')
-            this.$message.error(errmsg)
+            this.$showErr(errmsg)
             clearInterval(serTimeId)
           }
         } catch (err) {
@@ -246,9 +289,13 @@ export default {
     },
 
     // 助力状态查询
-    async initBoxState(code,chestId) {
-      let res = await this.$axios.post(process.env.VUE_APP_API_URL+'/api/chest/enhance/state',{code: code, chestId: chestId, },{headers: { Authorization: `Bearer ${this.token}` }})
+    async initBoxState(boxCode) {
+      let res = await this.$axios.post(process.env.VUE_APP_API_URL+'/api/chest/enhance/state',{code: boxCode, },{headers: { Authorization: `Bearer ${this.token}` }})
+      if(res.data.errcode == 0){
         this.boxState = res.data.data
+      }else if(res.data.errcode == 14){
+        this.boxState.isopened = true
+      }
     },
 
     // 关闭弹窗
@@ -306,9 +353,21 @@ div {
         .content-left {
           width: 400px;
           height: 400px;
-          background: url('./../../assets/box/Bg_chest.png') no-repeat;
-          background-size: 100% 100%;
           position: relative;
+          .videoContainer {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            video {
+              width: 100%;
+              height: 100%;
+            }
+          }
+          .content-left-box {
+            // background: url('./../../assets/box/Bg_chest.png') no-repeat;
+            // background-size: 100% 100%;
+            position: inherit;
+            z-index: 99;
             .user-info {
               display: flex;
               align-items: center;
@@ -316,24 +375,9 @@ div {
               top: -10px;
               left: 0;
               .user-info-img {
-                width: 40px;
-                height: 40px;
-                overflow: hidden;
+                // width: 40px;
+                // height: 40px;
                 margin-right: 20px;
-                background: url('@/assets/common/Picture frame .png') no-repeat;
-                background-size: 100% 100%;
-                padding: 3px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                img {
-                  display: flex;
-                  align-items: center;
-                  justify-content: center;
-                  width: 100%;
-                  height: 100%;
-                  border-radius: 50%;
-                }
               }
               .user-info-name {
                 font-size: 10px;
@@ -344,31 +388,103 @@ div {
                 }
               }
             }
+            .box-btm-con-title {
+              font-family: "Anton-Regular";
+              .box-btm-con-title-top {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                .icon {
+                  width: 15px;
+                  height: 15px;
+                  display: flex;
+                  justify-content: center;
+                  margin: 0 10px;
+                  margin-top: 40px;
+                  img {
+                    width: 100%;
+                    height: 100%;
+                  }
+                }
+                .bonus {
+                  display: flex;
+                  height: 50px;
+                  color: #ffc35b;
+                  margin-top: 40px;
+                  div {
+                    display: flex;
+                    align-items: center;
+                    font-size: 38px;
+                    span {
+                      color: #fff;
+                      font-size: 24px;
+                    }
+                    img {
+                      width: 20px;
+                      height: 28px;
+                    }
+                  }
+                }
+              }
+              .box-btm-con-title-btm {
+                font-weight: 700;
+                font-size: 28px;
+              }
+            }
             .con {
-              width: 240px;
-              height: 180px;
+                width: 220px;
+                height: 160px;
+                margin: 0 auto;
+                img {
+                  width: 100%;
+                  height: 100%;
+                }
+            }
+            .box-btm-con-btn-bar {
+              width: 300px;
+              height: 30px;
+              line-height: 30px;
+              margin-top: 10px;
+              padding: 3px 5px;
+              display: flex;
+              align-items: center;
+              margin: 0 auto;
+              background: url("@/assets/box/Progress bar_MAX bg.png") no-repeat;
+              background-size: 100% 100%;
+              position: relative;
+              .bar {
+                height: 28px;
+                border-radius: 20px;
+                background: url("@/assets/box/Progress bar_MAX.png") no-repeat;
+                background-size: 100% 100%;
+              }
+              .amount {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+              }
+              .max {
                 position: absolute;
                 top: 50%;
                 left: 50%;
                 transform: translate(-50%, -50%);
-              img {
-                width: 100%;
-                height: 100%;
               }
             }
             .btn {
                 width: 200px;
                 height: 50px;
                 line-height: 50px;
-              position: absolute;
-              bottom: 0;
-              left: 50%;
-              transform: translateX(-50%);
+                margin: 0 auto;
                 color: #000;
                 background: url('./../../assets/home/explore map button.png') no-repeat;
                 background-size: 100% 100%;
                 cursor: pointer;
             }
+            .box-btm-con-btn-tips {
+              font-size: 10px;
+            }
+          }
         }
         .content-right {
           width: 360px;

src/views/home/logDialog.vue

@@ -21,7 +21,7 @@
             <template slot-scope="scope">
               <div class="touxiang">
                 <UserImg :imgSrc="scope.row.avatar" />
-                {{ scope.row.nickname }}
+                <span>{{ scope.row.nickname }}</span>
               </div>
             </template>
           </el-table-column>
@@ -75,29 +75,34 @@ export default {
       //   }
       // ],
       invitationList: [],
+      token: ''
     };
   },
   computed: {
     // 计算我的助力分页
     logCurrentPageItems() {
-      if(this.invitationList.length == 0){
-        return this.invitationList
-      }
+      if(this.invitationList !== undefined && this.invitationList.length > 0){
         let start = (this.logCurrentPage - 1) * this.logPageSize;
         let end = start + this.logPageSize;
       return this.invitationList.slice(start, end)
+      } else {
+        return this.invitationList
+      }
+      
     },
   },
   mounted() {
+    this.token = getToken();
+    if(this.token) {
       this.getMyInvitationData();
+    }
   },
   methods: {
     // 我的邀请列表
     async getMyInvitationData() {
-      let token = getToken();
       let res = await this.$axios.get(process.env.VUE_APP_API_URL+"/api/activity/invite_list", {
         params: "",
-        headers: { Authorization: `Bearer ${token}` }
+        headers: { Authorization: `Bearer ${this.token}` }
       });
       // ToDo
       this.invitationList = res.data.data
@@ -196,6 +201,11 @@ div {
                     display: flex;
                     align-items: center;
                     justify-content: space-evenly;
+                    span {
+                      display: inline-block;
+                      width: 134px;
+                      text-align: left;
+                    }
                   }
                 }
               }

src/views/home/nftPartner.vue

@@ -0,0 +1,506 @@
+<template>
+  <div class="content-right">
+    <div class="title">
+      <div class="title-left">
+        <div>Collection</div>
+        <!-- <el-button @click="generate">激活码</el-button> -->
+      </div>
+    </div>
+    <div class="check-code">
+      <div class="check-code-icon">
+        <img src="@/assets/common/Enter.png" alt />
+      </div>
+      <div class="check-code-input">
+        <el-input v-model="checkCodeInput" placeholder="Enter Chest Redemption Code" />
+      </div>
+      <div class="check-code-btn" @click="submitCode">
+        Confirm
+      </div>
+    </div>
+    <div class="quest">
+      <div class="partner-list">
+        <div class="partner">
+          <div>Partner</div>
+          <!-- <div>Chain</div> -->
+          <div>Rewards</div>
+        </div>
+        <div class="nft-list">
+          <li v-for="(item, index) in nftsList" :key="index">
+            <div class="quest-item">
+              <div class="content-rewards-left">
+                <div class="img-logo">
+                  <a v-if="item.link != ''" :href="item.link" target="_blank">
+                    <img :src="item.logo" alt />
+                  </a>
+                </div>
+                <div class="desc">
+                  <!-- <el-tooltip placement="top" :content="item.collection"> -->
+                    <h3>{{ item.collection }}</h3>
+                  <!-- </el-tooltip> -->
+                  <p>{{ item.projectName }}</p>
+                </div>
+                <div class="desc-hover">
+                <div>
+                  {{item.collection}}
+                </div>
+              </div>
+              </div>
+              <!-- <div class="chain">
+                <a v-if="item.contract.slice(0,2) == '0x'" :href="`https://etherscan.io/address/${item.contract.replace(/_\d$/, '')}`" target="_blank">
+                  <img src="@/assets/common/logo-etherscan.png" alt="">
+                </a>
+              </div> -->
+              <div class="Rewards">
+                <div class="box-img">
+                  <img :src="require(`@/assets/box/box0${item.tier}.png`)" alt />
+                </div>
+                <div v-if="token != null" class="btn">
+                  <div class="is-btn">
+                    <div v-if="item.status == 0" class="check-no" @click.stop="chickNftClaim(item)">
+                      <span>Verify</span>
+                    </div>
+                    <div v-if="item.status == 1" class="check-yes">
+                      <img src="@/assets/home/check-yes.png" alt />
+                    </div>
+                  </div>
+                </div>
+                <div class="light-btn" v-else @click="onWalletLogin">Connect Wallet</div>
+              </div>
+            </div>
+          </li>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getToken } from "@/utils/cookies.js";
+import { apiNftList, apiVoucherClaim, apiClaimNft } from '@/utils/webapi.js'
+const BASE52_ALPHABET = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
+const isValidVoucherCode = (str) => {
+  let reg = new RegExp(`^[${BASE52_ALPHABET}]{12}$`)
+  return reg.test(str)
+}
+export default {
+  data() {
+    return {
+      checkCodeInput: '',
+      nftsList: [],
+      token: '',
+      time: 10,
+      timeLeft: 0,
+    }
+  },
+  computed: {
+  },
+  created() {
+    this.token = getToken();
+    this.getNftList()
+  },
+  methods() {
+  },
+  methods: {
+    onWalletLogin() {
+      this.$emit('onWalletLogin')
+    },
+    async getNftList() {
+      let res
+      if(this.token) {
+        res = await this.$axios.get(
+          process.env.VUE_APP_API_URL + "/api/partner/nfts", {
+          params: {},
+          headers: { Authorization: `Bearer ${this.token}` }
+        });
+      } else {
+        res = await this.$axios.get(
+          process.env.VUE_APP_API_URL + "/api/partner/nfts"
+        );
+      }
+      this.nftsList = res.data.data;
+      this.buildPartnerImg()
+      this.sortActionList()
+    },
+
+    async buildPartnerImg(){
+      this.nftsList.forEach(item => {
+        if(item.projectName && !item.logo){
+          item.logo = `https://treasure.counterfire.games/opimg/${item.projectName.replaceAll(' ', '_')}.jpg`
+        }
+      })
+    },
+
+    async sortActionList() {
+      let overlst = []
+      let lst = []
+      this.nftsList.forEach(item => {
+        if(item.status == 1){
+          overlst.push(item)
+        }else{
+          lst.push(item)
+        }
+      })
+      this.nftsList.length = 0
+      this.nftsList.push(...lst)
+      this.nftsList.push(...overlst)
+    },
+
+    async generate() {
+      let res = await this.$axios.post(process.env.VUE_APP_API_URL + "/api/voucher/generate",
+        {num: 20},
+        { headers: { Authorization: `Bearer ${this.token}` } })
+    },
+
+    // 提交nft合作邀请码
+    async submitCode() {
+      if (this.token) {
+        if (this.checkCodeInput) {
+          if(!isValidVoucherCode(this.checkCodeInput)) {
+            this.$showErr('Invalid Voucher Code')
+          }
+          let { errcode, errmsg, data } = await apiVoucherClaim(this.checkCodeInput)
+          if(!errcode) {
+            this.$emit('awardDialog',data)
+          } else if(errcode == 11) {
+            this.$showErr(errmsg)
+          } else if(errmsg == 'voucher already used') {
+            this.$showErr('voucher already used')
+          }
+        } else {
+          this.$showErr(`Can not be empty`)
+        }
+      } else {
+        this.onWalletLogin()
+      }
+    },
+
+    // 领取NFT holder 奖励
+    async chickNftClaim(itemData) {
+      let discordId = this.$store.state.user.userData?.discordId || undefined
+      const nextAction = function(){
+        this.$emit('toNavIndex')
+      }
+      if(discordId) {
+        try {
+          let { errcode, errmsg, data } = await apiClaimNft(itemData.contract);
+          if (!errcode) {
+            this.getNftList()
+            this.$emit('awardDialog',data)
+          } else if(errcode == 10) {
+            this.$showErr(errmsg)
+          } else if(errcode == 13) {
+            this.$showErr(`${errmsg}`)
+          } else if(errcode == 14) {
+            if(itemData.contract == 'INK') {
+              this.$showErr("You do not hold the required role in the 'Ink' Discord server")
+            } else if(itemData.projectName == "Delabs Games") {
+              this.$showErr(`${itemData.projectName}`)
+            } else {
+              this.$showErr("had no role")
+            }
+          } else if(errcode == 20) {
+            this.$showErr(errmsg)
+          } else if(errcode == 21) {
+            // this.$showErr(errmsg, nextAction)
+            if(itemData.contract == 'INK') {
+              this.$showErr("You do not hold the required role in the 'Ink' Discord server")
+            } else if(itemData.projectName == "Delabs Games") {
+              this.$showErr(`${itemData.projectName}`)
+            } else {
+              this.$showErr("You do not hold the required role in the 'Counter Fire' Discord server")
+              this.$emit('toNavIndex')
+            }
+          }
+        } catch (err) {
+          // this.$message.error(`claim partner reward error: ${err}`);
+        }
+      } else {
+        this.$emit('toNavIndex')
+        this.$showErr('need connect discord first')
+      }
+    },
+    beginCountdown(step) {
+      this.timeLeft = parseInt(step);
+      let timer = setInterval(() => {
+        this.timeLeft--;
+        if (this.timeLeft <= 0) {
+          clearInterval(timer);
+        }
+      }, 1000);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.content-right {
+  width: 100%;
+  z-index: 999;
+  padding: 10px;
+  box-sizing: border-box;
+  background: #2d2738;
+  background: url("./../../assets/home/quest log bg.png") no-repeat;
+  background-size: 100% 100%;
+  border-radius: 20px;
+  .title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+    .title-left {
+      color: #fff;
+      font-size: 20px;
+      font-family: "Poppins-SemiBold";
+      font-weight: 700;
+      margin-bottom: 10px;
+    }
+  }
+  .check-code {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: url("@/assets/common/check-input.png") no-repeat;
+    background-size: 100% 100%;
+    margin-bottom: 10px;
+    display: flex;
+    // align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    box-sizing: border-box;
+    .check-code-icon {
+      width: 30px;
+      height: 25px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .check-code-input {
+      width: 240px;
+      ::v-deep .el-input {
+        .el-input__inner {
+          border: 0px;
+          background: #1e1b26;
+          color: #fff;
+        }
+        input::-webkit-input-placeholder {
+          color: #4e475b;
+        }
+      }
+    }
+    .check-code-btn {
+      width: 90px;
+      height: 25px;
+      font-size: 12px;
+      background: #fec25d;
+      color: #000;
+      border-radius: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+    }
+  }
+  .quest {
+    background: #1e1b26;
+    padding: 10px;
+    width: 100%;
+    box-sizing: border-box;
+    border-radius: 20px;
+    .partner-list {
+      height: 380px;
+      .partner {
+        display: flex;
+        align-items: center;
+        height: 30px;
+        font-size: 14px;
+        // justify-content: space-between;
+        padding: 0 10px;
+        div {
+          width: 240px;
+          height: 100%;
+          line-height: 30px;
+        }
+        div:nth-child(2) {
+          width: 160px;
+        }
+      }
+      .nft-list {
+        height: 350px;
+        overflow-y: scroll;
+        li .quest-item {
+          display: flex;
+          align-items: center;
+          min-height: 60px;
+          padding: 10px;
+          border-radius: 10px;
+          font-size: 14px;
+          margin: 10px 0;
+          box-sizing: border-box;
+          color: #fff;
+          position: relative;
+          .content-rewards-left {
+            display: flex;
+            width: 240px;
+            .img-logo {
+              width: 40px;
+              height: 40px;
+              margin-right: 10px;
+              img {
+                width: 100%;
+                height: 100%;
+                border-radius: 50%;
+              }
+            }
+            .desc {
+              width: 140px;
+              position: relative;
+              h3 {
+                width: 160px;
+                overflow:hidden; //超出的文本隐藏
+                text-overflow:ellipsis;
+                white-space:nowrap;
+                text-align: left;
+                font-size: 14px;
+                font-family: "Poppins-SemiBold";
+                cursor: pointer;
+              }
+              p {
+                width: 100px;
+                overflow:hidden; //超出的文本隐藏
+                text-overflow:ellipsis;
+                white-space:nowrap;
+                font-family: "Poppins-Light";
+                font-size: 12px;
+                text-align: left;
+              }
+            }
+          }
+          .chain {
+            width: 60px;
+            height: 40px;
+            a {
+              display: inline-block;
+              width: 30px;
+              height: 30px;
+              border-radius: 50%;
+              margin: 0 auto;
+              img {
+                width: 100%;
+                height: 100%;
+              }
+            }
+            
+          }
+          .Rewards {
+            width: 160px;
+            // padding: 0 10px;
+            box-sizing: border-box;
+            display: flex;
+            justify-content: space-between;
+            justify-content: center;
+            align-items: center;
+            .box-img {
+              width: 50px;
+              height: 40px;
+              img {
+                width: 100%;
+                height: 100%;
+              }
+            }
+            .btn {
+              width: 50px;
+              margin-left: 10px;
+              .is-btn {
+                display: flex;
+                justify-content: center;
+                .check-no {
+                  background: #ffc35b;
+                  color: #000;
+                  padding: 5px 10px;
+                  font-weight: 400;
+                  border-radius: 20px;
+                  font-size: 12px;
+                  cursor: pointer;
+                }
+                .check-yes {
+                  width: 30px;
+                  height: 30px;
+                  img {
+                    width: 100%;
+                    height: 100%;
+                  }
+                }
+              }
+            }
+          }
+          .desc-hover {
+            display: none;
+            width: 100%;
+            // height: 100%;
+            position: absolute;
+            top: -30px;
+            left: 50%;
+            transform: translateX(-50%);
+            // position: relative;
+            div {
+              // max-width: 260px;
+              position: absolute;
+              top: 0;
+              left: 26%;
+              transform: translateX(-24%);
+              background: #303133;
+              padding: 10px;
+              border-radius: 5px;
+              font-size: 12px;
+            }
+          }
+        }
+        .quest-item {
+          .content-rewards-left:hover {
+            .desc-hover {
+              display: block;
+            }
+          }
+        }
+        li:nth-child(1) .quest-item {
+          .desc-hover {
+            top: 30px;
+          }
+        }
+        &::-webkit-scrollbar {
+          width: 5px;
+        }
+        &::-webkit-scrollbar-track {
+          background: #171220;
+          border-radius: 2px;
+        }
+        &::-webkit-scrollbar-corner {
+          display: block;
+        }
+        &::-webkit-scrollbar-thumb {
+          height: 15px;
+          background: #9950fd;
+          border-radius: 10px;
+        }
+      }
+    }
+  }
+  .tips {
+    margin-top: 10px;
+    font-size: 14px;
+    color: #fff;
+  }
+  .light-btn {
+    background: #fec25d;
+    color: #000;
+    font-size: 12px;
+    padding: 5px 4px;
+    border-radius: 15px;
+    margin-left: 10px;
+    cursor: pointer;
+  }
+}
+</style>>

src/views/home/ranking.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ranking">
     <div class="ranking-header">
-      {{ activityName }}
+      Leaderboard
     </div>
     <div class="ranking-content">
       <div class="ranking-content-left">
@@ -30,7 +30,7 @@
               </div>
               <div class="list-btm" v-if="token">
                 <div class="ranking" v-if="usesRank == '-'">{{ usesRank }}</div>
-                <div class="ranking" v-else-if="usesRank >= 100">Not in the top 100 yet</div>
+                <div class="ranking" v-else-if="usesRank >= 100"><span>100</span>+</div>
                 <div class="ranking" v-else>{{ usesRank+1 }}</div>
               </div>
               <div class="list-btm" v-else>
@@ -39,7 +39,7 @@
             </div>
           </div>
         </div>
-        <div v-if="rankingTableData.length == 0" class="ranking-content-left-forward-no">
+        <div v-if="rankingTableData == undefined || rankingTableData.length <= 0" class="ranking-content-left-forward-no">
           <div>
             <p>None</p>
           </div>
@@ -59,11 +59,17 @@
               </div>
               <div class="forward-list-item-btm" v-if="!rankingTableData[1]">
                 <div class="name">none</div>
-                <div>0</div>
+                <div class="points">
+                  <span>0</span>
+                  <img src="@/assets/common/Icon_Points.png" alt="">
+                </div>
               </div>
               <div class="forward-list-item-btm" v-else>
                 <div class="name">{{ rankingTableData[1].nickname }}</div>
-                <div>{{ rankingTableData[1].score }}</div>
+                <div class="points">
+                  <span>{{ rankingTableData[1].score }}</span>
+                  <img src="@/assets/common/Icon_Points.png" alt="">
+                </div>
               </div>
             </li>
             <li>
@@ -76,11 +82,20 @@
                   <img v-else-if="rankingTableData[0].avatar == ''" src="@/assets/common/head_default.jpg" alt="">
                   <img v-else :src="rankingTableData[0].avatar" alt="">
                 </div>
-                <!-- <div>{{ rankingTableData[0].nickname.slice(0,4) }}{{ '…'+rankingTableData[0].nickname.slice(-4) }}</div> -->
               </div>
-              <div class="forward-list-item-btm">
+              <div class="forward-list-item-btm" v-if="!rankingTableData[0]">
+                <div class="name">none</div>
+                <div class="points">
+                  <span>0</span>
+                  <img src="@/assets/common/Icon_Points.png" alt="">
+                </div>
+              </div>
+              <div class="forward-list-item-btm" v-else>
                 <div class="name">{{ rankingTableData[0].nickname }}</div>
-                <div>{{ rankingTableData[0].score }}</div>
+                <div class="points">
+                  <span>{{ rankingTableData[0].score }}</span>
+                  <img src="@/assets/common/Icon_Points.png" alt="">
+                </div>
               </div>
             </li>
             <li>
@@ -96,11 +111,17 @@
               </div>
               <div class="forward-list-item-btm" v-if="!rankingTableData[2]">
                 <div class="name">none</div>
-                <div>0</div>
+                <div class="points">
+                  <span>0</span>
+                  <img src="@/assets/common/Icon_Points.png" alt="">
+                </div>
               </div>
               <div class="forward-list-item-btm" v-else>
                 <div class="name">{{ rankingTableData[2].nickname }}</div>
-                <div>{{ rankingTableData[2].score }}</div>
+                <div class="points">
+                  <span>{{ rankingTableData[2].score }}</span>
+                  <img src="@/assets/common/Icon_Points.png" alt="">
+                </div>
               </div>
             </li>
           </div>
@@ -128,7 +149,7 @@
                   <UserImg :imgSrc="item.avatar" />
                 </div>
                 <div class="user-name">
-                  <div class="label">Name</div>
+                  <div class="label">Username</div>
                   <div class="name">{{ item.nickname }}</div>
                 </div>
               </div>
@@ -208,7 +229,7 @@ export default  {
       myScoreTotal: 0,
       myRankTotal: '-',
       historyDialogVisible: false,
-      logPageSize: 6,
+      logPageSize: 8,
       logCurrentPage: 1,
     }
   },
@@ -262,6 +283,7 @@ export default  {
     async getLeaderBoard () {
       let res = await this.$axios.get(process.env.VUE_APP_API_URL+`/api/activity/leaderboard/uaw_activity/0`)
       this.rankingTableData = res.data.data
+      // console.log('rankingTableData' ,this.rankingTableData)
     },
     // 获取用户状态
     getUserState() {
@@ -298,13 +320,13 @@ export default  {
         return type = `Exploration`
       } else if(type.includes('open_chest')) {
         // 开宝箱
-        return type = `Open the Treasure`
+        return type = `Chest Opened`
       } else if(type.includes('enhance_chest_gift')) {
         // 助力
-        return type = `Boosting`
+        return type = `Boost`
       } else if(type.includes('invite_rebate')) {
         // 邀请收益
-        return type = `Invitation Earning`
+        return type = `Invitation Earned`
       } else if(type.includes('')) {
         // 任务
         return type = `Task`
@@ -325,8 +347,8 @@ export default  {
     line-height: 40px;
     text-align: left;
     position: absolute;
-    top: -50px;
-    left: 50px;
+    top: -25px;
+    left: 75px;
     font-size: 42px;
     font-weight: 700;
     font-family: "Anton-Regular";
@@ -338,19 +360,22 @@ export default  {
       width: 60%;
       position: relative;
       .ranking-content-left-points {
-        width: 160px;
+        width: 170px;
         padding: 20px;
         background: url('./../../assets/ranking/My points bg.png') no-repeat;
         background-size: 100% 100%;
-        margin-top: 10px;
+        margin-top: 40px;
+        margin-left: 30px;
         .list {
           .my-points {
             p {
+              font-weight: 700;
               text-align: left;
-              font-size: 12px;
+              font-size: 14px;
             }
             .list-btm {
               position: relative;
+              width: 170px;
               height: 40px;
               margin-bottom: 20px;
               .points {
@@ -360,11 +385,13 @@ export default  {
                 background-size: 100% 100%;
                 display: flex;
                 align-items: center;
-                justify-content: center;
+                // justify-content: center;
                 position: absolute;
                 top: -88%;
                 left: 43%;
                 transform: translateX(-50%);
+                padding-left: 75px;
+                box-sizing: border-box;
                 span {
                   font-size: 28px;
                   font-weight: 700;
@@ -389,7 +416,8 @@ export default  {
               z-index: 99;
               cursor: pointer;
               p {
-                font-size: 12px;
+                font-weight: 700;
+                font-size: 14px;
                 text-align: left;
               }
               div {
@@ -413,11 +441,14 @@ export default  {
             .list-btm {
               font-size: 28px;
               font-weight: 700;
-              font-family: 'Anton-Regular';
               .ranking {
+                font-size: 28px;
                 margin-left: 10px;
                 color: #FFC35B;
                 text-align: left;
+                span {
+                  font-family: 'Anton-Regular';
+                }
               }
             }
           }
@@ -484,12 +515,22 @@ export default  {
             .forward-list-item-btm {
               font-size: 14px;
               position: absolute;
-              bottom: 18%;
+              bottom: 20%;
               left: 50%;
               transform: translateX(-50%);
               .name {
                 font-weight: 700;
-                font-size: 16px;
+                font-size: 14px;
+              }
+              .points {
+                color: #9950fd;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin-top: 5px;
+                img {
+                  margin-left: 5px;
+                }
               }
             }
             &:nth-child(3) {
@@ -547,7 +588,7 @@ export default  {
     }
     .ranking-content-right {
       width: 30%;
-      height: 680px;
+      height: 620px;
       padding: 0 30px;
       box-sizing: border-box;
       position: relative;
@@ -590,8 +631,8 @@ export default  {
                 line-height: 1.4;
                 .label {
                   text-align: left;
-                  color: #5b5862;
-                  font-size: 12px;
+                  color: #979797;
+                  font-size: 14px;
                 }
               }
             }
@@ -600,8 +641,8 @@ export default  {
             line-height: 1.4;
             .label {
               text-align: left;
-              color: #5b5862;
-              font-size: 12px;
+              color: #979797;
+              font-size: 14px;
             }
             .records {
               text-align: left;

src/views/home/ruleDialog.vue

@@ -9,15 +9,9 @@
           </div>
         </div>
         <div class="content">
-          <div class="points-title">Invitation Rules</div>
-          <div>
-            After other users successfully bind their wallets through the link you shared, 
+          <div class="points-title">{{ title }}</div>
+          <div v-html="desc">
           </div>
-          <div>it is considered a successful invitation. </div>
-          <div>
-            Whenever they earn points (excluding the benefits from invitations), 
-          </div>
-          <div>they will provide you with an additional 10% of the points earned Got it.</div>
         </div>
         <div class="btn" @click="ExploreDialog">Confirm</div>
     </el-dialog>
@@ -28,6 +22,8 @@
 export default {
   props: {
     ruleDialogVisible: Boolean,
+    title: String,
+    desc: String,
   },
   data() {
     return {
@@ -91,8 +87,8 @@ div {
             text-align: center;
             margin-bottom: 20px;
           }
-          >div {
-            width: 480px;
+          div {
+            width: 580px;
             text-align: left;
             margin: 0 auto;
           }

src/wallet/index.js

@@ -147,7 +147,7 @@ export class Wallet {
     }
     return new Promise((resolve, reject) => {
       const onChainChange = (chainId) => {
-        console.log('switchEthereumChain: ', chainId)
+        // console.log('switchEthereumChain: ', chainId)
         this.provider.removeListener('chainChanged', onChainChange)
         resolve && resolve()
       }
@@ -156,9 +156,9 @@ export class Wallet {
         method: 'wallet_switchEthereumChain',
         params: [{ chainId: hexChainId }]
       }).then(() => {
-        console.log('switch chain success')
+        // console.log('switch chain success')
       }).catch(e => {
-        console.log('switch chain error: ', e)
+        // console.log('switch chain error: ', e)
         if (e.code === 4902 || e.message.indexOf('Unrecognized chain ID') >= 0) {
           const data = chainData
           this.provider.request({
@@ -177,7 +177,7 @@ export class Wallet {
               }
             ]
           }).then(() => {
-            console.log('add chain success')
+            // console.log('add chain success')
           }).catch(addError => {
             console.error('add chain error: ', addError)
             this.provider.removeListener('chainChanged', onChainChange)
@@ -200,7 +200,7 @@ export class Wallet {
   subscribeToEvents(){
     // Subscribe to accounts change
     this.provider.on('accountsChanged', async (accounts) => {
-      console.log('accountsChanged: ', accounts)
+      // console.log('accountsChanged: ', accounts)
       if (accounts && accounts.length > 0) {
         this.address = accounts[0]
         store.commit('wallet/updateAddress', this.address)
@@ -215,13 +215,19 @@ export class Wallet {
 
     // Subscribe to session disconnection
     this.provider.on('disconnect', (err) => {
-      console.log('disconnect', err)
+      // console.log('disconnect', err)
       store.commit('wallet/updateConnected', false)
     })
   }
 
 
-  async loginWithEthereum(activity) {
+  async loginWithEthereum(activityList) {
+    let walletType
+    if(activityList.val == 'ethereum') {
+      walletType = 'metamask'
+    } else if(activityList.val == 'okxwallet') {
+      walletType = 'okx'
+    }
     const web3 = new Web3(this.provider);
     let addresses = await web3.eth.getAccounts();
     let tryCount = 0;
@@ -239,8 +245,8 @@ export class Wallet {
     // console.log(chainId, "----");
     const nonce = await loginNonce(address);
     // console.log(nonce, "nonce-------------");
-    const nonceStr = `${nonce}|okx`;
-    const nonceEncrypt = hexToBase58(aesEncrypt(nonceStr, 'uaw_activity'));
+   
+    // const nonceEncrypt = hexToBase58(aesEncrypt(nonceStr, 'uaw_activity'));
     const message = new SiweMessage({
       domain: document.location.host,
       address: address,
@@ -248,21 +254,21 @@ export class Wallet {
       uri: document.location.origin,
       version: '1',
       statement: process.env.VUE_APP_APP_NAME,
-      nonce: nonceEncrypt,
+      nonce,
     });
     let msgSign = message.toMessage();
     let signature = await this.provider.request({
       method: 'personal_sign',
       params: [web3.utils.utf8ToHex(msgSign), address],
     });
-    let resLogin = await loginWithSignature(message, signature, activity);
-    console.log(resLogin.errcode, '61');
+    let resLogin = await loginWithSignature(message, signature, activityList.activity, walletType);
+    // console.log(resLogin.errcode, '61');
     if (!resLogin.errcode) {
       new GlobalData().token = resLogin.data.token;
       localStorage.setItem('token', resLogin.data.token);
       setToken(resLogin.data.token);
       // console.log(resLogin.data.token);
-      console.log(parseTokenData(resLogin.data.token), '------------------');
+      // console.log(parseTokenData(resLogin.data.token), '------------------');
       return resLogin.data.token;
     } else {
       throw new Error(resLogin.errmsg);
@@ -275,7 +281,7 @@ export class Wallet {
     let gasPrice = await web3.eth.getGasPrice()
     gasPrice = gasPrice * 2n
     // const gasPrice = 100000000n;
-    console.log('gasPrice: ',gasPrice)
+    // console.log('gasPrice: ',gasPrice)
     // return
     let sendObj = { 
       from: address,
@@ -284,7 +290,7 @@ export class Wallet {
       data
     }
     let gasLimit = await web3.eth.estimateGas(sendObj)
-    console.log('gasLimit: ', gasLimit,sendObj)
+    // console.log('gasLimit: ', gasLimit,sendObj)
     Object.assign(sendObj, {gasPrice, gasLimit})
     return web3.eth.sendTransaction(sendObj)
   }
@@ -301,7 +307,7 @@ export class Wallet {
     let web3 = this.web3;
     const instance = this.initInstance(web3, process.env.VUE_APP_CONTRACT, treasureAbi, address);
     let gasPrice = await web3.eth.getGasPrice()
-    console.log('chainCheckIn gasPrice: ', gasPrice)
+    // console.log('chainCheckIn gasPrice: ', gasPrice)
     gasPrice = gasPrice * 2n
     let gasLimit = await instance.methods.dailyCheckin().estimateGas();
     return instance.methods.dailyCheckin().send({ from: address, gasPrice, gasLimit });

vue.config.js

@@ -7,7 +7,7 @@ function resolve(dir) {
 module.exports = defineConfig({
   transpileDependencies: true,
   lintOnSave: false,
-  // productionSourceMap: false,
+  productionSourceMap: false,
   publicPath: '/',
   // devServer: {
   //   open: false,