Merge branch 'dev_1.1.0' into pre

nuxt.config.js

@@ -55,6 +55,11 @@ export default {
         path: '/install',
         component: resolve(__dirname, 'pages/install.vue')
       },
+      {
+        name: 'nft',
+        path: '/nft/:id?',
+        component: resolve(__dirname, 'pages/nft.vue')
+      },
       {
         name: 'custom',
         path: '*',

pages/index.vue

@@ -516,7 +516,8 @@ export default {
 		setPickupInfo() {
 			let pickupInfo = {
 				srcContentId: this.detail.srcContentId,
-				postNickName: this.detail.postBizData.postUserInfo.nickName
+				postNickName: this.detail.postBizData.postUserInfo.nickName,
+                createTime: Date.now(),
 			};
 			Cookies.set('pickup_info', JSON.stringify(pickupInfo), { expires: 100 });
 		},

pages/nft.vue

@@ -0,0 +1,326 @@
+<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"><img :src="detail.pageImagePath" /></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="img">
+                            <img :src="detail.pageImagePath" />
+                        </div>
+                        <div class="info">
+                            <template v-if="isChrome">
+                                <div class="title">Install DeNet Plugin<br/>to Buy NFT</div>
+                                <img class="buy" @click="installExtension" src="../static/img/icon-install-plugin.svg" />
+                            </template>
+                            <template v-else>
+                                <div class="title">Only Support to Use Chrome to buy NFT</div>
+                                <img class="buy" @click="installChrome" src="../static/img/icon-install-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: {},
+            config: {},
+            title: 'DeNet Giveaway',
+            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: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,
+            }
+		}
+    },
+    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 urlParams = new URL(location.href);
+            let searchParams = new URLSearchParams(urlParams.search);
+			let nftInfo = {
+				nftProjectId: this.detail.nftProjectId,
+                twitterAccount: atob(searchParams.get('twitterAccount') || ''),
+                createTime: Date.now(),
+			};
+			Cookies.set('nft_info', JSON.stringify(nftInfo), { 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;
+            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 {
+                    color: #3A4B56;
+                    font-size: 2.2vw;
+                    font-family: 'SF Pro Display';
+                    font-weight: bold;
+                    word-break: break-word;
+                    margin-bottom: 1vw;
+                }
+                .buy {
+                    width: 75%;
+                    max-width: 263px;
+                    max-height: 64px;
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+}
+
+.small {
+    padding: 30px 20px;
+    .banner {
+        width: 100%;
+        img {
+            width: 100%;
+        }
+    }
+    .title {
+        color: #000000;
+        font-weight: 600;
+        font-size: 20px;
+        text-align: center;
+        padding: 17px 0 12px;
+    }
+    .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>

static/svg/icon-loading.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(255, 255, 255); display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<circle cx="50" cy="50" fill="none" stroke="#389aff" stroke-width="12" r="35" stroke-dasharray="164.93361431346415 56.97787143782138">
+  <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
+</circle>
+<!-- [ldio] generated by https://loading.io/ --></svg>