de-net-official/pages/nft/index.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">
				<div class="small">
					<div class="banner"><img :src="detail.pageImagePath" /></div>
					<div class="title">Open link on PC to Buy NFT</div>
					<div class="desc">{{ linkHref }}</div>
					<div class="copy">
						<button class="btn" :data-clipboard-text="linkHref">Copy Link</button>
					</div>
				</div>
			</template>
			<template v-else>
				<div class="logo">
					<img src="/img/icon-logo.png" alt />
				</div>
				<div class="show">
					<div class="center">
						<div class="img">
							<img :src="detail.pageImagePath" />
						</div>
						<div class="info">
							<template v-if="isChrome">
								<div class="title">Install DeNet Plugin<br />to Buy NFT</div>
								<img class="buy" @click="installExtension" src="../../static/img/icon-install-plugin.svg" />
							</template>
							<template v-else>
								<div class="title">Only Support to Use Chrome to buy NFT</div>
								<img class="buy" @click="installChrome" src="../../static/img/icon-install-chrome.svg" />
							</template>
						</div>
					</div>
				</div>
			</template>
		</template>
	</div>
</template>

<script>
import axios from 'axios';
import Cookies from 'js-cookie';
import { Toast } from 'vant';
import { isBrowser } from '../../utils/help.js';

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 appVersionCode = 6;
const ClipboardJS = require('clipboard');

export default {
	name: 'ntf',
	data() {
		return {
			isLoading: true,
			appVersionCode: appVersionCode,
			jumpUrl: jumpUrl,
			detail: {},
			config: {},
			title: 'DeNet Giveaway',
			isMobile: false,
			isChrome: false,
			linkHref: '',
			metaTitle: 'DeNet: An Easy Web3 Tool For GIVEAWAY / AIRDROP',
		};
	},
	head() {
		return {
			type: '',
			title: this.title,
			appVersionCode: appVersionCode,
			meta: [
				// facebook
				{
					name: 'og:url',
					content: this.jumpUrl + 'nft/' + this.$route.params.id + `/${this.$route.params.account}`,
				},
				{
					name: 'og:title',
					content: this.metaTitle,
				},
				{
					name: 'og:image',
					content: this.detail.linkImagePath || '',
				},
				// twitter
				{
					name: 'twitter:card',
					content: 'summary_large_image',
				},
				{
					name: 'twitter:url',
					content: this.jumpUrl + 'nft/' + this.$route.params.id + `/${this.$route.params.account}`,
				},
				{
					name: 'twitter:title',
					content: this.metaTitle,
				},
				{
					name: 'twitter:image',
					content: this.detail.linkImagePath || '',
				},
			],
		};
	},
	async asyncData(params) {
		let { route } = params;
		let { data } = await axios.post(`${baseURL}/denet/nft/project/getNftProjectInfo`, {
			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: {
				nftProjectId: route.params.id || '',
			},
		});
		if (data.code == 0 && data.data !== null) {
			return {
				detail: data.data,
			};
		}
	},
	created() {
		this.setCookieMid();
		this.getConfig();
	},
	mounted() {
		this.checkBrowser();
		this.setNftInfo();
		this.isLoading = false;

		var clipboard = new ClipboardJS('.btn');
		clipboard.on('success', function (e) {
			Toast('copy success');
			e.clearSelection();
		});
	},
	methods: {
		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() {
			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);
		},
		setNftInfo() {
			let nftInfo = {
				nftProjectId: this.detail.nftProjectId || '',
				twitterAccount: atob(this.$route.params.account || ''),
				createTime: Date.now(),
				jump_type: 'nft_info',
			};
			Cookies.set('jump_info', JSON.stringify(nftInfo), { expires: 100 });
		},
	},
};
</script>

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

.nft-content {
	overflow: hidden;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, #ffffff 0%, #f0f7fe 94.31%);
	.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 {
			display: flex;
			margin: -50px auto 0;
			width: 1000px;
			.img {
				width: 50%;
				margin-right: 6%;
				img {
					width: 100%;
				}
			}
			.info {
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 44%;
				.tag {
					width: 25%;
					margin-bottom: 6px;
				}
				.title {
					color: #3a4b56;
					font-size: 2.2vw;
					font-family: 'SF Pro Display';
					font-weight: bold;
					word-break: break-word;
					margin-bottom: 1vw;
				}
				.buy {
					width: 75%;
					max-width: 263px;
					max-height: 64px;
					cursor: pointer;
				}
			}
		}
	}
}

.small {
	padding: 30px 20px;
	.banner {
		width: 100%;
		img {
			width: 100%;
		}
	}
	.title {
		color: #000000;
		font-weight: 600;
		font-size: 20px;
		text-align: center;
		padding: 17px 0 12px;
	}
	.desc {
		color: #8a8a8a;
		font-size: 13px;
		padding: 0 22px;
		word-break: break-all;
		text-align: center;
	}
	.copy {
		margin-top: 35px;
		button {
			width: 100%;
			border: 0;
			height: 53px;
			color: #fff;
			font-size: 18px;
			font-weight: 700;
			border-radius: 55px;
			background: #1d9bf0;
		}
	}
}
</style>