[add][page]

package.json

@@ -21,6 +21,7 @@
     "bootstrap": "^4.6.1",
     "bootstrap-vue": "^2.21.2",
     "core-js": "^3.19.3",
+    "js-cookie": "^3.0.1",
     "nuxt": "^2.15.8",
     "pm2": "^5.2.0",
     "vue": "^2.6.14",

pages/index.vue

@@ -7,8 +7,8 @@
 		<div class="redPacket">
 			<div class="area" v-show="area_show">
 				<div class="title">
-					<img src="/svg/icon-logo.svg" alt />
-					<span>Giveaways from: Elon Musk</span>
+					<img :src="detail.postBizData.postUserInfo.avatarUrl" alt />
+					<span>Giveaways from: {{ detail.postBizData.postUserInfo.nickName }}</span>
 				</div>
 				<div class="txt">Good Luck!</div>
 			</div>
@@ -19,11 +19,14 @@
 			<!-- 内容 -->
 			<div class="head">
 				<div class="head-title">
-					<img src="/svg/icon-logo.svg" alt />
-					<span>Giveaways from: Elon Musk</span>
+					<img :src="detail.postBizData.postUserInfo.avatarUrl" alt />
+					<span>Giveaways from: {{ detail.postBizData.postUserInfo.nickName }}</span>
 				</div>
-				<div class="head-txt">Awesome! You Will Get</div>
-				<div class="head-money">
+				<div class="head-txt" v-if="status == 'open'">Awesome! You Will Get</div>
+				<div class="head-txt" v-else-if="status == 'nothing'">Better luck next time!</div>
+				<div class="head-txt" v-else-if="status == 'opened'">领取过了!</div>
+				<div class="head-txt" v-else-if="status == 'expire'">This Giveways expired on 03-14</div>
+				<div class="head-money" v-if="status == 'open'">
 					<img src="/svg/icon-usd.svg" alt />
 					<span class="money-txt">1.753</span>
 					<div>
@@ -32,29 +35,32 @@
 				</div>
 			</div>
 			<div class="luck-list-title">
-				<div>0/0 People Got</div>
-				<div>Total $1 isd</div>
+				<div>{{ detail.postBizData.receiveCount || 0 }}/{{ detail.postBizData.totalCount || 0 }} People Got</div>
+				<div>Total ${{ detail.postBizData.amountValue / 100 || '' }} {{ detail.postBizData.amountCurrencyCode || '' }}</div>
 			</div>
-			<div class="luck-list">
-				<div class="luck-item">
-					<img alt />
+			<div class="luck-list" @scroll="handleScroll" ref="list">
+				<div class="luck-item" v-for="item, i in luck_list" v-bind:key="i">
+					<img v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt />
+					<img v-else src="/svg/icon-twitter.svg" alt />
 					<div class="luck-content">
-						<div class="luck-title">123</div>
-						<div class="luck-time">123</div>
+						<div class="luck-title">{{ item.simpleUserInfoVO.nickName || 'Twitter User' }}</div>
+						<div class="luck-time" v-if="item.finishTimestamp == -1">刚刚</div>
+						<div class="luck-time" v-else>{{ item.finishTimestamp }}</div>
 					</div>
 					<div class="luck-money">
-						<img src="/svg/icon-logo.svg" alt />
-						<div class="luck-money-txt">123</div>
+						<img src="/svg/icon-usd.svg" alt />
+						<div class="luck-money-txt">{{ item.amountValue / 100 }}</div>
 					</div>
-					<div class="luck-king">
-						<img src="/svg/icon-logo.svg" alt />
+
+					<div class="luck-king" v-if="item.maxAmount">
+						<img src="/svg/icon-king-hat.svg" alt />
 						<span>Luckiest Draw</span>
 					</div>
 				</div>
 			</div>
 		</div>
 		<!-- 安装 -->
-		<div class="install">
+		<div class="install" v-show="status == 'open'">
 			<div class="title">Withdraw to Wallet</div>
 			<div class="validity">
 				<span>Validity</span>
@@ -72,16 +78,27 @@
 				<div class="install_btn">Install</div>
 				<div class="area_num">
 					<div class="num">2</div>
-					<span>Complete Tasks by Elon Musk</span>
+					<span>Complete Tasks by {{ detail.postBizData.postUserInfo.nickName }}</span>
 				</div>
 				<div class="tip">Follow、Like tweet、Retweet (Just 1-3 minutes)</div>
 			</div>
 		</div>
+		<div class="install no-chrome" v-show="status == 'opened'">
+			<div>Install DeNet</div>
+			<div>Don't miss the next Giveaway</div>
+			<div class="tip">Used for Task Verification and Giveaways Withdrawal</div>
+			<div class="install_btn">Install</div>
+			<div class="install_chrome">
+				<img src="/svg/icon-chrome.svg" alt />
+				Install Chrome
+			</div>
+		</div>
 	</div>
 </template>
 
 <script>
 import axios from 'axios';
+import Cookies from 'js-cookie'
 
 export default {
 	name: "index",
@@ -97,7 +114,13 @@ export default {
 			},
 			title: '',
 			twitterTitle: 'deNet',
-			jumpUrl: 'https://de-net-test.piaoquantv.com/'
+			jumpUrl: 'https://de-net-test.piaoquantv.com/',
+			status: '',
+			page_index: 1,
+			page_size: 20,
+			luck_list: [],
+			luck_list_end: false,
+			received_log: []
 		}
 	},
 
@@ -133,6 +156,84 @@ export default {
 			]
 		}
 	},
+	methods: {
+		handleScroll(e) {
+			if (this.luck_list_end) {
+				return
+			}
+			if ((this.$refs.list.clientHeight + this.$refs.list.scrollTop) / this.$refs.list.scrollHeight > .8) {
+				this.luck_list_end = false
+				this.page_index++
+				this.getReceivedList()
+			}
+		},
+		async getRedPacket() {
+			this.received_log = Cookies.get('received_log') || []
+			// 判断领取过
+			if (this.received_log.length > 0) {
+				this.received_log = JSON.parse(this.received_log)
+				let _len = this.received_log.filter((item) => { return item.postId == this.detail.postId }).length
+				if (_len) {
+					// 领取过了
+					this.status = 'opened'
+					// 领取列表分页
+					this.getReceivedList()
+					return
+				}
+			}
+
+			// return
+			let { data } = await axios.post('https://denettestapi.piaoquantv.com/denet/post/luckdrop/receiveLuckdrop', {
+				baseInfo: {
+				},
+				params: {
+					postId: this.detail.postId || ''
+				}
+			})
+			switch (data.code.toString()) {
+				case '0':
+					let _obj = {
+						postId: this.detail.postId,
+						receivedId: data.data.receivedId
+					}
+					this.received_log.push(_obj)
+					Cookies.set('received_log', JSON.stringify(this.received_log), { expires: 100 });
+					break;
+				// 红包被领完了
+				case '2008':
+					this.status = 'nothing'
+					break
+				case '2029':
+					// 推文未发布
+					break
+				default:
+					console.log('getRedPacket', data)
+					break;
+			}
+			// 领取列表分页
+			this.getReceivedList()
+		},
+		async getReceivedList() {
+
+			let { data } = await axios.post('https://denettestapi.piaoquantv.com/denet/post/luckdrop/getReceivedList', {
+				params: {
+					pageNum: this.page_index,
+					pageSize: this.page_size,
+					postId: this.detail.postId || ''
+				}
+			})
+			if (data.code == 0) {
+				if (data.data.length > 0) {
+					this.luck_list = this.luck_list.concat(data.data)
+					this.luck_list_end = false
+				} else {
+					this.luck_list_end = true
+				}
+			} else {
+				console.log('getReceivedList', data)
+			}
+		},
+	},
 	async asyncData(params) {
 		let { route } = params;
 		let { data } = await axios.post('https://denettestapi.piaoquantv.com/denet/post/getDetail', {
@@ -153,6 +254,7 @@ export default {
 			}
 		}
 	},
+
 	mounted() {
 		//改变font-size
 		(function (doc, win) {
@@ -172,7 +274,10 @@ export default {
 		setTimeout(() => {
 			this.area_show = false
 		}, 1000)
+		// 领取任务红包
+		this.getRedPacket()
 	}
+
 }
 </script>
 
@@ -205,6 +310,9 @@ body,
 		}
 	}
 	.redPacket {
+		display: flex;
+		justify-content: flex-start;
+		flex-direction: column;
 		position: absolute;
 		top: 9rem;
 		left: 50%;
@@ -301,6 +409,8 @@ body,
 		}
 		.luck-list {
 			background: #fff;
+			flex: 1;
+			overflow: scroll;
 			.luck-item {
 				display: flex;
 				padding: 12px 16px;