|
@@ -10,8 +10,10 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 红包打开 -->
|
|
|
- <div class="redPacket" v-show="status != 'not-open'"
|
|
|
- :class="{ redPacket2: status != 'open', key_packet: status == 'open' }">
|
|
|
+ <div class="redPacket"
|
|
|
+ :class="{ redPacket2: status != 'open', key_packet: status == 'open' }"
|
|
|
+ v-if="status != 'nothing'"
|
|
|
+ v-show="status != 'not-open'">
|
|
|
|
|
|
<!-- 内容 -->
|
|
|
<div class="head">
|
|
@@ -44,17 +46,18 @@
|
|
|
<div class="txt">AWESOME! YOU Will GET</div>
|
|
|
<div class="head-money-area">
|
|
|
<img :src="currencyIconPath" alt />
|
|
|
- <span class="money-txt">{{ receiveAmount }}</span>
|
|
|
+ <span class="money-txt" :style="{ fontSize: amount_font_size + 'px' }">{{ receiveAmount }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 领取列表 -->
|
|
|
<div class="luck-list-title">
|
|
|
- <div>{{ detail.postBizData.receiveCount || 0 }}/{{ detail.postBizData.totalCount || 0 }} Winners</div>
|
|
|
+ <div>{{ detail.postBizData.receiveCount || 0 }}/{{ detail.postBizData.totalCount || 0 }} Winners
|
|
|
+ </div>
|
|
|
<div> {{ detail.postBizData.receiveAmountValue }} / {{
|
|
|
detail.postBizData.amountValue || ''
|
|
|
- }} {{ detail.postBizData.amountCurrencyCode || '' }}</div>
|
|
|
+ }} {{ detail.postBizData.currencySymbol || '' }}</div>
|
|
|
</div>
|
|
|
<div class="luck-list" @scroll="handleScroll($event)">
|
|
|
<div class="luck-item" v-for="item, i in luck_list" v-bind:key="i">
|
|
@@ -75,20 +78,41 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="redBag" v-else>
|
|
|
+ <img src="/subject/001-card.png" alt="">
|
|
|
+ <img class="open-gif" src="/subject/001.gif" />
|
|
|
+ <div class="title" v-if="detail.postBizData.postUserInfo">
|
|
|
+ <img :src="detail.postBizData.postUserInfo.avatarUrl" alt />
|
|
|
+ <span>{{ detail.postBizData.postUserInfo.nickName || 'FutureDoctor' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="money-area">
|
|
|
+ <div class="txt">{{ detail.postBizData.currencySymbol }} GIVEAWAY</div>
|
|
|
+ <div class="coin">
|
|
|
+ <img :src="detail.postBizData.currencyIconPath" alt />
|
|
|
+ <font-amount :amount="detail.postBizData.amountValue"></font-amount>
|
|
|
+ </div>
|
|
|
+ <div class="people">{{ detail.postBizData.totalCount }} WINNERS TO SHARE</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
|
|
|
<!-- 安装 -->
|
|
|
- <div class="install" v-if="status == 'open' || status == 'opened'"
|
|
|
+ <div class="install" v-if="status == 'nothing' || status == 'open' || status == 'opened'"
|
|
|
:class="{ key_install: status == 'open' }">
|
|
|
- <div class="title">Withdraw to Wallet</div>
|
|
|
- <div class="validity">
|
|
|
- <template v-if="validity_state">
|
|
|
- <span style="color:#FFA620;">Remaining valid time </span>
|
|
|
- <span style="color: #FFA620;">{{ validity }}</span>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <span style="color: #FFA620;">Giveaways Validity</span>
|
|
|
- </template>
|
|
|
+ <div v-if="status == 'nothing'">
|
|
|
+ <div class="title">Install Denet to Draw</div>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <div class="title">Withdraw to Wallet</div>
|
|
|
+ <div class="validity">
|
|
|
+ <template v-if="validity_state">
|
|
|
+ <span style="color:#FFA620;">Remaining valid time </span>
|
|
|
+ <span style="color: #FFA620;">{{ validity }}</span>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span style="color: #FFA620;">Giveaways Validity</span>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<div class="flow">
|
|
@@ -102,14 +126,15 @@
|
|
|
<div class="install_btn" @click="installExtension">Install</div>
|
|
|
<div class="area_num">
|
|
|
<div class="num">2</div>
|
|
|
- <span>Complete Tasks by {{ detail.postBizData.postUserInfo.nickName }}</span>
|
|
|
+ <span v-if="status == 'nothing'">Complete Tasks</span>
|
|
|
+ <span v-else>Complete Tasks by {{ detail.postBizData.postUserInfo.nickName }}</span>
|
|
|
</div>
|
|
|
- <div class="tip">Follow、Like tweet、Retweet (Just 1-3 minutes)</div>
|
|
|
+ <div class="tip">Complete like, retweet and follow in a simple way</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 过期 -->
|
|
|
- <div class="install install-error" v-if="status == 'nothing' || status == 'expire'">
|
|
|
+ <div class="install install-error" v-if="status == 'expire'">
|
|
|
<div class="title">Install DeNet</div>
|
|
|
<div class="title">Don't miss the next Giveaway</div>
|
|
|
<div class="tip">Used to verify tasks and get rewards</div>
|
|
@@ -138,7 +163,7 @@
|
|
|
<div>{{ detail.postBizData.receiveCount || 0 }}/{{ detail.postBizData.totalCount || 0 }} Winners</div>
|
|
|
<div> {{ detail.postBizData.receiveAmountValue }} / {{
|
|
|
detail.postBizData.amountValue || ''
|
|
|
- }} {{ detail.postBizData.amountCurrencyCode || '' }}</div>
|
|
|
+ }} {{ detail.postBizData.currencySymbol || '' }}</div>
|
|
|
</div>
|
|
|
<div class="luck-list" @scroll="handleScroll($event)">
|
|
|
<div class="luck-item" v-for="item, i in luck_list" v-bind:key="i">
|
|
@@ -149,7 +174,7 @@
|
|
|
<div class="luck-time">{{ formatTime(item.receiveTimestamp) }}</div>
|
|
|
</div>
|
|
|
<div class="luck-money">
|
|
|
- <img :src="currencyIconPath" alt />
|
|
|
+ <img :src="item.currencyIconPath" alt />
|
|
|
<div class="luck-money-txt">{{ item.amountValue || 0 }}</div>
|
|
|
</div>
|
|
|
<div class="luck-king" v-if="item.maxAmount">
|
|
@@ -188,6 +213,11 @@
|
|
|
import axios from 'axios';
|
|
|
import Cookies from 'js-cookie'
|
|
|
import { isBrowser } from '../utils/help.js'
|
|
|
+import Report from "../log-center/log"
|
|
|
+import { Toast } from 'vant';
|
|
|
+import FontAmount from '../components/FontAmount.vue'
|
|
|
+
|
|
|
+
|
|
|
var moment = require('moment');
|
|
|
var ClipboardJS = require('clipboard')
|
|
|
|
|
@@ -203,6 +233,7 @@ const page = {
|
|
|
}
|
|
|
const jumpUrl = page[process.env.NUXT_ENV.MODE] + '/'
|
|
|
const baseURL = api[process.env.NUXT_ENV.MODE]
|
|
|
+const appType = 1;
|
|
|
|
|
|
|
|
|
export default {
|
|
@@ -210,11 +241,12 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
cp_link: '',
|
|
|
- appVersionCode: 1,
|
|
|
+ appVersionCode: 3,
|
|
|
mid: '',
|
|
|
show_moblie: false,
|
|
|
show_home: false,
|
|
|
layer_show: false,
|
|
|
+ amount_font_size:46,
|
|
|
validity: '',
|
|
|
receiveAmount: 0,
|
|
|
validity_state: true,
|
|
@@ -236,17 +268,19 @@ export default {
|
|
|
luck_list: [],
|
|
|
luck_list_end: false,
|
|
|
config: {
|
|
|
- extensionsInstallChannel : 'officeDownload', // chromeAppStore
|
|
|
+ extensionsInstallChannel: 'officeDownload', // chromeAppStore
|
|
|
extensionsInstallUrl: ''
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
+ components: {
|
|
|
+ FontAmount,
|
|
|
+ },
|
|
|
head() {
|
|
|
return {
|
|
|
type: '',
|
|
|
title: this.title,
|
|
|
- appVersionCode: 1,
|
|
|
+ appVersionCode: 3,
|
|
|
meta: [
|
|
|
{
|
|
|
name: 'twitter:card',
|
|
@@ -268,7 +302,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- clickOpenChrome(){
|
|
|
+ clickOpenChrome() {
|
|
|
window.open('https://www.google.com/chrome')
|
|
|
},
|
|
|
isMobile() {
|
|
@@ -276,19 +310,33 @@ export default {
|
|
|
return flag;
|
|
|
},
|
|
|
installExtension() {
|
|
|
- let {extensionsInstallChannel, extensionsInstallUrl} = this.config;
|
|
|
- let url = extensionsInstallUrl || "https://d1mcov78iir8kk.cloudfront.net/extensions/chrome/denet1_0_1.zip"
|
|
|
+ let { extensionsInstallChannel, extensionsInstallUrl } = this.config;
|
|
|
+ let url = extensionsInstallUrl;
|
|
|
+ Report.reportLog({
|
|
|
+ baseInfo: {
|
|
|
+ appVersionCode: this.appVersionCode,
|
|
|
+ mid: this.mid,
|
|
|
+ pageSource: Report.pageSource.newUserLandingPage,
|
|
|
+ appType
|
|
|
+ },
|
|
|
+ params: {
|
|
|
+ eventData: {
|
|
|
+ businessType: Report.businessType.buttonClick,
|
|
|
+ objectType: Report.objectType.installButton
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
switch (extensionsInstallChannel) {
|
|
|
case "officeDownload":
|
|
|
location.href = url;
|
|
|
+ this.$router.push({
|
|
|
+ path: '/install'
|
|
|
+ })
|
|
|
break;
|
|
|
case "chromeAppStore":
|
|
|
window.open(extensionsInstallUrl)
|
|
|
break;
|
|
|
}
|
|
|
- this.$router.push({
|
|
|
- path: '/install'
|
|
|
- })
|
|
|
},
|
|
|
formatTime(time, _type = 'MM-DD HH:mm:ss') {
|
|
|
return moment(time).format(_type)
|
|
@@ -310,6 +358,10 @@ export default {
|
|
|
this.getReceivedList()
|
|
|
}
|
|
|
},
|
|
|
+ getFontSize(amount) {
|
|
|
+ let _num = parseInt(360 / amount.length);
|
|
|
+ this.amount_font_size = _num < 46 ? _num : 46;
|
|
|
+ },
|
|
|
setCookieMid() {
|
|
|
let _cookie_mid_arr = Cookies.get('mid') || []
|
|
|
if (_cookie_mid_arr.length > 0) {
|
|
@@ -334,23 +386,31 @@ export default {
|
|
|
switch (data.code.toString()) {
|
|
|
case '0':
|
|
|
this.getDetail()
|
|
|
- if (data.data.newReceived) {
|
|
|
- this.status = 'not-open'
|
|
|
- setTimeout(() => {
|
|
|
- this.status = 'open'
|
|
|
- }, 3000)
|
|
|
- this.receiveAmount = data.data.receiveAmount
|
|
|
+ if (data.data.receiveAmount == '0') {
|
|
|
+ this.status = 'nothing'
|
|
|
} else {
|
|
|
- this.status = 'opened'
|
|
|
+ if (data.data.newReceived) {
|
|
|
+ this.status = 'not-open'
|
|
|
+ setTimeout(() => {
|
|
|
+ this.status = 'open'
|
|
|
+ }, 3000)
|
|
|
+ this.receiveAmount = data.data.receiveAmount
|
|
|
+ } else {
|
|
|
+ this.status = 'opened'
|
|
|
+ }
|
|
|
}
|
|
|
this.getValidity(data.data.endTimestamp)
|
|
|
this.receiveAmount = data.data.receiveAmount
|
|
|
+ this.getFontSize(this.receiveAmount)
|
|
|
break;
|
|
|
case '2003':
|
|
|
- this.status = 'expire'
|
|
|
+ // this.status = 'expire'
|
|
|
+ this.getDetail()
|
|
|
+ this.status = 'nothing'
|
|
|
break
|
|
|
// 红包被领完了
|
|
|
case '2008':
|
|
|
+ this.getDetail()
|
|
|
this.status = 'nothing'
|
|
|
break
|
|
|
case '2029':
|
|
@@ -359,7 +419,9 @@ export default {
|
|
|
break
|
|
|
default:
|
|
|
console.log('getRedPacket', data)
|
|
|
- this.show_home = false
|
|
|
+ // this.show_home = false
|
|
|
+ this.getDetail()
|
|
|
+ this.status = 'nothing'
|
|
|
break;
|
|
|
}
|
|
|
// 领取列表分页
|
|
@@ -438,7 +500,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
async getConfig() {
|
|
|
- let {data} = await axios.post(`${baseURL}/denet/base/config/getFrontConfig`, {
|
|
|
+ let { data } = await axios.post(`${baseURL}/denet/base/config/getFrontConfig`, {
|
|
|
baseInfo: {
|
|
|
appVersionCode: this.appVersionCode,
|
|
|
mid: this.mid
|
|
@@ -470,6 +532,12 @@ export default {
|
|
|
if (data.code == 0) {
|
|
|
if (data.data && data.data.postBizData && typeof data.data.postBizData == 'string') {
|
|
|
data.data.postBizData = JSON.parse(data.data.postBizData)
|
|
|
+ }
|
|
|
+ if(data.data.postBizData === null) {
|
|
|
+ data.data.postBizData = {
|
|
|
+ postUserInfo: {
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
return {
|
|
|
detail: data.data,
|
|
@@ -483,6 +551,7 @@ export default {
|
|
|
if (!this.detail.postId) {
|
|
|
return
|
|
|
}
|
|
|
+ console.log(this.detail)
|
|
|
//改变font-size
|
|
|
// (function (doc, win) {
|
|
|
// var docEI = doc.documentElement,
|
|
@@ -506,6 +575,7 @@ export default {
|
|
|
// 复制链接
|
|
|
var clipboard = new ClipboardJS('.btn');
|
|
|
clipboard.on('success', function (e) {
|
|
|
+ Toast('copy success');
|
|
|
console.info('Action:', e.action);
|
|
|
console.info('Text:', e.text);
|
|
|
console.info('Trigger:', e.trigger);
|
|
@@ -525,6 +595,19 @@ export default {
|
|
|
this.setCookieMid()
|
|
|
this.getRedPacket()
|
|
|
this.setPickupInfo()
|
|
|
+ Report.reportLog({
|
|
|
+ baseInfo: {
|
|
|
+ appVersionCode: this.appVersionCode,
|
|
|
+ mid: this.mid,
|
|
|
+ pageSource: Report.pageSource.newUserLandingPage,
|
|
|
+ appType
|
|
|
+ },
|
|
|
+ params: {
|
|
|
+ eventData: {
|
|
|
+ businessType: Report.businessType.pageView,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
} else {
|
|
|
this.show_home = true
|
|
|
this.status = 'no-chrome'
|
|
@@ -630,7 +713,7 @@ body,
|
|
|
flex: 1;
|
|
|
width: 100%;
|
|
|
background: #fff;
|
|
|
- overflow: auto;
|
|
|
+ overflow-y: auto;
|
|
|
|
|
|
.luck-item {
|
|
|
display: flex;
|
|
@@ -826,6 +909,133 @@ body,
|
|
|
}
|
|
|
|
|
|
|
|
|
+ .redBag {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ flex-direction: column;
|
|
|
+ position: absolute;
|
|
|
+ top: 14rem;
|
|
|
+ left: 30.6rem;
|
|
|
+ width: 37.5rem;
|
|
|
+ height: 50rem;
|
|
|
+ border-radius: 2rem;
|
|
|
+ overflow-y: hidden;
|
|
|
+ box-shadow: 0 0 5px #888888;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ .money-area {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 65px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .txt {
|
|
|
+ font-weight: 800;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .coin {
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 6px;
|
|
|
+ margin-bottom: 7px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 90%;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 46px;
|
|
|
+ height: 46px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 3px solid #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ margin-left: 15px;
|
|
|
+ font-weight: 800;
|
|
|
+ font-size: 60px;
|
|
|
+ line-height: 76px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .people {
|
|
|
+ font-weight: 800;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 16px;
|
|
|
+ letter-spacing: 0.05em;
|
|
|
+ text-align: center;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ position: absolute;
|
|
|
+ top: 15px;
|
|
|
+ left: 15px;
|
|
|
+ z-index: 3;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ border: 2px solid #FFF;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ margin-left: 10px;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 16px;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .up {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .down {
|
|
|
+ position: absolute;
|
|
|
+ top: 253px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .open {
|
|
|
+ width: 335px;
|
|
|
+ height: 50px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 28px;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -167.5px;
|
|
|
+ z-index: 4;
|
|
|
+ }
|
|
|
+
|
|
|
+ .open-gif {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 70px;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -100px;
|
|
|
+ z-index: 3;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
.redPacket {
|
|
|
display: flex;
|
|
@@ -839,7 +1049,7 @@ body,
|
|
|
height: 65rem;
|
|
|
border-radius: 2rem;
|
|
|
// background: red;
|
|
|
- overflow: hidden;
|
|
|
+ overflow-y: hidden;
|
|
|
box-shadow: 0 0 5px #888888;
|
|
|
background: #fff;
|
|
|
|
|
@@ -936,6 +1146,7 @@ body,
|
|
|
span {
|
|
|
margin-left: 1.3rem;
|
|
|
font-size: 4.6rem;
|
|
|
+ word-break: break-all;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -955,7 +1166,7 @@ body,
|
|
|
|
|
|
.luck-list {
|
|
|
background: #fff;
|
|
|
- overflow: auto;
|
|
|
+ overflow-y: auto;
|
|
|
|
|
|
.luck-item {
|
|
|
display: flex;
|