161 lines
3.4 KiB
Vue
161 lines
3.4 KiB
Vue
<template>
|
|
<div class="sinup">
|
|
<div class="content">
|
|
<div class="title">
|
|
<div>INFORMATION REQUIRED</div>
|
|
<div>FOR PARTICIPATION</div>
|
|
</div>
|
|
<iframe
|
|
id="iframe"
|
|
src="https://nft-mpc-test.lifo.ai/public/campaign-challenge/358"
|
|
frameborder="0"
|
|
></iframe>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {checkStatus} from '@/api/webapi'
|
|
export default {
|
|
data() {
|
|
return {
|
|
value: "",
|
|
};
|
|
},
|
|
mounted() {
|
|
console.log("mounted");
|
|
this.checkStatus()
|
|
window.addEventListener("message", (e) => {
|
|
if (e.data?.type === "w3wCampaignJoinSuccess") {
|
|
console.log("on get iframe message: ");
|
|
console.log(e.data);
|
|
this.checkStatus()
|
|
}
|
|
});
|
|
let iframe = document.getElementById("iframe");
|
|
let self = this;
|
|
iframe.onload = function () {
|
|
console.log("iframe load");
|
|
setTimeout(() => {
|
|
console.log("send wallet address to remote page");
|
|
self.sendAddressToIframe(self.$store.state.account);
|
|
}, 1000);
|
|
};
|
|
},
|
|
methods: {
|
|
async checkStatus() {
|
|
let res = await checkStatus(this.$store.state.account)
|
|
if (res.errcode) {
|
|
return;
|
|
}
|
|
if (res.status === 4) {
|
|
this.$router.push("rankinglist")
|
|
} else if (res.status === 1) {
|
|
this.$router.push("recommend")
|
|
}
|
|
},
|
|
navigator() {
|
|
this.$router.push("recommend");
|
|
},
|
|
|
|
sendAddressToIframe(address) {
|
|
let iframe = document.getElementById("iframe");
|
|
iframe.contentWindow.postMessage(
|
|
{
|
|
type: "w3wWalletAddressUpdate",
|
|
data: {
|
|
walletAddress: address,
|
|
},
|
|
},
|
|
"*"
|
|
);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.sinup {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #000;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-content: center;
|
|
background: url(../../assets/mobile/bg-content.png);
|
|
background-size: 100% 100%;
|
|
}
|
|
.content {
|
|
margin-top: 16vw;
|
|
// width: 300px;
|
|
// height: 300px;
|
|
}
|
|
.title {
|
|
width: 96%;
|
|
text-align: center;
|
|
font-size: 1.4rem;
|
|
font-family: BigJohn;
|
|
font-weight: 400;
|
|
color: #000000;
|
|
text-shadow: 5px 4px 9px rgba(0, 0, 0, 0.35);
|
|
background: linear-gradient(171deg, #775437 0.1220703125%, #f2c082 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
margin-bottom: 6vh;
|
|
}
|
|
.invitation-code {
|
|
width: 75%;
|
|
padding-left: 1.6vw;
|
|
margin: 0 auto;
|
|
border: 2px solid #e4e4e4;
|
|
border-radius: 14px;
|
|
margin-bottom: 15vh;
|
|
}
|
|
/deep/ .el-input__inner {
|
|
background-color: transparent !important;
|
|
border-color: transparent;
|
|
}
|
|
.address {
|
|
font-size: 0.2rem;
|
|
text-align: center;
|
|
font-family: 'OPPOSans';
|
|
font-weight: normal;
|
|
color: #edbc80;
|
|
line-height: 34px;
|
|
}
|
|
.input-code {
|
|
width: 45vw;
|
|
}
|
|
.submit-btn {
|
|
width: 100%;
|
|
text-align: center;
|
|
|
|
.btn {
|
|
width: 47.2vw;
|
|
background: linear-gradient(165deg, #775437, #f2c082);
|
|
border-radius: 40px;
|
|
}
|
|
}
|
|
/deep/.el-button {
|
|
border-color: transparent;
|
|
border-radius: 40px;
|
|
font-weight: 400;
|
|
font-size: 1.3rem;
|
|
color: #fffefe;
|
|
}
|
|
.connect-btn {
|
|
width: 50%;
|
|
text-align: center;
|
|
line-height: 4vh;
|
|
height: 4vh;
|
|
margin: 0 auto;
|
|
margin-bottom: 4vh;
|
|
font-size: 1.4rem;
|
|
background: linear-gradient(165deg, #775437, #f2c082);
|
|
border-radius: 40px;
|
|
}
|
|
#iframe {
|
|
width: 100vw;
|
|
height: 80vh;
|
|
}
|
|
</style> |