宝箱页面
This commit is contained in:
yuyongdong
parent
b4defed779
commit
a76518e88b
@ -1,6 +1,6 @@
|
||||
# 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://192.168.100.22: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'
|
||||
|
||||
|
||||
@ -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);
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@ -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">
|
||||
<Pagination />
|
||||
<div class="box-pagination" v-if="boxList.length > 6">
|
||||
<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: {
|
||||
imgSrc: 'https://abs.twimg.com/sticky/default_profile_images/default_profile.png'
|
||||
},
|
||||
boostingList: [
|
||||
{
|
||||
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 =
|
||||
console.log(id)
|
||||
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%;
|
||||
|
||||
@ -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;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1.4;
|
||||
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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user