|
|
@@ -2,7 +2,10 @@
|
|
|
<div class="content">
|
|
|
<!-- open -->
|
|
|
<div v-if="data.status == 'opened'" class="opened">
|
|
|
- <div class="header">
|
|
|
+ <div
|
|
|
+ class="header"
|
|
|
+ :style="{ 'backgroundImage': `url(${require('../assets/svg/back-head-top.svg')})` }"
|
|
|
+ >
|
|
|
<div class="title">Awesome! You Will Get</div>
|
|
|
<div class="money">
|
|
|
<img :src="require('../assets/svg/icon-dollar.svg')" alt />
|
|
|
@@ -14,26 +17,43 @@
|
|
|
<div class="list">
|
|
|
<div class="item" v-for="item, i in data.detail.taskCondition" v-bind:key="i">
|
|
|
<template v-if="item.type == 1">
|
|
|
- <img :src="require('../assets/svg/icon-follow.svg')" alt />
|
|
|
<div class="item-content">
|
|
|
- <div class="item-title">Follow</div>
|
|
|
- <span v-for="item2, i in item.relatedUsers" v-bind:key="i">@{{ item2.name }}</span>
|
|
|
+ <div class="item-follow-title">
|
|
|
+ <img :src="require('../assets/svg/icon-follow.svg')" alt />
|
|
|
+ <div class="item-title">Follow</div>
|
|
|
+ <img v-if="data.done.follow" :src="require('../assets/svg/icon-true.svg')" alt />
|
|
|
+ <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"
|
|
|
+ @click="clickFollow(item2)"
|
|
|
+ >
|
|
|
+ <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 />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="btn">Follow</div>
|
|
|
</template>
|
|
|
<template v-if="item.type == 2">
|
|
|
<img :src="require('../assets/svg/icon-like.svg')" alt />
|
|
|
<div class="item-content">
|
|
|
<div class="item-title">Like</div>
|
|
|
</div>
|
|
|
- <div class="btn">Like</div>
|
|
|
+ <img v-if="data.done.like" :src="require('../assets/svg/icon-true.svg')" alt />
|
|
|
+
|
|
|
+ <div v-else class="btn" @click="clickBtn">Like</div>
|
|
|
</template>
|
|
|
<template v-if="item.type == 3">
|
|
|
<img :src="require('../assets/svg/icon-retweet.svg')" alt />
|
|
|
<div class="item-content">
|
|
|
<div class="item-title">Retweet</div>
|
|
|
</div>
|
|
|
- <div class="btn">Retweet</div>
|
|
|
+ <img v-if="data.done.retweet" :src="require('../assets/svg/icon-true.svg')" alt />
|
|
|
+ <div v-else class="btn" @click="clickBtn">Retweet</div>
|
|
|
</template>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -42,9 +62,21 @@
|
|
|
class="txt"
|
|
|
>Total ${{ data.detail.amountValue }} USD，{{ data.detail.finishCount || 0 }}/{{ data.detail.totalCount || 0 }} People Got</div>
|
|
|
<div class="right">
|
|
|
- <img :src="require('../assets/svg/icon-dollar.svg')" alt />
|
|
|
- <img :src="require('../assets/svg/icon-dollar.svg')" alt />
|
|
|
- <img :src="require('../assets/svg/icon-dollar.svg')" alt />
|
|
|
+ <template v-for="item, i in data.detail.allReceived" v-bind:key="i">
|
|
|
+ <img :src="item.simpleUserInfoVO.avatarUrl" alt style="right: 14px;" v-if="i == 0" />
|
|
|
+ <img
|
|
|
+ :src="item.simpleUserInfoVO.avatarUrl"
|
|
|
+ alt
|
|
|
+ :style="{ right: `${i * 16 + 14}px` }"
|
|
|
+ v-if="i < 2 && item.simpleUserInfoVO.avatarUrl"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else-if="i < 2"
|
|
|
+ :src="require('../assets/svg/icon-twitter.svg')"
|
|
|
+ alt
|
|
|
+ :style="{ right: `${i * 16 + 14}px` }"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
<img :src="require('../assets/svg/icon-right.svg')" alt class="road" />
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -58,12 +90,20 @@
|
|
|
</div>
|
|
|
<!-- success -->
|
|
|
<div v-else-if="data.status == 'success'" class="success">
|
|
|
- <div class="header">
|
|
|
+ <div
|
|
|
+ class="header"
|
|
|
+ :style="{ 'backgroundImage': `url(${require('../assets/svg/back-head-top.svg')})` }"
|
|
|
+ >
|
|
|
<div class="money">
|
|
|
<img :src="require('../assets/svg/icon-dollar.svg')" alt />
|
|
|
<span class="big">{{ data.money / 100 }}</span>
|
|
|
<span class="small">USD</span>
|
|
|
</div>
|
|
|
+ <div class="done">
|
|
|
+ <img :src="require('../assets/svg/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.finishCount || 0 }}/{{ data.detail.totalCount || 0 }} People Got</div>
|
|
|
@@ -71,9 +111,15 @@
|
|
|
</div>
|
|
|
<div class="luck-list">
|
|
|
<div class="luck-item" v-for="item, i in data.detail.allReceived" v-bind:key="i">
|
|
|
- <img :src="item.simpleUserInfoVO.avatarUrl" alt />
|
|
|
+ <img v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt />
|
|
|
+ <img v-else :src="require('../assets/svg/icon-twitter.svg')" alt />
|
|
|
<div class="luck-content">
|
|
|
- <div class="luck-title">{{ item.simpleUserInfoVO.nickName }}</div>
|
|
|
+ <div
|
|
|
+ class="luck-title"
|
|
|
+ v-if="item.simpleUserInfoVO.nickName"
|
|
|
+ >{{ item.simpleUserInfoVO.nickName }}</div>
|
|
|
+ <div class="luck-title" v-else>Twitter User</div>
|
|
|
+
|
|
|
<div class="luck-time">{{ moment(item.finishTimestamp).format('MM-DD hh:mm:ss') }}</div>
|
|
|
</div>
|
|
|
<div class="luck-money">
|
|
|
@@ -104,9 +150,14 @@
|
|
|
</div>
|
|
|
<div class="luck-list">
|
|
|
<div class="luck-item" v-for="item, i in data.detail.allReceived" v-bind:key="i">
|
|
|
- <img :src="item.simpleUserInfoVO.avatarUrl" alt />
|
|
|
+ <img v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt />
|
|
|
+ <img v-else :src="require('../assets/svg/icon-twitter.svg')" alt />
|
|
|
<div class="luck-content">
|
|
|
- <div class="luck-title">{{ item.simpleUserInfoVO.nickName }}</div>
|
|
|
+ <div
|
|
|
+ class="luck-title"
|
|
|
+ v-if="item.simpleUserInfoVO.nickName"
|
|
|
+ >{{ item.simpleUserInfoVO.nickName }}</div>
|
|
|
+ <div class="luck-title" v-else>Twitter User</div>
|
|
|
<div class="luck-time">{{ moment(item.finishTimestamp).format('MM-DD hh:mm:ss') }}</div>
|
|
|
</div>
|
|
|
<div class="luck-money">
|
|
|
@@ -124,7 +175,10 @@
|
|
|
|
|
|
<!-- 红包被领完了 -->
|
|
|
<div v-else-if="data.status == 'close'" class="close">
|
|
|
- <div class="header">
|
|
|
+ <div
|
|
|
+ class="header"
|
|
|
+ :style="{ 'backgroundImage': `url(${require('../assets/svg/back-head-top.svg')})` }"
|
|
|
+ >
|
|
|
<div class="close-title">{{ data.close_title }}</div>
|
|
|
</div>
|
|
|
<div class="luck-list-title">
|
|
|
@@ -149,6 +203,15 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- error -->
|
|
|
+ <div v-else-if="data.status == 'error'" class="error">
|
|
|
+ <img :src="require('../assets/svg/icon-error.svg')" alt />
|
|
|
+ <div class="txt">
|
|
|
+ oops, new accounts cannot participate in this event,
|
|
|
+ better luck next time!
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -168,10 +231,21 @@ var moment = require('moment');
|
|
|
let data = reactive({
|
|
|
status: '',
|
|
|
detail: {},
|
|
|
+ srcContentId: '',
|
|
|
close_title: 'Better luck next time!',
|
|
|
receiveAmount: 0,
|
|
|
- money: 0
|
|
|
+ money: 0,
|
|
|
+ // 状态
|
|
|
+ done: {
|
|
|
+ follow: false,
|
|
|
+ like: false,
|
|
|
+ retweet: false
|
|
|
+ }
|
|
|
})
|
|
|
+function clickBtn() {
|
|
|
+ // 跳转到推文详情
|
|
|
+ window.open(`https://twitter.com/${data.detail.postUserInfo.nickName}/status/${data.srcContentId}`)
|
|
|
+}
|
|
|
|
|
|
|
|
|
function getValidity() {
|
|
|
@@ -185,6 +259,15 @@ function getValidity() {
|
|
|
}, 1000)
|
|
|
}
|
|
|
|
|
|
+function clickFollowAll(item) {
|
|
|
+ for (let i in item) {
|
|
|
+ clickFollow(item[i])
|
|
|
+ }
|
|
|
+}
|
|
|
+function clickFollow(item) {
|
|
|
+ window.open(`https://twitter.com/${item.name}`)
|
|
|
+}
|
|
|
+
|
|
|
function showLastTwoPlace(n) {
|
|
|
return n / 100
|
|
|
// n = n / 100
|
|
|
@@ -234,6 +317,7 @@ function init() {
|
|
|
data.detail.amountValue = showLastTwoPlace(data.detail.amountValue)
|
|
|
data.detail.receiveAmountValue = showLastTwoPlace(data.detail.receiveAmountValue)
|
|
|
data.money = data.detail.myReceived.amountValue
|
|
|
+
|
|
|
console.log(data.detail)
|
|
|
getValidity()
|
|
|
}
|
|
|
@@ -241,6 +325,7 @@ function init() {
|
|
|
if (res.data.postType == 2) {
|
|
|
data.status = 'close'
|
|
|
}
|
|
|
+ data.srcContentId = res.data.srcContentId
|
|
|
break
|
|
|
|
|
|
}
|
|
|
@@ -249,7 +334,6 @@ function init() {
|
|
|
onMounted(() => {
|
|
|
data.postId = getQueryString('postId')
|
|
|
init()
|
|
|
-
|
|
|
})
|
|
|
|
|
|
function clickOpenRedPacket() {
|
|
|
@@ -277,31 +361,47 @@ function clickGetGiveways() {
|
|
|
postId: data.postId
|
|
|
}
|
|
|
}).then((res) => {
|
|
|
- if (res.code != 0) {
|
|
|
- alert(res.msg)
|
|
|
- } else {
|
|
|
- if (res.data.finished) {
|
|
|
- data.status = 'success'
|
|
|
- data.receiveAmount = res.data.receiveAmount
|
|
|
- init()
|
|
|
- } else {
|
|
|
- let _data = res.data.conditionResult
|
|
|
- for (let i in _data) {
|
|
|
- if (!_data[i].finished) {
|
|
|
+ switch (res.code.toString()) {
|
|
|
+ case '0':
|
|
|
+ if (res.data.finished) {
|
|
|
+ data.status = 'success'
|
|
|
+ data.receiveAmount = res.data.receiveAmount
|
|
|
+ init()
|
|
|
+ } else {
|
|
|
+ let _data = res.data.conditionResult
|
|
|
+ for (let i in _data) {
|
|
|
switch (_data[i].type.toString()) {
|
|
|
case '1':
|
|
|
- alert('关注未完成')
|
|
|
+ if (_data[i].finished) {
|
|
|
+ data.detail.taskCondition[0].relatedUsers = _data[i].detail
|
|
|
+ data.done.follow = true
|
|
|
+ } else {
|
|
|
+ alert('关注未完成')
|
|
|
+ }
|
|
|
break
|
|
|
case '2':
|
|
|
- alert('喜欢未完成')
|
|
|
+ if (_data[i].finished) {
|
|
|
+ data.done.like = true
|
|
|
+ } else {
|
|
|
+ alert('like未完成')
|
|
|
+ }
|
|
|
break
|
|
|
case '3':
|
|
|
- alert('转推未完成')
|
|
|
+ if (_data[i].finished) {
|
|
|
+ data.done.retweet = true
|
|
|
+ } else {
|
|
|
+ alert('转推未完成')
|
|
|
+ }
|
|
|
break
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
+ break
|
|
|
+ case "2009":
|
|
|
+ data.status = 'error'
|
|
|
+ break
|
|
|
+ default:
|
|
|
+ alert(res.msg)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
@@ -328,6 +428,23 @@ body {
|
|
|
border-radius: 11px;
|
|
|
font-family: "SF Pro Display";
|
|
|
font-style: normal;
|
|
|
+ .error {
|
|
|
+ text-align: center;
|
|
|
+ img {
|
|
|
+ width: 160px;
|
|
|
+ height: 160px;
|
|
|
+ margin-top: 80px;
|
|
|
+ }
|
|
|
+ .txt {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 22px;
|
|
|
+ line-height: 26px;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+ color: #a8a8a8;
|
|
|
+ margin: 34px 44px 0 44px;
|
|
|
+ }
|
|
|
+ }
|
|
|
.success,
|
|
|
.close,
|
|
|
.luck-peopel-list {
|
|
|
@@ -357,9 +474,40 @@ body {
|
|
|
text-align: center;
|
|
|
height: 120px;
|
|
|
width: 100%;
|
|
|
- background: #ef4545;
|
|
|
+ background: #fff;
|
|
|
padding-top: 30px;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: relative;
|
|
|
+ .done {
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ top: 107px;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -150px;
|
|
|
+ width: 300px;
|
|
|
+ height: 60px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 100px;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
+ span {
|
|
|
+ color: #000000;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .icon-done {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ margin-left: 28px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .icon-right {
|
|
|
+ margin-left: 5px;
|
|
|
+ width: 7px;
|
|
|
+ height: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
.title {
|
|
|
color: #fff7e4;
|
|
|
opacity: 0.6;
|
|
|
@@ -370,9 +518,11 @@ body {
|
|
|
letter-spacing: -0.3px;
|
|
|
}
|
|
|
.money {
|
|
|
+ margin-top: 16px;
|
|
|
img {
|
|
|
width: 40px;
|
|
|
height: 40px;
|
|
|
+ margin-right: 9px;
|
|
|
}
|
|
|
.big {
|
|
|
font-weight: 700;
|
|
|
@@ -385,6 +535,8 @@ body {
|
|
|
color: #fff8e6;
|
|
|
}
|
|
|
.small {
|
|
|
+ margin-left: 4px;
|
|
|
+
|
|
|
font-weight: 700;
|
|
|
font-size: 13px;
|
|
|
line-height: 16px;
|
|
|
@@ -397,6 +549,7 @@ body {
|
|
|
}
|
|
|
}
|
|
|
.luck-list-title {
|
|
|
+ /* margin-top: 47px;*/
|
|
|
padding: 0 16px;
|
|
|
background: #fff;
|
|
|
color: #9b9b9b;
|
|
|
@@ -477,6 +630,11 @@ body {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .success{
|
|
|
+ .luck-list-title{
|
|
|
+ margin-top: 47px;
|
|
|
+ }
|
|
|
+ }
|
|
|
.opened {
|
|
|
filter: drop-shadow(0px 4px 94px rgba(0, 0, 0, 0.3));
|
|
|
width: 100%;
|
|
|
@@ -488,8 +646,9 @@ body {
|
|
|
text-align: center;
|
|
|
height: 120px;
|
|
|
width: 100%;
|
|
|
- background: #ef4545;
|
|
|
+ background: #fff;
|
|
|
padding-top: 30px;
|
|
|
+ background-size: 100% 100%;
|
|
|
.title {
|
|
|
color: #fff7e4;
|
|
|
opacity: 0.6;
|
|
|
@@ -500,7 +659,9 @@ body {
|
|
|
letter-spacing: -0.3px;
|
|
|
}
|
|
|
.money {
|
|
|
+ margin-top: 16px;
|
|
|
img {
|
|
|
+ margin-right: 9px;
|
|
|
width: 40px;
|
|
|
height: 40px;
|
|
|
}
|
|
|
@@ -515,6 +676,7 @@ body {
|
|
|
color: #fff8e6;
|
|
|
}
|
|
|
.small {
|
|
|
+ margin-left: 4px;
|
|
|
font-weight: 700;
|
|
|
font-size: 13px;
|
|
|
line-height: 16px;
|
|
|
@@ -542,13 +704,53 @@ body {
|
|
|
}
|
|
|
.item-content {
|
|
|
flex: 1;
|
|
|
-
|
|
|
+ .item-follow-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 11px;
|
|
|
+ position: relative;
|
|
|
+ .btn {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
.item-title {
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 10px;
|
|
|
font-weight: 500;
|
|
|
font-size: 16px;
|
|
|
letter-spacing: 0.3px;
|
|
|
color: #000000;
|
|
|
}
|
|
|
+ .item-follow-area {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 13px;
|
|
|
+ .item-follow {
|
|
|
+ cursor: pointer;
|
|
|
+ border: 1px solid #ebebeb;
|
|
|
+ border-radius: 1000px;
|
|
|
+ height: 28px;
|
|
|
+ margin-right: 5px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .finished {
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #949494;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ margin-left: 8px;
|
|
|
+ margin-right: 2px;
|
|
|
+ color: #389aff;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin-right: 7px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
span {
|
|
|
font-weight: 400;
|
|
|
font-size: 11px;
|
|
|
@@ -564,25 +766,22 @@ body {
|
|
|
width: 72px;
|
|
|
height: 29px;
|
|
|
line-height: 29px;
|
|
|
- background: #389aff;
|
|
|
+ background: rgba(56, 154, 255, 0.1);
|
|
|
border-radius: 500px;
|
|
|
text-align: center;
|
|
|
letter-spacing: 0.3px;
|
|
|
- color: #ffffff;
|
|
|
+ color: #389aff;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .item:last-child {
|
|
|
- border: 0;
|
|
|
- }
|
|
|
}
|
|
|
.people {
|
|
|
cursor: pointer;
|
|
|
padding-left: 16px;
|
|
|
height: 44px;
|
|
|
line-height: 44px;
|
|
|
- background: #faf9f8;
|
|
|
+ background: #fff;
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
box-shadow: 0px 1px 0px #f2f2f2;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -596,13 +795,24 @@ body {
|
|
|
opacity: 0.4;
|
|
|
}
|
|
|
.right {
|
|
|
+ flex: 1;
|
|
|
cursor: pointer;
|
|
|
margin-right: 22px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
img {
|
|
|
+ position: absolute;
|
|
|
width: 22px;
|
|
|
height: 22px;
|
|
|
+ border: 2px solid #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .road {
|
|
|
+ right: 0;
|
|
|
+ width: 7px;
|
|
|
+ height: 14px;
|
|
|
}
|
|
|
}
|
|
|
}
|
