[edit][toolbox]

components/InstallExtension.vue

@@ -6,6 +6,12 @@
 <script>
 export default {
     name: 'install_chrome',
+    props: {
+        extensionsInstallUrl: {
+            type: String,
+            default: ''
+        } 
+    },
     data() {
         return {
             config: {},
@@ -13,15 +19,14 @@ export default {
     },
     methods: {
         installExtension() {
-            let { extensionsInstallUrl } = this.config;
-            window.open(extensionsInstallUrl)
+            window.open(this.extensionsInstallUrl)
         }
     }
 }
 
 </script>
 <style lang="scss" scoped>
-img{
+img {
     cursor: pointer;
 }
 </style>

nuxt.config.js

@@ -58,8 +58,8 @@ export default {
       },
       {
         name:'ToolBox',
-        path: '/tool_box/:id',
-        component: resolve(__dirname, 'pages/tool_box/index.vue')
+        path: '/toolbox/:id',
+        component: resolve(__dirname, 'pages/toolbox/index.vue')
       },
       {
         name: 'Install',

pages/tool_box/index.vue → pages/toolbox/index.vue

@@ -4,7 +4,7 @@
         <div v-if="device == 'chrome' || device == 'no-chrome'" class="content">
             <v-logo></v-logo>
             <div class="tool-cover">
-                <img :src="detail.cover" alt="">
+                <img :src="detail.postBizData.convertUrl" alt="">
             </div>
             <!-- 非chrome -->
             <div v-if="device == 'no-chrome'">
@@ -14,21 +14,21 @@
             <!-- chrome -->
             <div v-if="device == 'chrome'">
                 <div class="txt">Use chrome browser to access Subway Surfers</div>
-                <install-extension></install-extension>
+                <install-extension :extensionsInstallUrl="config.extensionsInstallUrl"></install-extension>
             </div>
         </div>
 
         <!-- 移动端 -->
         <div v-if="device == 'ios' || device == '安卓'" class="mobile">
             <div class="mobile-content">
-                <img :src="detail.cover" alt="">
+                <img :src="detail.postBizData.convertUrl" 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">
+                <div class="btn2" @click="clickCopy" :data-clipboard-text="copy_link">
                     Copy Link
                 </div>
             </div>
@@ -39,17 +39,62 @@
 import VLogo from '@/components/logo.vue'
 import InstallChrome from '@/components/InstallChrome.vue'
 import InstallExtension from '@/components/InstallExtension.vue'
-import { getBrowserType, baseURL, appVersionCode } from '../../utils/help.js'
+import { getBrowserType, baseURL, appVersionCode, jumpUrl } from '@/utils/help.js'
 import axios from 'axios'
+import { Toast } from 'vant';
+
+
+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: {
-                cover: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242306111155-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659266146&t=f2eab2e388056d2799b66cdf2e0e39b8'
-            }
+            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.convertUrl || ''
+                },
+                // twitter
+                {
+                    name: 'twitter:card',
+                    content: 'summary_large_image'
+                },
+                {
+                    name: 'twitter:url',
+                    content: jumpUrl + 'toolbox/' + this.$route.params.id
+                },
+                {
+                    name: 'twitter:title',
+                    content: this.metaTitle
+                },
+                {
+                    name: 'twitter:image',
+                    content: this.detail.postBizData.convertUrl || ''
+                }
+            ]
         }
     },
     components: {
@@ -62,12 +107,7 @@ export default {
         let { data } = await axios.post(`${baseURL}/denet/post/getDetail`, {
             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);
-                    });
-                }()
+                mid: '00000000-0000-0000-0000-000000000000',
             },
             params: {
                 postId: route.params.id || ''
@@ -90,16 +130,40 @@ export default {
         }
     },
     mounted() {
+        this.copy_link = window.location.href
         this.device = getBrowserType()
-        console.log(this.device)
+        this.getConfig()
+        console.log('device',this.device)
     },
 
     methods: {
+        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 (e) {
+                Toast('copy error');
+            });
         },
         clickExtension() {
-            window.open('https://chrome.google.com/webstore/detail/denet/inlfbeejfdgkknpiodhemfcokbdgofja')
+            window.open(this.config.extensionsInstallUrl)
         }
     }
 }
@@ -128,7 +192,7 @@ body,
         margin-right: 90px;
 
         img {
-            height: 270px;
+            max-height: 270px;
         }
     }