de-net-official/pages/index.vue

<template>
	<div class="content" :style="{ 'backgroundImage': `url(${this.back_img})` }" v-show="home_show" v-if="detail">
		<div class="logo">
			<img src="/svg/icon-logo.svg" alt />
		</div>
		<!-- 红包 -->
		<div class="redPacket" :class="{ redPacket2: status != 'open', key_packet: status == 'open' }"
			v-show="status != 'error'">
			<div class="area" :class="{ key_area: status == 'open' }"
				v-show="status == 'open' || status == 'no-chrome'">
				<div class="title">
					<img :src="detail.postBizData.postUserInfo.avatarUrl" alt />
					<span>Giveaways from: {{ detail.postBizData.postUserInfo.nickName }}</span>
				</div>
				<div class="txt">Good Luck!</div>
			</div>

			<img src="/svg/back-top.svg" alt class="top" v-show="status == 'open' || status == 'no-chrome'"
				:class="{ key_top: status == 'open' }" />
			<img src="/svg/back-down.svg" alt class="down" v-show="status == 'open' || status == 'no-chrome'"
				:class="{ key_down: status == 'open' }" />
			<img src="/svg/icon-usd.svg" alt class="start" v-show="status == 'no-chrome'" />
			<img src="/git/icon-start.gif" alt class="start" v-show="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' || 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 {{ formatTime(detail.postBizData.endTimestamp,'MM-DD') }}</div>
				</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>
					<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>
			<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">{{ item.simpleUserInfoVO.nickName || 'Twitter User' }}</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 />
						<div class="luck-money-txt">{{ item.amountValue / 100 }}</div>
					</div>

					<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" 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">
					<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">
				<div class="line"></div>

				<div class="area_num">
					<div class="num">1</div>
					<span>Install DeNet</span>
				</div>
				<div class="tip">Used for Task Verification and Giveaways Withdrawal</div>
				<div class="install_btn">Install</div>
				<div class="area_num">
					<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 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
			</div>
		</div>
		<div v-if="status == 'error'"></div>
	</div>
</template>

<script>
import axios from 'axios';
import Cookies from 'js-cookie'
import { isBrowser } from '../utils/help.js'
var moment = require('moment');

const api = {
	prod: 'https://api.denet.net',
	pre: 'https://preapi.denet.net',
	test: 'https://testapi.denet.net',
}

const baseURL = api[process.env.MODE]

export default {
	name: "index",
	data() {
		return {
			appVersionCode: 1,
			mid: '',
			back_img: '/svg/back-denet.svg',
			area_show: true,
			home_show: false,
			validity: '',
			receiveAmount: 0,
			validity_state: true,
			detail: {
				postId: '',
				postBizData: {
					imagePath: '',
					postUserInfo: {
					}
				}
			},
			title: '',
			twitterTitle: 'deNet',
			jumpUrl: 'https://de-net-test.piaoquantv.com/',
			status: '',
			page_index: 1,
			page_size: 20,
			luck_list: [],
			luck_list_end: false
		}
	},

	head() {
		return {
			type: '',
			title: this.title,
			appVersionCode: 1,
			meta: [
				{
					name: 'twitter:card',
					content: 'summary_large_image'
				},
				{
					name: 'twitter:url',
					content: this.jumpUrl + this.detail.postId
				},
				{
					name: 'twitter:title',
					content: this.twitterTitle
				},
				{
					name: 'twitter:image',
					content: this.detail.postBizData.imagePath || ''
				},
				{
					name: 'twitter:image:width',
					content: '1280'
				},
				{
					name: 'twitter:image:height',
					content: '720'
				},
			]
		}
	},
	methods: {
		formatTime(time,_type = 'MM-DD hh:mm:ss') {
			return moment(time).format(_type)
		},
		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
			}
			if ((this.$refs.list.clientHeight + this.$refs.list.scrollTop) / this.$refs.list.scrollHeight > .8) {
				this.luck_list_end = false
				this.page_index++
				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() {
			let { data } = await axios.post(`${this.base_url}/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':
					if (data.data.newReceived) {
						this.status = 'open'
						this.receiveAmount = data.data.receiveAmount
					} else {
						this.status = 'opened'
					}
					this.getValidity(data.data.endTimestamp)
					this.receiveAmount = data.data.receiveAmount
					break;
				case '2003':
					this.status = 'expire'
					break
				// 红包被领完了
				case '2008':
					this.status = 'nothing'
					break
				case '2029':
					// 推文未发布
					this.status = 'error'
					break
				default:
					console.log('getRedPacket', data)
					this.home_show = false
					break;
			}
			// 领取列表分页
			this.getReceivedList()
		},
		async getReceivedList() {

			let { data } = await axios.post(`${this.base_url}/denet/post/luckdrop/getReceivedList`, {
				baseInfo: {
					appVersionCode: this.appVersionCode,
					mid: this.mid
				},
				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)
			}
		},
		getValidity(end_time) {

			let _d1, _d2, _d3, _h, _m, _s
			let timer = setInterval(() => {
				let _time = new Date().getTime()
				_d3 = end_time - _time
				if (_d3 > 0) {
					_d1 = moment(end_time)
					_d2 = moment(_time)
					_h = moment.duration(_d1.diff(_d2)).hours()
					_m = moment.duration(_d1.diff(_d2)).minutes()
					_s = moment.duration(_d1.diff(_d2)).seconds()
					this.validity = `${_h}:${_m}:${_s}`
				} else {
					clearInterval(timer)
				}
			}, 1000)
		},
		setPickupInfo() {
			let pickupInfo = {
				srcContentId: this.detail.srcContentId,
				postNickName: this.detail.postBizData.postUserInfo.nickName
			};
			Cookies.set('pickup_info', JSON.stringify(pickupInfo), { expires: 100 });
		}
	},

	async asyncData(params) {
		let { route } = params;
		let { data } = await axios.post(`${baseURL}/denet/post/getDetail`, {
			baseInfo: {
				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 || ''
			}
		})
		if (data.code == 0) {
			if (data.data && data.data.postBizData && typeof data.data.postBizData == 'string') {
				data.data.postBizData = JSON.parse(data.data.postBizData)
			}
		}
		return {
			base_url: baseURL,
			detail: data.data || {
				postId: '',
				postBizData: {
					imagePath: '',
					postUserInfo: {
					}
				}
			},
		}
	},

	mounted() {
		console.log('this.detail', this.detail)
		if (!this.detail.postId) {
			return
		}
		//改变font-size
		(function (doc, win) {
			var docEI = doc.documentElement,
				resizeEvt = 'orientationchange' in window ? 'orientataionchange' : 'resize',
				recalc = function () {
					var clientWidth = docEI.clientWidth;
					if (!clientWidth) return;
					//100是字体大小，1510是开发时浏览器窗口的宽度，等比计算
					docEI.style.fontSize = 10 * (clientWidth / 1510) + 'px';
				}

			if (!doc.addEventListener) return;
			win.addEventListener(resizeEvt, recalc, false);
			doc.addEventListener('DOMContentLoaded', recalc, false);
		})(document, window);

		if (isBrowser() == 'chrome') {
			// 领取任务红包
			this.setCookieMid()
			this.getRedPacket()
			this.setPickupInfo()
		} else {
			this.home_show = true
			this.status = 'no-chrome'
		}
	}
}
</script>

<style lang="scss" >
html,
body,
#__nuxt,
#__layout {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

.content {
	width: 100%;
	height: 100%;
	background-size: 100%;
	background-repeat: no-repeat;
	position: relative;
	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;
		flex-direction: column;
		position: absolute;
		top: 9rem;
		left: 50%;
		width: 37.5rem;
		margin-left: -18rem;
		height: 65rem;
		border-radius: 2rem;
		// background: red;
		overflow: hidden;
		box-shadow: 0 0 5px #888888;

		.start {
			position: absolute;
			width: 10rem;
			height: 10rem;
			bottom: 24rem;
			left: 50%;
			margin-left: -5rem;
			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: 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;
		}

		.head {
			.head-title {
				height: 9.7rem;
				line-height: 9.7rem;
				background: #ef4545;
				text-align: center;
				border-radius: 0 586px 586px/0 0 104px 104px;
				overflow: hidden;
				box-shadow: 0 0 5px #888888;

				img {
					width: 3rem;
					height: 3rem;
					border-radius: 50%;

					border: 2px solid #fff4db;
				}

				span {
					font-size: 1.4rem;
					color: #fff2d3;
				}
			}

			.head-txt {
				margin-top: 4.7rem;
				font-size: 2rem;
				text-align: center;
				color: #ef4545;
			}

			.head-area {
				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;
				}

				span {
					font-size: 1.3rem;
				}

				.money-txt {
					font-weight: 700;
					font-size: 4.8rem;
					color: #000000;
					letter-spacing: 0.3px;
				}
			}
		}

		.luck-list-title {
			padding: 0 16px;
			background: #fff;
			color: #9b9b9b;
			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;
						line-height: 14px;
						letter-spacing: 0.3px;
						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;
						line-height: 14px;

						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;
						/* identical to box height */

						text-align: right;
						letter-spacing: 0.3px;

						color: #444444;
					}
				}
			}
		}

		.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;
				letter-spacing: 0.03rem;
				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;
			background: rgba(166, 166, 166, 0.1);
			width: 40rem;
			height: 3.3rem;
			line-height: 3.3rem;

			span {
				color: #000000;
				font-size: 1.4rem;
			}
		}

		.flow {
			position: absolute;
			margin-top: 4.6rem;

			.line {
				position: absolute;
				height: 16rem;
				border: 1px solid #e0e0e0;
				top: 3rem;
				left: 1.2rem;
			}

			.area_num {
				display: flex;
				align-items: center;

				.num {
					width: 2.4rem;
					height: 2.4rem;
					background-color: rgba(56, 154, 255, 1);
					border-radius: 50%;
					color: #fff;
					text-align: center;
					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;
				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;
			}
		}

		.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;
	}

	100% {
		opacity: 1;
	}
}

@keyframes key_packet {
	0% {}

	100% {
		left: 30.6rem;
		margin-left: -18rem;
	}
}

@keyframes key_top {
	0% {
		top: 0;
	}

	50% {
		top: -30rem;
	}

	100% {
		top: -36rem;
	}
}

@keyframes key_down {
	0% {
		bottom: 0;
	}

	50% {
		bottom: -28.3rem;
	}

	100% {
		bottom: -32.3rem;
	}
}
</style>