[add][page]

package.json

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

pages/index.vue

@@ -1,11 +1,15 @@
 <template>
-	<div class="content" :style="{ 'backgroundImage': `url(${this.back_img})` }">
+	<div class="content" :style="{ 'backgroundImage': `url(${this.back_img})` }" v-show="home_show">
 		<div class="logo">
 			<img src="/svg/icon-logo.svg" alt />
 		</div>
 		<!-- 红包 -->
-		<div class="redPacket">
-			<div class="area" v-show="area_show">
+		<div class="redPacket" :class="{ redPacket2: status != 'open', key_packet: status == 'open' }">
+			<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>
@@ -13,22 +17,39 @@
 				<div class="txt">Good Luck!</div>
 			</div>
 
-			<img src="/svg/back-top.svg" alt class="top" />
-			<img src="/svg/back-down.svg" alt class="down" />
-			<img src="/svg/icon-usd.svg" alt class="start" v-show="area_show" />
+			<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'" />
+
 			<!-- 内容 -->
 			<div class="head">
 				<div class="head-title">
 					<img :src="detail.postBizData.postUserInfo.avatarUrl" alt />
 					<span>Giveaways from: {{ detail.postBizData.postUserInfo.nickName }}</span>
 				</div>
-				<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'">
+				<div class="head-txt" v-if="status == 'open' || status == 'opened'">Awesome! You Will Get</div>
+				<!-- <div class="head-area" v-else-if="status == 'opened'">opened!</div> -->
+				<div class="head-area" v-else-if="status == 'nothing'">Better luck next time!</div>
+				<div class="head-area" v-else-if="status == 'expire'">
+					<div>This Giveways</div>
+					<div>expired on 03-14</div>
+				</div>
+				<div class="head-money" v-if="status == 'open' || status == 'opened'">
 					<img src="/svg/icon-usd.svg" alt />
-					<span class="money-txt">1.753</span>
+					<span class="money-txt">{{receiveAmount/100}}</span>
 					<div>
 						<span>USD</span>
 					</div>
@@ -44,8 +65,8 @@
 					<img v-else src="/svg/icon-twitter.svg" alt />
 					<div class="luck-content">
 						<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 class="luck-time" v-if="item.receiveTimestamp == -1">刚刚</div>
+						<div class="luck-time">{{ formatTime(item.receiveTimestamp) }}</div>
 					</div>
 					<div class="luck-money">
 						<img src="/svg/icon-usd.svg" alt />
@@ -60,11 +81,20 @@
 			</div>
 		</div>
 		<!-- 安装 -->
-		<div class="install" v-show="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">
-				<span>Validity</span>
-				<span style="color: red;">23:57:32</span>
+				<template v-if="validity_state">
+					<span>Validity</span>
+					<span style="color: red;">{{ validity }}</span>
+				</template>
+				<template v-else>
+					<span style="color: red;">Giveaways Validity</span>
+				</template>
 			</div>
 
 			<div class="flow">
@@ -77,17 +107,22 @@
 				<div class="tip">Used for Task Verification and Giveaways Withdrawal</div>
 				<div class="install_btn">Install</div>
 				<div class="area_num">
-					<div class="num">2</div>
+					<div class="num" style="background: #E0E0E0;">2</div>
 					<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="install install-error" v-if="status == 'nothing' || status == 'expire'">
+			<div class="title">Install DeNet</div>
+			<div class="title">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>
+		<div class="install install-error" v-if="status == 'no-chrome'">
+			<div class="title">Open Giveaways</div>
+			<div class="title">with chrome</div>
+			<div class="tip">Only supports getting Giveaways through chrome</div>
 			<div class="install_chrome">
 				<img src="/svg/icon-chrome.svg" alt />
 				Install Chrome
@@ -99,6 +134,10 @@
 <script>
 import axios from 'axios';
 import Cookies from 'js-cookie'
+import { kill } from 'process';
+import { isBrowser } from '../utils/help.js'
+var moment = require('moment');
+
 
 export default {
 	name: "index",
@@ -106,6 +145,10 @@ export default {
 		return {
 			back_img: '/svg/back-denet.svg',
 			area_show: true,
+			home_show: false,
+			validity: '',
+			receiveAmount:0,
+			validity_state: true,
 			detail: {
 				postId: '',
 				postBizData: {
@@ -120,7 +163,7 @@ export default {
 			page_size: 20,
 			luck_list: [],
 			luck_list_end: false,
-			received_log: []
+			received_log: [],
 		}
 	},
 
@@ -157,6 +200,9 @@ export default {
 		}
 	},
 	methods: {
+		formatTime(time) {
+			return moment(time).format('MM-DD hh:mm:ss')
+		},
 		handleScroll(e) {
 			if (this.luck_list_end) {
 				return
@@ -172,10 +218,11 @@ export default {
 			// 判断领取过
 			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) {
+				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
@@ -192,10 +239,13 @@ export default {
 			})
 			switch (data.code.toString()) {
 				case '0':
+					this.status = 'open'
 					let _obj = {
 						postId: this.detail.postId,
-						receivedId: data.data.receivedId
+						receivedId: data.data.receivedId,
+						receiveAmount:data.data.receiveAmount
 					}
+					this.receiveAmount = data.data.receiveAmount
 					this.received_log.push(_obj)
 					Cookies.set('received_log', JSON.stringify(this.received_log), { expires: 100 });
 					break;
@@ -233,6 +283,17 @@ export default {
 				console.log('getReceivedList', data)
 			}
 		},
+		getValidity() {
+			let timer = setInterval(() => {
+				let _time = new Date().getTime()
+				if (this.detail.postBizData.endTimestamp - _time > 0) {
+					this.validity = moment(this.detail.postBizData.endTimestamp - _time).format('HH:mm:ss')
+				} else {
+					this.validity_state = false
+					clearInterval(timer)
+				}
+			}, 1000)
+		}
 	},
 	async asyncData(params) {
 		let { route } = params;
@@ -248,7 +309,6 @@ export default {
 			if (data.data && data.data.postBizData && typeof data.data.postBizData == 'string') {
 				data.data.postBizData = JSON.parse(data.data.postBizData)
 			}
-
 			return {
 				detail: data.data,
 			}
@@ -271,13 +331,16 @@ export default {
 			win.addEventListener(resizeEvt, recalc, false);
 			doc.addEventListener('DOMContentLoaded', recalc, false);
 		})(document, window);
-		setTimeout(() => {
-			this.area_show = false
-		}, 1000)
-		// 领取任务红包
-		this.getRedPacket()
-	}
+		this.home_show = true
 
+		if (isBrowser() == 'chrome') {
+			// 领取任务红包
+			this.getRedPacket()
+			this.getValidity()
+		} else {
+			this.status = 'no-chrome'
+		}
+	}
 }
 </script>
 
@@ -309,6 +372,11 @@ body,
 			height: 40px;
 		}
 	}
+	.key_packet {
+		animation: key_packet 3s;
+		animation-delay: 6s;
+		animation-fill-mode: forwards;
+	}
 	.redPacket {
 		display: flex;
 		justify-content: flex-start;
@@ -322,9 +390,6 @@ body,
 		border-radius: 2rem;
 		// background: red;
 		overflow: hidden;
-		animation: key_packet 3s;
-		animation-delay: 6s;
-		animation-fill-mode: forwards;
 		box-shadow: 0 0 5px #888888;
 		.start {
 			position: absolute;
@@ -333,21 +398,27 @@ body,
 			bottom: 24rem;
 			left: 50%;
 			margin-left: -5rem;
-			z-index: 3;
+			z-index: 13;
+		}
+		.key_top {
+			animation: key_top 4s;
+			animation-delay: 2s;
+			animation-fill-mode: forwards;
 		}
 		.top {
 			top: 0;
 			position: absolute;
 			width: 100%;
-			z-index: 1;
-			animation: key_top 4s;
-			animation-delay: 2s;
-			animation-fill-mode: forwards;
+			z-index: 12;
 		}
+
 		.down {
 			bottom: 0;
 			position: absolute;
 			height: 32.3rem;
+			z-index: 11;
+		}
+		.key_down {
 			animation: key_down 4s;
 			animation-delay: 2s;
 			animation-fill-mode: forwards;
@@ -381,10 +452,20 @@ body,
 				text-align: center;
 				color: #ef4545;
 			}
+			.head-area {
+				height: 10rem;
+				line-height: 10rem;
+				text-align: center;
+				letter-spacing: 0.3px;
+				font-size: 2rem;
+				text-align: center;
+				color: #ef4545;
+			}
 			.head-money {
 				display: flex;
 				align-items: center;
 				justify-content: center;
+				margin-bottom: 3.2rem;
 				img {
 					width: 4rem;
 					height: 4rem;
@@ -484,16 +565,17 @@ body,
 		}
 		.area {
 			position: absolute;
-			z-index: 2;
+			z-index: 112;
 			width: 100%;
 			.title {
 				z-index: 11;
 				margin-top: 8.5rem;
 				text-align: center;
 				img {
-					width: 3rem;
-					height: 3rem;
+					width: 3.6rem;
+					height: 3.6rem;
 					border: 2px solid #fff4db;
+					border-radius: 50%;
 				}
 				span {
 					letter-spacing: 0.3px;
@@ -508,21 +590,33 @@ body,
 				color: #fff2d3;
 			}
 		}
+		.key_area {
+			animation: key_area 1s;
+			animation-delay: 1s;
+			animation-fill-mode: forwards;
+		}
 	}
-	.install {
-		position: absolute;
-		top: 20rem;
-		right: 28.5rem;
+	.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;
 			background: rgba(166, 166, 166, 0.1);
 			width: 40rem;
@@ -580,13 +674,64 @@ body,
 				color: #fff;
 				line-height: 5.8rem;
 				text-align: center;
+				font-size: 2rem;
+			}
+		}
+		.tip {
+			margin-top: 0.7rem;
+			font-size: 1.4rem;
+			color: #a4a4a4;
+		}
+		.install_btn {
+			margin-top: 2rem;
+			margin-bottom: 6.7rem;
+			width: 23rem;
+			height: 5.8rem;
+			background: #389aff;
+			border-radius: 10rem;
+			color: #fff;
+			line-height: 5.8rem;
+			text-align: center;
+			font-size: 2rem;
+		}
+	}
+	.install-error {
+		left: 78.5rem;
+		.install_chrome {
+			cursor: pointer;
+			width: 24.3rem;
+			height: 5.8rem;
+			font-size: 2rem;
+			font-weight: 500;
+			letter-spacing: 0.3px;
+			display: flex;
+			align-items: center;
+			border: 1px solid #e8e8e8;
+			border-radius: 10rem;
+			margin-top: 3.3rem;
+
+			img {
+				width: 3.2rem;
+				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.1;
+		opacity: 0;
 	}
 	100% {
 		opacity: 1;

utils/help.js

@@ -0,0 +1,49 @@
+//application/vnd.chromium.remoting-viewer 可能为360特有 通过_mine判断是否是360
+export function isBrowser() {
+    var agent = navigator.userAgent.toLowerCase()
+    console.log(agent)
+    System = function () {
+        if (agent.indexOf('qqbrowser') > 0) {//判断是qq浏览器还是其它浏览器
+            return "qq浏览器"
+        }
+        if (agent.indexOf("se 2.x") > 0) {
+            return "搜狗浏览器"
+        }
+
+        var is360 = _mime("type", "application/vnd.chromium.remoting-viewer");
+
+        if (is360) {
+            return "360浏览器"
+        }
+
+        //检测是否是谷歌内核(可排除360及谷歌以外的浏览器)
+        //测试mime
+        function _mime(option, value) {
+            var mimeTypes = navigator.mimeTypes;
+            console.log(mimeTypes)
+            for (var mt in mimeTypes) {
+                if (mimeTypes[mt][option] == value) {
+                    return true;
+                }
+            }
+            return false;
+        }
+        if (agent.indexOf("chrome") > 0) {
+            return 'chrome'
+        }
+
+    }
+    let s = System()
+    if(s){
+        return s
+    }
+    if (agent.indexOf('firefox') > 0) {
+        return "firefox浏览器"
+    }
+    if (agent.indexOf('trident') > 0) {
+        return "IE浏览器"
+    }
+    if (agent.indexOf("safari") > 0 && agent.indexOf("chrome") < 0) {
+        return 'Safari'
+    }
+}