[edit][bugs]

pages/index.vue

@@ -4,12 +4,9 @@
 			<img src="/svg/icon-logo.svg" alt />
 		</div>
 		<!-- 红包 -->
-		<div class="redPacket" :class="{ redPacket2: status != 'open', key_packet: status == 'open' }" v-if="status != 'error'">
-			<div
-				class="area"
-				:class="{ key_area: status == 'open' }"
-				v-if="status == 'open' || status == 'no-chrome'"
-			>
+		<div class="redPacket" :class="{ redPacket2: status != 'open', key_packet: status == 'open' }"
+			v-if="status != 'error'">
+			<div class="area" :class="{ key_area: status == 'open' }" v-if="status == 'open' || status == 'no-chrome'">
 				<div class="title">
 					<img :src="detail.postBizData.postUserInfo.avatarUrl" alt />
 					<span>Giveaways from: {{ detail.postBizData.postUserInfo.nickName }}</span>
@@ -17,20 +14,10 @@
 				<div class="txt">Good Luck!</div>
 			</div>
 
-			<img
-				src="/svg/back-top.svg"
-				alt
-				class="top"
-				v-if="status == 'open' || status == 'no-chrome'"
-				:class="{ key_top: status == 'open' }"
-			/>
-			<img
-				src="/svg/back-down.svg"
-				alt
-				class="down"
-				v-if="status == 'open' || status == 'no-chrome'"
-				:class="{ key_down: status == 'open' }"
-			/>
+			<img src="/svg/back-top.svg" alt class="top" v-if="status == 'open' || status == 'no-chrome'"
+				:class="{ key_top: status == 'open' }" />
+			<img src="/svg/back-down.svg" alt class="down" v-if="status == 'open' || status == 'no-chrome'"
+				:class="{ key_down: status == 'open' }" />
 			<img src="/svg/icon-usd.svg" alt class="start" v-if="status == 'no-chrome'" />
 			<img src="/git/icon-start.gif" alt class="start" v-if="status == 'open'" />
 
@@ -49,15 +36,19 @@
 				</div>
 				<div class="head-money" v-if="status == 'open' || status == 'opened'">
 					<img src="/svg/icon-usd.svg" alt />
-					<span class="money-txt">{{receiveAmount/100}}</span>
+					<span class="money-txt">{{ receiveAmount / 100 }}</span>
 					<div>
 						<span>USD</span>
 					</div>
 				</div>
 			</div>
 			<div class="luck-list-title">
-				<div>{{ detail.postBizData.receiveCount || 0 }}/{{ detail.postBizData.totalCount || 0 }} People Got</div>
-				<div>Total ${{ detail.postBizData.amountValue / 100 || '' }} {{ detail.postBizData.amountCurrencyCode || '' }}</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" @scroll="handleScroll" ref="list">
 				<div class="luck-item" v-for="item, i in luck_list" v-bind:key="i">
@@ -81,11 +72,7 @@
 			</div>
 		</div>
 		<!-- 安装 -->
-		<div
-			class="install"
-			v-if="status == 'open' || status == 'opened'"
-			:class="{ key_install: status == 'open' }"
-		>
+		<div class="install" v-if="status == 'open' || status == 'opened'" :class="{ key_install: status == 'open' }">
 			<div class="title">Withdraw to Wallet</div>
 			<div class="validity">
 				<template v-if="validity_state">
@@ -135,7 +122,6 @@
 <script>
 import axios from 'axios';
 import Cookies from 'js-cookie'
-import { kill } from 'process';
 import { isBrowser } from '../utils/help.js'
 var moment = require('moment');
 
@@ -144,11 +130,13 @@ export default {
 	name: "index",
 	data() {
 		return {
+			appVersionCode: 1,
+			mid: '',
 			back_img: '/svg/back-denet.svg',
 			area_show: true,
 			home_show: false,
 			validity: '',
-			receiveAmount:0,
+			receiveAmount: 0,
 			validity_state: true,
 			detail: {
 				postId: '',
@@ -174,6 +162,7 @@ export default {
 		return {
 			type: '',
 			title: this.title,
+			appVersionCode: 1,
 			meta: [
 				{
 					name: 'twitter:card',
@@ -206,6 +195,12 @@ export default {
 		formatTime(time) {
 			return moment(time).format('MM-DD hh:mm:ss')
 		},
+		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);
+			});
+		},
 		handleScroll(e) {
 			if (this.luck_list_end) {
 				return
@@ -216,43 +211,44 @@ export default {
 				this.getReceivedList()
 			}
 		},
+		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 })
+			}
+		},
 		async getRedPacket() {
 			this.received_log = Cookies.get('received_log') || []
-			// 判断领取过
-			if (this.received_log.length > 0) {
-				this.received_log = JSON.parse(this.received_log)
-				let _item = this.received_log.filter((item) => { return item.postId == this.detail.postId })
-				if (_item.length>0) {
-					// 领取过了
-					this.status = 'opened'
-					this.receiveAmount = _item[0].receiveAmount
-					// 领取列表分页
-					this.getReceivedList()
-					return
-				}
-			}
-
-			// return
 			let { data } = await axios.post('https://denettestapi.piaoquantv.com/denet/post/luckdrop/receiveLuckdrop', {
 				baseInfo: {
+					appVersionCode: this.appVersionCode,
+					mid: this.mid
 				},
 				params: {
 					postId: this.detail.postId || ''
 				}
 			})
+			this.home_show = true
 			switch (data.code.toString()) {
 				case '0':
-					this.status = 'open'
-					let _obj = {
-						postId: this.detail.postId,
-						receivedId: data.data.receivedId,
-						receiveAmount:data.data.receiveAmount,
-						srcContentId: this.detail.srcContentId,
-						postNickName: this.detail.postBizData.postUserInfo.nickName
+					if (data.data.newReceived) {
+						this.status = 'open'
+						let _obj = {
+							postId: this.detail.postId,
+							receivedId: data.data.receivedId,
+							receiveAmount: data.data.receiveAmount,
+							srcContentId: this.detail.srcContentId,
+							postNickName: this.detail.postBizData.postUserInfo.nickName
+						}
+						this.receiveAmount = data.data.receiveAmount
+						this.received_log.push(_obj)
+						Cookies.set('received_log', JSON.stringify(this.received_log), { expires: 1000 });
+					} else {
+						this.status = 'opened'
 					}
-					this.receiveAmount = data.data.receiveAmount
-					this.received_log.push(_obj)
-					Cookies.set('received_log', JSON.stringify(this.received_log), { expires: 100 });
 					break;
 				// 红包被领完了
 				case '2008':
@@ -272,6 +268,10 @@ export default {
 		async getReceivedList() {
 
 			let { data } = await axios.post('https://denettestapi.piaoquantv.com/denet/post/luckdrop/getReceivedList', {
+				baseInfo: {
+					appVersionCode: this.appVersionCode,
+					mid: this.mid
+				},
 				params: {
 					pageNum: this.page_index,
 					pageSize: this.page_size,
@@ -301,11 +301,17 @@ export default {
 			}, 1000)
 		}
 	},
+
 	async asyncData(params) {
 		let { route } = params;
 		let { data } = await axios.post('https://denettestapi.piaoquantv.com/denet/post/getDetail', {
 			baseInfo: {
-				token: ''
+				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 || ''
@@ -337,13 +343,14 @@ export default {
 			win.addEventListener(resizeEvt, recalc, false);
 			doc.addEventListener('DOMContentLoaded', recalc, false);
 		})(document, window);
-		this.home_show = true
 
 		if (isBrowser() == 'chrome') {
 			// 领取任务红包
+			this.setCookieMid()
 			this.getRedPacket()
 			this.getValidity()
 		} else {
+			this.home_show = true
 			this.status = 'no-chrome'
 		}
 	}
@@ -360,6 +367,7 @@ body,
 	padding: 0;
 	margin: 0;
 }
+
 .content {
 	width: 100%;
 	height: 100%;
@@ -369,20 +377,24 @@ body,
 	font-family: "SF Pro Display";
 	font-style: normal;
 	font-weight: 600;
+
 	.logo {
 		position: absolute;
 		left: 4rem;
 		top: 1.5rem;
+
 		img {
 			width: 107px;
 			height: 40px;
 		}
 	}
+
 	.key_packet {
 		animation: key_packet 3s;
 		animation-delay: 6s;
 		animation-fill-mode: forwards;
 	}
+
 	.redPacket {
 		display: flex;
 		justify-content: flex-start;
@@ -397,6 +409,7 @@ body,
 		// background: red;
 		overflow: hidden;
 		box-shadow: 0 0 5px #888888;
+
 		.start {
 			position: absolute;
 			width: 10rem;
@@ -406,11 +419,13 @@ body,
 			margin-left: -5rem;
 			z-index: 13;
 		}
+
 		.key_top {
 			animation: key_top 4s;
 			animation-delay: 2s;
 			animation-fill-mode: forwards;
 		}
+
 		.top {
 			top: 0;
 			position: absolute;
@@ -424,11 +439,13 @@ body,
 			height: 32.3rem;
 			z-index: 11;
 		}
+
 		.key_down {
 			animation: key_down 4s;
 			animation-delay: 2s;
 			animation-fill-mode: forwards;
 		}
+
 		.head {
 			.head-title {
 				height: 9.7rem;
@@ -446,6 +463,7 @@ body,
 
 					border: 2px solid #fff4db;
 				}
+
 				span {
 					font-size: 1.4rem;
 					color: #fff2d3;
@@ -458,6 +476,7 @@ body,
 				text-align: center;
 				color: #ef4545;
 			}
+
 			.head-area {
 				height: 10rem;
 				line-height: 10rem;
@@ -467,18 +486,22 @@ body,
 				text-align: center;
 				color: #ef4545;
 			}
+
 			.head-money {
 				display: flex;
 				align-items: center;
 				justify-content: center;
 				margin-bottom: 3.2rem;
+
 				img {
 					width: 4rem;
 					height: 4rem;
 				}
+
 				span {
 					font-size: 1.3rem;
 				}
+
 				.money-txt {
 					font-weight: 700;
 					font-size: 4.8rem;
@@ -487,6 +510,7 @@ body,
 				}
 			}
 		}
+
 		.luck-list-title {
 			padding: 0 16px;
 			background: #fff;
@@ -494,30 +518,36 @@ body,
 			display: flex;
 			justify-content: space-between;
 		}
+
 		.luck-list {
 			background: #fff;
 			flex: 1;
 			overflow: scroll;
+
 			.luck-item {
 				display: flex;
 				padding: 12px 16px;
 				border-top: 1px solid #d1d1d1;
 				justify-content: space-between;
 				position: relative;
+
 				img:first-child {
 					border-radius: 50%;
 				}
+
 				.luck-king {
 					position: absolute;
 					top: 36px;
 					right: 16px;
 					display: flex;
 					align-items: center;
+
 					img {
 						width: 22px;
 						height: 19px;
 						margin: 0;
 					}
+
 					span {
 						font-weight: 500;
 						font-size: 12px;
@@ -526,19 +556,23 @@ body,
 						color: #f5b945;
 					}
 				}
+
 				img {
 					width: 42px;
 					height: 42px;
 					margin-right: 12px;
 				}
+
 				.luck-content {
 					flex: auto;
+
 					.luck-title {
 						font-weight: 500;
 						font-size: 16px;
 						letter-spacing: 0.3px;
 						color: #444444;
 					}
+
 					.luck-time {
 						font-weight: 400;
 						font-size: 12px;
@@ -547,15 +581,18 @@ body,
 						color: #9b9b9b;
 					}
 				}
+
 				.luck-money {
 					display: flex;
 					height: 17px;
 					align-items: center;
+
 					img {
 						width: 14px;
 						height: 14px;
 						margin-right: 6px;
 					}
+
 					.luck-money-txt {
 						font-weight: 500;
 						font-size: 14px;
@@ -569,26 +606,31 @@ body,
 				}
 			}
 		}
+
 		.area {
 			position: absolute;
 			z-index: 112;
 			width: 100%;
+
 			.title {
 				z-index: 11;
 				margin-top: 8.5rem;
 				text-align: center;
+
 				img {
 					width: 3.6rem;
 					height: 3.6rem;
 					border: 2px solid #fff4db;
 					border-radius: 50%;
 				}
+
 				span {
 					letter-spacing: 0.3px;
 					font-size: 1.6rem;
 					color: #fff2d3;
 				}
 			}
+
 			.txt {
 				font-size: 4rem;
 				text-align: center;
@@ -596,31 +638,37 @@ body,
 				color: #fff2d3;
 			}
 		}
+
 		.key_area {
 			animation: key_area 1s;
 			animation-delay: 1s;
 			animation-fill-mode: forwards;
 		}
 	}
+
 	.redPacket2 {
 		left: 30.6rem;
 		margin-left: -18rem;
 	}
+
 	.key_install {
 		opacity: 0;
 		animation: key_install 2s;
 		animation-delay: 6s;
 		animation-fill-mode: forwards;
 	}
+
 	.install {
 		position: absolute;
 		top: 20rem;
 		left: 78.5rem;
+
 		.title {
 			font-size: 4.8rem;
 			color: #000000;
 			letter-spacing: 0.3px;
 		}
+
 		.validity {
 			padding-left: 1.5rem;
 			margin-top: 2rem;
@@ -634,9 +682,11 @@ body,
 				font-size: 1.4rem;
 			}
 		}
+
 		.flow {
 			position: absolute;
 			margin-top: 4.6rem;
+
 			.line {
 				position: absolute;
 				height: 16rem;
@@ -644,9 +694,11 @@ body,
 				top: 3rem;
 				left: 1.2rem;
 			}
+
 			.area_num {
 				display: flex;
 				align-items: center;
+
 				.num {
 					width: 2.4rem;
 					height: 2.4rem;
@@ -657,18 +709,21 @@ body,
 					line-height: 2.4rem;
 					font-size: 1.4rem;
 				}
+
 				span {
 					margin-left: 1.5rem;
 					color: #000000;
 					font-size: 1.8rem;
 				}
 			}
+
 			.tip {
 				margin-left: 4rem;
 				margin-top: 0.7rem;
 				font-size: 1.4rem;
 				color: #a4a4a4;
 			}
+
 			.install_btn {
 				margin-left: 4rem;
 				margin-top: 2rem;
@@ -683,11 +738,13 @@ body,
 				font-size: 2rem;
 			}
 		}
+
 		.tip {
 			margin-top: 0.7rem;
 			font-size: 1.4rem;
 			color: #a4a4a4;
 		}
+
 		.install_btn {
 			margin-top: 2rem;
 			margin-bottom: 6.7rem;
@@ -701,8 +758,10 @@ body,
 			font-size: 2rem;
 		}
 	}
+
 	.install-error {
 		left: 78.5rem;
+
 		.install_chrome {
 			cursor: pointer;
 			width: 24.3rem;
@@ -721,43 +780,52 @@ body,
 				height: 3.2rem;
 				margin-left: 3.3rem;
 			}
+
 			span {
 				margin-left: 1.2rem;
 			}
 		}
 	}
 }
+
 @keyframes key_area {
 	0% {
 		opacity: 1;
 	}
+
 	100% {
 		opacity: 0;
 	}
 }
+
 @keyframes key_install {
 	0% {
 		opacity: 0;
 	}
+
 	100% {
 		opacity: 1;
 	}
 }
+
 @keyframes key_packet {
-	0% {
-	}
+	0% {}
+
 	100% {
 		left: 30.6rem;
 		margin-left: -18rem;
 	}
 }
+
 @keyframes key_top {
 	0% {
 		top: 0;
 	}
+
 	50% {
 		top: -30rem;
 	}
+
 	100% {
 		top: -36rem;
 	}
@@ -767,9 +835,11 @@ body,
 	0% {
 		bottom: 0;
 	}
+
 	50% {
 		bottom: -28.3rem;
 	}
+
 	100% {
 		bottom: -32.3rem;
 	}