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

<template>
    <div class="nft-content">
        <template v-if="isLoading">
            <img class="loading" src="../../static/svg/icon-loading.svg" />
        </template>
        <template v-else>
            <template v-if="isMobile">
                <div></div>
            </template>
            <template v-else>
                <div class="logo">
                    <img src="/img/icon-logo.png" alt />
                </div>
                <div class="show">
                    <div class="center">
                        <div class="content-wrapper">
                            <img class="img img-left" :src="detail.postUserInfo.avatarUrl" alt="">
                            <div class="middle">
                                <div class="invite-txt">
                                    @{{detail.postUserInfo.nickName}} invite you to
                                </div>
                                <div class="title">
                                    Hunt the Treaure
                                </div>
                                <div class="up-gain-txt">
                                    Each can gain up to <span class="amount"> ${{detail.upGainAmountValue}}</span>
                                </div>
                            </div>
                            <img class="img" src="../../static/svg/icon-treasure.svg" alt="">
                        </div>
                        <div class="btn-wrapper" @click="clickBtn()">
                            <template v-if="isChrome">
                                Install Denet Chrome Extension
                            </template>
                            <template v-else>
                                <img class="img"
                                    src="../../static/svg/icon-chrome-down.svg" />
                                    Open in Chrome to participate
                            </template> 
                        </div>
                    </div>
                </div>
            </template>
        </template>
    </div>
</template>

<script>
import axios from 'axios'
import Cookies from 'js-cookie'
import { Toast } from 'vant';
import { isBrowser, appVersionCode, appType } from '../../utils/help.js'
import Report from "@/log-center/log"

const api = {
    prod: 'https://api.denetme.net',
    pre: 'https://preapi.denetme.net',
    test: 'https://testapi.denetme.net'
}
const page = {
    prod: "https://h5.denetme.net",
    pre: "https://preh5.denetme.net",
    test: 'https://testh5.denetme.net'
}
const jumpUrl = page[process.env.NUXT_ENV.MODE] + '/'
const baseURL = api[process.env.NUXT_ENV.MODE]
const ClipboardJS = require('clipboard')

export default {
    name: 'ntf',
    data() {
        return {
            isLoading: true,
            appVersionCode: appVersionCode,
            jumpUrl: jumpUrl,
            detail: {
                postUserInfo: {
                    avatarUrl: '',
                    nickName: ''
                }
            },
            config: {},
            title: 'Treasure Hunt',
            isMobile: false,
            isChrome: false,
            linkHref: '',
            metaTitle: 'DeNet: An Easy Web3 Tool For GIVEAWAY / AIRDROP',
        }
    },
    head() {
        return {
            type: '',
            title: this.title,
            appVersionCode: appVersionCode,
            meta: [
                // facebook
                {
                    name: 'og:title',
                    content: this.metaTitle
                },
                {
                    name: 'og:image',
                    content: this.detail.imagePath || ''
                },
                // twitter
                {
                    name: 'twitter:card',
                    content: 'summary_large_image'
                },
                {
                    name: 'twitter:title',
                    content: this.metaTitle
                },
                {
                    name: 'twitter:image',
                    content: this.detail.imagePath || ''
                }
            ]
        }
    },
    async asyncData(params) {
        let { route } = params;
        let { data } = await axios.post(`${baseURL}/denet/post/treasure/detail`, {
            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);
                    });
                }()
            },
            params: {
                postId: route.params.id || ''
            }
        })
        if (data.code == 0) {
            return {
                detail: data.data,
            }
        }
    },
    created() {
        this.setCookieMid();
        this.getConfig();
    },
    mounted() {
        setTimeout(() => {
            this.checkInstall().then(() => {
            }).catch(() => {
                this.setTreasureInfo();
            })
        }, 600)
        this.checkBrowser();
        this.isLoading = false;

        var clipboard = new ClipboardJS('.btn');
        let that = this
        clipboard.on('success', function (e) {
            Toast('copy success');
            // 埋点
            that.trackingClick()
            e.clearSelection();
        });
        this.pageSource = Report.pageSource.newUserLandingPage
        // 埋点
        if (this.isMobile) {
            this.pageSource = Report.pageSource.mobileLandingPage
        }
        // 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,
        //             senderId: this.detail.srcUserId,
        //             redPacketType: 2,
        //         }
        //     }
        // })
    },
    methods: {
        clickBtn() {
            if(this.isChrome) {
                let { extensionsInstallUrl } = this.config;
                window.open(extensionsInstallUrl)
            } else {
                installChrome();
            }
        },
        checkInstall() {
            return new Promise((resolve, reject) => {
                let dom = document.querySelector('#denet_message');
                if (dom) {
                    resolve(true)
                } else {
                    reject(false)
                }
            })
        },
        trackingClick() {
            // 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,
            //             senderId: this.detail.srcUserId,
            //             redPacketType: 2,
            //         }
            //     }
            // })
        },
        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 })
            }
        },
        installExtension() {
            // 埋点
            this.trackingClick()
            let { extensionsInstallUrl } = this.config;
            window.open(extensionsInstallUrl)
        },
        installChrome() {
            window.open('https://www.google.com/chrome')
        },
        async getConfig() {
            let { data } = await axios.post(`${baseURL}/denet/base/config/getFrontConfig`, {
                baseInfo: {
                    appVersionCode: appVersionCode,
                    mid: this.mid
                },
                params: {}
            })
            if (data.code == 0) {
                this.config = data.data;
            }
        },
        checkBrowser() {
            this.linkHref = window.location.href;
            this.isChrome = isBrowser() == 'chrome';
            this.isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
        },
        setTreasureInfo() {
            let treasureInfo = {
                createTime: Date.now(),
                jump_type: 'treasure_info',
                postId: this.detail.srcContentId || '',
                postNickName: this.detail.postUserInfo.nickName
            };
            Cookies.set('jump_info', JSON.stringify(treasureInfo), { expires: 100 });
        },
    }
}
</script>

<style lang="scss">
html,
body,
#__nuxt,
#__layout {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

.nft-content {
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #D8EFFF 0%, #FFFFFF 44.3%);

    .loading {
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        margin: auto;
        width: 40px;
        border-radius: 50%;
    }

    .logo {
        display: flex;
        align-items: center;
        height: 70px;
        margin-left: 25px;

        img {
            width: 99px;
            height: 32px;
        }
    }

    .show {
        display: flex;
        align-items: center;
        height: calc(100% - 70px);

        .center {
            margin: -50px auto 0;
            width: 480px;
            height: 260px;
            box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.1);
            border-radius: 12px;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            padding: 26px;
            box-sizing: border-box;

            .content-wrapper {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 14px;

                .img {
                    width: 70px;
                    height: 70px;
                }

                .img-left {
                    border-radius: 50%;
                }

                .middle {
                    padding: 0 20px;
                    box-sizing: border-box;

                    .invite-txt {
                        color: #727272;
                        font-weight: 400;
                        font-size: 13px;
                    }

                    .title {
                        font-weight: 800;
                        font-size: 20px;
                        margin: 6px 3px 0;
                    }

                    .up-gain-txt {
                        color: #F8BC2B;
                        font-weight: 600;
                        font-size: 13px;
                        display: flex;
                        align-items: center;

                        .amount {
                            font-weight: 700;
                            font-size: 22px;
                        }
                    }
                }
            }

            .btn-wrapper {
                margin-top: 54px;
                padding: 16px;
                box-sizing: border-box;
                background: #1D9BF0;
                border-radius: 100px;
                color: #FFFFFF;
                font-weight: 700;
                font-size: 17px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;

                .img {
                    width: 28px;
                    height: 28px;
                    margin-right: 8px;
                }
            }


        }
    }
}

</style>