新增积分弹窗

This commit is contained in:
yuyongdong 2024-04-15 19:29:11 +08:00
parent 38661125bc
commit 79ec98d01c
9 changed files with 338 additions and 148 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

View File

@ -2,16 +2,23 @@ import Vue from 'vue';
import confirm from './errorDialog.vue';
const iErrorMessage = Vue.extend(confirm);
function showErrMsg(err) {
let errmsg = ''
let errmsg = err
// alert(err,'----')
// let errmsg = err;
// if (typeof err === 'object') {
// errmsg = JSON.stringify(err);
// }
if (err.indexOf('insufficient tickets') > -1) {
if (typeof err === 'object') {
errmsg = JSON.stringify(err);
}
if (errmsg.indexOf('insufficient tickets') > -1) {
errmsg = 'Exploration failed, insufficient number of explorations.'
} else if(err.indexOf('invalid opcode: opcode 0xd8 not defined') > -1) {
} 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 rejected the request`
} else if(errmsg.indexOf('User denied transaction signature') > -1) {
errmsg = `User denied transaction signature`
} else if(errmsg.indexOf('Internal JSON-RPC error') > -1) {
errmsg = `Claim failed due to insufficient gas.`
} else if(errmsg.indexOf('TransactionBlockTimeoutError') > -1) {
errmsg = `Claim failed due to insufficient gas.`
}

View File

@ -15,10 +15,10 @@
export default {
props:{
total: Number,
pageSize: Number,
},
data() {
return {
pageSize: 6,
currentPage: 1,
}
},

View File

@ -167,18 +167,24 @@
slot-scope="scope"
>{{ scope.row.address.slice(0,4) }}{{ '……'+scope.row.username }}</template>
</el-table-column> -->
<el-table-column label="Points">
<template slot-scope="scope">
<div class="points">
<span>{{ scope.row.score }}</span>
<el-table-column label="Rewards">
<template slot-scope="{ row }">
<div v-if="row.score" class="points">
<div>
<span>{{ row.score }}</span>
<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="">
</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="btm">
<PaginationDialog @onChangePage="onRecordsChangePage" :total="recordsList.length" />
<div class="btm">{{ recordsList.length }}
<PaginationDialog @onChangePage="onRecordsChangePage" :pageSize="recordsPageSize" :total="recordsList.length" />
</div>
</el-dialog>
@ -224,7 +230,7 @@
</el-table>
</div>
<div class="btm">
<PaginationDialog @onChangePage="onBoostingChangePage" :total="myRecordsList.length" />
<PaginationDialog @onChangePage="onBoostingChangePage" :pageSize="boostingPageSize" :total="myRecordsList.length" />
</div>
</el-dialog>
@ -453,12 +459,12 @@ export default {
throw new Error('wallet not connected')
}
let storeageKey
this.isLoading = true
try {
storeageKey = await sendToChain('chest_open', address, id)
this.isLoading = true
} catch (err) {
this.$showErr(err.data.message)
this.$showErr(err)
this.isLoading = false
return
}
@ -490,31 +496,6 @@ export default {
}, 3000)
},
async turnBox(id) {
let address = localStorage.getItem("myAddress")
if(this.token) {
try {
let resOpen = await sendOpenChest(address, id)
if(resOpen) {
let serTimeId = setInterval(async () => {
let res = await this.$axios.post(
process.env.VUE_APP_API_URL+"/api/chest/open",
{ chestId: id },
{ headers: { Authorization: `Bearer ${this.token}` } }
);
if (res.data.errcode == 0) {
this.getMyBoxList()
this.openBoxLog()
clearInterval(serTimeId)
}
}, 2000)
}
} catch (e) {
this.$message.error(e.message)
}
}
},
//
async openBoxLog() {
let res = await this.$axios.get(process.env.VUE_APP_API_URL+'/api/chest/open/history', {
@ -541,7 +522,7 @@ export default {
console.log('[getMyHistoricalLog error]',res)
}
},
//
//
onBoostingChangePage(val) {
this.boostingCurrentPage = val
},
@ -558,8 +539,6 @@ export default {
//
copyLink(data) {
this.userData = JSON.parse(localStorage.getItem("userData"))
// console.log(data, this.userData.code)
// return
let url = `${location.protocol}//${location.host}/home/new=${this.userData.code}/box=${data.shareCode}/id=${data.id}`
let oInput = document.createElement("input");
oInput.value = url;
@ -1062,7 +1041,7 @@ export default {
}
.content {
margin: 20px 0;
height: 420px;
height: 450px;
.el-table {
background: #1a1821;
.el-table__header-wrapper {
@ -1095,10 +1074,29 @@ export default {
font-family: 'Poppins';
font-weight: 600;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
img {
width: 12px;
height: 16px;
width: 10px;
height: 14px;
margin-left: 10px;
margin-top: 2px;
}
div {
width: 55px;
margin-left: 5px;
text-align: right;
}
div:nth-child(2) {
width: 105px;
margin-left: 20px;
display: flex;
align-items: center;
img {
width: 20px;
height: 15px;
}
}
}
.touxiang {

View File

@ -2,7 +2,6 @@
<div>
<!-- <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>
@ -76,13 +75,12 @@ export default {
async sendOneAction(getTotalUsed, step) {
let address = this.$store.state.user.address;
if (!this.$store.state.wallet.connected || !address) {
console.log('====')
throw new Error('wallet not connected')
}
const preRes = await apiPreStep(step)
if (preRes.errcode) {
// this.$message.error(preRes.errmsg)
this.$showErr(preRes.errmsg)
this.$showErr(preRes)
return
}
this.isLoading = true
@ -90,7 +88,6 @@ export default {
try {
storeageKey = await sendToChain('explore', address, preRes.data.id)
} catch (err) {
this.$showErr(err.data.message)
this.isLoading = false
this.$showErr(err)
return
@ -123,41 +120,6 @@ export default {
}
}, 3000)
},
//
async stepBtn(getTotalUsed,amount) {
let myAddress = localStorage.getItem("myAddress")
if(await isWalletConnected()) {
if(amount >= 1) {
cc.mainAnim.setCurrPos(getTotalUsed)
cc.mainAnim.setData(amount)
let res = await this.$axios.post(process.env.VUE_APP_API_URL+'/api/game/pre_step',{step: amount},{headers: { Authorization: `Bearer ${this.token}` }})
let id = res.data.data.id
if(id){
try{
let result = await sendExplore(myAddress, id)
if(result) {
let serTimeId = setInterval(async () => {
let resExplore = await apiGameStep(id);
console.log(resExplore)
if(resExplore.data) {
console.log(resExplore.data)
this.$emit('awardDialog', this.awardData)
clearInterval(serTimeId)
// location.reload()
}
}, 2000)
}
} catch(e) {
this.$message.error(e.message)
}
}
} else {
this.$message.error('Get the number of explorations')
}
} else {
this.$message.error('Log in first')
}
},
}
};

View File

@ -1,6 +1,5 @@
<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>
@ -12,12 +11,14 @@
<div class="content-left">
<div class="user-info">
<div class="user-info-img">
<img :src="boxData.avatar" alt="" >
<img v-if="!boxData.avatar" src="@/assets/common/head_default.jpg" alt="" >
<img v-else :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="">
<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="btn" v-if="!token" @click="linkWallet">Wallet Connect</div>
<div class="btn" v-else>
@ -103,15 +104,21 @@ export default {
},
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];
// this.$axios.all([this.getBoxData(),this.getHelpBoxLog(),this.helpConfirm(),this.initBoxState(this.boxCode,this.boxId)])
this.getBoxData()
if(this.token) {
this.getHelpBoxLog()
// this.helpConfirm()
this.initBoxState(this.boxCode,this.boxId)
}
} else {
this.$emit('handleClose')
}
}
},
methods: {
//
@ -147,7 +154,7 @@ export default {
// headers: { Authorization: `Bearer ${this.token}` }
// });
let res = await apiUploadInviteCode(newInvite)
console.log('领取助力奖励 || 判断是否是新用户',res)
// console.log(' || ',res)
return
if (res.data.errcode == 0) {
this.isNewUser = 0
@ -202,15 +209,15 @@ export default {
// }
} else {
this.$emit('handleClose')
this.$message.error('Already helped this treasure chest')
this.$showErr('Already helped this treasure chest')
}
} else {
this.$emit('handleClose')
this.$message.error('The number of treasure chest boosts has been capped')
this.$showErr('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')
this.$showErr('The number of assists for the day has been capped')
}
},
@ -227,8 +234,8 @@ export default {
try {
storeageKey = await sendToChain('chest_enhance', address, boxCode)
} catch (err) {
this.$showErr(err.data.message)
this.isLoading = false;
this.$showErr(err)
return
}
let serTimeId = setInterval(async () => {
@ -258,7 +265,7 @@ export default {
}
} catch (err) {
this.isLoading = false;
this.$message.error(`claim task reward error: ${err}`)
this.$showErr(`claim task reward error: ${err}`)
}
}, 3000)
},
@ -267,6 +274,7 @@ 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}` }})
this.boxState = res.data.data
console.log(res.data.data)
if (this.boxState.userCurrent == this.boxState.userMax) {
if(this.boxState.enhanced == 1) {
this.$emit('handleClose')

View File

@ -560,7 +560,7 @@
<BoxBtm ref="boxList" @toExplore="toExplore" @awardDialog="activityDialog" />
</div>
<div class="box-btm" v-show="navIndex == 4">
<Ranking :activityName="activityData.name" />
<Ranking :activityName="activityData.name" ref="rankingData" />
</div>
</div>
@ -751,14 +751,10 @@ export default {
created() {
this.userData = JSON.parse(localStorage.getItem("userData"));
this.token = getToken();
this.$nextTick(() => {
if (this.$route.params.box) {
this.helpDialogVisible = true
}
});
},
mounted() {
this.initData()
console.log(this.getUserState())
},
methods: {
async initData() {
@ -881,7 +877,7 @@ export default {
var timer = setInterval(function() {
if (newwin.closed) {
clearInterval(timer);
alert(newwin.closed, "window closed");
// alert(newwin.closed, "window closed");
}
}, 10);
// location.href = url;
@ -910,7 +906,6 @@ export default {
},
//
async getTaskClaim(id) {
// debugger
let address = this.$store.state.user.address;
if (!this.$store.state.wallet.connected || !address) {
this.walletDialogVisible = true
@ -921,8 +916,8 @@ export default {
try {
storeageKey = await sendToChain('task_claim', address, id)
} catch (err) {
this.$showErr(err.data.message)
this.isLoading = false
this.$showErr(err)
return
}
let serTimeId = setInterval(async () => {
@ -1017,6 +1012,7 @@ export default {
} else {
this.dialogTitle = 'Congratulations'
}
this.$refs.rankingData.renewData()
this.getUserState()
this.getGameStat()
this.ExploreDialogVisible = true
@ -1038,7 +1034,8 @@ export default {
this.awardData = val
this.eventName = 'help_event'
this.dialogTitle = 'Congratulations'
this.getUserState()
this.filteredBar
this.ExploreDialogVisible = true
},
@ -1071,9 +1068,8 @@ export default {
try {
storeageKey = await sendToChain('check', address, '')
} catch (err) {
this.$showErr(err.data.message)
// console.log(err.data.message)
this.isLoading = false
this.$showErr(err)
return
}
let serTimeId = setInterval(async () => {
@ -1093,8 +1089,6 @@ export default {
}
} else {
this.isLoading = false
// alert(`, : ${data.score}`)
// this.$message.success(data.ticket)
this.checkAwardDialog(data)
this.$refs.renewCheck.renewCheckInit()
this.getGameStat();
@ -1110,9 +1104,6 @@ export default {
//
async claimSeqStat(day) {
// console.log(day)
// return
// ToDo
let res = await apiCheckinClaimSeq(day)
console.info(res)
this.getGameStat();
@ -1120,8 +1111,7 @@ export default {
//
async getCheckClaim(days) {
let res = await apiCheckinClaim(days);
// if (res.ticket) {
let res = await apiCheckinClaim(days)
console.info(res)
this.getGameStat();
// this.$message.success('Received successfully')
@ -1159,7 +1149,6 @@ export default {
try {
let { errcode, errmsg, data } = await apiEnhanceBox(boxCode)
if (!errcode) {
alert(`助力成功, 获得积分: ${data.score}`)
this.getGameStat();
localStorage.removeItem(storeageKey)
clearInterval(serTimeId)

View File

@ -44,7 +44,7 @@
</el-table>
</div>
<div class="btm">
<PaginationDialog @onChangePage="onBoostingChangePage" :total="invitationList.length" />
<PaginationDialog @onChangePage="onBoostingChangePage" :pageSize="logPageSize" :total="invitationList.length" />
</div>
</el-dialog>
</div>
@ -104,7 +104,7 @@ export default {
//
onBoostingChangePage(val) {
this.boostingCurrentPage = val;
this.logCurrentPage = val;
},
//

View File

@ -19,7 +19,13 @@
</div>
</div>
<div class="my-ranking">
<div class="my-ranking-history">
<p>My Ranking</p>
<div @click="historyDialogVisible = true">
<img src="@/assets/box/Icon_history.png" alt="">
<span>History</span>
</div>
</div>
<div class="list-btm">
<div class="ranking" v-if="userData.rankTotal == '-'">{{ userData.rankTotal }}</div>
<div class="ranking" v-else-if="userData.rankTotal >= 100">Not in the top 100 yet</div>
@ -76,7 +82,7 @@
<img src="@/assets/box/Icon_Star_01.png" alt="">
</div>
<div class="forward-list-item-top">
<div class="user-img">{{rankingTableData[2].avatar}}
<div class="user-img">
<img v-if="!rankingTableData[2]" src="@/assets/common/head_default.jpg" alt="">
<img v-else-if="rankingTableData[2].avatar == ''" src="@/assets/common/head_default.jpg" alt="">
<img v-else :src="rankingTableData[2].avatar" alt="">
@ -130,15 +136,58 @@
</div>
</div>
</div>
<!-- 我的积分记录 -->
<el-dialog class="records-dialog" :visible="historyDialogVisible" :modal="false" :before-close="historyHandleClose" :show-close="false">
<div class="top">
<div class="top-title">Historical Records</div>
<div class="top-close" @click="historyDialogVisible = false">
<img src="./../../assets/common/CloseButton.png" alt="">
</div>
</div>
<div class="content">
<el-table :data="historyCurrentPageItems">
<template slot="empty">
<div>No Data</div>
</template>
<el-table-column label="Action">
<template slot-scope="{ row }">
{{ typeName(row.type) }}
</template>
</el-table-column>
<el-table-column label="Time">
<template
slot-scope="scope"
>{{ scope.row.time | formatDate }}</template>
</el-table-column>
<!-- <el-table-column label="Username" :width="180">
<template
slot-scope="scope"
>{{ scope.row.address.slice(0,4) }}{{ '……'+scope.row.username }}</template>
</el-table-column> -->
<el-table-column label="Points">
<template slot-scope="scope">
<div class="points">
<span>{{ scope.row.score }}</span>
<img src="./../../assets/common/Icon_Points.png" alt="">
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="btm">
<PaginationDialog @onChangePage="onHistoryChangePage" :pageSize="logPageSize" :total="historyList.length" />
</div>
</el-dialog>
</div>
</template>
<script>
import { getToken } from './../../utils/cookies.js'
import formatPrice from '@/components/formatPrice.vue'
import PaginationDialog from '@/components/paginationDialog.vue'
export default {
components: {
PaginationDialog
},
props: {
activityName: String,
@ -147,38 +196,43 @@ export default {
return {
token: getToken(),
detailsDialog: false,
detailsList: [
{
action: 'Task',
time: '2024-03-08 12:59:37',
pts: '90'
}
],
historyList: [],
rankingTableData: [],
userData: [
{
scoreTotal: '0'
}
]
],
historyDialogVisible: false,
logPageSize: 6,
logCurrentPage: 1,
}
},
computed: {
//
historyCurrentPageItems() {
if(this.historyList.length == 0){
return this.historyList
}
let start = (this.logCurrentPage - 1) * this.logPageSize;
let end = start + this.logPageSize;
return this.historyList.slice(start, end)
},
},
mounted() {
if(this.token) {
this.getLeaderBoard()
// this.getUserState()
this.userData = JSON.parse(localStorage.getItem("userData"));
console.log(this.userData)
this.getMyIntegralList()
}
},
methods: {
//
async getMyIntegralList() {
let res = await this.$axios.get(process.env.VUE_APP_API_URL+`/api/user/checkin/list/all`,{ params: '',
let res = await this.$axios.get(process.env.VUE_APP_API_URL+`/api/activity/score_list`,{ params: '',
headers: { Authorization: `Bearer ${this.token}` },
})
this.detailsList = res.data.data
this.historyList = res.data.data
},
//
@ -197,6 +251,46 @@ export default {
localStorage.setItem('userData', JSON.stringify(res.data.data))
})
},
renewData() {
this.getLeaderBoard()
this.getMyIntegralList()
this.getUserState()
},
//
historyHandleClose() {
this.historyDialogVisible = false;
},
//
onHistoryChangePage(val) {
this.logCurrentPage = val;
},
//
typeName(type) {
if(type.includes('Social Tasks')) {
// //
return type = `Task`
} else if(type.includes('game_step')) {
//
return type = `Exploration`
} else if(type.includes('open_chest')) {
//
return type = `Open the Treasure`
} else if(type.includes('enhance_chest_gift')) {
//
return type = `Boosting`
} else if(type.includes('invite_rebate')) {
//
return type = `Invitation Earning`
} else if(type.includes('')) {
//
return type = `Task`
} else {
return type = 'Task'
}
},
},
}
@ -265,10 +359,35 @@ export default {
}
}
.my-ranking {
.my-ranking-history {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 30px;
position: relative;
z-index: 99;
cursor: pointer;
p {
font-size: 12px;
text-align: left;
margin-top: 40px;
}
div {
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
background: #2d2738;
padding: 8px 15px;
border-radius: 20px;
img {
width: 15px;
height: 15px;
margin-right: 5px;
}
span {
font-size: 12px;
}
}
}
.list-btm {
font-size: 28px;
@ -559,5 +678,112 @@ export default {
}
}
}
::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 {
margin: 20px 0;
height: 420px;
.el-table {
background: #1a1821;
.el-table__header-wrapper {
border-radius: 20px;
.el-table__header {
tr {
background: #1a1821;
overflow: hidden;
.el-table__cell {
border: 0px;
background: #2d2738;
color: #fff;
}
.el-table__cell:last-child {
border-radius: 0 20px 20px 0 !important;
}
}
}
}
.el-table__body-wrapper {
.el-table__body {
.el-table__row {
background: #1a1821;
.el-table__cell {
color: #fff;
border: 0px;
.points {
display: flex;
align-items: center;
justify-content: center;
// width: 80px;
margin: 0 auto;
color: #9950fa;
font-family: "Poppins";
font-weight: 600;
font-size: 16px;
img {
width: 12px;
height: 16px;
margin-left: 20px;
}
}
.touxiang {
display: flex;
align-items: center;
justify-content: space-evenly;
img {
width: 40px;
height: 40px;
}
}
}
}
}
tr:hover {
background: none !important;
td {
background: none;
}
}
}
&::before {
background: #1a1821;
}
}
}
.btm {
}
}
}
}
</style>