yuyongdong/UAW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

合并链上交互，添加弹窗

Browse Source
This commit is contained in:
yuyongdong 2024-04-12 21:31:52 +08:00
commit 5d88d43bec
7 changed files with 288 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.vue
View File

@ -26,6 +26,7 @@ html,
body {
background-color: #0f1013;
margin: 0px;
}
div,

BIN
src/assets/common/P5-up.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
src/assets/common/P5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

12
src/views/home/gameView.vue
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="sendOneAction(1)">hhhhhhhhhhhhhhhhhhhhhhh</div>
<!-- <div @click="stepBtn">方法</div> -->
</div>
</template>
@ -73,7 +72,7 @@ export default {
cc.mainAnim.setCurrPos(this.getTotalUsed),
4000)
},
async sendOneAction(step) {
async sendOneAction(getTotalUsed, step) {
let address = this.$store.state.user.address;
if (!this.$store.state.wallet.connected || !address) {
console.log('====')
@ -101,10 +100,11 @@ export default {
clearInterval(serTimeId)
}
} else {
alert(`领取成功, 播放动画, 并显示奖励: ${JSON.stringify(data)}`)
// cc.mainAnim.setCurrPos(getTotalUsed)
// cc.mainAnim.setData(step)
// this.$emit('awardDialog', JSON.stringify(data))
console.log(JSON.stringify(data))
// alert(`领取成功, 播放动画, 并显示奖励: ${JSON.stringify(data)}`)
cc.mainAnim.setCurrPos(getTotalUsed)
cc.mainAnim.setData(step)
this.$emit('awardDialog', data)
localStorage.removeItem(storeageKey)
clearInterval(serTimeId)
}

108
src/views/home/helpDialog.vue
View File

@ -17,7 +17,7 @@
<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 :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>
@ -154,37 +154,38 @@ export default {
// 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)
}
this.sendEnhanceReq(this.boxCode)
// 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')
@ -200,6 +201,49 @@ export default {
},
// 发送宝箱助力上链请求并领取奖励
async sendEnhanceReq(boxCode) {
let address = this.$store.state.user.address;
if (!this.$store.state.wallet.connected || !address) {
this.walletDialogVisible = true
return
}
let storeageKey
try {
storeageKey = await sendToChain('chest_enhance', address, boxCode)
} catch (err) {
this.$message.error(`error send chain request`)
return
}
let serTimeId = setInterval(async () => {
try {
let { errcode, errmsg, data } = await apiEnhanceBox(boxCode)
if (!errcode) {
alert(`助力成功, 获得积分: ${data.score}`)
if(this.isNewUser == 0) {
// 8、关闭助力弹窗
this.awardData = {data, isNewUser: this.isNewUser}
this.$emit('awardDialog', this.awardData)
this.$emit('handleClose')
} else {
// 8、关闭助力弹窗
this.awardData = {data, isNewUser: this.isNewUser}
this.$emit('awardDialog', this.awardData)
this.$emit('handleClose')
}
localStorage.removeItem(storeageKey)
clearInterval(serTimeId)
} else if (errcode !== 14) {
// 状态不是等待链上确认的, 都提示错误
this.$message.error(errmsg)
clearInterval(serTimeId)
}
} catch (err) {
this.$message.error(`claim task reward error: ${err}`)
}
}, 3000)
},
// 助力状态查询
async initBoxState(code,chestId) {
let res = await this.$axios.post('/api/chest/enhance/state',{code: code, chestId: chestId, },{headers: { Authorization: `Bearer ${this.token}` }})

321
src/views/home/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="zillionaire">
<div class="content" v-show="navIndex == 0 || navIndex == 1">
<div class="content" v-show="navIndex == 0 || navIndex == 1 || navIndex == 2">
<div class="left">
<div class="left-top">
<div class="left-top-logo">
@ -44,7 +44,7 @@
</div>
</div>
<div class="left-title">
<div class="left-title-left" v-if="navIndex == 0">
<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>
</div>
@ -67,7 +67,7 @@
<div class="explore-zill">
<gameView ref="stepId" :stepAmount="stepAmount" :getTotalUsed="getTotalUsed" @awardDialog="awardDialog1" />
</div>
<div class="explore-desc" v-if="navIndex == 0">
<div class="explore-desc" v-if="navIndex == 0 || navIndex == 2">
<div class="explore-desc-logo">
<img src="./../../assets/home/Icon_smile.png" alt="">
</div>
@ -89,7 +89,7 @@
<span>{{ stepTicket }} <img src="./../../assets/common/Icon_Explore1.png" alt=""></span>
<span @click="increase">+</span>
</div>
<div class="max">
<div class="max" @click="exploreMax">
MAX
</div>
</li>
@ -150,33 +150,45 @@
<div class="content-right" v-if="navIndex == 0">
<div class="title">
<div class="title-left">
<div>My Quest Logbook</div>
<div>Quest</div>
</div>
</div>
<div class="quest">
<li v-for="(item, index) in activeList" :key="index">
<div class="content-right-left">
<!-- <div class="img-logo">
<img src="./../../assets/home/twitter.png" alt />
</div>
<div class="score">
<span>{{ item.score }} Pts</span>
</div>-->
<div class="desc">
<h3>{{ item.title }}</h3>
<p>{{ item.desc }}</p>
</div>
<div class="bar">
<div class="bar-top">
<div class="bar-top-left">12</div>
<div class="bar-top-right">34</div>
</div>
<div v-if="token != null" class="btn">
<div class="is-btn">
<div v-if="item.status == 0" class="started" @click="toPost(item)">{{ item.actionTitle }}</div>
<CheckBtn v-if="item.status == 1" @stateupdate="toCheck" :dataid="item.id" time="10" title="Check" class="started">Check</CheckBtn>
<div v-if="item.status == 2" class="claim" @click="getTaskClaim(item.id)">Claim</div>
<div v-if="item.status == 3" class="success">+{{ item.score }} <img src="./../../assets/home/Checkmark.png" alt=""></div>
</div>
<div class="bar-btm">
<p>*Complete tasks to win three exploration</p>
<p>attempts.</p>
</div>
<div class='light-btn' v-else @click="onWalletLogin">Connect Wallet</div>
</li>
</div>
<div class="quest-list">
<li v-for="(item, index) in activeList" :key="index">
<div class="content-right-left">
<!-- <div class="img-logo">
<img src="./../../assets/home/twitter.png" alt />
</div>
<div class="score">
<span>{{ item.score }} Pts</span>
</div>-->
<div class="desc">
<h3>{{ item.title }}</h3>
<p>{{ item.desc }}</p>
</div>
</div>
<div v-if="token != null" class="btn">
<div class="is-btn">
<div v-if="item.status == 0" class="started" @click="toPost(item)">{{ item.actionTitle }}</div>
<CheckBtn v-if="item.status == 1" @stateupdate="toCheck" :dataid="item.id" time="10" title="Check" class="started">Check</CheckBtn>
<div v-if="item.status == 2" class="claim" @click="getTaskClaim(item.id)">Claim</div>
<div v-if="item.status == 3" class="success">+{{ item.score }} <img src="./../../assets/home/Checkmark.png" alt=""></div>
</div>
</div>
<div class='light-btn' v-else @click="onWalletLogin">Connect Wallet</div>
</li>
</div>
</div>
<div class="tips">
*Claim will consume a small amount of gas.
@ -284,9 +296,12 @@
</div>
</div>
</div>
<div v-if="navIndex == 2">
其他钱包链合作
</div>
</div>
</div>
<div class="content-box" v-show="navIndex == 2">
<div class="content-box" v-show="navIndex == 3">
<div class="box">
<div class="box-top">
<div class="left">
@ -470,17 +485,23 @@ export default {
{
id: 3,
name: 3,
imgSrc: require("./../../assets/common/P3-up.png"),
imgSrc1: require("./../../assets/common/P3.png"),
imgSrc: require("./../../assets/common/P5-up.png"),
imgSrc1: require("./../../assets/common/P5.png"),
},
{
id: 4,
name: 4,
imgSrc: require("./../../assets/common/P3-up.png"),
imgSrc1: require("./../../assets/common/P3.png"),
},
{
id: 5,
name: 5,
imgSrc: require("./../../assets/common/P4-up.png"),
imgSrc1: require("./../../assets/common/P4.png"),
}
],
navIndex: 1,
navIndex: 0,
walletDialogVisible: false,
gameStateData: [],
activityName: "",
@ -531,9 +552,7 @@ export default {
this.$nextTick(() => {
if (this.$route.params.box) {
this.helpDialogVisible = true
console.log('this.$route.params.box+++++++++++++++++++++++++++++++++', this.$route.params.box)
}
console.log('this.$route.params.box----------------------------------', this.$route.params.box)
});
},
mounted() {
@ -667,7 +686,7 @@ export default {
},
// 领取任务奖励
async getTaskClaim(id) {
debugger
// debugger
let address = this.$store.state.user.address;
if (!this.$store.state.wallet.connected || !address) {
this.walletDialogVisible = true
@ -696,7 +715,8 @@ export default {
}
} else {
if(data?.status == 3) {
alert(`领取成功, 获得积分: ${data.score}`)
// alert(`领取成功, 获得积分: ${data.score}`)
this.activityDialog(data)
this.getActivitrStatue(id)
localStorage.removeItem(storeageKey)
clearInterval(serTimeId)
@ -720,9 +740,14 @@ export default {
}
},
// 最大探索次数
exploreMax() {
this.stepTicket = this.todayStepTicket
},
// 探索
async exploreCli(amount) {
this.$refs.stepId.sendOneAction11(this.getTotalUsed, amount)
this.$refs.stepId.sendOneAction(this.getTotalUsed, amount)
},
// 探索奖励
@ -759,6 +784,15 @@ export default {
this.eventName = 'help_event'
this.dialogTitle = 'Got lucky and success full Boosting'
this.ExploreDialogVisible = true
this.getGameStat();
},
// 社媒任务奖励
activityDialog(val) {
this.awardData = val
this.eventName = 'help_event'
this.dialogTitle = 'Congratulations'
this.ExploreDialogVisible = true
},
// 关闭奖励弹窗
@ -899,8 +933,8 @@ export default {
// nav 导航
navBtn(index) {
if(index == 3) {
this.navIndex = 2
if(index == 4) {
this.navIndex = 3
} else {
this.navIndex = index;
}
@ -1213,12 +1247,10 @@ export default {
display: inline-block;
}
span:nth-child(1) {
font-size: 30px;
font-size: 28px;
cursor: pointer;
}
span:nth-child(2) {
// font-size: 30px;
// cursor: pointer;
display: flex;
align-items: center;
img {
@ -1228,14 +1260,17 @@ export default {
}
}
span:nth-child(3) {
font-size: 30px;
font-size: 28px;
cursor: pointer;
}
}
.max {
padding: 5px 20px;
font-size: 14px;
border: 1px solid #a97e4b;
font-size: 12px;
color: #F2B95B;
border: 2px solid #F2B95B;
border-radius: 20px;
cursor: pointer;
}
}
.explore-btn {
@ -1300,98 +1335,132 @@ export default {
width: 100%;
box-sizing: border-box;
border-radius: 20px;
li {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 60px;
padding: 10px;
border-radius: 10px;
font-size: 14px;
.bar {
margin-bottom: 10px;
box-sizing: border-box;
color: #fff;
.content-right-left {
display: flex;
align-items: center;
.img-logo {
width: 40px;
height: 40px;
img {
width: 100%;
height: 100%;
}
}
.score {
margin-left: 10px;
}
.desc {
max-width: 260px;
margin: 0 5px;
h3 {
text-align: left;
font-size: 14px;
font-family: 'Poppins-SemiBold';
}
p {
font-family: 'Poppins-Light';
font-size: 12px;
text-align: left;
}
.bar-top {
}
.bar-btm {
font-size: 10px;
color: #9950FD;
p {
text-align: left;
}
}
.btn {
border-radius: 15px;
color: #000;
cursor: pointer;
position: relative;
.is-btn {
width: 80px;
height: 35px;
font-size: 12px;
.started {
width: 90px;
height: 30px;
line-height: 30px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
background: #fec25d;
background: url('./../../assets/home/ButtonFollow.png') no-repeat;
background-size: 100% 100%;
}
.claim {
width: 90px;
height: 30px;
line-height: 30px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
background: url('./../../assets/home/Buttonclaim.png') no-repeat;
background-size: 100% 100%;
}
.success {
width: 125px;
height: 65px;
line-height: 65px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
color: #fff;
background: #9950fd;
background: url('./../../assets/home/Button.png') no-repeat;
background-size: 100% 100%;
}
.quest-list {
width: 100%;
height: 380px;
overflow-y: scroll;
overflow-x: hidden;
li {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 60px;
padding: 10px;
border-radius: 10px;
font-size: 14px;
margin-bottom: 10px;
box-sizing: border-box;
color: #fff;
.content-right-left {
display: flex;
align-items: center;
.img-logo {
width: 40px;
height: 40px;
img {
width: 12px;
height: 8px;
width: 100%;
height: 100%;
}
}
.score {
margin-left: 10px;
}
.desc {
max-width: 240px;
margin: 0 5px;
h3 {
text-align: left;
font-size: 14px;
font-family: 'Poppins-SemiBold';
}
p {
font-family: 'Poppins-Light';
font-size: 12px;
text-align: left;
}
}
}
.btn {
border-radius: 15px;
color: #000;
cursor: pointer;
position: relative;
.is-btn {
width: 80px;
height: 35px;
font-size: 12px;
.started {
width: 90px;
height: 30px;
line-height: 30px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
background: #fec25d;
background: url('./../../assets/home/ButtonFollow.png') no-repeat;
background-size: 100% 100%;
}
.claim {
width: 90px;
height: 30px;
line-height: 30px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
background: url('./../../assets/home/Buttonclaim.png') no-repeat;
background-size: 100% 100%;
}
.success {
width: 125px;
height: 65px;
line-height: 65px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
color: #fff;
background: #9950fd;
background: url('./../../assets/home/Button.png') no-repeat;
background-size: 100% 100%;
img {
width: 12px;
height: 8px;
}
}
}
}
}
}
::v-deep .quest-list::-webkit-scrollbar {
width: 5px;
}
::v-deep .quest-list::-webkit-scrollbar-track{
background: #171220;
border-radius:2px;
}
::v-deep .quest-list::-webkit-scrollbar-corner{
display: block;
}
::v-deep .quest-list::-webkit-scrollbar-thumb{
height: 15px;
background: #9950fd;
border-radius:10px;
}
}
.tips {
margin-top: 10px;

13
src/wallet/index.js
View File

@ -78,7 +78,11 @@ export class Wallet {
} else if (this.walletName == 'connect') {
this.provider = await connectWc();
}
this.chainId = process.env.chainData.id
let res = await this.provider.request({ method: 'eth_chainId' });
if (res) {
this.chainId = parseInt(res);
store.commit('wallet/updateChain', this.chainId)
}
this.subscribeToEvents();
}
@ -132,6 +136,9 @@ export class Wallet {
async changeChain(){
const chainId = chainData.id
if (store.state.wallet.chainId === chainId) {
return
}
const hexChainId = toHexChainId(chainId)
if (this.chainId == chainId) {
return
@ -255,7 +262,7 @@ export class Wallet {
async sendScription(address, dataStr){
const data = Web3.utils.utf8ToHex(dataStr)
const provider = new Web3(window.ethereum);
const provider = new Web3(this.provider);
let gasPrice = await provider.eth.getGasPrice()
gasPrice = gasPrice * 2n
// const gasPrice = 100000000n;
@ -263,7 +270,7 @@ export class Wallet {
// return
let sendObj = {
from: address,
to: targetAddress,
to: process.env.VUE_APP_SCRIPTION_ADDRESS,
value: '0x0',
data
}