添加弹窗
This commit is contained in:
yuyongdong
parent
5c33746861
commit
1cbd12f03a
BIN
src/assets/common/chest bg.png
Normal file
BIN
src/assets/common/chest bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
@ -1,28 +1,272 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 成功获得奖品弹窗 -->
|
||||
<el-dialog class="Explore-dialog" :visible.sync="ExploreDialogVisible" :modal="false" :before-close="ExploreHandleClose">
|
||||
<div class="btn" @click="ExploreDialogVisible = false">确定</div>
|
||||
<el-dialog class="Explore-dialog" :visible.sync="ExploreDialogVisible" :modal="false" :before-close="ExploreDialog">
|
||||
<div class="top">
|
||||
<div class="top-title" v-if="awardData.chest.length != 0">{{ dialogTitle }}</div>
|
||||
<div class="top-close" @click="ExploreDialog">
|
||||
<img src="./../../assets/common/CloseButton.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" v-if="awardData.chest.length != 0">
|
||||
<div class="content-points">
|
||||
<div>Points</div>
|
||||
<div>
|
||||
<span>X {{ awardData.score }}</span>
|
||||
<img src="./../../assets/common/Icon_Points.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-list">
|
||||
<li v-if="level1.length !=0">
|
||||
<div class="title">Normal Chest</div>
|
||||
<div class="box-img">
|
||||
<img :src="require(`./../../assets/box/box${level1[0].level}.png`)" alt="">
|
||||
</div>
|
||||
<div class="box-bg"></div>
|
||||
<div class="amount">
|
||||
X{{ level1.length }}
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="level2.length !=0">
|
||||
<div class="title">Advanced Chest</div>
|
||||
<div class="box-img">
|
||||
<img :src="require(`./../../assets/box/box${level2[0].level}.png`)" alt="">
|
||||
</div>
|
||||
<div class="box-bg"></div>
|
||||
<div class="amount">
|
||||
X {{ level2.amount }}
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="level3.length !=0">
|
||||
<div class="title">Epic Chest</div>
|
||||
<div class="box-img">
|
||||
<img :src="require(`./../../assets/box/box${level3[0].level}.png`)" alt="">
|
||||
</div>
|
||||
<div class="box-bg"></div>
|
||||
<div class="amount">
|
||||
X {{ level3.amount }}
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="level4.length !=0">
|
||||
<div class="title">Legendary Chest</div>
|
||||
<div class="box-img">
|
||||
<img :src="require(`./../../assets/box/box${level4[0].level}.png`)" alt="">
|
||||
</div>
|
||||
<div class="box-bg"></div>
|
||||
<div class="amount">
|
||||
X {{ level4.amount }}
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" v-else>
|
||||
<div class="points-title">{{ dialogTitle }}</div>
|
||||
<div class="points-amount">
|
||||
<div>Points</div>
|
||||
<div>
|
||||
<span>X {{ awardData.score }}</span>
|
||||
<img src="./../../assets/common/Icon_Points.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn" @click="ExploreDialog">Confirm</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
ExploreDialogVisible: Boolean,
|
||||
awardData: Object,
|
||||
level1: Array,
|
||||
level2: Array,
|
||||
level3: Array,
|
||||
level4: Array,
|
||||
dialogTitle: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ExploreDialogVisible: true,
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
computed: {
|
||||
// 计算探索宝箱的数量
|
||||
computedBoxList() {
|
||||
let arr = []
|
||||
for(let i = 0; i < data.length; i++) {
|
||||
if(data.level == 1) {
|
||||
arr.push(data[i])
|
||||
}
|
||||
console.log(arr)
|
||||
}
|
||||
return arr
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// console.log(this.awardData,'弹窗')
|
||||
},
|
||||
methods: {
|
||||
ExploreHandleClose() {
|
||||
this.ExploreDialogVisible = false
|
||||
// ExploreHandleClose() {
|
||||
// this.ExploreDialogVisible = false
|
||||
// },
|
||||
ExploreDialog() {
|
||||
this.$emit('handleClose')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<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 {
|
||||
margin: 20px 0;
|
||||
// height: 420px;
|
||||
.content-points {
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
background: #2d2738;
|
||||
border-radius: 20px;
|
||||
color: #fff;
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span {
|
||||
color: #924df2;
|
||||
font-weight: 700;
|
||||
}
|
||||
img {
|
||||
width: 10px;
|
||||
height: 13px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-list {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
padding: 30px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: url('./../../assets/common/chest bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
li {
|
||||
width: 25%;
|
||||
position: relative;
|
||||
.title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
font-family: "Anton-Regular";
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.box-img {
|
||||
width: 160px;
|
||||
height: 120px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.box-bg {
|
||||
width: 160px;
|
||||
height: 120px;
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: url('@/assets/box/Treasure Chest_bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.amount {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
font-family: "Anton-Regular";
|
||||
}
|
||||
}
|
||||
}
|
||||
.points-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
font-family: "Anton-Regular";
|
||||
}
|
||||
.points-amount {
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
margin: 50px auto;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
background: #2d2738;
|
||||
border-radius: 20px;
|
||||
color: #fff;
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span {
|
||||
color: #924df2;
|
||||
font-weight: 700;
|
||||
}
|
||||
img {
|
||||
width: 10px;
|
||||
height: 13px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
margin: 0 auto;
|
||||
color: #000;
|
||||
background: url('./../../assets/home/explore map button.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -23,6 +23,31 @@ export default {
|
||||
token: getToken(),
|
||||
// currIndex: localStorage.getItem('currIndex')
|
||||
currIndex: 0,
|
||||
awardData: {
|
||||
score: 20, //获得积分数量
|
||||
chest: [
|
||||
// { // 结构同 18.宝箱列表
|
||||
// id: 1, // 箱子id
|
||||
// stat: 0, // 0: 锁定, 1: 正常
|
||||
// shareCode: '箱子的分享码',
|
||||
// level: 1, // 箱子品级
|
||||
// maxBonus: 10, // 最大可助力数量
|
||||
// scoreInit: 5, // 初始可获得积分
|
||||
// scoreBonus: 10, // 助力增加的分数
|
||||
// bonusCount: 2, // 已助力次数
|
||||
// },
|
||||
// { // 结构同 18.宝箱列表
|
||||
// id: 1, // 箱子id
|
||||
// stat: 0, // 0: 锁定, 1: 正常
|
||||
// shareCode: '箱子的分享码',
|
||||
// level: 1, // 箱子品级
|
||||
// maxBonus: 10, // 最大可助力数量
|
||||
// scoreInit: 5, // 初始可获得积分
|
||||
// scoreBonus: 10, // 助力增加的分数
|
||||
// bonusCount: 2, // 已助力次数
|
||||
// }
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
@ -49,42 +74,45 @@ export default {
|
||||
|
||||
// 行动
|
||||
async stepBtn(getTotalUsed,amount) {
|
||||
let myAddress = localStorage.getItem("myAddress")
|
||||
// console.log(myAddress,getTotalUsed,amount,'--------------------------------')
|
||||
// return
|
||||
if(await isWalletConnected()) {
|
||||
if(amount >= 1) {
|
||||
cc.mainAnim.setCurrPos(getTotalUsed)
|
||||
cc.mainAnim.setData(amount)
|
||||
let res = await this.$axios.post('/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.data)
|
||||
if(resExplore.data) {
|
||||
console.log(resExplore.data)
|
||||
alert(resExplore.data)
|
||||
clearInterval(serTimeId)
|
||||
location.reload()
|
||||
}
|
||||
}, 2000)
|
||||
}
|
||||
} catch(e) {
|
||||
this.$message.error(e.message)
|
||||
}
|
||||
console.log(getTotalUsed,amount)
|
||||
this.$emit('awardDialog', this.awardData)
|
||||
|
||||
// let myAddress = localStorage.getItem("myAddress")
|
||||
// // console.log(myAddress,getTotalUsed,amount,'--------------------------------')
|
||||
// // return
|
||||
// if(await isWalletConnected()) {
|
||||
// if(amount >= 1) {
|
||||
// cc.mainAnim.setCurrPos(getTotalUsed)
|
||||
// cc.mainAnim.setData(amount)
|
||||
// let res = await this.$axios.post('/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.data)
|
||||
// if(resExplore.data) {
|
||||
// console.log(resExplore.data)
|
||||
// alert(resExplore.data)
|
||||
// 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')
|
||||
}
|
||||
// }
|
||||
// } else {
|
||||
// this.$message.error('Get the number of explorations')
|
||||
// }
|
||||
// } else {
|
||||
// this.$message.error('Log in first')
|
||||
// }
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
115
src/views/home/helpDialog.vue
Normal file
115
src/views/home/helpDialog.vue
Normal file
@ -0,0 +1,115 @@
|
||||
<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="" alt="" >
|
||||
</div>
|
||||
<div class="user-info-name">: <span>Thank you for your support! </span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn" @click="helpDialog">Confirm</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
helpDialogVisible: Boolean,
|
||||
awardData: Object,
|
||||
level1: Array,
|
||||
level2: Array,
|
||||
level3: Array,
|
||||
level4: Array,
|
||||
dialogTitle: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
// ExploreHandleClose() {
|
||||
// this.ExploreDialogVisible = false
|
||||
// },
|
||||
helpDialog() {
|
||||
this.$emit('handleClose')
|
||||
},
|
||||
},
|
||||
}
|
||||
</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;
|
||||
margin-top: 20px;
|
||||
.content-left {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: url('./../../assets/box/Bg_chest.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.content-right {}
|
||||
}
|
||||
.btn {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
margin: 0 auto;
|
||||
color: #000;
|
||||
background: url('./../../assets/home/explore map button.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -67,7 +67,7 @@
|
||||
<div class="explore">
|
||||
<div class="explore-zill">
|
||||
<!-- <canvas :width="800" :height="600"></canvas> -->
|
||||
<gameView ref="stepId" :stepAmount="stepAmount" :getTotalUsed="getTotalUsed" />
|
||||
<gameView ref="stepId" :stepAmount="stepAmount" :getTotalUsed="getTotalUsed" @awardDialog="awardDialog" />
|
||||
</div>
|
||||
<div class="explore-desc" v-if="navIndex == 0">
|
||||
<div class="explore-desc-logo">
|
||||
@ -387,7 +387,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 宝箱助力 -->
|
||||
<div class="help-dialog" v-if="helpDialogVisible">
|
||||
<div class="help-dialog" v-if="!helpDialogVisible">
|
||||
<div class="help-dialog-header">
|
||||
宝箱助力
|
||||
<span @click="helpDialogVisible = false">
|
||||
@ -469,7 +469,11 @@
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<AwardDialog />
|
||||
<!-- 宝箱助力弹窗 -->
|
||||
<HelpDialog :helpDialogVisible="helpDialogVisible" @handleClose="helpHandleClose" />
|
||||
|
||||
<!-- 奖励弹窗 -->
|
||||
<AwardDialog :ExploreDialogVisible="ExploreDialogVisible" @handleClose="ExploreHandleClose" :awardData="awardData" :level1='level1' :level2='level2' :level3='level3' :level4='level4' :dialogTitle="dialogTitle" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -482,6 +486,7 @@ import gameView from "./gameView.vue";
|
||||
import CheckBtn from "@/components/checkBtn.vue";
|
||||
import WalletDialog from "@/components/walletDialog/index.vue";
|
||||
import AwardDialog from './awardDialog.vue'
|
||||
import HelpDialog from './helpDialog.vue'
|
||||
import { getToken } from '@/utils/cookies.js'
|
||||
import { getWalletAddress, isWalletConnected, linkWallet } from "@/wallet/index.js";
|
||||
import {
|
||||
@ -503,7 +508,8 @@ export default {
|
||||
WalletDialog,
|
||||
BoxBtm,
|
||||
CheckBtn,
|
||||
AwardDialog
|
||||
AwardDialog,
|
||||
HelpDialog,
|
||||
// ImgView,
|
||||
},
|
||||
data() {
|
||||
@ -557,7 +563,7 @@ export default {
|
||||
nickname: "0000000"
|
||||
}
|
||||
],
|
||||
helpDialogVisible: false,
|
||||
helpDialogVisible: true,
|
||||
isHelpSuccess: false,
|
||||
helpAmount: 0,
|
||||
isHelpBox: false,
|
||||
@ -568,6 +574,13 @@ export default {
|
||||
stepTicket: 0, // 探索次数
|
||||
inviteDialogVisible: false,
|
||||
inviteTableData: [],
|
||||
ExploreDialogVisible: true,
|
||||
awardData: {},
|
||||
level1: [],
|
||||
level2: [],
|
||||
level3: [],
|
||||
level4: [],
|
||||
dialogTitle: '',
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@ -787,6 +800,38 @@ export default {
|
||||
this.$refs.stepId.stepBtn(this.getTotalUsed, amount)
|
||||
},
|
||||
|
||||
// 探索奖励
|
||||
awardDialog(val) {
|
||||
this.awardData = val
|
||||
if(this.awardData.chest.length > 0) {
|
||||
this.level1 = []
|
||||
this.level2 = []
|
||||
this.level3 = []
|
||||
this.level4 = []
|
||||
val.chest.forEach(element => {
|
||||
if (element.level == "1") {
|
||||
this.level1.push(element)
|
||||
} else if (element.level == "2") {
|
||||
this.level2.push(element)
|
||||
} else if(element.level == "3"){
|
||||
this.level3.unshift(element)
|
||||
} else if(element.level == "4"){
|
||||
this.level4.push(element)
|
||||
}
|
||||
});
|
||||
this.dialogTitle = 'Explore successfully and get rewards'
|
||||
} else {
|
||||
this.dialogTitle = 'Congratulations'
|
||||
}
|
||||
|
||||
this.ExploreDialogVisible = true
|
||||
},
|
||||
|
||||
// 关闭奖励弹窗
|
||||
ExploreHandleClose() {
|
||||
this.ExploreDialogVisible = false;
|
||||
},
|
||||
|
||||
// 签到
|
||||
async walletCheck() {
|
||||
let address = localStorage.getItem("myAddress")
|
||||
@ -979,6 +1024,11 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭助力弹窗
|
||||
helpHandleClose() {
|
||||
this.helpDialogVisible = false;
|
||||
},
|
||||
|
||||
// 复制链接
|
||||
copyLink(text) {
|
||||
let url = `http://192.168.100.216:8030/home/new=${text}/box=undefined/id=undefined`;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user