de-net-official/components/MobileLandPage.vue

<template>
	<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>
			<div class="invited-text">{{ isTreasureCpd ? 'Invite You to Hunt the Treasure' : 'Send You Giveaway!' }}</div>
		</div>
		<div class="mobile-land-page-icon-wrap">
			<img class="mobile-land-page-icon" :src="iconCpd" />
		</div>
		<div class="mobile-land-page-prize-info">
			<template v-if="!useFul">
				<div class="mobile-land-page-prize-info-test">
					<!-- time-expired -->
				</div>
			</template>
			<!-- 红包 -->
			<template v-else-if="isLottaryCpd">
				<div class="mobile-land-page-prize-info-test">You are gifted an entries to earn</div>
				<div class="mobile-land-page-prize-info-test">
					<img v-if="!isCustomRewardCpd" class="icon" :src="currencyIconPath" />
					<span class="pre-amount-value">{{ isCustomRewardCpd ? 1 : amountValue }}</span>
					<span class="prize-name">{{ prize }}</span>
					<span class="usd-amount" v-if="!isCustomRewardCpd && usValue"> (${{ usValue }})</span>
				</div>
			</template>
			<!-- 抽奖 -->
			<template v-else-if="isCommonCpd">
				<div class="mobile-land-page-prize-info-test">
					You Won
					<img v-if="!isCustomRewardCpd" class="icon" :src="currencyIconPath" />
					<span class="pre-amount-value">{{ isCustomRewardCpd ? 1 : amountValue }}</span>
					<FontZoom width="240" style="color: #000">
						<span class="prize-name">{{ prize }}</span>
					</FontZoom>
					<span class="usd-amount" v-if="!isCustomRewardCpd && usValue"> (${{ usValue }})</span>
				</div>
				<div class="mobile-land-page-prize-info-test">in the Giveaway!</div>
			</template>
			<!-- 夺宝 -->
			<template v-else-if="isTreasureCpd">
				<div class="mobile-land-page-prize-info-test">Complete the quest to win up to</div>
				<div class="mobile-land-page-prize-info-test">
					<span class="pre-amount-value" v-if="amountValue">{{ amountValue }}</span>
					<span class="prize-name">{{ prize }}</span>
					<span class="usd-amount treasure-usd-amount"> ${{ usValue }} for you two!</span>
				</div>
			</template>
			<!-- NFT -->
			<template v-else-if="isNFTCpd">
				<div class="mobile-land-page-prize-info-test">
					<span class="prize-name">{{ prize }}</span>
					is in your
				</div>
				<div class="mobile-land-page-prize-info-test">DeNet NFT wallet!</div>
			</template>
			<!-- 兜底显示 -->
			<template v-else>
				<div class="mobile-land-page-prize-info-test"></div>
			</template>
		</div>
		<FontZoom width="330">
			<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>
import { RewardType, PlayType } from '../types';
import { getStorage, setStorage, removeStorage, storageKey, getMid, getOauthUrl } from '../utils/help';
import { postRequest } from '../http';
import FontZoom from './FontZoom';
import { Toast } from 'vant';
import Report from './../log-center/log';

const overTimePic = require('../static/img/icon-h5-denet.svg');
const giveawayPic = require('../static/img/icon-h5-giveaway.svg');
const redpackPic = require('../static/img/icon-h5-redpack.svg');
const treasurePic = require('../static/img/icon-h5-treasure.svg');

export default {
	name: 'mobileLandPage',
	props: {
		playType: {
			// 玩法类型, 红包 / 抽奖 / 夺宝 / NFT
			type: Number,
		},
		rewardType: {
			// 奖品类型  货币/ 自定义奖品
			type: Number,
			default: 1,
		},
		useFul: {
			// 红包仍在有效期，可领取
			type: Boolean,
			default: true,
		},
		userInfo: {
			type: Object,
			default: () => {
				return {};
			},
		},
		currencyIconPath: {
			// 货币头像
			type: String,
			default: '',
		},
		amountValue: {
			// 奖品数量
			type: [String, Number],
			default: '1',
		},
		usValue: {
			// 转换为美金 的价值
			type: [String, Number],
			default: '',
		},
		prize: {
			// 奖品 描述
			type: String,
			default: '',
		},
		srcContentId: {
			// 推文ID
			type: String,
			default: '',
		},
		postId: {
			// 推文ID，用于retweer
			type: String,
			default: '',
		},
		nftProjectId: {
			// NFT ID
			type: String,
			default: '',
		},
		prizePicPath: {
			// NFT图片
			type: String,
			default: '',
		},
	},
	data() {
		return {
			timer: {},
			loginSuccessBack: false,
			isLoading: false,
		};
	},
	computed: {
		isCustomRewardCpd() {
			return this.rewardType === RewardType.custom;
		},
		isLottaryCpd() {
			return this.playType === PlayType.lottery;
		},
		isCommonCpd() {
			return this.playType === PlayType.common;
		},
		isTreasureCpd() {
			return this.playType === PlayType.Treasure;
		},
		isNFTCpd() {
			return this.playType === PlayType.NFT;
		},
		iconCpd() {
			if (!this.useFul) {
				return overTimePic;
			} else if (this.isCommonCpd) {
				return redpackPic;
			} else if (this.isLottaryCpd) {
				return giveawayPic;
			} else if (this.isTreasureCpd) {
				return treasurePic;
			} else if (this.isNFTCpd) {
				return this.prizePicPath;
			}
			{
				return overTimePic;
			}
		},
		tipCpd() {
			if (!this.useFul) {
				return 'login Twitter to install DeNet Chrome Extension';
			} else if (this.isCommonCpd) {
				return 'to claim,  log in twitter to install Denet Chrome Extension';
			} else if (this.isLottaryCpd) {
				return 'To participate, login Twitter to install DeNet Chrome Extension';
			} else if (this.isTreasureCpd) {
				return 'To complete, log in twitter to install Denet Chrome Extension';
			} else {
				return 'login Twitter to install DeNet Chrome Extension';
			}
		},
		isLoginCpd() {
			return !!getStorage(storageKey.userInfo);
		},
	},
	methods: {
		toLogin() {
			let userInfo = getStorage(storageKey.userInfo);
			let logData = {
				baseInfo: {
					mid: getMid(),
					pageSource: Report.pageSource.mobileLandingPage,
					machineCode: getMid(),
				},
				params: {
					eventData: {
						businessType: Report.businessType.buttonClick,
						objectType: userInfo ? Report.objectType.cliamRewardButton : Report.objectType.loginTwitterButton,
						postId: this.postId,
					},
				},
			};
			if (this.isNFTCpd) {
				delete logData.params.eventData.postId;
				logData.params.eventData.nftProjectId = this.nftProjectId;
			}
			if (userInfo) {
				// ios手机跳转时丢失log，缓存至下个页面进行上报
				setStorage('land-page-log', JSON.stringify(logData));
				location.href = `/course?useful=${this.useFul ? '1' : '0'}&playType=${this.playType}&rewardType=${this.rewardType}&postId=${this.postId}&nftProjectId=${this.nftProjectId}&srcContentId=${this.srcContentId}`;
			} else {
				Report.reportLog(logData);
				this.twitterAuth();
			}
		},
		goCoursePage() {
			location.href = `/course?useful=${this.useFul ? '1' : '0'}&playType=${this.playType}&rewardType=${this.rewardType}&postId=${this.postId}&nftProjectId=${this.nftProjectId}&srcContentId=${this.srcContentId}`;
		},
		async twitterAuth() {
			let win = window.open();
			win.opener = null;
			postRequest(`/denet/user/twitterRequestToken`, {
				params: {
					oauthCallback: `${location.protocol}//${location.host}/authlogin`,
				},
			}).then(({ code, data }) => {
				if (code == 0) {
					let url = getOauthUrl(data.authToken);
					this.isLoading = true;
					setStorage('goto-twitter-login-page', 1);
					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.goCoursePage();
							}
						}
					}, 500);
				} else {
					Toast('login fail');
					win.close();
					this.goCoursePage();
				}
			});
		},
		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 }) => {
					this.isLoading = false;
					if (code == 0) {
						setStorage(storageKey.userInfo, data);
						removeStorage(storageKey.verifier);
						this.loginSuccessBack = true;
						location.href = `/course?useful=${this.useFul ? '1' : '0'}&playType=${this.playType}&rewardType=${this.rewardType}&postId=${this.postId}`;
					}
				});
			} else {
				this.isLoading = false;
			}
		},
		visibilityHandle() {
			console.log('visibilitychange', document.hidden);
			var isHidden = document.hidden;
			if (!isHidden) {
				let verifier = getStorage(storageKey.verifier);
				const isFromTwitterLoginPage = getStorage('goto-twitter-login-page');
				if (isFromTwitterLoginPage && !verifier) {
					this.isLoading = false;
					this.goCoursePage();
				}
			}
		},
	},
	mounted() {
		document.addEventListener('visibilitychange', this.visibilityHandle);
	},
	unmounted() {
		removeStorage(storageKey.backFromTwitterLogin);
		document.removeEventListener('visibilitychange', this.visibilityHandle);
	},
	components: { FontZoom },
};
</script>
<style lang="scss" scoped>
.mobile-land-page {
	min-height: 100%;
	max-height: 100%;
	background: linear-gradient(180deg, #cceaff 0%, #ffffff 70.42%);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	padding: 0 16px;
	&-invited-info {
		min-width: 302px;
		height: 72px;
		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;
		padding-right: 12px;
		box-sizing: border-box;
		white-space: nowrap;

		.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;
			max-width: 210px;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}
		.invited-text {
			font-weight: 700;
			font-size: 17px;
			line-height: 20px;
			letter-spacing: 0.3px;
			color: #f99d23;
		}
	}
	&-icon-wrap {
		display: flex;
		flex: 1;
		align-items: center;
		.mobile-land-page-icon {
			width: 100%;
		}
	}
	&-prize-info {
		font-style: normal;
		font-weight: 700;
		font-size: 18px;
		line-height: 21px;
		color: #000000;
		&-test {
			display: flex;
			align-items: center;
			justify-content: center;
			.pre-amount-value {
				margin-left: 3px;
			}
			.icon {
				width: 22px;
				height: 22px;
				margin-left: 3px;
			}
			.prize-name {
				margin: 0 3px;
			}

			.treasure-usd-amount {
				color: #f99d23;
				font-weight: 700;
				font-size: 18px;
			}
		}
	}
	&-tip {
		font-weight: 400;
		font-size: 13px;
		line-height: 16px;
		text-align: center;
		color: #7b7b7b;
		margin-top: 10px;
	}
	&-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;
	}
	.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>