de-net-official/pages/toolbox/index.vue

<template>
	<div class="main">
		<!-- pc -->
		<template v-if="device == 'chrome' || device == 'no-chrome'">
			<div class="content">
				<div></div><div></div><div></div>
				<div class="twCard" ref="twCard">
					<div class="twLine" :style=" { zoom: scale } ">
						<div class="twTitle">
							<div class="twHead">
								<img :src="userInfo.avatarUrl" />
							</div>
							<div class="twName">
								<span><strong>@{{ detail.srcUserId }}</strong></span>
							</div>
						</div>
						<div class="twShow">
							<div class="showTit">{{ detail.postBizData.linkTitle || '' }}</div>
							<div class="showImg">
								<img :src="detail.postBizData.viewBgImagePath" />
							</div>
						</div>
					</div>
					<img src="../../static/img/img-card-bg.png" />
				</div>
				<div class="twInfo">
					<div class="title">
						<span>{{ detail.postBizData.linkTitle || '' }}</span>
					</div>
					<div class="invitation">
						<template v-if="device == 'no-chrome'">
							<install-chrome :imgUrl=" require('../../static/img/img-chrome.svg') "></install-chrome>
						</template>
						<template v-if="device == 'chrome'">
							<install-extension :imgUrl=" require('../../static/img/img-no-chrome.svg') " :extensionsInstallUrl="config.extensionsInstallUrl" @installClick="installClick"></install-extension>
						</template>
						<img class="hand" src="../../static/img/img-hand.png" />
					</div>
					<div class="detail" @click="goOriginLink" v-if="detail.postBizData.certNftProjectId">Visit the original page</div>
				</div>
				<div></div><div></div><div></div>
			</div>
		</template>

		<div class="mask" v-if="showLoading">
			<van-loading color="#ffffff" size="40"></van-loading>
			<div class="text">Jumping to the original page, please wait a few seconds</div>
		</div>

		<!-- 移动端 -->
		<div v-if="device == 'ios' || device == '安卓'" class="mobile">
			<div class="mobile-content">
				<img :src="detail.postBizData.linkImagePath" alt="" />
				<div class="title">Open link on PC to use Subway Surfers</div>
			</div>
			<div class="area-button">
				<div class="btn1" @click="clickExtension">Install Chrome Extension</div>
				<div class="btn2" @click="clickCopy" :data-clipboard-text="copy_link">Copy Link</div>
			</div>
		</div>
	</div>
</template>
<script>
import VLogo from '@/components/logo.vue';
import InstallChrome from '@/components/InstallChrome.vue';
import InstallExtension from '@/components/InstallExtension.vue';
import { getBrowserType, baseURL, appVersionCode, jumpUrl, appType } from '@/utils/help.js';
import axios from 'axios';
import Cookies from 'js-cookie';
import { Toast } from 'vant';
import Report from '@/log-center/log';

var ClipboardJS = require('clipboard');

export default {
	name: 'tool_box',
	data() {
		return {
			config: {},
			copy_link: '',
			title: 'Install DeNet Plugin to Participate',
			metaTitle: 'Install DeNet Plugin to Participate',
			device: '',
			detail: {},
			mid: '',
			pageSource: '',
			img_url: '',
			scale: 1,
			userInfo: {},
			showLoading: false,
		};
	},
	head() {
		return {
			type: '',
			title: this.title,
			appVersionCode: appVersionCode,
			meta: [
				// facebook
				{
					name: 'og:url',
					content: jumpUrl + 'toolbox/' + this.$route.params.id,
				},
				{
					name: 'og:title',
					content: this.metaTitle,
				},
				{
					name: 'og:image',
					content: this.detail.postBizData.linkImagePath || '',
				},
				// twitter
				{
					name: 'twitter:card',
					content: 'summary_large_image',
				},
				{
					name: 'twitter:url',
					content: jumpUrl + 'toolbox/' + this.$route.params.id,
				},
				{
					name: 'twitter:title',
					content: this.detail.postBizData.linkTitle || this.metaTitle,
				},
				{
					name: 'twitter:image',
					content: this.detail.postBizData.linkImagePath || '',
				},
			],
		};
	},
	components: {
		VLogo,
		InstallChrome,
		InstallExtension,
	},
	async asyncData(params) {
		let { route } = params;
		let { data } = await axios.post(`${baseURL}/denet/post/getDetail`, {
			baseInfo: {
				appVersionCode: appVersionCode,
				mid: '00000000-0000-0000-0000-000000000000',
			},
			params: {
				postId: route.params.id || '',
			},
		});
		if (data.code == 0) {
			if (data.data && data.data.postBizData && typeof data.data.postBizData == 'string') {
				data.data.postBizData = JSON.parse(data.data.postBizData);
			}
			if (data.data.postBizData === null) {
				data.data.postBizData = {
					postUserInfo: {},
				};
			}
			console.log('detail', data.data);

			return {
				detail: data.data,
			};
		}
	},
	created() {
		this.$nextTick(() => {
			this.mobileLink();
		})
	},
	mounted() {
		if (this.detail.postBizData.linkImagePath.indexOf('default') > 0) {
			this.img_url = '/img/img-default.png';
		} else {
			this.img_url = this.detail.postBizData.linkImagePath;
		}
		let that = this;
		this.pageSource = Report.pageSource.newUserLandingPage;
		this.setCookieMid();
		this.device = getBrowserType();
		if (this.device == 'ios' || this.device == '安卓') {
			Report.reportLog({
				baseInfo: {
					appVersionCode: appVersionCode,
					mid: this.mid,
					pageSource: Report.pageSource.mobileLandingPage,
					appType,
					machineCode: this.mid,
				},
				params: {
					eventData: {
						businessType: Report.businessType.pageView,
						postId: this.detail.postId,
						srcContentId: this.detail.srcContentId,
						redPacketType: 5,
						nftProjectId: this.detail.postBizData.certNftProjectId,
						postEditorUrl: this.detail.postBizData.convertUrl,
					},
				},
			});
		} 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: 5,
						postEditorUrl: this.detail.postBizData.convertUrl,
					},
				},
			});
		}
		
		this.copy_link = window.location.href;
		this.getConfig();
		this.getUserInfo();
		console.log('device', this.device);
		if (this.device == 'chrome') {
			this.setCookie();
		}
		// 计算缩放
		this.sumScale();
		window.onresize = function() {
			that.sumScale();
		}
	},

	methods: {
		installClick() {
			Report.reportLog({
				baseInfo: {
					appVersionCode: appVersionCode,
					mid: this.mid,
					pageSource: this.pageSource,
					appType,
					machineCode: this.mid,
				},
				params: {
					eventData: {
						businessType: Report.businessType.buttonClick,
						objectType: Report.objectType.installButton,
						postId: this.detail.postId,
						srcContentId: this.detail.srcContentId,
						redPacketType: 5,
						postEditorUrl: this.detail.postBizData.convertUrl,
					},
				},
			});
		},
		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 });
			}
		},
		setCookie() {
			let pickupInfo = {
				srcContentId: this.detail.srcContentId || '',
				postNickName: this.detail.srcUserId || '',
				createTime: Date.now(),
				jump_type: 'tool_box',
			};
			Cookies.set('jump_info', JSON.stringify(pickupInfo), { expires: 1000 });
		},
		async getConfig() {
			let { data } = await axios.post(`${baseURL}/denet/base/config/getFrontConfig`, {
				baseInfo: {
					appVersionCode: this.appVersionCode,
					mid: this.mid,
				},
				params: {},
			});
			if (data.code == 0) {
				this.config = data.data;
			}
		},
		async getUserInfo() {
			let { data } = await axios.post(`${baseURL}/denet/user/getUserInfo`, {
				baseInfo: {
					appVersionCode: this.appVersionCode,
					mid: this.mid,
				},
				params: {
					uid: this.detail.uid
				},
			});

			if (data.code == 0) {
				this.userInfo = data.data;
			}
		},
		clickCopy() {
			// 复制链接
			var clipboard = new ClipboardJS('.btn2');
			clipboard.on('success', function (e) {
				Toast('copy success');
				e.clearSelection();
			});

			clipboard.on('error', function () {
				Toast('copy error');
			});
			
			Report.reportLog({
				baseInfo: {
					appVersionCode: appVersionCode,
					mid: this.mid,
					pageSource: Report.pageSource.mobileLandingPage,
					appType,
					machineCode: this.mid,
				},
				params: {
					eventData: {
						businessType: Report.businessType.buttonClick,
						objectType: Report.objectType.copyLinkButton,
						postId: this.detail.postId,
						srcContentId: this.detail.srcContentId,
						redPacketType: 5,
						nftProjectId: this.detail.postBizData.certNftProjectId,
						postEditorUrl: this.detail.postBizData.convertUrl,
					},
				},
			});
		},
		clickExtension() {
			window.open(this.config.extensionsInstallUrl);
		},
		sumScale() {
			if (this.device == 'chrome' || this.device == 'no-chrome') {
				this.$nextTick(() => {
					let obj = this.$refs.twCard;
					if (obj && obj.offsetWidth) {
						this.scale = obj.offsetWidth / 680;
					} else {
						setTimeout(() => {
							this.sumScale()
						}, 200)
					}
				})
			}
		},
		goOriginLink() {
			if (this.detail.postBizData.originUrl) {
				window.open(this.detail.postBizData.originUrl)
			}
		},
		mobileLink() {
			if (this.device == 'ios' || this.device == '安卓') {
				this.showLoading = true;
				if (!('certNftProjectId' in this.detail.postBizData)) {
					if (this.detail.postBizData.originUrl) {
						window.location.href = this.detail.postBizData.originUrl
					} else {
						setTimeout(() => {
							this.mobileLink()
						}, 200)
					}
				} else {
					this.showLoading = false;
				}
			}
		},
	},
};
</script>
<style lang="scss">
html,
body,
#__nuxt,
#__layout {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: #F5FAFF;
}

.main {
	width: 100%;
	height: 100%;

	.content {
		display: flex;
		justify-content: space-evenly;
		height: 100%;
		.twCard {
			position: relative;
			height: 100%;
			.twLine {
				position: absolute;
				top: 0;
				left: 0;
				width: 680px;
				.twTitle {
					position: absolute;
					top: 24px;
					left: 22px;
					.twHead {
						width: 52px;
						height: 52px;
						border-radius: 50%;
						img {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
					.twName {
						position: absolute;
						top: 0;
						left: 60px;
						width: 550px;
						color: #566370;
					}
				}
				.twShow {
					position: absolute;
					overflow: hidden;
					top: 73px;
					left: 84px;
					width: 554px;
					border-radius: 14px;
					box-shadow: 0px 0 10px rgba(0, 0, 0, 0.2);
					.showTit {
						display: flex;
						align-items: center;
						color: #ffffff;
						font-size: 16px;
						font-weight: 500;
						height: 44px;
						padding-left: 16px;
						background: #373737;
					}
					.showImg {
						width: 554px;
						height: 554px;
					}
				}
			}
			img {
				height: 100%;
			}
		}
		.twInfo {
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 300px;
			.title {
				color: #000000;
				font-size: 15px;
				font-weight: 700;
				text-align: center;
			}
			.invitation {
				position: relative;
				height: 70px;
				margin: 16px 0 0 0;
				cursor: pointer;
				img {
					width: 100%;
					height: 100%;
				}
				.hand {
					position: absolute;
					right: -40px;
					top: 13px;
					width: 45px;
					height: unset;
					animation: leftRight .5s infinite ease-in-out;
				}
			}
			.detail {
				padding: 20px 0;
				cursor: pointer;
				color: #1D9BF0;
				font-size: 14px;
				font-weight: 500;
				line-height: 16px;
				text-align: center;
			}
		}
	}
	
	.mobile {
		.mobile-content {
			padding: 36px 16px 0 16px;

			img {
				width: 100%;
				margin-bottom: 25px;
				border-radius: 5px;
			}

			.title {
				font-weight: 700;
				font-size: 22px;
				line-height: 26px;
				text-align: center;
				letter-spacing: 0.3px;
				color: #000000;
				width: 240px;
				margin: 0 auto;
			}
		}

		.area-button {
			position: fixed;
			width: 100%;
			padding: 27px 16px 25px 16px;
			bottom: 0;
			height: 170px;

			.btn1 {
				height: 50px;
				line-height: 50px;
				background: #1d9bf0;
				border-radius: 100px;
				width: 100%;
				font-weight: 600;
				font-size: 18px;
				text-align: center;
				letter-spacing: 0.3px;

				color: #ffffff;
				margin-bottom: 16px;
			}

			.btn2 {
				height: 50px;
				line-height: 50px;
				background: rgba(29, 155, 240, 0.01);
				border: 1px solid #1d9bf0;
				border-radius: 100px;
				width: 100%;
				font-weight: 600;
				font-size: 18px;
				text-align: center;
				letter-spacing: 0.3px;
				color: #1d9bf0;
			}
		}
	}
}

.mask {
	position: absolute;
	z-index: 99;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba($color: #000000, $alpha: .8);
	.text {
		color: #ffffff;
		text-align: center;
		font-size: 14px;
		font-weight: 500;
		margin: 40px 20px 0 20px;
	}
}

@keyframes leftRight {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(20px);
	}
}
</style>