|
|
@@ -0,0 +1,426 @@
|
|
|
+<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 class="small">
|
|
|
+ <div class="banner">
|
|
|
+ <div class="logo">
|
|
|
+ <img class="img" :src="postBizData.groupIcon" />
|
|
|
+ </div>
|
|
|
+ <div class="desc">{{ postBizData.groupName }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="title">Open link on PC to Buy NFT</div>
|
|
|
+ <div class="desc">{{ linkHref }}</div>
|
|
|
+ <div class="copy">
|
|
|
+ <button class="btn" :data-clipboard-text="linkHref">Copy Link</button>
|
|
|
+ </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="header">
|
|
|
+ <div class="core">
|
|
|
+ <div class="core_logo"><img :src="postBizData.groupIcon" /></div>
|
|
|
+ <div class="core_title">{{ postBizData.groupName }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="member">
|
|
|
+ <label>
|
|
|
+ <img src="../../static/svg/icon-nft-member.svg" />
|
|
|
+ <span>{{ postBizData.memberCount }} Member</span>
|
|
|
+ </label>
|
|
|
+ <label>
|
|
|
+ <img src="../../static/svg/icon-nft-post.svg" />
|
|
|
+ <span>{{ postBizData.postCount }} Posts</span>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="footer">
|
|
|
+ <template v-if="isChrome">
|
|
|
+ <div class="font">Install DeNet to Join The Group</div>
|
|
|
+ <img class="btn" @click="installExtension" src="../../static/svg/icon-install-nft-plugin.svg" />
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="font">Only Support to Use Chrome<br/>to Join Group</div>
|
|
|
+ <img class="btn" @click="installChrome" src="../../static/svg/icon-install-nft-chrome.svg" />
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import axios from 'axios'
|
|
|
+import Cookies from 'js-cookie'
|
|
|
+import { Toast } from 'vant';
|
|
|
+import { isBrowser } from '../../utils/help.js'
|
|
|
+
|
|
|
+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;
|
|
|
+const ClipboardJS = require('clipboard')
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'ntf',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isLoading: true,
|
|
|
+ appVersionCode: appVersionCode,
|
|
|
+ jumpUrl: jumpUrl,
|
|
|
+ detail: {},
|
|
|
+ postBizData: {
|
|
|
+ groupImagePath: '',
|
|
|
+ },
|
|
|
+ config: {},
|
|
|
+ title: 'DeNet Giveaway',
|
|
|
+ isMobile: false,
|
|
|
+ isChrome: false,
|
|
|
+ linkHref: '',
|
|
|
+ metaTitle: 'DeNet: Join NFT Owners Group',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ head() {
|
|
|
+ return {
|
|
|
+ type: '',
|
|
|
+ title: this.title,
|
|
|
+ appVersionCode: appVersionCode,
|
|
|
+ meta: [
|
|
|
+ // facebook
|
|
|
+ {
|
|
|
+ name: 'og:url',
|
|
|
+ content: this.jumpUrl + 'nft_group/' + this.$route.params.id
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'og:title',
|
|
|
+ content: this.metaTitle
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'og:image',
|
|
|
+ content: this.postBizData.groupImagePath || ''
|
|
|
+ },
|
|
|
+ // twitter
|
|
|
+ {
|
|
|
+ name: 'twitter:card',
|
|
|
+ content: 'summary_large_image'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'twitter:url',
|
|
|
+ content: this.jumpUrl + 'nft_group/' + this.$route.params.id
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'twitter:title',
|
|
|
+ content: this.metaTitle
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'twitter:image',
|
|
|
+ content: this.postBizData.groupImagePath || ''
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async asyncData(params) {
|
|
|
+ let { route } = params;
|
|
|
+ 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);
|
|
|
+ });
|
|
|
+ }()
|
|
|
+ },
|
|
|
+ params: {
|
|
|
+ postId: route.params.id || ''
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (data.code == 0 && data.data !== null) {
|
|
|
+ return {
|
|
|
+ detail: data.data,
|
|
|
+ postBizData: JSON.parse(data.data.postBizData),
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.setCookieMid();
|
|
|
+ this.getConfig();
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.checkBrowser();
|
|
|
+ this.setNftInfo();
|
|
|
+ this.isLoading = false;
|
|
|
+
|
|
|
+ var clipboard = new ClipboardJS('.btn');
|
|
|
+ clipboard.on('success', function (e) {
|
|
|
+ Toast('copy success');
|
|
|
+ e.clearSelection();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ 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)
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+ },
|
|
|
+ setNftInfo() {
|
|
|
+ let nftGroupInfo = {
|
|
|
+ twitterAccount: this.postBizData.defaultTwitterAccount || '',
|
|
|
+ createTime: Date.now(),
|
|
|
+ };
|
|
|
+ Cookies.set('nft_group_info', JSON.stringify(nftGroupInfo), { 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, #FFFFFF 0%, #F0F7FE 94.31%);
|
|
|
+ .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 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 505px;
|
|
|
+ margin: -50px auto 0;
|
|
|
+ .header {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100%;
|
|
|
+ height: 180px;
|
|
|
+ padding-left: 25px;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 16px 16px 0 0;
|
|
|
+ background: url('../../static/svg/icon-nft-group-pc.svg') no-repeat right bottom #48B1F7;
|
|
|
+ .core {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .core_logo {
|
|
|
+ overflow: hidden;
|
|
|
+ width: 54px;
|
|
|
+ height: 54px;
|
|
|
+ border-radius: 6px;
|
|
|
+ background-color: #fff;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .core_title {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 26px;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-left: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .member {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-top: 24px;
|
|
|
+ label {
|
|
|
+ margin-right: 17px;
|
|
|
+ img {
|
|
|
+ margin-top: -3px;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .footer {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ height: 90px;
|
|
|
+ border-radius: 0 0 16px 16px;
|
|
|
+ border: solid 1px #E2E2E2;
|
|
|
+ .font {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ width: 200px;
|
|
|
+ box-sizing: unset;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.small {
|
|
|
+ position: absolute;
|
|
|
+ top: 40%;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ .banner {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ height: 180px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: url('../../static/svg/icon-nft-group-mobile.svg') no-repeat right bottom #48B1F7;
|
|
|
+ .logo {
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ z-index: 2;
|
|
|
+ margin: 0;
|
|
|
+ top: 38px;
|
|
|
+ left: 50%;
|
|
|
+ width: 54px;
|
|
|
+ height: 54px;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ border-radius: 5px;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ .img {
|
|
|
+ position: unset;
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .desc {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 2;
|
|
|
+ top: 115px;
|
|
|
+ width: 100%;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 20px;
|
|
|
+ padding: 0 12px;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ word-break: break-all;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ color: #000000;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 20px;
|
|
|
+ text-align: center;
|
|
|
+ padding: 39px 0 7px;
|
|
|
+ }
|
|
|
+ .desc {
|
|
|
+ color: #8A8A8A;
|
|
|
+ font-size: 13px;
|
|
|
+ padding: 0 22px;
|
|
|
+ word-break: break-all;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .copy {
|
|
|
+ margin-top: 35px;
|
|
|
+ button {
|
|
|
+ width: 100%;
|
|
|
+ border: 0;
|
|
|
+ height: 53px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ border-radius: 55px;
|
|
|
+ background: #1D9BF0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
