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

<template>
	<div class="main">
		<!-- pc -->
		<div v-if="device == 'chrome' || device == 'no-chrome'" class="content">
			<v-logo></v-logo>
			<div class="tool-cover">
				<img :src="img_url" alt="" />
			</div>
			<!-- 非chrome -->
			<div v-if="device == 'no-chrome'">
				<div class="txt">Use chrome browser to access {{ detail.postBizData.linkTitle || '' }}</div>
				<install-chrome></install-chrome>
			</div>
			<!-- chrome -->
			<div v-if="device == 'chrome'">
				<div class="txt">Use chrome browser to access {{ detail.postBizData.linkTitle || '' }}</div>
				<install-extension :extensionsInstallUrl="config.extensionsInstallUrl" @installClick="installClick"> </install-extension>
			</div>
		</div>

		<!-- 移动端 -->
		<div v-if="device == 'ios' || device == '安卓'" class="mobile">
			<div class="mobile-content">
				<img :class="{ blur: detail.postBizData.certNftProjectId }" :src="detail.postBizData.viewBgImagePath || detail.postBizData.linkImagePath" alt="" />
				<div class="title">
					Open link on PC to use <span v-if="detail.postBizData && detail.postBizData.linkTitle">{{ detail.postBizData.linkTitle }}</span>
				</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, GetDetailSSR } 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: '',
		};
	},
	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(context) {
		let { route } = context;
		let result = await GetDetailSSR({
			context,
			params: {
				postId: route.params.id || '',
			},
			url: `${baseURL}/denet/post/getDetail`,
		});

		if (result.code == 0) {
			if (result.data && result.data.postBizData && typeof result.data.postBizData == 'string') {
				result.data.postBizData = JSON.parse(result.data.postBizData);
			}
			if (result.data.postBizData === null) {
				result.data.postBizData = {
					postUserInfo: {},
				};
			}

			return {
				detail: result.data,
			};
		}
	},
	mounted() {
		if (this.detail.postBizData.linkImagePath.indexOf('default') > 0) {
			this.img_url = '/img/img-default.png';
		} else {
			this.img_url = this.detail.postBizData.linkImagePath;
		}

		this.pageSource = Report.pageSource.newUserLandingPage;
		this.setCookieMid();
		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.device = getBrowserType();
		this.getConfig();
		console.log('device', this.device);
		if (this.device == 'chrome') {
			this.setCookie();
		}
	},

	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',
				postId: this.detail.postId || '',
			};
			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;
			}
		},
		clickCopy() {
			// 复制链接
			var clipboard = new ClipboardJS('.btn2');
			clipboard.on('success', function (e) {
				Toast('copy success');
				e.clearSelection();
			});

			clipboard.on('error', function () {
				Toast('copy error');
			});
		},
		clickExtension() {
			window.open(this.config.extensionsInstallUrl);
		},
	},
};
</script>
<style lang="scss">
html,
body,
#__nuxt,
#__layout {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: #f5faff;
}

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

	.tool-cover {
		min-width: 400px;
		margin-right: 90px;

		img {
			max-height: 270px;
		}
	}

	.content {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 70px;

		.txt {
			width: 400px;
			font-weight: 700;
			font-size: 36px;
			line-height: 44px;
			/* or 122% */

			letter-spacing: 0.3px;

			color: #323232;
			margin-bottom: 40px;
		}
	}

	.mobile {
		.mobile-content {
			text-align: center;
			padding: 36px 16px 0 16px;

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

				&.blur {
					width: 95%;
					filter: saturate(0.5) blur(6px);
				}
			}

			.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;
			}
		}
	}
}
</style>