de-net-official/components/MobileLandPage.vue

<template>
	<div class="mobile-land-page">
		<div class="mobile-land-page-invited-info">
			<img :src="detail.postBizData.postUserInfo.avatarUrl" class="invited-photo" />
			<div class="invited-name">{{ detail.postBizData.postUserInfo.nickName }}</div>
			<div class="invited-text">Send You Giveaway!</div>
		</div>
		<div class="mobile-land-page-icon">icon</div>
		<div class="mobile-land-page-prize-info">
			<template></template>
		</div>
		<div class="mobile-land-page-login-twitter" @click="toLogin">Login Twitter</div>
	</div>
</template>
<script>
import { RewardType, PlayType } from '../types';
import { getStorage, setStorage, removeStorage, storageKey, getOauthUrl, createWindow } from '../utils/help';
import { postRequest } from '../http';

export default {
	name: 'mobileLandPage',
	props: {
		detail: {
			type: Object,
			default: () => {
				return {
					postBizData: {},
				};
			},
		},
		extensionsInstallUrl: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			config: {},
			timer: {},
		};
	},
	computed: {
		isMoneyRewardCpd() {
			return this.rewardType === RewardType.money;
		},
		isLottaryCpd() {
			return this.playType === PlayType.lottery;
		},
	},
	methods: {
		toLogin() {
			let userInfo = getStorage(storageKey.userInfo);
			if (userInfo) {
				location.href = `/nft/list`;
			} else {
				this.twitterAuth();
			}
		},
		async twitterAuth() {
			postRequest(`/denet/user/twitterRequestToken`, {
				params: {
					oauthCallback: `${location.protocol}//${location.host}/authlogin`,
				},
			}).then(({ code, data }) => {
				if (code == 0) {
					console.log('%c [ data ]-78', 'font-size:13px; background:pink; color:#bf2c9f;', data);
					let url = getOauthUrl(data.authToken);

					let win = createWindow(url);
					this.timer.value = setInterval(() => {
						if (win && win.closed) {
							clearInterval(this.timer.value);
							this.twitterLogin(data);
						}
					}, 500);
				}
			});
		},
		async twitterLogin(authData) {
			let verifier = getStorage(storageKey.verifier);
			if (verifier) {
				postRequest(`/denet/user/twitterLogin`, {
					params: {
						consumerKey: authData.consumerKey,
						oauthToken: authData.authToken,
						oauthVerifier: verifier,
					},
				}).then(({ code, data }) => {
					if (code == 0) {
						console.log('%c [ data ]-100', 'font-size:13px; background:pink; color:#bf2c9f;', data);
						setStorage(storageKey.userInfo, data);
						removeStorage(storageKey.verifier);
					}
				});
			}
		},
	},
};
</script>
<style lang="scss" scoped>
.mobile-land-page {
	min-height: 100vh;
	max-height: 100vh;
	background: linear-gradient(180deg, #cceaff 0%, #ffffff 70.42%);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	&-invited-info {
		width: 300px;
		height: 70px;
		margin-top: 28px;
		position: relative;
		padding-left: 81px;
		border-radius: 35px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		background: #ffffff;
		border: 1px solid #c0daeb;
		.invited-photo {
			width: 70px;
			height: 70px;
			border-radius: 50%;
			position: absolute;
			left: 0;
			top: 0;
		}
		.invited-name {
			margin: 13px 0 5px;
			font-weight: 500;
			font-size: 13px;
			line-height: 16px;
			letter-spacing: 0.3px;
			color: #000000;
		}
		.invited-text {
			font-weight: 700;
			font-size: 17px;
			line-height: 20px;
			letter-spacing: 0.3px;
			color: #f99d23;
		}
	}
	&-icon {
		flex: 1;
	}
	&-login-twitter {
		width: 100%;
		height: 54px;
		margin: 18px 16px 30px;
		border-radius: 54px;
		background: #1d9bf0;
		text-align: center;
		line-height: 54px;
		font-weight: 700;
		font-size: 18px;
		text-align: center;
		color: #fff;
	}
}
</style>