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="detail.postBizData.convertUrl" 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.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" :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 { 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: {}
        }
    },
    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: {
        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)
    },

    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(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 {
            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;

            }
        }
    }
}
</style>