|
|
@@ -1,297 +1,285 @@
|
|
|
<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="detail.postBizData.linkImagePath" alt="">
|
|
|
- </div>
|
|
|
- <!-- 非chrome -->
|
|
|
- <div v-if="device == 'no-chrome'">
|
|
|
- <div class="txt">Use chrome browser to access Subway Surfers</div>
|
|
|
- <install-chrome></install-chrome>
|
|
|
- </div>
|
|
|
- <!-- chrome -->
|
|
|
- <div v-if="device == 'chrome'">
|
|
|
- <div class="txt">Use chrome browser to access Subway Surfers</div>
|
|
|
- <install-extension :extensionsInstallUrl="config.extensionsInstallUrl"></install-extension>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="main">
|
|
|
+ <!-- pc -->
|
|
|
+ <div v-if="device == 'chrome' || device == 'no-chrome'" class="content">
|
|
|
+ <v-logo></v-logo>
|
|
|
+ <div class="tool-cover">
|
|
|
+ <img :src="detail.postBizData.linkImagePath" alt="" />
|
|
|
+ </div>
|
|
|
+ <!-- 非chrome -->
|
|
|
+ <div v-if="device == 'no-chrome'">
|
|
|
+ <div class="txt">Use chrome browser to access Subway Surfers</div>
|
|
|
+ <install-chrome></install-chrome>
|
|
|
+ </div>
|
|
|
+ <!-- chrome -->
|
|
|
+ <div v-if="device == 'chrome'">
|
|
|
+ <div class="txt">Use chrome browser to access Subway Surfers</div>
|
|
|
+ <install-extension :extensionsInstallUrl="config.extensionsInstallUrl"></install-extension>
|
|
|
+ </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>
|
|
|
+ <!-- 移动端 -->
|
|
|
+ <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 } from '@/utils/help.js'
|
|
|
-import axios from 'axios'
|
|
|
-import Cookies from 'js-cookie'
|
|
|
+import VLogo from '@/components/logo.vue';
|
|
|
+import InstallChrome from '@/components/InstallChrome.vue';
|
|
|
+import InstallExtension from '@/components/InstallExtension.vue';
|
|
|
+import { getBrowserType, baseURL, appVersionCode, jumpUrl } from '@/utils/help.js';
|
|
|
+import axios from 'axios';
|
|
|
+import Cookies from 'js-cookie';
|
|
|
import { Toast } from 'vant';
|
|
|
|
|
|
-
|
|
|
-var ClipboardJS = require('clipboard')
|
|
|
+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: {}
|
|
|
- }
|
|
|
- },
|
|
|
- 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,
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.copy_link = window.location.href
|
|
|
- this.device = getBrowserType()
|
|
|
- this.getConfig()
|
|
|
- console.log('device', this.device)
|
|
|
- if (this.device == 'chrome') {
|
|
|
- this.setCookie()
|
|
|
- }
|
|
|
- },
|
|
|
+ name: 'tool_box',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ config: {},
|
|
|
+ copy_link: '',
|
|
|
+ title: 'Install DeNet Plugin to Participate',
|
|
|
+ metaTitle: 'Install DeNet Plugin to Participate',
|
|
|
+ device: '',
|
|
|
+ detail: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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);
|
|
|
|
|
|
- methods: {
|
|
|
- setCookie() {
|
|
|
- let pickupInfo = {
|
|
|
- srcContentId: this.detail.srcContentId || '',
|
|
|
- postNickName: this.detail.srcUserId || '',
|
|
|
- createTime: Date.now(),
|
|
|
- jump_type: 'jump_info',
|
|
|
- };
|
|
|
- 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();
|
|
|
- });
|
|
|
+ return {
|
|
|
+ detail: data.data,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.copy_link = window.location.href;
|
|
|
+ this.device = getBrowserType();
|
|
|
+ this.getConfig();
|
|
|
+ console.log('device', this.device);
|
|
|
+ if (this.device == 'chrome') {
|
|
|
+ this.setCookie();
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- clipboard.on('error', function (e) {
|
|
|
- Toast('copy error');
|
|
|
- });
|
|
|
- },
|
|
|
- clickExtension() {
|
|
|
- window.open(this.config.extensionsInstallUrl)
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ methods: {
|
|
|
+ setCookie() {
|
|
|
+ let pickupInfo = {
|
|
|
+ srcContentId: this.detail.srcContentId || '',
|
|
|
+ postNickName: this.detail.srcUserId || '',
|
|
|
+ createTime: Date.now(),
|
|
|
+ jump_type: 'jump_info',
|
|
|
+ };
|
|
|
+ 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" >
|
|
|
+<style lang="scss">
|
|
|
html,
|
|
|
body,
|
|
|
#__nuxt,
|
|
|
#__layout {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: #F5FAFF;
|
|
|
-
|
|
|
-
|
|
|
+ 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;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
|
|
|
- .txt {
|
|
|
- width: 400px;
|
|
|
- font-weight: 700;
|
|
|
- font-size: 36px;
|
|
|
- line-height: 44px;
|
|
|
- /* or 122% */
|
|
|
+ .tool-cover {
|
|
|
+ min-width: 400px;
|
|
|
+ margin-right: 90px;
|
|
|
|
|
|
- letter-spacing: 0.3px;
|
|
|
+ img {
|
|
|
+ max-height: 270px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- color: #323232;
|
|
|
- margin-bottom: 40px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding-bottom: 70px;
|
|
|
|
|
|
- .mobile {
|
|
|
- .mobile-content {
|
|
|
- padding: 36px 16px 0 16px;
|
|
|
+ .txt {
|
|
|
+ width: 400px;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 36px;
|
|
|
+ line-height: 44px;
|
|
|
+ /* or 122% */
|
|
|
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- margin-bottom: 25px;
|
|
|
- border-radius: 5px;
|
|
|
- }
|
|
|
+ letter-spacing: 0.3px;
|
|
|
|
|
|
- .title {
|
|
|
- font-weight: 700;
|
|
|
- font-size: 22px;
|
|
|
- line-height: 26px;
|
|
|
- text-align: center;
|
|
|
- letter-spacing: 0.3px;
|
|
|
- color: #000000;
|
|
|
- width: 240px;
|
|
|
- margin: 0 auto;
|
|
|
- }
|
|
|
- }
|
|
|
+ color: #323232;
|
|
|
+ margin-bottom: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
+ .mobile {
|
|
|
+ .mobile-content {
|
|
|
+ padding: 36px 16px 0 16px;
|
|
|
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 25px;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
|
|
|
- .area-button {
|
|
|
- position: fixed;
|
|
|
- width: 100%;
|
|
|
- padding: 27px 16px 25px 16px;
|
|
|
- bottom: 0;
|
|
|
- height: 170px;
|
|
|
+ .title {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 22px;
|
|
|
+ line-height: 26px;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+ color: #000000;
|
|
|
+ width: 240px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .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;
|
|
|
+ .area-button {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ padding: 27px 16px 25px 16px;
|
|
|
+ bottom: 0;
|
|
|
+ height: 170px;
|
|
|
|
|
|
- color: #FFFFFF;
|
|
|
- margin-bottom: 16px;
|
|
|
- }
|
|
|
+ .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;
|
|
|
|
|
|
- .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;
|
|
|
+ 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>
|
|
|
+</style>
|
