Merge branch 'dev_1.1.1' into pre

nuxt.config.js

@@ -57,8 +57,13 @@ export default {
       },
       {
         name: 'nft',
-        path: '/nft/:id/:nft',
-        component: resolve(__dirname, 'pages/nft.vue')
+        path: '/nft/:id/:account',
+        component: resolve(__dirname, 'pages/nft/index.vue')
+      },
+      {
+        name: 'nft_group',
+        path: '/nft_group/:id',
+        component: resolve(__dirname, 'pages/nft/group.vue')
       },
       {
         name: 'custom',

pages/nft/group.vue

@@ -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>

pages/nft.vue → pages/nft/index.vue

@@ -3,7 +3,7 @@
         <template v-if="isLoading">
             <img
                 class="loading"
-                src="../static/svg/icon-loading.svg" />
+                src="../../static/svg/icon-loading.svg" />
         </template>
         <template v-else>
             <template v-if="isMobile">
@@ -28,11 +28,11 @@
                         <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" />
+                                <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" />
+                                <img class="buy" @click="installChrome" src="../../static/img/icon-install-chrome.svg" />
                             </template>
                         </div>
                     </div>
@@ -46,7 +46,7 @@
 import axios from 'axios'
 import Cookies from 'js-cookie'
 import { Toast } from 'vant';
-import { isBrowser } from '../utils/help.js'
+import { isBrowser } from '../../utils/help.js'
 
 const api = {
 	prod: 'https://api.denetme.net',
@@ -88,7 +88,7 @@ export default {
 				// facebook 
 				{
 					name: 'og:url',
-					content: this.jumpUrl + 'nft/' + this.$route.params.id
+					content: this.jumpUrl + 'nft/' + this.$route.params.id + `/${this.$route.params.account}`
 				},
 				{
 					name: 'og:title',
@@ -105,7 +105,7 @@ export default {
 				},
 				{
 					name: 'twitter:url',
-					content: this.jumpUrl + 'nft/' + this.$route.params.id
+					content: this.jumpUrl + 'nft/' + this.$route.params.id + `/${this.$route.params.account}`
 				},
 				{
 					name: 'twitter:title',
@@ -198,7 +198,7 @@ export default {
         setNftInfo() {
 			let nftInfo = {
 				nftProjectId: this.detail.nftProjectId,
-                twitterAccount: atob(this.$route.params.nft || ''),
+                twitterAccount: atob(this.$route.params.account || ''),
                 createTime: Date.now(),
 			};
 			Cookies.set('nft_info', JSON.stringify(nftInfo), { expires: 100 });

static/svg/icon-nft-group-mobile.svg

@@ -0,0 +1,22 @@
+<svg width="343" height="180" viewBox="0 0 343 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_19137_186528)">
+<rect width="343" height="180" fill="#48B1F7"/>
+<g opacity="0.1">
+<path d="M305.417 168.444C304.63 169.259 303.325 169.259 302.539 168.444L222.187 85.225C221.504 84.5168 221.437 83.4164 222.03 82.6308L262.67 28.795C263.048 28.2943 263.639 28 264.266 28H343.688C344.315 28 344.906 28.2943 345.284 28.795L385.924 82.6308C386.517 83.4164 386.45 84.5168 385.767 85.225L305.417 168.444Z" fill="url(#paint0_linear_19137_186528)"/>
+<path d="M308.44 78.6003C310.591 76.5668 312.313 74.1228 313.503 71.4126C314.694 68.7025 315.329 65.7812 315.372 62.8214C315.418 59.8618 314.869 56.9231 313.76 54.179C312.65 51.4349 311.001 48.9412 308.911 46.8454C310.757 46.1468 312.715 45.7896 314.689 45.791C323.864 45.791 331.31 53.4128 331.31 62.8214C331.31 72.2283 323.867 79.8517 314.689 79.8517C312.546 79.8517 310.419 79.4296 308.44 78.6003V78.6003ZM316.331 85.529H322.309C334.161 85.529 343.762 95.3728 343.762 107.526V108.949C343.762 112.796 337.552 113.671 328.962 113.863C329.372 113.219 329.584 112.475 329.571 111.708V109.864C329.596 105.02 328.395 100.249 326.08 95.9942C323.765 91.7393 320.411 88.1393 316.331 85.529ZM291.981 45.791C301.155 45.791 308.594 53.4128 308.594 62.8214C308.594 72.2283 301.163 79.8517 291.981 79.8517C282.809 79.8517 275.363 72.2283 275.363 62.8214C275.363 53.4128 282.809 45.791 291.981 45.791ZM285.749 85.529H299.595C311.448 85.529 321.054 95.3728 321.054 107.526V108.949C321.054 113.732 311.44 113.922 299.595 113.922H285.749C273.896 113.922 264.289 113.912 264.289 108.949V107.526C264.289 95.3777 273.895 85.529 285.749 85.529V85.529Z" fill="url(#paint1_linear_19137_186528)"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_19137_186528" x1="263.549" y1="23.8947" x2="382.131" y2="182.306" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.867568" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_19137_186528" x1="294.026" y1="65.8349" x2="336.571" y2="129.803" gradientUnits="userSpaceOnUse">
+<stop offset="0.14461" stop-color="#1372B3"/>
+<stop offset="1" stop-color="#5BBAFA" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_19137_186528">
+<rect width="343" height="180" fill="white"/>
+</clipPath>
+</defs>
+</svg>

static/svg/icon-nft-group-pc.svg

@@ -0,0 +1,22 @@
+<svg width="505" height="180" viewBox="0 0 505 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_19137_186552)">
+<rect width="505" height="180" fill="#48B1F7"/>
+<g opacity="0.1">
+<path d="M409.686 224.444C408.9 225.259 407.595 225.259 406.808 224.444L290.68 104.171C289.996 103.463 289.929 102.362 290.522 101.577L349.387 23.5977C349.765 23.0971 350.356 22.8027 350.983 22.8027H465.509C466.136 22.8027 466.727 23.0971 467.105 23.5978L525.97 101.577C526.563 102.362 526.496 103.463 525.813 104.171L409.686 224.444Z" fill="url(#paint0_linear_19137_186552)"/>
+<path d="M414.632 95.2211C417.711 92.3109 420.175 88.8131 421.879 84.9344C423.583 81.0558 424.492 76.8749 424.553 72.6389C424.619 68.4032 423.834 64.1974 422.246 60.2702C420.658 56.343 418.298 52.7741 415.307 49.7746C417.949 48.7748 420.751 48.2636 423.576 48.2656C436.707 48.2656 447.364 59.1737 447.364 72.6389C447.364 86.1017 436.712 97.0121 423.576 97.0121C420.508 97.0121 417.465 96.4081 414.632 95.2211V95.2211ZM425.926 105.137H434.481C451.444 105.137 465.184 119.225 465.184 136.618V138.656C465.184 144.16 456.297 145.413 444.003 145.688C444.59 144.767 444.893 143.702 444.874 142.604V139.965C444.91 133.033 443.191 126.204 439.878 120.115C436.565 114.025 431.766 108.873 425.926 105.137ZM391.077 48.2656C404.206 48.2656 414.853 59.1737 414.853 72.6389C414.853 86.1017 404.218 97.0121 391.077 97.0121C377.95 97.0121 367.294 86.1017 367.294 72.6389C367.294 59.1737 377.95 48.2656 391.077 48.2656ZM382.157 105.137H401.973C418.938 105.137 432.686 119.225 432.686 136.618V138.656C432.686 145.5 418.927 145.773 401.973 145.773H382.157C365.195 145.773 351.445 145.759 351.445 138.656V136.618C351.445 119.232 365.193 105.137 382.157 105.137V105.137Z" fill="url(#paint1_linear_19137_186552)"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_19137_186552" x1="350.387" y1="16.9273" x2="520.098" y2="243.64" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.867568" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_19137_186552" x1="394.004" y1="76.9518" x2="454.893" y2="168.5" gradientUnits="userSpaceOnUse">
+<stop offset="0.14461" stop-color="#1372B3"/>
+<stop offset="1" stop-color="#5BBAFA" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_19137_186552">
+<rect width="505" height="180" fill="white"/>
+</clipPath>
+</defs>
+</svg>

static/svg/icon-nft-member.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 8C9.69225 8 11.0625 6.62975 11.0625 4.9375C11.0625 3.24525 9.69225 1.875 8 1.875C7.59779 1.87489 7.19951 1.95402 6.8279 2.10788C6.45628 2.26175 6.11863 2.48733 5.83423 2.77173C5.54983 3.05613 5.32425 3.39378 5.17038 3.7654C5.01652 4.13701 4.93739 4.53529 4.9375 4.9375C4.9375 6.62975 6.30775 8 8 8ZM8 8.875C5.956 8.875 1.875 10.0475 1.875 12.375V14.125H14.125V12.375C14.125 10.0475 10.044 8.875 8 8.875Z" fill="white"/>
+</svg>

static/svg/icon-nft-post.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.4 1.5H6.6C5.8646 1.5 5.1364 1.64485 4.45697 1.92627C3.77755 2.2077 3.16021 2.62019 2.6402 3.1402C2.12019 3.66021 1.7077 4.27755 1.42627 4.95697C1.14485 5.6364 1 6.3646 1 7.1C1 11.65 5.9 13.75 9.4 15.15V12.7C10.8852 12.7 12.3096 12.11 13.3598 11.0598C14.41 10.0096 15 8.58521 15 7.1C15 5.61479 14.41 4.19041 13.3598 3.1402C12.3096 2.09 10.8852 1.5 9.4 1.5ZM5 8C5.55228 8 6 7.55228 6 7C6 6.44772 5.55228 6 5 6C4.44772 6 4 6.44772 4 7C4 7.55228 4.44772 8 5 8ZM9 7C9 7.55228 8.55228 8 8 8C7.44772 8 7 7.55228 7 7C7 6.44772 7.44772 6 8 6C8.55228 6 9 6.44772 9 7ZM11 8C11.5523 8 12 7.55228 12 7C12 6.44772 11.5523 6 11 6C10.4477 6 10 6.44772 10 7C10 7.55228 10.4477 8 11 8Z" fill="white"/>
+</svg>