|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="mobile-land-page">
|
|
|
+ <div class="mobile-land-page" :class="isLoading ? 'loading-page' : ''">
|
|
|
<div class="mobile-land-page-invited-info" v-if="useFul && !isNFTCpd">
|
|
|
<img :src="userInfo.avatarUrl" class="invited-photo" />
|
|
|
<div class="invited-name">{{ userInfo.nickName }}</div>
|
|
|
@@ -63,6 +63,9 @@
|
|
|
<div class="mobile-land-page-tip">{{ tipCpd }}</div>
|
|
|
</FontZoom>
|
|
|
<div class="mobile-land-page-login-twitter" @click="toLogin">{{ isLoginCpd || loginSuccessBack ? (!useFul || isNFTCpd ? 'Install' : 'Claim Prize') : 'Login Twitter' }}</div>
|
|
|
+ <template v-if="isLoading">
|
|
|
+ <img class="loading" src="../static/svg/icon-loading.svg" />
|
|
|
+ </template>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -146,6 +149,7 @@ export default {
|
|
|
return {
|
|
|
timer: {},
|
|
|
loginSuccessBack: false,
|
|
|
+ isLoading: false,
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -240,12 +244,14 @@ export default {
|
|
|
}).then(({ code, data }) => {
|
|
|
if (code == 0) {
|
|
|
let url = getOauthUrl(data.authToken);
|
|
|
+ this.isLoading = true;
|
|
|
win.location.href = url;
|
|
|
this.timer.value = setInterval(() => {
|
|
|
if (win && win.closed) {
|
|
|
clearInterval(this.timer.value);
|
|
|
this.twitterLogin(data);
|
|
|
if (getStorage(storageKey.backFromTwitterLogin)) {
|
|
|
+ this.isLoading = false;
|
|
|
removeStorage(storageKey.backFromTwitterLogin);
|
|
|
this.cancelLogin();
|
|
|
}
|
|
|
@@ -268,6 +274,7 @@ export default {
|
|
|
oauthVerifier: verifier,
|
|
|
},
|
|
|
}).then(({ code, data }) => {
|
|
|
+ this.isLoading = false;
|
|
|
if (code == 0) {
|
|
|
setStorage(storageKey.userInfo, data);
|
|
|
removeStorage(storageKey.verifier);
|
|
|
@@ -397,5 +404,27 @@ export default {
|
|
|
text-align: center;
|
|
|
color: #fff;
|
|
|
}
|
|
|
+ .loading {
|
|
|
+ position: absolute;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ margin: auto;
|
|
|
+ width: 40px;
|
|
|
+ border-radius: 50%;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+.loading-page {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.loading-page::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
}
|
|
|
</style>
|
