456 lines
14 KiB
Vue
456 lines
14 KiB
Vue
<template>
|
|
<div>
|
|
<!-- 成功获得奖品弹窗 -->
|
|
<el-dialog class="Explore-dialog" :visible.sync="helpDialogVisible" :modal="false" :before-close="helpDialog">
|
|
<div class="top">
|
|
<div class="top-title">Boosting Records</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="user-info">
|
|
<div class="user-info-img">
|
|
<img :src="boxData.avatar" alt="" >
|
|
</div>
|
|
<div class="user-info-name">{{ boxData.nickname }}: <span>Thank you for your support! </span></div>
|
|
</div>
|
|
<div class="con">
|
|
<!-- <img :src="require(`./../../assets/box/box0${boxData.level}.png`)" alt=""> -->
|
|
</div>
|
|
<div class="btn" v-if="!token" @click="linkWallet">Wallet Connect</div>
|
|
<div class="btn" v-else>
|
|
<div class="btn" v-if="boxData.chestCurrent < boxData.chestMax" @click="helpBtn">Confirm</div>
|
|
<div class="btn" v-else>Max</div>
|
|
</div>
|
|
</div>
|
|
<div class="content-right">
|
|
<div class="content-right-title">
|
|
Boosting Records
|
|
</div>
|
|
<div class="line"></div>
|
|
<div class="box-boosting-no" v-if="helpLogList.length == 0">
|
|
<div>
|
|
<p>None</p>
|
|
</div>
|
|
</div>
|
|
<div class="box-boosting" v-else>
|
|
<div>
|
|
<li v-for="(item, index) in helpLogList" :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.imgSrc" alt="">
|
|
<img class="one-img" v-else src="./../../assets/home/Nav bar_character.png" alt="">
|
|
</div>
|
|
<div class="user-img" v-else>
|
|
<img :src="item.imgSrc" alt="">
|
|
</div>
|
|
<div class="user-name">User name</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="records">+8</div>
|
|
<div class="icon">
|
|
<img src="./../../assets/common/Icon_Points.png" alt="">
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getToken } from './../../utils/cookies.js'
|
|
import { sendHelp } from './../../utils/chainapi.js'
|
|
import {
|
|
checkReCaptcha,
|
|
} from "./../../utils/webapi.js";
|
|
|
|
export default {
|
|
props: {
|
|
helpDialogVisible: Boolean,
|
|
level1: Array,
|
|
level2: Array,
|
|
level3: Array,
|
|
level4: Array,
|
|
dialogTitle: String,
|
|
},
|
|
data() {
|
|
return {
|
|
boxData: {},
|
|
token: null,
|
|
helpLogList: [],
|
|
boxId: '',
|
|
boxCode: '',
|
|
boxState: {},
|
|
isNewUser: 0,
|
|
awardData: {},
|
|
}
|
|
},
|
|
mounted() {
|
|
this.token = getToken()
|
|
this.boxId = this.$route.params.boxId.split("id=")[1];
|
|
this.boxCode = this.$route.params.box.split("box=")[1];
|
|
// this.$axios.all([this.getBoxData(),this.getHelpBoxLog(),this.helpConfirm(),this.initBoxState(this.boxCode,this.boxId)])
|
|
this.getBoxData()
|
|
this.getHelpBoxLog()
|
|
this.helpConfirm()
|
|
this.initBoxState(this.boxCode,this.boxId)
|
|
},
|
|
methods: {
|
|
// 宝箱信息接口
|
|
async getBoxData() {
|
|
let res = await this.$axios.post('/api/chest/enhance/state', {chestId: '660a4b63de92bca95af2b714'},{})
|
|
this.boxData = res.data.data
|
|
},
|
|
|
|
// 获取帮助的宝箱助力记录
|
|
async getHelpBoxLog() {
|
|
if (this.$route.params.boxId != undefined) {
|
|
let rtoken = await checkReCaptcha("chest_share");
|
|
let res = await this.$axios.post(
|
|
"/api/chest/enhance/list",
|
|
{ chestid: this.boxId, rtoken: rtoken },
|
|
{
|
|
headers: { Authorization: `Bearer ${this.token}` }
|
|
}
|
|
);
|
|
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("/api/activity/upload_invite_code", {
|
|
params: { code: newInvite, rtoken: rtoken },
|
|
headers: { Authorization: `Bearer ${this.token}` }
|
|
});
|
|
if (res.data.errcode == 0) {
|
|
this.isNewUser = 0
|
|
} else {
|
|
this.isNewUser = 1
|
|
}
|
|
}
|
|
},
|
|
|
|
// 宝箱助力
|
|
async helpBtn() {
|
|
let address = localStorage.getItem("myAddress")
|
|
// 1、助力次数是否用完
|
|
if(this.boxState.userCurrent < this.boxState.userMax) {
|
|
// 2、宝箱助力次数是否上限
|
|
if(this.boxState.chestCurrent < this.boxState.chestMax) {
|
|
// 3、是否已经助力此宝箱
|
|
if(this.boxState.enhanced == 0) {
|
|
// 4、开始助力
|
|
try{
|
|
// 5、链上请求交互
|
|
let helpRes = await sendHelp(address, this.boxCode)
|
|
if(helpRes) {
|
|
// 6、轮询是否助力成功
|
|
let serTimeId = setInterval(async () => {
|
|
let res = await this.$axios.post(
|
|
"/api/chest/enhance",
|
|
{ code: this.boxCode },
|
|
{ headers: { Authorization: `Bearer ${this.token}` } }
|
|
);
|
|
if (res.data.errcode == 0) {
|
|
// 7、判断是否是新用户
|
|
if(this.isNewUser == 0) {
|
|
// 8、关闭助力弹窗
|
|
this.awardData = {...res.data.data, isNewUser: this.isNewUser}
|
|
this.$emit('awardDialog', this.awardData)
|
|
this.$emit('handleClose')
|
|
} else {
|
|
// 8、关闭助力弹窗
|
|
this.awardData = {...res.data.data, isNewUser: this.isNewUser}
|
|
this.$emit('awardDialog', this.awardData)
|
|
this.$emit('handleClose')
|
|
}
|
|
clearInterval(serTimeId)
|
|
}
|
|
}, 2000)
|
|
}
|
|
} catch(e) {
|
|
this.$message.error(e.message)
|
|
}
|
|
} else {
|
|
this.$emit('handleClose')
|
|
this.$message.error('Already helped this treasure chest')
|
|
}
|
|
} else {
|
|
this.$emit('handleClose')
|
|
this.$message.error('The number of treasure chest boosts has been capped')
|
|
}
|
|
} else {
|
|
this.$emit('handleClose')
|
|
this.$message.error('The number of assists for the day has been capped')
|
|
}
|
|
|
|
},
|
|
|
|
// 助力状态查询
|
|
async initBoxState(code,chestId) {
|
|
let res = await this.$axios.post('/api/chest/enhance/state',{code: code, chestId: chestId, },{headers: { Authorization: `Bearer ${this.token}` }})
|
|
this.boxState = res.data.data
|
|
if (this.boxState.userCurrent == this.boxState.userMax) {
|
|
if(this.boxState.enhanced == 1) {
|
|
this.$emit('handleClose')
|
|
}
|
|
}
|
|
},
|
|
|
|
// 关闭弹窗
|
|
helpDialog() {
|
|
this.$emit('handleClose')
|
|
},
|
|
|
|
// 打开登录弹窗
|
|
linkWallet() {
|
|
this.$emit('onWalletLogin')
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
div {
|
|
::v-deep .el-dialog {
|
|
border: 1px solid #924df2;
|
|
// box-shadow: 0px 0px 20px #924df2;
|
|
background: #1a1821;
|
|
border-radius: 80px;
|
|
padding: 0px 50px;
|
|
.el-dialog__header {
|
|
padding: 0;
|
|
}
|
|
.el-dialog__body {
|
|
position: relative;
|
|
color: #fff;
|
|
.top {
|
|
display: flex;
|
|
|
|
.top-title {
|
|
color: #fff;
|
|
font-size: 28px;
|
|
font-family: "Anton-Regular";
|
|
}
|
|
.top-close {
|
|
position: absolute;
|
|
top: -8%;
|
|
right: -9%;
|
|
width: 100px;
|
|
height: 100px;
|
|
cursor: pointer;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
.content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 20px;
|
|
.content-left {
|
|
width: 400px;
|
|
height: 400px;
|
|
background: url('./../../assets/box/Bg_chest.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
position: absolute;
|
|
top: -10px;
|
|
left: 0;
|
|
.user-info-img {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
margin-right: 20px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.user-info-name {
|
|
font-size: 10px;
|
|
span {
|
|
display: inline-block;
|
|
color: #90FF00;
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
}
|
|
.con {
|
|
width: 240px;
|
|
height: 180px;
|
|
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%);
|
|
color: #000;
|
|
background: url('./../../assets/home/explore map button.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.content-right {
|
|
width: 360px;
|
|
background: url('./../../assets/box/Bg(1).png') no-repeat;
|
|
background-size: 100% 100%;
|
|
padding: 10px 20px;
|
|
box-sizing: border-box;
|
|
.content-right-title {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
font-family: "Anton-Regular";
|
|
text-align: left;
|
|
}
|
|
.line {
|
|
width: 100%;
|
|
height: 2px;
|
|
background: #3c2363;
|
|
}
|
|
.box-boosting {
|
|
height: 400px;
|
|
overflow-y: scroll;
|
|
margin-top: 20px;
|
|
li {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 20px;
|
|
margin-top: 20px;
|
|
.left {
|
|
display: flex;
|
|
align-items: center;
|
|
.user-img {
|
|
width: 40px;
|
|
height: 40px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.user-name {
|
|
font-size: 16px;
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
.right {
|
|
display: flex;
|
|
align-items: center;
|
|
.records {
|
|
font-size: 12px;
|
|
color: #9950fd;
|
|
}
|
|
.icon {
|
|
width: 10px;
|
|
height: 12px;
|
|
margin-left: 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
&:nth-child(1) {
|
|
.left {
|
|
.user-img {
|
|
width: 40px;
|
|
height: 40px;
|
|
position: relative;
|
|
.one-bg {
|
|
width: 60px;
|
|
height: 60px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.one-img {
|
|
width: 40px;
|
|
height: 40px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.box-boosting::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
.box-boosting::-webkit-scrollbar-track{
|
|
background: #171220;
|
|
border-radius:2px;
|
|
}
|
|
.box-boosting::-webkit-scrollbar-corner{
|
|
display: block;
|
|
}
|
|
.box-boosting::-webkit-scrollbar-thumb{
|
|
height: 15px;
|
|
background: #9950fd;
|
|
border-radius:10px;
|
|
}
|
|
.box-boosting-no {
|
|
height: 400px;
|
|
margin-top: 20px;
|
|
position: relative;
|
|
div {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 200px;
|
|
height: 140px;
|
|
background: url('./../../assets/box/none01.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
p {
|
|
position: absolute;
|
|
bottom: 8%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |