de-net-official/pages/nft.vue

<template>
    <div class="nft-content">
        <div class="logo">
            <img src="/img/icon-logo.png" alt />
        </div>
        <div class="show">
            <img
                v-if="isLoading"
                class="loading"
                src="../static/svg/icon-loading.svg" />
            <div class="center" v-else>
                <div class="img">
                    <img :src="detail.pageImagePath" />
                </div>
                <div class="info">
                    <img class="tag" src="../static/svg/icon-nft.svg" />
                    <div class="title">{{detail.nftProjectName}}</div>
                    <button class="buy" @click="installExtension">Install Denet to Buy</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import Cookies from 'js-cookie'

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 appVersionCode = 6;

export default {
    name: 'ntf',
    data() {
        return {
            isLoading: true,
            appVersionCode: appVersionCode,
            jumpUrl: jumpUrl,
            detail: {},
            config: {},
            title: 'DeNet Giveaway',
            metaTitle: 'DeNet: An Easy Web3 Tool For GIVEAWAY / AIRDROP',
        }
    },
    head() {
		return {
			type: '',
			title: this.title,
			appVersionCode: appVersionCode,
			meta: [
				// facebook 
				{
					name: 'og:url',
					content: this.jumpUrl + 'nft/' + this.$route.params.id
				},
				{
					name: 'og:title',
					content: this.metaTitle
				},
				{
					name: 'og:image',
					content: this.detail.linkImagePath || ''
				},
				// twitter
				{
					name: 'twitter:card',
					content: 'summary_large_image'
				},
				{
					name: 'twitter:url',
					content: this.jumpUrl + 'nft/' + this.$route.params.id
				},
				{
					name: 'twitter:title',
					content: this.metaTitle
				},
				{
					name: 'twitter:image',
					content: this.detail.linkImagePath || ''
				}
			]
		}
	},
    async asyncData(params) {
        let { route } = params;
		let { data } = await axios.post(`${baseURL}/denet/nft/project/getNftProjectInfo`, {
			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: {
				nftProjectId: route.params.id || ''
			}
		})
		if (data.code == 0 && data.data !== null) {
            return {
                detail: data.data,
                isLoading: false
            }
		}
    },
    created() {
        this.setCookieMid();
        this.getConfig();
    },
    methods: {
        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() {
            let { extensionsInstallUrl } = this.config;
            window.open(extensionsInstallUrl)
        },
        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;
			}
		},
    }
}
</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, #FFFFFF 0%, #F0F7FE 94.31%);
    .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);
        .loading {
            margin: auto;
            width: 40px;
            border-radius: 50%;
        }
        .center {
            display: flex;
            margin: -50px auto 0;
            width: 1000px;
            .img {
                width: 50%;
                margin-right: 6%;
                img {
                    width: 100%;
                }
            }
            .info {
                display: flex;
                flex-direction: column;
                justify-content: center;
                width: 44%;
                .tag {
                    width: 25%;
                    margin-bottom: 6px;
                }
                .title {
                    font-size: 3.6vw;
                    font-family: 'SF Pro Display';
                    font-weight: bold;
                    word-break: break-word;
                }
                .buy {
                    overflow: hidden;
                    width: 55%;
                    height: 3.5vw;
                    border: 0;
                    margin-top: .6vw;
                    color: #FFFFFF;
                    font-size: 1vw;
                    font-weight: 700;
                    background: #1D9BF0;
                    border-radius: 1000px;
                }
            }
        }
    }
}
</style>