add mobile

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

@@ -1,30 +1,52 @@
 <template>
     <div class="nft-content">
-        <div class="logo">
-            <img src="/img/icon-logo.png" alt />
-        </div>
-        <div class="show">
+        <template v-if="isLoading">
             <img
-                v-if="isLoading"
                 class="loading"
                 src="../static/svg/icon-loading.svg" />
-            <div class="center" v-else>
-                <div class="img">
-                    <img :src="detail.pageImagePath" />
+        </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>
-                <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>
+            </template>
+            <template v-else>
+                <div class="logo">
+                    <img src="/img/icon-logo.png" alt />
                 </div>
-            </div>
-        </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 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',
@@ -39,6 +61,7 @@ const page = {
 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',
@@ -50,6 +73,9 @@ export default {
             detail: {},
             config: {},
             title: 'DeNet Giveaway',
+            isMobile: false,
+            isChrome: false,
+            linkHref: '',
             metaTitle: 'DeNet: An Easy Web3 Tool For GIVEAWAY / AIRDROP',
         }
     },
@@ -111,7 +137,6 @@ export default {
 		if (data.code == 0 && data.data !== null) {
             return {
                 detail: data.data,
-                isLoading: false
             }
 		}
     },
@@ -119,6 +144,17 @@ export default {
         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) {
@@ -139,6 +175,9 @@ export default {
             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: {
@@ -151,6 +190,18 @@ export default {
 				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 nftInfo = {
+				nftProjectId: this.detail.nftProjectId,
+                createTime: Date.now(),
+			};
+			Cookies.set('nft_info', JSON.stringify(nftInfo), { expires: 100 });
+		},
     }
 }
 </script>
@@ -171,6 +222,15 @@ body,
     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;
@@ -185,11 +245,6 @@ body,
         display: flex;
         align-items: center;
         height: calc(100% - 70px);
-        .loading {
-            margin: auto;
-            width: 40px;
-            border-radius: 50%;
-        }
         .center {
             display: flex;
             margin: -50px auto 0;
@@ -211,25 +266,55 @@ body,
                     margin-bottom: 6px;
                 }
                 .title {
-                    font-size: 3.6vw;
+                    font-size: 2.2vw;
                     font-family: 'SF Pro Display';
                     font-weight: bold;
                     word-break: break-word;
+                    margin-bottom: 1vw;
                 }
                 .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;
+                    width: 75%;
+                    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>