宝箱页面

.env.development

@@ -1,6 +1,6 @@
 # API
-# VUE_APP_API_URL = 'http://192.168.100.22:3006/api'
+VUE_APP_API_URL = 'http://192.168.100.22:3006/api'
-VUE_APP_API_URL = 'http://127.0.0.1:3006/api'
+# VUE_APP_API_URL = 'http://127.0.0.1:3006/api'
 VUE_APP_WL_URL = 'https://nftwl.counterfire.games/wl_test'
 VUE_APP_CONFIG_URL = 'https://sepolia.infura.io/v3/b6bf7d3508c941499b10025c0776eaf8'
 

src/components/pagination.vue

@@ -13,10 +13,13 @@
 
 <script>
 export default {
+  props:{
+    total: Number,
+  },
   data() {
     return {
       total: 50,
-      pageSize: 2,
+      pageSize: 6,
       currentPage: 1,
     }
   },
@@ -24,6 +27,8 @@ export default {
   methods: {
     handleCurrentChange(val) {
       console.log(val)
+      this.currentPage = val
+      this.$emit("onChangePage", val);
     },
   },
 }

src/views/home/boxBtm.vue

@@ -23,9 +23,6 @@
               </div>
             </div>
           </li>
-          <li>1</li>
-          <li>1</li>
-          <li>1</li>
         </div>
       </div>
       <div class="box-log">
@@ -57,7 +54,7 @@
         <div class="box-btm-con-title-btm">LEGENDARY</div>
       </div>
       <div class="box-btm-con-img">
-        <div>{{`./../../assets/box/box0${boxData.level}.png`}}
+        <div>
           <img :src="require(`./../../assets/box/box0${boxData.level}.png`)" alt="">
         </div>
       </div>
@@ -96,7 +93,7 @@
           </div>
         </div>
         <div class="box-list">
-          <li v-for="(item, index) in boxList" :key="index" @click="getBoxData(item)">
+          <li v-for="(item, index) in currentPageItems" :key="index" @click="getBoxData(item)">
             <div class="box-img">
               <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="">
@@ -107,17 +104,24 @@
             </div>
           </li>
         </div>
-        <div class="box-pagination">
+        <div class="box-pagination" v-if="boxList.length > 6">
-          <Pagination />
+          <Pagination @onChangePage="onChangePage" :total="boxList.length"  />
         </div>
       </div>
     </div>
+
+    <div class="records-dialog">
+      <div>
+        <li></li>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import { getToken } from './../../utils/cookies.js'
 import Pagination from './../../components/pagination.vue'
+import { sendOpenChest } from './../../utils/chainapi.js'
 
 export default {
   components: {
@@ -128,11 +132,68 @@ export default {
       token: null,
       boostingList: {},
       boxList: [],
+      pageBoxList: [],
       boxData: {},
       userData: {},
-      boostingList: {
+      boostingList: [
-        imgSrc: 'https://abs.twimg.com/sticky/default_profile_images/default_profile.png'
+        {
+          name: '',
         },
+        {
+          name: '',
+        },
+        {
+          name: '',
+        },
+        {
+          name: '',
+        },
+        {
+          name: '',
+        },
+        {
+          name: '',
+        },
+        {
+          name: '',
+        },
+        {
+          name: '',
+        },
+        {
+          name: '',
+        },
+        {
+          name: '',
+        },
+        {
+          name: '',
+        },
+        {
+          name: '',
+        },
+        {
+          name: '',
+        },
+        {
+          name: '',
+        },
+        {
+          name: '',
+        }
+      ],
+      pageSize: 6,
+      currentPage: 1,
+    }
+  },
+  computed: {
+    // 计算当前页应该显示的数据
+    currentPageItems() {
+      let start = (this.currentPage - 1) * this.pageSize;
+      let end = start + this.pageSize;
+      this.pageBoxList = this.boxList.slice(start, end)
+      this.boxData = this.pageBoxList[0]
+      return this.pageBoxList;
     }
   },
   mounted() {
@@ -161,6 +222,11 @@ export default {
       }
     },
 
+    // 分页
+    onChangePage(val) {
+      this.currentPage = val
+    },
+
     // 修改中间宝箱数据
     async getBoxData(data) {
       this.boxData = data
@@ -189,8 +255,36 @@ export default {
     },
     // 开宝箱
     async turnBox(id) {
-      // let res = 
+      let address = localStorage.getItem("myAddress")
+      if(this.token) {
+        let resOpen = await sendOpenChest(address, id)
         console.log(id)
+        if(resOpen) {
+          let serTimeId = setInterval(async () => {
+            let res = await this.$axios.post(
+                "/api/chest/open",
+                { chestId: id },
+                { headers: { Authorization: `Bearer ${this.token}` } }
+              );
+              if (res.data.errcode == 0) {
+                this.getMyBoxList()
+                this.openBox()
+                clearInterval(serTimeId)
+              }
+          }, 2000)
+        }
+      }
+      
+    },
+
+    // 开箱子记录
+    async openBox() {
+      let res = this.$axios.get('/api/chest/open/history', {
+          params: { },
+          headers: { Authorization: `Bearer ${this.token}` }
+        })
+
+        console.log(res.data.data)
     },
 
     // 复制助力链接
@@ -209,11 +303,6 @@ export default {
       this.$message.success("Copy succeeded");
     },
 
-    imgPath(rsc) {
-      this.$axios.get(`${rsc}`).then(res =>{
-        console.log(res)
-      })
-    },
   },
 };
 </script>
@@ -241,6 +330,27 @@ export default {
       }
       .box-boosting {
         height: 530px;
+        overflow-y: scroll;
+        // &::-webkit-scrollbar {
+        //   width: 5px;
+        //   height: 5px;
+        // }
+        // &::-webkit-scrollbar-track{
+        //   background: #171220;
+        //   border-radius:2px;
+        // }
+        // &::-webkit-scrollbar-thumb{
+        //   width: 8px;
+        //   height: 30px !important;
+        //   background: #9950fd;
+        //   border-radius:10px;
+        // }
+        // &::-webkit-scrollbar-thumb:hover{
+        //   background: #999;
+        // }
+        // &::-webkit-scrollbar-corner{
+        //   display: block;
+        // }
         li {
           display: flex;
           align-items: center;
@@ -291,6 +401,21 @@ export default {
           }
         }
       }
+      ::v-deep .box-boosting::-webkit-scrollbar {
+          width: 5px;
+        }
+      ::v-deep .box-boosting::-webkit-scrollbar-track{
+          background: #171220;
+          border-radius:2px;
+        }
+      ::v-deep .box-boosting::-webkit-scrollbar-corner{
+          display: block;
+        }
+      ::v-deep .box-boosting::-webkit-scrollbar-thumb{
+        height: 15px;
+          background: #9950fd;
+          border-radius:10px;
+        }
     }
     .box-log {
       display: flex;
@@ -489,6 +614,7 @@ export default {
         justify-content: flex-start;
         height: 500px;
         li {
+          height: 140px;
           flex: 1;
           margin: 10px 10px 10px 0;
           width: calc((100% - 10px) / 2);
@@ -513,10 +639,10 @@ export default {
           }
           .box-bg {
             width: 160px;
-            height: 80px;
+            height: 120px;
             position: absolute;
             left: 50%;
-            top: 50%;
+            top: 30%;
             transform: translateX(-50%);
             background: url('@/assets/box/Treasure Chest_bg.png') no-repeat;
             background-size: 100% 100%;

src/views/home/index.vue

@@ -820,7 +820,7 @@ export default {
     // 获取累计签到奖励
     async getCheckClaim(days) {
       let res = await apiCheckinClaim(days);
-      if (res.data.data.ticket) {
+      if (res.ticket) {
         this.getGameStat();
         this.$message.success('Received successfully')
       }
@@ -849,7 +849,8 @@ export default {
       // let res = await apiUsercheckin();
       let res = await this.$axios.post('/api/user/checkin',{  },
             { headers: { Authorization: `Bearer ${this.token}` } })
-            console.log(res.data.data,'检查签到并领取奖励')
+            // console.log(res.data.data,'检查签到并领取奖励')
+            return res.data.data
     },
 
     // 获取路由宝箱助力
@@ -1343,14 +1344,14 @@ export default {
       background-size: 100% 100%;
       .right-title {
         color: #fff;
-        line-height: 1.5;
+        line-height: 1.4;
-        margin-bottom: 30px;
+        margin-bottom: 20px;
         p {
           font-size: 17px;
           font-family: 'Poppins-Light';
         }
         h3 {
-          font-size: 28px;
+          font-size: 26px;
           font-family: 'Anton-Regular';
         }
       }
@@ -1408,7 +1409,7 @@ export default {
                 margin-left: 10px;
               }
               .desc {
-                width: 160px;
+                max-width: 260px;
                 margin: 0 5px;
                 h3 {
                   text-align: left;