|
|
@@ -1,9 +1,7 @@
|
|
|
<template>
|
|
|
<div class="nft-content">
|
|
|
<template v-if="isLoading">
|
|
|
- <img
|
|
|
- class="loading"
|
|
|
- src="../../static/svg/icon-loading.svg" />
|
|
|
+ <img class="loading" src="../../static/svg/icon-loading.svg" />
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<template v-if="isMobile">
|
|
|
@@ -46,11 +44,13 @@
|
|
|
<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" />
|
|
|
+ <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" />
|
|
|
+ <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>
|
|
|
@@ -64,21 +64,20 @@
|
|
|
import axios from 'axios'
|
|
|
import Cookies from 'js-cookie'
|
|
|
import { Toast } from 'vant';
|
|
|
-import { isBrowser } from '../../utils/help.js'
|
|
|
-
|
|
|
+import { isBrowser, appVersionCode, appType } from '../../utils/help.js'
|
|
|
+import Report from "@/log-center/log"
|
|
|
const api = {
|
|
|
- prod: 'https://api.denetme.net',
|
|
|
- pre: 'https://preapi.denetme.net',
|
|
|
- test: 'https://testapi.denetme.net'
|
|
|
+ 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'
|
|
|
+ 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 {
|
|
|
@@ -101,66 +100,66 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
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 || ''
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
+ 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) {
|
|
|
+ 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();
|
|
|
@@ -172,28 +171,76 @@ export default {
|
|
|
this.isLoading = false;
|
|
|
|
|
|
var clipboard = new ClipboardJS('.btn');
|
|
|
+ let that = this
|
|
|
clipboard.on('success', function (e) {
|
|
|
Toast('copy success');
|
|
|
+ that.trackingClick()
|
|
|
e.clearSelection();
|
|
|
});
|
|
|
+
|
|
|
+ // 埋点
|
|
|
+ this.pageSource = Report.pageSource.newUserLandingPage
|
|
|
+ if (this.isMobile) {
|
|
|
+ this.pageSource = Report.pageSource.mobileLandingPage
|
|
|
+ }
|
|
|
+ Report.reportLog({
|
|
|
+ baseInfo: {
|
|
|
+ appVersionCode: appVersionCode,
|
|
|
+ mid: this.mid,
|
|
|
+ pageSource: this.pageSource,
|
|
|
+ appType,
|
|
|
+ machineCode: this.mid
|
|
|
+ },
|
|
|
+ params: {
|
|
|
+ eventData: {
|
|
|
+ businessType: Report.businessType.pageView,
|
|
|
+ postId: this.detail.postId,
|
|
|
+ srcContentId: this.detail.srcContentId,
|
|
|
+ senderId: this.detail.srcUserId,
|
|
|
+ redPacketType: 3,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
methods: {
|
|
|
+ trackingClick() {
|
|
|
+ Report.reportLog({
|
|
|
+ baseInfo: {
|
|
|
+ appVersionCode: appVersionCode,
|
|
|
+ mid: this.mid,
|
|
|
+ pageSource: this.pageSource,
|
|
|
+ appType,
|
|
|
+ machineCode: this.mid
|
|
|
+ },
|
|
|
+ params: {
|
|
|
+ eventData: {
|
|
|
+ businessType: Report.businessType.buttonClick,
|
|
|
+ postId: this.detail.postId,
|
|
|
+ srcContentId: this.detail.srcContentId,
|
|
|
+ senderId: this.detail.srcUserId,
|
|
|
+ redPacketType: 3,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
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);
|
|
|
- });
|
|
|
- },
|
|
|
+ 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 })
|
|
|
- }
|
|
|
- },
|
|
|
+ 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() {
|
|
|
+ // 埋点
|
|
|
+ this.trackingClick()
|
|
|
let { extensionsInstallUrl } = this.config;
|
|
|
window.open(extensionsInstallUrl)
|
|
|
},
|
|
|
@@ -201,30 +248,30 @@ export default {
|
|
|
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;
|
|
|
- }
|
|
|
- },
|
|
|
+ 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);
|
|
|
- },
|
|
|
+ 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 || '',
|
|
|
+ let nftGroupInfo = {
|
|
|
+ twitterAccount: this.postBizData.defaultTwitterAccount || '',
|
|
|
createTime: Date.now(),
|
|
|
jump_type: 'nft_group_info',
|
|
|
- };
|
|
|
- Cookies.set('jump_info', JSON.stringify(nftGroupInfo), { expires: 100 });
|
|
|
- },
|
|
|
+ };
|
|
|
+ Cookies.set('jump_info', JSON.stringify(nftGroupInfo), { expires: 100 });
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -234,10 +281,10 @@ html,
|
|
|
body,
|
|
|
#__nuxt,
|
|
|
#__layout {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
}
|
|
|
|
|
|
.nft-content {
|
|
|
@@ -245,6 +292,7 @@ body,
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: linear-gradient(180deg, #FFFFFF 0%, #F0F7FE 94.31%);
|
|
|
+
|
|
|
.loading {
|
|
|
position: absolute;
|
|
|
transform: translate(-50%, -50%);
|
|
|
@@ -254,25 +302,30 @@ body,
|
|
|
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;
|
|
|
@@ -282,21 +335,25 @@ body,
|
|
|
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: 8px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.core_title {
|
|
|
color: #fff;
|
|
|
font-size: 26px;
|
|
|
@@ -304,13 +361,16 @@ body,
|
|
|
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;
|
|
|
@@ -318,6 +378,7 @@ body,
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.footer {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -327,12 +388,14 @@ body,
|
|
|
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;
|
|
|
@@ -349,12 +412,14 @@ body,
|
|
|
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;
|
|
|
@@ -369,6 +434,7 @@ body,
|
|
|
transform: translateX(-50%);
|
|
|
border-radius: 5px;
|
|
|
background-color: #FFFFFF;
|
|
|
+
|
|
|
.img {
|
|
|
position: unset;
|
|
|
width: 50px;
|
|
|
@@ -376,6 +442,7 @@ body,
|
|
|
border-radius: 5px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.desc {
|
|
|
position: absolute;
|
|
|
z-index: 2;
|
|
|
@@ -396,6 +463,7 @@ body,
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.title {
|
|
|
color: #000000;
|
|
|
font-weight: 600;
|
|
|
@@ -403,6 +471,7 @@ body,
|
|
|
text-align: center;
|
|
|
padding: 39px 0 7px;
|
|
|
}
|
|
|
+
|
|
|
.desc {
|
|
|
color: #8A8A8A;
|
|
|
font-size: 13px;
|
|
|
@@ -410,8 +479,10 @@ body,
|
|
|
word-break: break-all;
|
|
|
text-align: center;
|
|
|
}
|
|
|
+
|
|
|
.copy {
|
|
|
margin-top: 35px;
|
|
|
+
|
|
|
button {
|
|
|
width: 100%;
|
|
|
border: 0;
|
