修改bug

src/components/errorDialog/errorDialog.vue

@@ -1,47 +1,94 @@
 <template>
-  <el-dialog
+  <el-dialog :visible="dialogVisible" :before-close="handleClose" :closable="false" :show-close="false">
-    title=""
+    <div class="top">
-    :visible="dialogVisible"
+      <div class="top-title"></div>
-    width="416px"
+      <div class="top-close" @click="handleClose">
-    @cancel="handleClose"
+        <img src="@/assets/common/CloseButton.png" alt />
-    :closable="false"
+      </div>
-  >
+    </div>
-  <div class="confirm-box">
+    <div class="content">
+      <div>{{ errorText }}</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">Close</a-button>
+    <a-button @click="handleClose" type="primary">Confirm</a-button>
-  </div>
+    </div>-->
   </el-dialog>
 </template>
 <script>
 export default {
   name: "iErrorMessage",
-  data() {
+  props: {
-    return {
+    dialogVisible: Boolean,
-    };
+    errorText: String
   },
-  methods:{
+  data() {
-    handleClose(){
+    return {};
-      this.dialogVisible = false
+  },
+  methods: {
+    handleClose() {
+      this.$$emit('handleClose')
     }
   }
 };
 </script>
 <style lang="scss" scoped>
-.confirm-title{
+::v-deep .el-dialog {
-  color: #323233;
+  border: 1px solid #924df2;
-  font-weight: 500;
+  background: #1a1821;
-  font-size: 16px;
+  width: 600px;
-  line-height: 1.4;
+  border-radius: 80px;
-}
+  padding: 0px 50px;
-.confirm-context{
+  .el-dialog__header {
-  margin-top: 8px;
+    padding: 0;
-    color: #323233;
+  }
-    font-size: 14px;
+  .el-dialog__body {
-    padding-left: 21px;
+    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/loading.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <el-dialog :visible="Loading" :show-close="false" :modal="false" class="RecentlyLoading">
+      <div class="recentlyTit">
+        <div>
+          <img src="@/assets/common/loding .png" alt />
+        </div>
+        <p>Please wait Data is currently loading </p>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+  
+  <script>
+export default {
+  name: "loading",
+  props: {
+    Loading: Boolean
+  },
+  data() {
+    return {
+      // Loading:
+    };
+  }
+};
+</script>
+  
+  <style lang="scss" scoped>
+.RecentlyLoading {
+  ::v-deep .el-dialog {
+    width: 480px;
+    // height: 60px;
+    background: url('@/assets/common/bg button.png') no-repeat;
+    background-size: 100% 100%;
+    margin-top: 45vh !important;
+    .el-dialog__header {
+      background: none;
+      padding: 0;
+    }
+    .el-dialog__body {
+      padding: 0;
+    }
+    .recentlyTit {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 50px;
+      div {
+        width: 30px;
+        height: 30px;
+        img {
+          width: 100%;
+          height: 100%;
+          animation: turn 3s linear infinite;
+        }
+      }
+      p {
+        color: #fff;
+        font-size: 16px;
+        text-align: center;
+        margin-left: 20px;
+      }
+    }
+  }
+}
+@keyframes turn {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  25% {
+    -webkit-transform: rotate(90deg);
+  }
+  50% {
+    -webkit-transform: rotate(180deg);
+  }
+  75% {
+    -webkit-transform: rotate(270deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+</style>

src/components/walletDialog/index.vue

@@ -9,7 +9,6 @@
       </div>
       <div class="dialog-content">
         <p>Connect your wallet to start your Counter Fire journey</p>
-        
         <div class="wallet-content">
           <li
             v-for="(item, index1) in isWalletList"

src/views/home/boxBtm.vue

@@ -206,8 +206,9 @@
             >
             <div class="touxiang">
               <!-- <div class=""></div> -->
-              <img src="./../../assets/home/Nav bar_character.png" alt="" /> 
+              <img v-if="scope.row.avatar != ''" :src="scope.row.avatar" alt="" /> 
-              {{ scope.row.username }}
+              <img v-else src="@/assets/home/Nav bar_character.png" alt="" /> 
+              {{ scope.row.nickname }}
             </div>
             </template>
           </el-table-column>
@@ -225,6 +226,8 @@
         <PaginationDialog  @onChangePage="onBoostingChangePage" :total="myRecordsList.length" />
       </div>
     </el-dialog>
+
+    <Loading :Loading="isLoading" />
   </div>
 </template>
 
@@ -234,11 +237,13 @@ 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'
 
 export default {
   components: {
     Pagination,
     PaginationDialog,
+    Loading,
   },
   data() {
     return {
@@ -341,6 +346,7 @@ export default {
       myRecordsList: [],
       boostingPageSize: 6,
       boostingCurrentPage: 1,
+      isLoading: false
     }
   },
   computed: {
@@ -433,19 +439,22 @@ 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')
       }
-  
+      this.isLoading = true
       let storeageKey
       try {
         storeageKey = await sendToChain('chest_open', address, id)
       } catch (err) {
+        this.isLoading = false
         this.$message.error(`error send chain request`)
         return 
       }
+      
       let serTimeId = setInterval(async () => {
         try {
           let { errcode, errmsg, data } = await apiBoxOpen(id)
@@ -453,22 +462,25 @@ export default {
             if (errcode !== 12) {
               // 状态不是等待链上确认的, 都提示错误
               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)
           }
         } catch (err) {
+          this.isLoading = false
           this.$message.error(`claim task reward error: ${err}`)
         }
       }, 3000)
     },
-    // 开宝箱
+    
     async turnBox(id) {
       let address = localStorage.getItem("myAddress")
       if(this.token) {

src/views/home/gameView.vue

@@ -3,6 +3,7 @@
     <!-- <iframe :src="src" ref="iframe" id="iframe" style="border: 0px" width="500" height="480"></iframe> -->
     <canvas id="GameCanvas" oncontextmenu="event.preventDefault()" ref="iframe"></canvas>
     <!-- <div @click="stepBtn">方法</div> -->
+    <loading :loading="isLoading" />
   </div>
 </template>
 
@@ -10,12 +11,16 @@
 import { sendToChain } from "./../../utils/chainapi.js";
 import { getToken } from './../../utils/cookies.js'
 import { isWalletConnected } from './../../wallet/index.js'
+import loading from "@/components/loading.vue";
 import {
   apiGameStep,
   apiPreStep,
 } from "./../../utils/webapi.js";
 
 export default {
+  components: {
+    loading,
+  },
   props: {
     getTotalUsed: Number,
   },
@@ -49,6 +54,7 @@ export default {
           // }
         ],
       },
+      isLoading: false,
     };
   },
   created() {},
@@ -61,11 +67,6 @@ export default {
         window.boot()
       })
     },
-    // 扔骰子
-    randomdice() {
-      //与后端交互的话在这一步进行扔骰子操作的请求，后端返回点数以及奖励，先拿点数进行走步操作，走步结束后，显示奖励详情
-      return Math.round(Math.random() * 5 + 1); //随机生成1-6的整数
-    },
     stepState(data) {
       console.log(data,'---------------------------------')
       setTimeout(
@@ -83,13 +84,15 @@ export default {
         this.$message.error(preRes.errmsg)
         return
       }
+      this.isLoading = true
       let storeageKey
       try {
         storeageKey = await sendToChain('explore', address, preRes.data.id)
       } catch (err) {
+        this.isLoading = false
         this.$message.error(`error send chain request`)
         return 
-      }
+      }      
       let serTimeId = setInterval(async () => {
         try {
           let { errcode, errmsg, data } = await apiGameStep(preRes.data.id)
@@ -97,17 +100,23 @@ export default {
             if (errcode !== 13) {
               // 状态不是等待链上确认的, 都提示错误
               this.$message.error(errmsg)
+              this.isLoading = false
               clearInterval(serTimeId)
             } 
           } else {
             // alert(`领取成功, 播放动画, 并显示奖励: ${JSON.stringify(data)}`)
+            this.isLoading = false
             cc.mainAnim.setCurrPos(getTotalUsed)
             cc.mainAnim.setData(step)
+            setTimeout(
+              this.$emit('awardDialog', data),
+              step*2000)
             this.$emit('awardDialog', data)
             localStorage.removeItem(storeageKey)
             clearInterval(serTimeId)
           }
         } catch (err) {
+          this.isLoading = false
           this.$message.error(`claim task reward error: ${err}`)
         }
       }, 3000)

src/views/home/helpDialog.vue

@@ -62,10 +62,12 @@
       </div>
       
     </el-dialog>
+    <Loading :Loading="isLoading" />
   </div>
 </template>
 
 <script>
+import Loading from '@/components/loading.vue'
 import { getToken } from './../../utils/cookies.js'
 import { sendToChain } from './../../utils/chainapi.js'
 import {
@@ -75,6 +77,9 @@ import {
 } from "./../../utils/webapi.js";
 
 export default {
+  components: {
+    Loading
+  },
   props: {
     helpDialogVisible: Boolean,
     level1: Array,
@@ -93,6 +98,7 @@ export default {
       boxState: {},
       isNewUser: 0,
       awardData: {},
+      isLoading: false,
     }
   },
   mounted() {
@@ -216,10 +222,12 @@ export default {
         this.walletDialogVisible = true
         return
       }
+      this.isLoading = true;
       let storeageKey
       try {
         storeageKey = await sendToChain('chest_enhance', address, boxCode)
       } catch (err) {
+        this.isLoading = false;
         this.$message.error(`error send chain request`)
         return 
       }
@@ -227,7 +235,8 @@ export default {
         try {
           let { errcode, errmsg, data } = await apiEnhanceBox(boxCode)
           if (!errcode) {
-            alert(`助力成功, 获得积分: ${data.score}`)
+            // alert(`助力成功, 获得积分: ${data.score}`)
+            this.isLoading = false;
             if(this.isNewUser == 0) {
               // 8、关闭助力弹窗
               this.awardData = {data, isNewUser: this.isNewUser}
@@ -243,10 +252,12 @@ export default {
             clearInterval(serTimeId)
           } else if (errcode !== 14) {
             // 状态不是等待链上确认的, 都提示错误
+            this.isLoading = false;
             this.$message.error(errmsg)
             clearInterval(serTimeId)
           }
         } catch (err) {
+          this.isLoading = false;
           this.$message.error(`claim task reward error: ${err}`)
         }
       }, 3000)

src/views/home/index.vue

@@ -41,12 +41,13 @@
                 <div class="hover-tips">Explorations obtained</div>
               </li>
               <div class="touxiang">
-                <img src="./../../assets/home/Nav bar_character.png" alt />
+                <img v-if="myTwitterAvatar == ''" src="./../../assets/home/Nav bar_character.png" alt="">
+                <img v-else :src="myTwitterAvatar" alt />
               </div>
             </div>
             <div class="left-top-points-right">
-              <img v-if="inWhiteList == 1" src="@/assets/common/wallet-no.png" alt="">
+              <img v-if="inWhiteList == 1" src="@/assets/common/wallet-yes.png" alt="">
-              <img v-else src="@/assets/common/wallet-yes.png" alt="">
+              <img v-else src="@/assets/common/wallet-no.png" alt="">
               <div v-if="inWhiteList == 1" class="hover-tips">Holder of the partner NFT collections will receive additional rewards</div>
             </div>
           </div>
@@ -54,10 +55,10 @@
         <div class="left-title">
           <div class="left-title-left" v-if="navIndex == 0 || navIndex == 2">
             <div>LOOMING FOG OF THE <img src="./../../assets/home/Icon_star.png" alt=""> UNKNOWN</div>
-            <p>Phase 1 Quest Log</p>
+            <p v-if="navIndex == 0">Phase 1 Quest Log</p>
           </div>
           <div class="left-title-left" v-if="navIndex == 1">
-            <div>Hill's <img src="./../../assets/home/Icon_star.png" alt=""> treasure hunt</div>
+            <div>HILL'S <img src="./../../assets/home/Icon_star.png" alt=""> TREASURE HUNT</div>
             <p>
               Phase 2 Exploration Missions
             </p>
@@ -150,11 +151,15 @@
             </li>
           </div>
         </div>
-        <div class="right-title" v-if="navIndex == 0 || navIndex == 2">
+        <div class="right-title" v-if="navIndex == 0">
           <p>Phase 1</p>
           <h3>Complete quests to shatter the looming</h3>
           <h3>fog that veils the unknown!</h3>
         </div>
+        <div class="right-title" v-if="navIndex == 2">
+          <p></p>
+          <h3>Join hands with us and our partners to achieve your goals</h3>
+        </div>
         <div class="content-right" v-if="navIndex == 0">
           <div class="title">
             <div class="title-left">
@@ -206,7 +211,7 @@
                       <div v-if="item.status == 0" class="started" @click.stop="toPost(item)">{{ item.actionTitle }}</div>
                       <CheckBtn v-if="item.status == 1" @stateupdate="toCheck" :dataid="item.id" time="10" title="Check" class="started">Verify</CheckBtn>
                       <div v-if="item.status == 2" class="claim" @click.stop="getTaskClaim(item.id)">Claim</div>
-                      <div v-if="item.status == 3" class="success">+{{ item.score }} <img src="./../../assets/home/Checkmark.png" alt=""></div>
+                      <div v-if="item.status == 3" class="success">+{{ item.score }} <img src="./../../assets/common/Checkmark (1).png" alt=""></div>
                     </div>
                   </div>
                   <div class='light-btn' v-else @click.stop="onWalletLogin">Connect Wallet</div>
@@ -501,12 +506,14 @@
                     <div class="hover-tips">Explorations obtained</div>
                   </li>
                   <div class="touxiang">
-                    <img src="./../../assets/home/Nav bar_character.png" alt />
+                    <img v-if="myTwitterAvatar == ''" src="./../../assets/home/Nav bar_character.png" alt="">
+                    <img v-else :src="myTwitterAvatar" alt />
                   </div>
                 </div>
                 <div class="left-top-points-right">
-                  <img src="@/assets/common/wallet-no.png" alt="">
+                  <img v-if="inWhiteList == 1" src="@/assets/common/wallet-yes.png" alt="">
-                  <div class="hover-tips">Holder of the partner NFT collections will receive additional rewards</div>
+                  <img v-else src="@/assets/common/wallet-no.png" alt="">
+                  <div v-if="inWhiteList == 1" class="hover-tips">Holder of the partner NFT collections will receive additional rewards</div>
                 </div>
               </div>
             </div>
@@ -535,8 +542,8 @@
                     v-else
                   >{{ showAddress }}</div>
                   <div class="wallet-btn">
-                    <img class="hover-show" src="./../../assets/home/Connect Menu1.png" alt />
+                    <img v-if="!showAddress" class="hover-show" src="./../../assets/home/Connect Menu1.png" alt />
-                    <img class="hover-none" src="./../../assets/home/Connect Menu2.png" alt />
+                    <img v-else class="hover-none" src="./../../assets/home/ICON03.png" alt />
                   </div>
                 </div>
               </div>
@@ -579,6 +586,11 @@
 
     <!-- 邀请列表 -->
     <LogDialog :logDialogVisible="logDialogVisible" @handleClose="logHandleClose" />
+
+    <!-- Loading -->
+    <Loading :Loading="isLoading" />
+
+    <ErrDialog :dialogVisible="errDialogVisible" @handleClose="errorHandleClose" :errorText="errorText" />
   </div>
 </template>
 
@@ -593,6 +605,8 @@ import WalletDialog from "@/components/walletDialog/index.vue";
 import AwardDialog from './awardDialog.vue'
 import HelpDialog from './helpDialog.vue'
 import LogDialog from './logDialog.vue'
+import Loading from '@/components/loading.vue'
+import ErrDialog from '@/components/errorDialog/errorDialog.vue'
 import { getToken } from '@/utils/cookies.js'
 // import { getWalletAddress, isWalletConnected, linkWallet } from "@/wallet/index.js";
 import {
@@ -626,11 +640,14 @@ export default {
     AwardDialog,
     HelpDialog,
     LogDialog,
+    Loading,
+    ErrDialog,
     // ImgView,
   },
   computed: {
     showAddress () {
       let address = this.$store.state.user.address
+      console.log('this.$store.state.user.address', this.$store.state.user.address)
       return formatShowAddress(address)
     }
   },
@@ -642,6 +659,7 @@ export default {
       myScoreTotal: 0,
       myInviteCount: 0,
       myEnhanceCount: 0,
+      myTwitterAvatar: '',
       navList: [
         {
           id: 1,
@@ -711,6 +729,9 @@ export default {
       logDialogVisible: false,
       nftsList: [],
       isNewUser: 0,
+      isLoading: false,
+      errDialogVisible: false,
+      errorText: '',
     };
   },
   watch: {
@@ -753,6 +774,7 @@ export default {
       if (this.token) {
         this.getProgress();
         this.getGameStat();
+        this.myTwitterAvatar = this.userData.twitterAvatar
         this.myScoreTotal = this.userData.scoreTotal
         this.myInviteCount = this.userData.inviteCount
         this.myEnhanceCount = this.userData.enhanceCount
@@ -895,10 +917,12 @@ export default {
         this.walletDialogVisible = true
         return
       }
+      this.isLoading = true
       let storeageKey
       try {
         storeageKey = await sendToChain('task_claim', address, id)
       } catch (err) {
+        this.isLoading = false
         this.$message.error(`error send chain request`)
         return 
       }
@@ -908,17 +932,20 @@ export default {
           if (errcode) {
             if (errcode === 12) {
               // 已领取, 给个提示就可以了
+              this.isLoading = false
               this.$message.error(errmsg)
               this.getActivitrStatue(id)
               clearInterval(serTimeId)
             } else if (errcode !== 14) {
               // 状态不是等待链上确认的, 都提示错误
+              this.isLoading = false
               this.$message.error(errmsg)
               clearInterval(serTimeId)
             }
           } else {
             if(data?.status == 3) {
               // alert(`领取成功, 获得积分: ${data.score}`)
+              this.isLoading = false
               this.activityDialog(data)
               this.getActivitrStatue(id)
               localStorage.removeItem(storeageKey)
@@ -926,6 +953,7 @@ export default {
             }
           }
         } catch (err) {
+          this.isLoading = false
           this.$message.error(`claim task reward error: ${err}`)
         }
       
@@ -951,12 +979,22 @@ export default {
     // 探索
     async exploreCli(amount) {
       if(this.token) {
-        this.$refs.stepId.sendOneAction(this.getTotalUsed, amount)
+        if(this.todayStepTicket == 0) {
+          this.errorText = 'Exploration failed insufficient number of explorations'
+          this.errDialogVisible = true
+        } else {
+          this.$refs.stepId.sendOneAction(this.getTotalUsed, amount)
+        }
       } else {
         this.walletDialogVisible = true
       }
     },
 
+    // errorHandleClose
+    errorHandleClose() {
+      this.errDialogVisible = false
+    },
+
     // 探索奖励
     exploreAwardDialog(val) {
       this.awardData = val
@@ -1027,10 +1065,12 @@ export default {
         this.walletDialogVisible = true
         return
       }
+      this.isLoading = true
       let storeageKey
       try {
         storeageKey = await sendToChain('check', address, '')
       } catch (err) {
+        this.isLoading = false
         this.$message.error(`error send chain request`)
         return 
       }
@@ -1041,15 +1081,18 @@ export default {
             if (errcode === 12) {
               // 已领取, 给个提示就可以了
               this.$message.error(errmsg)
+              this.isLoading = false
               this.getGameStat();
               clearInterval(serTimeId)
             } else if (errcode !== 13) {
+              this.isLoading = false
               this.$message.error(errmsg)
               clearInterval(serTimeId)
             }
           } else {
+            this.isLoading = false
             // alert(`领取成功, 获得积分: ${data.score}`)
-            this.$message.success(data.ticket)
+            // this.$message.success(data.ticket)
             this.checkAwardDialog(data)
             this.$refs.renewCheck.renewCheckInit()
             this.getGameStat();
@@ -1057,6 +1100,7 @@ export default {
             clearInterval(serTimeId)
           }
         } catch (err) {
+          this.isLoading = false
           this.$message.error(`claim task reward error: ${err}`)
         }
       }, 3000)
@@ -1346,8 +1390,8 @@ export default {
               }
             }
             .touxiang {
-              width: 80px;
+              width: 60px;
-              height: 80px;
+              height: 60px;
               position: absolute;
               top: 50%;
               right: -20px;
@@ -1357,11 +1401,17 @@ export default {
               display: flex;
               align-items: center;
               justify-content: center;
-              padding: 5px;
+              padding: 3px;
               box-sizing: border-box;
+              border-radius: 50%;
+              overflow: hidden !important;
               img {
+                display: flex;
+                align-items: center;
+                justify-content: center;
                 width: 100%;
                 height: 100%;
+                border-radius: 50%;
               }
             }
           }
@@ -2315,10 +2365,29 @@ export default {
                   }
                 }
                 .touxiang {
+                  width: 60px;
+                  height: 60px;
                   position: absolute;
                   top: 50%;
                   right: -20px;
                   transform: translateY(-50%);
+                  background: url('@/assets/common/Picture frame .png') no-repeat;
+                  background-size: 100% 100%;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  padding: 3px;
+                  box-sizing: border-box;
+                  border-radius: 50%;
+                  overflow: hidden;
+                  img {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 50%;
+                  }
                 }
               }
               .left-top-points-right {
@@ -2354,6 +2423,7 @@ export default {
         .right {
           width: 28%;
           padding: 20px 30px;
+          box-sizing: border-box;
           .right-header {
             display: flex;
             justify-content: space-between;
@@ -2482,8 +2552,6 @@ export default {
           }
         }
       }
-      .box-btm {
-      }
     }
   }
   .invite-dialog {