|
|
@@ -3,11 +3,11 @@
|
|
|
<div class="content">
|
|
|
<!-- open -->
|
|
|
<div v-if="data.status == 'opened'" class="opened">
|
|
|
- <div class="header" :style="{ 'backgroundImage': `url(${require('../assets/svg/back-head-top.svg')})` }">
|
|
|
+ <div class="header" :style="{ 'backgroundImage': `url(${require('../assets/subject/001-back-head-top.svg')})` }">
|
|
|
<div class="seat"></div>
|
|
|
<div class="title">Awesome! You Will Get</div>
|
|
|
<div class="money">
|
|
|
- <img :src="require('../assets/svg/icon-dollar.svg')" alt />
|
|
|
+ <img :src="data.detail.currencyIconUrl" alt />
|
|
|
<span class="big">{{ data.money / 100 }}</span>
|
|
|
<span class="small">{{ data.detail.amountCurrencyCode || '' }}</span>
|
|
|
</div>
|
|
|
@@ -24,7 +24,7 @@
|
|
|
<div v-else class="btn" @click="clickFollowAll(item.relatedUsers)">Follow All</div>
|
|
|
</div>
|
|
|
<div class="item-follow-area">
|
|
|
- <div class="item-follow" v-for="item2, i in item.relatedUsers" v-bind:key="i">
|
|
|
+ <div class="item-follow" v-for="item2, i in item.relatedUsers" v-bind:key="i" @click="clickFollowAll([{name:item2.name}])">
|
|
|
<span :class="{ finished: item2.finished }">@{{ item2.name }}</span>
|
|
|
<img v-if="item2.finished" :src="require('../assets/svg/icon-true-ed.svg')" alt />
|
|
|
<img v-else :src="require('../assets/svg/icon-add.svg')" alt />
|
|
|
@@ -52,10 +52,12 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="people" @click="clickRoad">
|
|
|
- <div class="txt">Total ${{ data.detail.amountValue }} USD，{{ data.detail.receiveCount || 0 }}/{{
|
|
|
- data.detail.totalCount || 0
|
|
|
- }} People Got</div>
|
|
|
- <div class="right">
|
|
|
+ <div class="txt">
|
|
|
+ {{ data.detail.receiveCount || 0 }}/{{ data.detail.totalCount || 0 }} Got，{{
|
|
|
+ data.detail.receiveAmountValue /
|
|
|
+ 100
|
|
|
+ }}/{{ data.detail.amountValue / 100 }} {{ data.detail.amountCurrencyCode }}</div>
|
|
|
+ <div class="right" v-if="data.detail.allReceived">
|
|
|
<template v-for="item, i in data.detail.allReceived.slice(0, 3)" v-bind:key="i">
|
|
|
<img :src="item.simpleUserInfoVO.avatarUrl" alt :style="{ right: `${i * 16 + 14}px` }"
|
|
|
v-if="item.simpleUserInfoVO.avatarUrl" />
|
|
|
@@ -76,22 +78,24 @@
|
|
|
|
|
|
<!-- success -->
|
|
|
<div v-else-if="data.status == 'success'" class="success">
|
|
|
- <div class="header" :style="{ 'backgroundImage': `url(${require('../assets/svg/back-head-top.svg')})` }">
|
|
|
+ <div class="header" :style="{ 'backgroundImage': `url(${require('../assets/subject/001-back-head-top.svg')})` }">
|
|
|
<div class="seat"></div>
|
|
|
<div class="money">
|
|
|
- <img :src="require('../assets/svg/icon-dollar.svg')" alt />
|
|
|
+ <img :src="data.detail.currencyIconUrl" alt />
|
|
|
<span class="big">{{ data.money / 100 }}</span>
|
|
|
- <span class="small">USD</span>
|
|
|
+ <span class="small">{{ data.detail.amountCurrencyCode }}</span>
|
|
|
</div>
|
|
|
<div class="done" @click="clickDone">
|
|
|
- <img :src="require('../assets/svg/icon-done.svg')" alt class="icon-done" />
|
|
|
+ <img :src="require('../assets/subject/001-icon-done.svg')" alt class="icon-done" />
|
|
|
<span>Giveaways transferred to Wallet</span>
|
|
|
<img :src="require('../assets/svg/icon-right.svg')" alt class="icon-right" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="luck-list-title">
|
|
|
- <div>{{ data.detail.receiveCount || 0 }}/{{ data.detail.totalCount || 0 }} People Got</div>
|
|
|
- <div>Total ${{ data.detail.amountValue || '' }} {{ data.detail.amountCurrencyCode || '' }}</div>
|
|
|
+ <div>{{ data.detail.receiveCount || 0 }}/{{ data.detail.totalCount || 0 }} Got</div>
|
|
|
+ <div> {{ data.detail.receiveAmountValue / 100 }} / {{ data.detail.amountValue / 100 || '' }} {{
|
|
|
+ data.detail.amountCurrencyCode || ''
|
|
|
+ }}</div>
|
|
|
</div>
|
|
|
<div class="luck-list" @scroll="handleScroll($event)">
|
|
|
<div class="luck-item" v-for="item, i in data.detail.allReceived" v-bind:key="i">
|
|
|
@@ -104,7 +108,7 @@
|
|
|
<div class="luck-time">{{ moment(item.receiveTimestamp).format('MM-DD hh:mm:ss') }}</div>
|
|
|
</div>
|
|
|
<div class="luck-money">
|
|
|
- <img :src="require('../assets/svg/icon-dollar.svg')" alt />
|
|
|
+ <img :src="data.detail.currencyIconUrl" alt />
|
|
|
<div class="luck-money-txt">{{ showLastTwoPlace(item.amountValue) || 0 }}</div>
|
|
|
</div>
|
|
|
<div class="luck-king" v-if="item.maxAmount">
|
|
|
@@ -118,15 +122,22 @@
|
|
|
|
|
|
<!-- no-open -->
|
|
|
<div v-else-if="data.status == 'not-open'" class="not-open">
|
|
|
- <img :src="require('../assets/svg/back-top.svg')" alt class="up" />
|
|
|
- <img :src="require('../assets/svg/back-down.svg')" alt class="down" />
|
|
|
- <img class="open-gif" v-if="data.open_state" :src="require('../assets/gif/open.gif')" />
|
|
|
- <div class="open" v-else @click="clickOpenRedPacket">OPEN</div>
|
|
|
+ <img :src="require('../assets/subject/001-card.png')" alt="">
|
|
|
+ <img class="open-gif" :src="require('../assets/gif/001.gif')" />
|
|
|
+
|
|
|
+ <img :src="require('../assets/svg/icon-open.svg')" alt="" class="open" @click="clickOpenRedPacket">
|
|
|
<div class="title" v-if="data.detail.postUserInfo">
|
|
|
<img :src="data.detail.postUserInfo.avatarUrl" alt />
|
|
|
- <span>Giveaways from: {{ data.detail.postUserInfo.nickName }}</span>
|
|
|
+ <span>{{ data.detail.postUserInfo.nickName || 'FutureDoctor' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="money-area">
|
|
|
+ <div class="txt">{{ data.detail.amountCurrencyCode }} GIVEAWAY</div>
|
|
|
+ <div class="coin">
|
|
|
+ <img :src="data.detail.currencyIconUrl" alt />
|
|
|
+ <span>{{ data.detail.amountValue / 100 }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="people">{{ data.detail.totalCount }} WINNERS TO SHARE</div>
|
|
|
</div>
|
|
|
- <div class="txt">Good Luck!</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
@@ -137,7 +148,9 @@
|
|
|
</div>
|
|
|
<div class="luck-list-title">
|
|
|
<div>{{ data.detail.receiveCount || 0 }}/{{ data.detail.totalCount || 0 }} People Got</div>
|
|
|
- <div>Total ${{ data.detail.amountValue || 0 }} {{ data.detail.amountCurrencyCode || '' }}</div>
|
|
|
+ <div> {{ data.detail.receiveAmountValue / 100 }} / {{ data.detail.amountValue / 100 || '' }} {{
|
|
|
+ data.detail.amountCurrencyCode || ''
|
|
|
+ }}</div>
|
|
|
</div>
|
|
|
<div class="luck-list" @scroll="handleScroll">
|
|
|
<div class="luck-item" v-for="item, i in data.detail.allReceived" v-bind:key="i">
|
|
|
@@ -149,7 +162,7 @@
|
|
|
<div class="luck-time">{{ moment(item.receiveTimestamp).format('MM-DD hh:mm:ss') }}</div>
|
|
|
</div>
|
|
|
<div class="luck-money">
|
|
|
- <img :src="require('../assets/svg/icon-dollar.svg')" alt />
|
|
|
+ <img :src="data.detail.currencyIconUrl" alt />
|
|
|
<div class="luck-money-txt">{{ showLastTwoPlace(item.amountValue) }}</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -163,14 +176,16 @@
|
|
|
|
|
|
<!-- 红包被领完了 -->
|
|
|
<div v-else-if="data.status == 'close'" class="close">
|
|
|
- <div class="header" :style="{ 'backgroundImage': `url(${require('../assets/svg/back-head-top.svg')})` }">
|
|
|
+ <div class="header" :style="{ 'backgroundImage': `url(${require('../assets/subject/001-back-head-top.svg')})` }">
|
|
|
<div class="seat"></div>
|
|
|
<div class="close-title">{{ data.close_title }}</div>
|
|
|
<div class="close-title" v-if="data.close_text">{{ data.close_text }}</div>
|
|
|
</div>
|
|
|
<div class="luck-list-title">
|
|
|
<div>{{ data.detail.receiveCount || 0 }}/{{ data.detail.totalCount || 0 }} People Got</div>
|
|
|
- <div>Total ${{ data.detail.amountValue || 0 }} {{ data.detail.amountCurrencyCode || '' }}</div>
|
|
|
+ <div> {{ data.detail.receiveAmountValue / 100 }} / {{ data.detail.amountValue / 100 || '' }} {{
|
|
|
+ data.detail.amountCurrencyCode || ''
|
|
|
+ }}</div>
|
|
|
</div>
|
|
|
<div class="luck-list" @scroll="handleScroll">
|
|
|
<div class="luck-item" v-for="item, i in data.detail.allReceived" v-bind:key="i">
|
|
|
@@ -182,7 +197,7 @@
|
|
|
<div class="luck-time">{{ moment(item.receiveTimestamp).format('MM-DD HH:mm:ss') }}</div>
|
|
|
</div>
|
|
|
<div class="luck-money">
|
|
|
- <img :src="require('../assets/svg/icon-dollar.svg')" alt />
|
|
|
+ <img :src="data.detail.currencyIconUrl" alt />
|
|
|
<div class="luck-money-txt">{{ showLastTwoPlace(item.amountValue) || 0 }}</div>
|
|
|
</div>
|
|
|
<div class="luck-king" v-if="item.maxAmount">
|
|
|
@@ -200,6 +215,9 @@
|
|
|
<div class="txt">
|
|
|
{{ data.error_txt }}
|
|
|
</div>
|
|
|
+ <div class="retry" v-show="data.retry" @click="clickRetry">
|
|
|
+ Retry
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
@@ -220,6 +238,7 @@ import { onMounted, reactive } from "vue";
|
|
|
import { getPostDetail, getRedPacket, finishRedPacket, oneKeyLike, oneKeyReTweet, oneKeyFollow, getTaskDetail, getReceivedList } from '../http/redPacket.js'
|
|
|
import { getQueryString } from '../uilts/help.js'
|
|
|
import { getChromeStorage } from '../uilts/chromeExtension.js'
|
|
|
+import { interfaceDeclaration } from "@babel/types";
|
|
|
var moment = require('moment');
|
|
|
|
|
|
let data = reactive({
|
|
|
@@ -241,6 +260,9 @@ let data = reactive({
|
|
|
retweet: false
|
|
|
}
|
|
|
})
|
|
|
+function clickRetry(){
|
|
|
+ init()
|
|
|
+}
|
|
|
async function clickLickBtn() {
|
|
|
let _userInfo = await checkIsLogin()
|
|
|
if (!_userInfo) {
|
|
|
@@ -518,6 +540,7 @@ onMounted(() => {
|
|
|
data.postId = getQueryString('postId')
|
|
|
data.tweetId = getQueryString('tweetId')
|
|
|
init()
|
|
|
+ // data.status = 'error'
|
|
|
// data.loading_show = true
|
|
|
})
|
|
|
|
|
|
@@ -539,18 +562,15 @@ function handleRedPacket() {
|
|
|
}).then((res) => {
|
|
|
switch (res.code.toString()) {
|
|
|
case "0":
|
|
|
- data.open_state = false
|
|
|
data.status = 'opened'
|
|
|
data.money = res.data.receiveAmount
|
|
|
init()
|
|
|
break
|
|
|
case "2008":
|
|
|
- data.open_state = false
|
|
|
data.status = 'close'
|
|
|
data.close_title = 'Better luck next time!'
|
|
|
break
|
|
|
default:
|
|
|
- data.open_state = false
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
@@ -638,6 +658,7 @@ function handleFinishRedPacket() {
|
|
|
case "2009":
|
|
|
data.error_txt = `oops, new accounts cannot participate in this event,`
|
|
|
data.status = 'error'
|
|
|
+ data.retry = true
|
|
|
break
|
|
|
case "-106":
|
|
|
alert('Clicking too often, wait a moment and click again')
|
|
|
@@ -662,6 +683,8 @@ html,
|
|
|
body {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
+ width: 375px;
|
|
|
+ height: 500px;
|
|
|
}
|
|
|
|
|
|
.content {
|
|
|
@@ -691,12 +714,15 @@ body {
|
|
|
}
|
|
|
|
|
|
.error {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
text-align: center;
|
|
|
+ position: relative;
|
|
|
|
|
|
img {
|
|
|
- width: 160px;
|
|
|
- height: 160px;
|
|
|
- margin-top: 80px;
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ margin-top: 100px;
|
|
|
}
|
|
|
|
|
|
.txt {
|
|
|
@@ -708,6 +734,24 @@ body {
|
|
|
color: #a8a8a8;
|
|
|
margin: 34px 44px 0 44px;
|
|
|
}
|
|
|
+
|
|
|
+ .retry {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 30px;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -167.5px;
|
|
|
+ width: 335px;
|
|
|
+ height: 46px;
|
|
|
+ line-height: 46px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 100px;
|
|
|
+ border: 1px solid #389AFF;
|
|
|
+ background: rgba(196, 196, 196, 0.01);
|
|
|
+ color: #389AFF;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.success,
|
|
|
@@ -837,11 +881,13 @@ body {
|
|
|
|
|
|
.luck-list-title {
|
|
|
/* margin-top: 47px;*/
|
|
|
- padding: 0 16px;
|
|
|
+ margin: 0 16px;
|
|
|
+ padding: 14px 0 11px 0;
|
|
|
background: #fff;
|
|
|
- color: #9b9b9b;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
+ color: #B0B0B0;
|
|
|
+ border-bottom: 1px solid #D1D1D1;
|
|
|
}
|
|
|
|
|
|
.luck-list {
|
|
|
@@ -850,8 +896,9 @@ body {
|
|
|
|
|
|
.luck-item {
|
|
|
display: flex;
|
|
|
- padding: 12px 16px;
|
|
|
- border-top: 1px solid #d1d1d1;
|
|
|
+ padding: 12px 0;
|
|
|
+ margin: 0 16px;
|
|
|
+ border-bottom: 1px solid #d1d1d1;
|
|
|
justify-content: space-between;
|
|
|
position: relative;
|
|
|
|
|
|
@@ -862,7 +909,7 @@ body {
|
|
|
.luck-king {
|
|
|
position: absolute;
|
|
|
top: 36px;
|
|
|
- right: 16px;
|
|
|
+ right: 0px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
@@ -929,12 +976,18 @@ body {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .luck-item:last-child {
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.success {
|
|
|
.luck-list-title {
|
|
|
margin-top: 47px;
|
|
|
+ margin-bottom: 11px;
|
|
|
+ border-bottom: 1px solid #D1D1D1;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -1179,7 +1232,7 @@ body {
|
|
|
}
|
|
|
|
|
|
.btn {
|
|
|
- background: #ef4545;
|
|
|
+ background: #389AFF;
|
|
|
border-radius: 100px;
|
|
|
color: #fff;
|
|
|
width: 258px;
|
|
|
@@ -1194,19 +1247,64 @@ body {
|
|
|
}
|
|
|
|
|
|
.not-open {
|
|
|
- filter: drop-shadow(0px 4px 94px rgba(0, 0, 0, 0.3));
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ filter: drop-shadow(0px 2px 20px rgba(0, 0, 0, 0.1));
|
|
|
position: relative;
|
|
|
|
|
|
+ .money-area {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 65px;
|
|
|
+
|
|
|
+ .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;
|
|
|
+
|
|
|
+ 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: 46px;
|
|
|
+ top: 15px;
|
|
|
+ left: 15px;
|
|
|
z-index: 3;
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
img {
|
|
|
width: 24px;
|
|
|
height: 24px;
|
|
|
@@ -1215,7 +1313,7 @@ body {
|
|
|
}
|
|
|
|
|
|
span {
|
|
|
- margin-left: 11px;
|
|
|
+ margin-left: 10px;
|
|
|
font-weight: 600;
|
|
|
font-size: 16px;
|
|
|
letter-spacing: 0.3px;
|
|
|
@@ -1223,19 +1321,19 @@ body {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .txt {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- font-style: normal;
|
|
|
- font-weight: 700;
|
|
|
- font-size: 42px;
|
|
|
- line-height: 50px;
|
|
|
- text-align: center;
|
|
|
+ // .txt {
|
|
|
+ // width: 100%;
|
|
|
+ // position: absolute;
|
|
|
+ // font-style: normal;
|
|
|
+ // font-weight: 700;
|
|
|
+ // font-size: 42px;
|
|
|
+ // line-height: 50px;
|
|
|
+ // text-align: center;
|
|
|
|
|
|
- color: #FFF2D3;
|
|
|
- top: 90px;
|
|
|
- z-index: 3;
|
|
|
- }
|
|
|
+ // color: #FFF2D3;
|
|
|
+ // top: 90px;
|
|
|
+ // z-index: 3;
|
|
|
+ // }
|
|
|
|
|
|
img {
|
|
|
width: 100%;
|
|
|
@@ -1254,31 +1352,24 @@ body {
|
|
|
}
|
|
|
|
|
|
.open {
|
|
|
- width: 110px;
|
|
|
- height: 110px;
|
|
|
- text-align: center;
|
|
|
- font-size: 26px;
|
|
|
- font-weight: 600;
|
|
|
- background: #ffe9b5;
|
|
|
- color: #ef4545;
|
|
|
+ width: 335px;
|
|
|
+ height: 50px;
|
|
|
cursor: pointer;
|
|
|
- border-radius: 50%;
|
|
|
- line-height: 110px;
|
|
|
position: absolute;
|
|
|
- top: 235px;
|
|
|
+ bottom: 28px;
|
|
|
left: 50%;
|
|
|
- margin-left: -55px;
|
|
|
+ margin-left: -167.5px;
|
|
|
z-index: 2;
|
|
|
}
|
|
|
|
|
|
.open-gif {
|
|
|
- width: 110px;
|
|
|
- height: 110px;
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
text-align: center;
|
|
|
position: absolute;
|
|
|
- top: 235px;
|
|
|
+ bottom: 100px;
|
|
|
left: 50%;
|
|
|
- margin-left: -55px;
|
|
|
+ margin-left: -100px;
|
|
|
z-index: 3;
|
|
|
}
|
|
|
}
|
