de-net-official/pages/treasure/invite.vue

<template>
	<div class="nft-content">
		<template v-if="isLoading">
			<img class="loading" src="../../static/svg/icon-loading.svg" />
		</template>
		<template v-else>
			<template v-if="isMobile">
				<MobileGuidePage
					:playType="PlayType.Treasure"
					:detail="detail"
					:postUserInfo="detail.postUserInfo"
					:reportMore="{
						shareLinkId: $route.params.id,
					}"
				></MobileGuidePage>
			</template>
			<template v-else>
				<div class="logo">
					<img src="/img/icon-logo.png" alt />
				</div>
				<div class="show">
					<div class="center">
						<div class="content-wrapper">
							<img class="img img-left" :src="detail.inviteUserInfo.avatarUrl" alt="" />
							<div class="middle">
								<div class="invite-txt">@{{ detail.inviteUserInfo.nickName }} invite you to</div>
								<div class="title">Hunt the Treaure</div>
								<div class="up-gain-txt">
									Each can gain up to <span class="amount"> ${{ detail.upGainAmountValue }}</span>
								</div>
							</div>
							<img class="img" src="../../static/svg/icon-treasure.svg" alt="" />
						</div>
						<div class="btn-wrapper" @click="clickBtn()">
							<template v-if="isChrome"> Install Denet Chrome Extension </template>
							<template v-else>
								<img class="img" src="../../static/svg/icon-chrome-down.svg" />
								Open in Chrome to participate
							</template>
						</div>
					</div>
				</div>
			</template>
		</template>
	</div>
</template>

<script>
import axios from 'axios';
import Cookies from 'js-cookie';
import { Toast } from 'vant';
import { isBrowser, appVersionCode, appType, denetExtensionId, detectExtension } from '../../utils/help.js';
import Report from '@/log-center/log';
import MobileGuidePage from '@/components/MobileGuidePage.vue';
import { PlayType } from '@/types';

const api = {
	prod: 'https://api.denetme.net',
	pre: 'https://preapi.denetme.net',
	test: 'https://testapi.denetme.net',
};
const page = {
	prod: 'https://h5.denetme.net',
	pre: 'https://preh5.denetme.net',
	test: 'https://testh5.denetme.net',
};
const jumpUrl = page[process.env.NUXT_ENV.MODE] + '/';
const baseURL = api[process.env.NUXT_ENV.MODE];
const ClipboardJS = require('clipboard');

export default {
	name: 'ntf',
	data() {
		return {
			PlayType,
			isLoading: true,
			appVersionCode: appVersionCode,
			jumpUrl: jumpUrl,
			detail: {
				inviteUserInfo: {
					avatarUrl: '',
					nickName: '',
				},
				amountValue: '',
				currencySymbol: '',
				amountUsdValue: '',
				totalCount: '',
			},
			config: {},
			title: 'Treasure Hunt',
			isMobile: false,
			isChrome: false,
			linkHref: '',
			pageLink: '',
		};
	},
	components: {
		MobileGuidePage,
	},
	head() {
		return {
			type: '',
			title: this.title,
			appVersionCode: appVersionCode,
			meta: [
				// facebook
				{
					name: 'og:title',
					content: `Treasure Chest: ${this.detail.amountValue} ${this.detail.currencySymbol} (worth $${this.detail.amountUsdValue}) for ${this.detail.totalCount} winners`,
				},
				{
					name: 'og:image',
					content: this.detail.imagePath || '',
				},
				{
					name: 'og:url',
					content: this.pageLink,
				},
				// twitter
				{
					name: 'twitter:card',
					content: 'summary_large_image',
				},
				{
					name: 'twitter:title',
					content: `Treasure Chest: ${this.detail.amountValue} ${this.detail.currencySymbol} (worth $${this.detail.amountUsdValue}) for ${this.detail.totalCount} winners`,
				},
				{
					name: 'twitter:image',
					content: this.detail.imagePath || '',
				},
			],
		};
	},
	async asyncData(params) {
		let { route } = params;
		let { data } = await axios.post(`${baseURL}/denet/post/treasure/invite/detail`, {
			baseInfo: {
				appVersionCode: appVersionCode,
				mid: (function () {
					return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
						var r = (Math.random() * 16) | 0,
							v = c == 'x' ? r : (r & 0x3) | 0x8;
						return v.toString(16);
					});
				})(),
			},
			params: {
				inviteCode: route.params.id || '',
				pageName: 'landPage',
			},
		});
		if (data.code == 0) {
			return {
				detail: data.data,
				pageLink: `${jumpUrl}treasure/invite/${route.params.id}/${route.params.channel}`,
			};
		}
	},
	created() {
		this.getConfig();
	},
	mounted() {
		this.setCookieMid();
		Cookies.set(this.detail.postId, JSON.stringify({ inviteCode: this.$route.params.id, channel: this.$route.params.channel }), { expires: 100 });
		this.setTreasureInfo();

		detectExtension(denetExtensionId, (isInstall) => {
			if (isInstall) {
				if (this.detail.repostSrcContentId && this.detail.inviteUserInfo && this.detail.inviteUserInfo.nickName) {
					let url = `https://twitter.com/${this.detail.inviteUserInfo.nickName}/status/${this.detail.repostSrcContentId}`;
					window.location.replace(url);
				}
				this.isLoading = false;
			} else {
				this.isLoading = false;
			}
		});

		this.checkBrowser();

		var clipboard = new ClipboardJS('.btn');
		let that = this;
		clipboard.on('success', function (e) {
			Toast('copy success');
			// 埋点
			that.trackingClick();
			e.clearSelection();
		});
		this.pageSource = Report.pageSource.newUserLandingPage;
		// 埋点
		if (this.isMobile) {
			this.pageSource = Report.pageSource.mobileLandingPage;
			Report.reportLog({
				baseInfo: {
					appVersionCode: this.appVersionCode,
					mid: this.mid,
					pageSource: this.pageSource,
					machineCode: this.mid,
				},
				params: {
					eventData: {
						businessType: Report.businessType.pageView,
						shareLinkId: this.$route.params.id,
						postId: this.detail.postId,
						redPacketType: 4,
					},
				},
			});
		} else {
			Report.reportLog({
				baseInfo: {
					appVersionCode: appVersionCode,
					mid: this.mid,
					pageSource: this.pageSource,
					appType,
					machineCode: this.mid,
				},
				params: {
					eventData: {
						businessType: Report.businessType.pageView,
						postId: this.detail.postId,
						srcContentId: this.detail.srcContentId,
						redPacketType: 4,
						shareLinkId: this.$route.params.id,
					},
				},
			});
		}
	},
	methods: {
		clickBtn() {
			if (this.isChrome) {
				Report.reportLog({
					baseInfo: {
						appVersionCode: appVersionCode,
						mid: this.mid,
						pageSource: this.pageSource,
						appType,
						machineCode: this.mid,
					},
					params: {
						eventData: {
							businessType: Report.businessType.buttonClick,
							postId: this.detail.postId,
							srcContentId: this.detail.srcContentId,
							redPacketType: 4,
							shareLinkId: this.$route.params.id,
						},
					},
				});
				let { extensionsInstallUrl } = this.config;
				window.open(extensionsInstallUrl);
			} else {
				this.installChrome();
			}
		},
		checkInstall() {
			return new Promise((resolve, reject) => {
				let dom = document.querySelector('#denet_message');
				console.log('denet_message', dom);
				if (dom) {
					resolve(true);
				} else {
					reject(false);
				}
			});
		},
		trackingClick() {},
		guid() {
			return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
				var r = (Math.random() * 16) | 0,
					v = c == 'x' ? r : (r & 0x3) | 0x8;
				return v.toString(16);
			});
		},
		setCookieMid() {
			let _cookie_mid_arr = Cookies.get('mid') || [];
			if (_cookie_mid_arr.length > 0) {
				this.mid = JSON.parse(_cookie_mid_arr)[0].mid;
			} else {
				this.mid = this.guid();
				Cookies.set('mid', JSON.stringify([{ mid: this.mid }]), { expires: 1000 });
			}
		},
		installExtension() {
			// 埋点
			this.trackingClick();
			let { extensionsInstallUrl } = this.config;
			window.open(extensionsInstallUrl);
		},
		installChrome() {
			window.open('https://www.google.com/chrome');
		},
		async getConfig() {
			let { data } = await axios.post(`${baseURL}/denet/base/config/getFrontConfig`, {
				baseInfo: {
					appVersionCode: appVersionCode,
					mid: this.mid,
				},
				params: {},
			});
			if (data.code == 0) {
				this.config = data.data;
			}
		},
		checkBrowser() {
			this.linkHref = window.location.href;
			this.isChrome = isBrowser() == 'chrome';
			this.isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
		},
		setTreasureInfo() {
			let treasureInfo = {
				createTime: Date.now(),
				jump_type: 'treasure_info',
				srcContentId: this.detail.repostSrcContentId || '',
				postNickName: this.detail.inviteUserInfo.nickName,
				postId: this.detail.postId,
				shareLinkId: this.$route.params.id,
				channelName: this.$route.params.channel ? window.atob(this.$route.params.channel) : '',
			};
			Cookies.set('jump_info', JSON.stringify(treasureInfo), { expires: 100 });
		},
	},
};
</script>

<style lang="scss">
html,
body,
#__nuxt,
#__layout {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

.nft-content {
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, #d8efff 0%, #ffffff 44.3%);

	.loading {
		position: absolute;
		transform: translate(-50%, -50%);
		top: 50%;
		left: 50%;
		margin: auto;
		width: 40px;
		border-radius: 50%;
	}

	.logo {
		display: flex;
		align-items: center;
		height: 70px;
		margin-left: 25px;

		img {
			width: 99px;
			height: 32px;
		}
	}

	.show {
		display: flex;
		align-items: center;
		height: calc(100% - 70px);

		.center {
			margin: -50px auto 0;
			width: 480px;
			height: 260px;
			box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.1);
			border-radius: 12px;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			padding: 26px;
			box-sizing: border-box;

			.content-wrapper {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 14px;

				.img {
					width: 70px;
					height: 70px;
				}

				.img-left {
					border-radius: 50%;
				}

				.middle {
					padding: 0 20px;
					box-sizing: border-box;

					.invite-txt {
						color: #727272;
						font-weight: 400;
						font-size: 13px;
					}

					.title {
						font-weight: 800;
						font-size: 20px;
						margin: 6px 3px 0;
					}

					.up-gain-txt {
						color: #f8bc2b;
						font-weight: 600;
						font-size: 13px;
						display: flex;
						align-items: center;

						.amount {
							font-weight: 700;
							font-size: 22px;
						}
					}
				}
			}

			.btn-wrapper {
				margin-top: 54px;
				padding: 16px;
				box-sizing: border-box;
				background: #1d9bf0;
				border-radius: 100px;
				color: #ffffff;
				font-weight: 700;
				font-size: 17px;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;

				.img {
					width: 28px;
					height: 28px;
					margin-right: 8px;
				}
			}
		}
	}
}
</style>