de-net-official/pages/luckdraw.vue

<!-- 红包玩法落地页 -->
<template>
	<div class="content">
		<template v-if="isLoading">
			<img class="loading" src="../static/svg/icon-loading.svg" />
		</template>
		<template v-else>
			<template v-if="isMobile">
				<!-- 手机端 -->
				<div class="small" :class="{
					bg: status === 'not-open',
					custom: detail.postBizData.posterType === 2 && detail.postBizData.customPosterInstalled,
				}">
					<template v-if="status === 'not-open'">
						<template
							v-if="detail.postBizData.posterType === 2 && detail.postBizData.customPosterInstalled">
							<img class="customImg" :src="detail.postBizData.customPosterInstalled" />
						</template>
						<template v-else>
							<template v-if="isMoneyPrize">
								<img class="lottery" :src="require('../static/svg/icon-luck-mark.svg')" />
								<div class="head">
									<img :src="detail.postBizData.postUserInfo.avatarUrl" />
									<span>{{ detail.postBizData.postUserInfo.nickName }}</span>
								</div>
								<div class="price">
									<div class="usdt">
										<span>
											{{ detail.postBizData.amountCurrencyCode == 'USD' ? 'US Dollar' :
													detail.postBizData.tokenSymbol
											}}
										</span>
										&nbsp;GIVEAWAY
									</div>
									<div class="money">
										<img :src="detail.postBizData.currencyIconPath" />
										<font-amount :fontSize="60" :amount="detail.postBizData.amountValue">
										</font-amount>
									</div>
								</div>
								<div class="time">
									<img class="img" :src="require('../static/svg/icon-time.svg')" />
									{{ validity || '00:00:00' }}
								</div>
								<div class="box">
									<img src="../static/subject/icon-box.png" />
								</div>
							</template>

							<template v-else>
								<custom-card-cover :totalCount="detail.postBizData.totalCount"
									:amountValue="detail.postBizData.amountValue"
									:tokenSymbol="detail.postBizData.tokenSymbol"
									:currencyIconUrl="detail.postBizData.iconPath" :playType="2" :validity="validity"
									:userInfo="{
										nickName: detail.postBizData.postUserInfo.nickName,
										avatarUrl: detail.postBizData.postUserInfo.avatarUrl
									}" :rewardType="detail.postBizData.rewardType"
									:customizedReward="detail.postBizData.customizedReward" :showBottomInfo="false">
								</custom-card-cover>
							</template>
						</template>
					</template>
					<template v-else>
						<div class="succTop">
							<template v-if="status === 'opened'">
								<img class="img" :src="require('../static/svg/icon-luck-rabbit.svg')" />
								<p class="tips">Good Luck Next Time!</p>
							</template>
							<template v-else-if="status === 'expire'">
								<!-- <img class="img" :src=" require('../static/svg/icon-luck-complete.svg') " />
                                <p class="tips">This Draw is Complete</p> -->
								<p class="expire">This Giveaways<br />expired on {{
										formatTime(detail.postBizData.endTimestamp, 'MM-DD')
								}}</p>
							</template>
							<template v-else>
								<p class="win">🎉 Awesome! You Will Get</p>
								<div class="win-money">
									<img :src="detail.postBizData.currencyIconPath" />
									<font-amount :fontSize="46" :amount="receiveAmount"></font-amount>
								</div>
							</template>
						</div>
						<div class="succTitle">
							<span>{{ detail.postBizData.receiveCount || 0 }}/{{ detail.postBizData.totalCount || 0 }}
								Winners</span>
							<span v-if="isMoneyPrize">{{ detail.postBizData.receiveAmountValue }} / {{
									detail.postBizData.amountValue || ''
							}} {{ detail.postBizData.currencySymbol || ''
}}</span>
						</div>
						<div class="luck-list" @scroll="handleScroll($event)">
							<div class="luck-item" v-for="item, i in luck_list" v-bind:key="i">
								<div class="userLogo">
									<img class="medal" v-if="i < 2"
										:src="require('../static/svg/icon-medal-' + i + '.svg')" />
									<img class="header" v-if="item.simpleUserInfoVO.avatarUrl"
										:src="item.simpleUserInfoVO.avatarUrl" alt />
									<img class="header" v-else src="/svg/icon-twitter.svg" alt />
								</div>
								<div class="luck-content">
									<div class="luck-title">{{ item.simpleUserInfoVO.nickName || 'Twitter User' }}</div>
									<div class="luck-time">{{ formatTime(item.receiveTimestamp, 'MM-DD HH:mm') }}</div>
								</div>
								<div class="luck-money" v-if="isMoneyPrize">
									<img :src="item.currencyIconPath" alt />
									<div class="luck-money-txt">{{ item.amountValue || 0 }}</div>
								</div>
								<div class="luck-custom-prize" v-else>winner</div>
								<div class="luck-king" v-if="isMoneyPrize && item.maxAmount">
									<img src="/svg/icon-king-hat.svg" alt />
									<span>Luckiest Draw</span>
								</div>
							</div>
						</div>
					</template>
					<div class="area-cp-link">
						<div class="area-list">
							<div class="item">
								<div class="icon"><img :src="require('../static/subject/01.svg')" /></div>
								<div class="font">Complete the tasks on tweet</div>
							</div>
							<div class="item">
								<div class="icon"><img :src="require('../static/subject/02.svg')" /></div>
								<div class="font">Open link on PC to draw</div>
								<div class="pc"><img :src="require('../static/subject/pc.svg')" /></div>
							</div>
						</div>
						<div class="area-content">
							{{ linkHref }}
						</div>
						<div class="area-btn">
							<div class="btn" :data-clipboard-text="linkHref" @click="copyLinkHandle">Copy Link</div>
						</div>
					</div>
					<div class="layer" v-show="layer_show">
						<div class="layer-box">
							<div class="layer-txt">Unable to copy, please enter the link manually</div>
							<div class="layer-btn" @click="layer_show = false">Done</div>
						</div>
					</div>
				</div>
			</template>
			<!-- PC端 -->
			<template v-else>
				<div class="logo">
					<img src="/img/icon-logo.png" />
				</div>
				<div class="show">
					<div class="center">
						<div class="head-in-custom" v-if="!isMoneyPrize">
							<img :src="detail.postBizData.postUserInfo.avatarUrl" />
							<span>{{ detail.postBizData.postUserInfo.nickName }}</span>
						</div>
						<div class="giveaway" :class="{
							bg: status === 'not-open',
							custom: detail.postBizData.posterType === 2 && detail.postBizData.customPosterInstalled,
							'auto-height': !isMoneyPrize
						}">
							<div v-if="status === 'not-open'">
								<template
									v-if="detail.postBizData.posterType === 2 && detail.postBizData.customPosterInstalled">
									<!-- <img class="customImg" :src="detail.postBizData.customPosterInstalled" />
                                  <div class="customBottom">
                                    <div class="theme">
                                      <img class="icon" :src="require('../static/svg/icon-last-time.svg')"/>
                                      <span class="time2">{{ validity || '00:00:00' }}</span>
                                      <span class="info">Left</span>
                                    </div>
                                    <div class="winner-info">
                                      <span class="count">{{detail.postBizData.totalCount}} Winners</span>
                                      <span>to Share </span>
                                      <span class="prize-name">{{detail.postBizData.amountValue + ' ' + detail.postBizData.currencySymbol}}</span>
                                    </div>
                                  </div> -->
									<custom-card-cover :totalCount="detail.postBizData.totalCount"
										:amountValue="detail.postBizData.amountValue"
										:tokenSymbol="detail.postBizData.tokenSymbol"
										:currencyIconUrl="detail.postBizData.iconPath" :playType="2" :posterType="2"
										:customPosterInstalled="detail.postBizData.customPosterInstalled"
										:validity="validity" :userInfo="{
											nickName: detail.postBizData.postUserInfo.nickName,
											avatarUrl: detail.postBizData.postUserInfo.avatarUrl
										}" :rewardType="detail.postBizData.rewardType"
										:customizedReward="detail.postBizData.customizedReward" :showBottomInfo="true">
									</custom-card-cover>
								</template>
								<template v-else>
									<!-- 旧版 样式，后续更新时在 custom-card-cover 公共组件内维护-->
									<template v-if="isMoneyPrize">
										<img class="lottery" :src="require('../static/svg/icon-luck-mark.svg')" />
										<div class="head">
											<img :src="detail.postBizData.postUserInfo.avatarUrl" />
											<span>{{ detail.postBizData.postUserInfo.nickName }}</span>
										</div>
										<div class="price">
											<div class="usdt">
												<span>
													{{ detail.postBizData.amountCurrencyCode == 'USD' ? 'US Dollar' :
															detail.postBizData.tokenSymbol
													}}
												</span>
												&nbsp;GIVEAWAY
											</div>
											<div class="money">
												<img :src="detail.postBizData.currencyIconPath" />
												<font-amount :fontSize="60" :amount="detail.postBizData.amountValue">
												</font-amount>
											</div>
										</div>
										<div class="time">
											<img class="img" :src="require('../static/svg/icon-time.svg')" />
											{{ validity || '00:00:00' }}
										</div>
										<div class="box">
											<img src="../static/subject/icon-box.png" />
										</div>
									</template>

									<template v-else>
										<custom-card-cover :totalCount="detail.postBizData.totalCount"
											:amountValue="detail.postBizData.amountValue"
											:tokenSymbol="detail.postBizData.tokenSymbol"
											:currencyIconUrl="detail.postBizData.iconPath" :playType="2"
											:validity="validity" :userInfo="{
												nickName: detail.postBizData.postUserInfo.nickName,
												avatarUrl: detail.postBizData.postUserInfo.avatarUrl
											}" :rewardType="detail.postBizData.rewardType"
											:customizedReward="detail.postBizData.customizedReward"
											:showBottomInfo="true"></custom-card-cover>
									</template>
								</template>
							</div>
							<template v-else>
								<div class="succTop">
									<template v-if="status === 'opened'">
										<img class="img" :src="require('../static/svg/icon-luck-rabbit.svg')" />
										<p class="tips">Good Luck Next Time!</p>
									</template>
									<template v-else-if="status === 'expire'">
										<!-- <img class="img" :src=" require('../static/svg/icon-luck-complete.svg') " />
                                        <p class="tips">This Draw is Complete</p> -->
										<p class="expire">This Giveaways<br />expired on {{
												formatTime(detail.postBizData.endTimestamp, 'MM-DD')
										}}</p>
									</template>
									<template v-else>
										<p class="win">🎉 Awesome! You are Winner!</p>
										<div class="win-money">
											<img :src="detail.postBizData.currencyIconPath" />
											<font-amount :fontSize="46" :amount="receiveAmount"></font-amount>
										</div>
									</template>
								</div>
								<div class="succTitle">
									<span>{{ detail.postBizData.receiveCount || 0 }}/{{ detail.postBizData.totalCount ||
											0
									}} Winners</span>
									<span v-if="isMoneyPrize">{{ detail.postBizData.receiveAmountValue }} / {{
											detail.postBizData.amountValue || ''
									}} {{ detail.postBizData.currencySymbol ||
		''
}}</span>
								</div>
								<div class="luck-list" @scroll="handleScroll($event)">
									<div class="luck-item" v-for="item, i in luck_list" v-bind:key="i">
										<div class="userLogo">
											<img class="medal" v-if="i < 2"
												:src="require('../static/svg/icon-medal-' + i + '.svg')" />
											<img class="header" v-if="item.simpleUserInfoVO.avatarUrl"
												:src="item.simpleUserInfoVO.avatarUrl" alt />
											<img class="header" v-else src="/svg/icon-twitter.svg" alt />
										</div>
										<div class="luck-content">
											<div class="luck-title">{{ item.simpleUserInfoVO.nickName || 'Twitter User'
											}}</div>
											<div class="luck-time">{{ formatTime(item.receiveTimestamp, 'MM-DD HH:mm')
											}}</div>
										</div>
										<div class="luck-money" v-if="isMoneyPrize">
											<img :src="item.currencyIconPath" alt />
											<div class="luck-money-txt">{{ item.amountValue || 0 }}</div>
										</div>
										<div class="luck-custom-prize" v-else>winner</div>
										<div class="luck-king" v-if="isMoneyPrize && item.maxAmount">
											<img src="/svg/icon-king-hat.svg" alt />
											<span>Luckiest Draw</span>
										</div>
									</div>
								</div>
							</template>
						</div>
						<div class="desc">
							<template v-if="isChrome">
								<template v-if="status === 'not-open'">
									<div class="title">Install DeNet Plugin<br />to Draw Prizes</div>
									<div class="issue">DeNet will detect task situation to issue Giveaway</div>
								</template>
								<template v-else>
									<div class="title">Install the Denet plugin<br />to not miss the next draw</div>
								</template>
								<img class="button" @click="installExtension"
									src="../static/svg/icon-install-nft-plugin.svg" />
							</template>
							<template v-else>
								<div class="title">Get Giveaway<br />with chrome</div>
								<div class="issue">Only supports getting Giveaways through chrome</div>
								<img class="button" @click="clickOpenChrome"
									src="../static/svg/icon-install-nft-chrome.svg" />
							</template>
						</div>
					</div>
				</div>
			</template>
		</template>
	</div>
</template>

<script>
import axios from 'axios'
import Cookies from 'js-cookie'
import { Toast } from 'vant';
import { isBrowser, appType, appVersionCode, formatSecondsAsDaysOrTime } from '../utils/help.js'
import FontAmount from '../components/FontAmount.vue'
import CustomCardCover from '../components/CustomCardCover.vue'
import Report from "../log-center/log"
import { RewardType } from '../types';

var moment = require('moment');
var ClipboardJS = require('clipboard')

const api = {
	prod: 'https://api.denetme.net',
	pre: 'https://preapi.denetme.net',
	test: 'https://testapi.denetme.net'
}
const page = {
	prod: "https://h5.denetme.net",
	pre: "https://preh5.denetme.net",
	test: 'https://testh5.denetme.net'
}
const jumpUrl = page[process.env.NUXT_ENV.MODE] + '/'
const baseURL = api[process.env.NUXT_ENV.MODE]

export default {
	name: 'luckdraw',
	components: {
		FontAmount, CustomCardCover
	},
	head() {
		return {
			type: '',
			title: this.title,
			appVersionCode: appVersionCode,
			meta: [
				// facebook
				{
					name: 'og:url',
					content: this.jumpUrl + 'luckdraw/' + this.detail.postId
				},
				{
					name: 'og:title',
					content: this.metaTitle
				},
				{
					name: 'og:image',
					content: this.detail.postBizData.imagePath || this.detail.postBizData.customPosterUninstalled || ''
				},
				// twitter
				{
					name: 'twitter:card',
					content: 'summary_large_image'
				},
				{
					name: 'twitter:url',
					content: this.jumpUrl + 'luckdraw/' + this.detail.postId
				},
				{
					name: 'twitter:title',
					content: this.metaTitle
				},
				{
					name: 'twitter:image',
					content: this.detail.postBizData.imagePath || this.detail.postBizData.customPosterUninstalled || ''
				}
			]
		}
	},
	data() {
		return {
			detail: {
				postId: '',
				postBizData: {
					imagePath: '',
					postUserInfo: {},
					amountValue: '0',
				}
			},
			luck_list: [],
			luck_list_end: false,
			layer_show: false,
			isLoading: true,
			isMobile: false,
			isChrome: false,
			config: {},
			mid: '',
			status: '',  // not-open->未打开   opened->没有抽中   success->抽中了   expire->过期
			page_index: 1,
			page_size: 20,
			validity: '',
			receiveAmount: '0',
			title: 'DeNet Giveaway',
			jumpUrl: jumpUrl,
			metaTitle: 'DeNet: An Easy Web3 Tool For GIVEAWAY / AIRDROP',
			reportStatus: 'normal',
			customCover: '',
			customGiveaway: '',
		}
	},
	computed: {
		// 货币类型的奖品
		isMoneyPrize() {
			return this.detail.postBizData.rewardType === RewardType.money;
		}
	},
	mounted() {
		this.getConfig()
		this.setCookieMid()
		this.checkBrowser()
		this.handleStatusPage()
		this.isLoading = false;

		// 复制链接
		var clipboard = new ClipboardJS('.btn');
		clipboard.on('success', function (e) {
			Toast('copy success');
			e.clearSelection();
		});
		clipboard.on('error', function (e) {
			this.layer_show = true
		});
	},
	async asyncData(params) {
		let { route } = params;
		let { data } = await axios.post(`${baseURL}/denet/post/getDetail`, {
			baseInfo: {
				appVersionCode: appVersionCode,
				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)
			}
			if (data.data.postBizData === null) {
				data.data.postBizData = {
					postUserInfo: {}
				}
			}
			return {
				detail: data.data,
				customCover: data.data.postBizData && data.data.postBizData.posterType == 2 ? 1 : 0,
				customGiveaway: data.data.postBizData && data.data.postBizData.rewardType == 2 ? 1 : 0,
			}
		}
	},
	methods: {
		checkBrowser() {
			this.linkHref = window.location.href;
			this.isChrome = isBrowser() == 'chrome';
			this.isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
			if (!this.isChrome) {
				this.status = 'no-chrome'
			} else {
				this.setPickupInfo()
			}
			// report
			setTimeout(() => {
				this.reportData()
			}, 500)
		},
		async getConfig() {
			let { data } = await axios.post(`${baseURL}/denet/base/config/getFrontConfig`, {
				baseInfo: {
					appVersionCode: appVersionCode,
					mid: this.mid
				},
				params: {}
			})
			if (data.code == 0) {
				this.config = data.data;
			}
		},
		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 })
			}
		},
		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);
			});
		},
		clickOpenChrome() {
			window.open('https://www.google.com/chrome')

			let extParams = this.isMobile ? {} : { status: this.reportStatus }
			Report.reportLog({
				baseInfo: {
					appVersionCode: appVersionCode,
					mid: this.mid,
					pageSource: Report.pageSource.newUserLandingPage,
					appType,
					machineCode: this.mid
				},
				params: {
					eventData: {
						businessType: Report.businessType.buttonClick,
						objectType: Report.objectType.installButton,
						postId: this.detail.postId,
						srcContentId: this.detail.srcContentId,
						senderId: this.detail.srcUserId,
						redPacketType: 1,
						customCover: this.customCover,
						customGiveaway: this.customGiveaway,
					},
					extParams: extParams
				}
			})
		},
		installExtension() {
			let { extensionsInstallChannel, extensionsInstallUrl } = this.config;
			let extParams = this.isMobile ? {} : { status: this.reportStatus }

			Report.reportLog({
				baseInfo: {
					appVersionCode: appVersionCode,
					mid: this.mid,
					pageSource: Report.pageSource.newUserLandingPage,
					appType,
					machineCode: this.mid
				},
				params: {
					eventData: {
						businessType: Report.businessType.buttonClick,
						objectType: Report.objectType.installButton,
						postId: this.detail.postId,
						srcContentId: this.detail.srcContentId,
						senderId: this.detail.srcUserId,
						redPacketType: 1,
						customCover: this.customCover,
						customGiveaway: this.customGiveaway,
					},
					extParams: extParams,
				}
			})

			switch (extensionsInstallChannel) {
				case "officeDownload":
					location.href = url;
					this.$router.push({
						path: '/install'
					})
					break;
				case "chromeAppStore":
					window.open(extensionsInstallUrl)
					break;
			}
		},
		setPickupInfo() {
			let pickupInfo = {
				srcContentId: this.detail.srcContentId || '',
				postNickName: this.detail.postBizData.postUserInfo.nickName || '',
				createTime: Date.now(),
				jump_type: 'luck_draw',
				postId: this.detail.postId || ''
			};
			Cookies.set('jump_info', JSON.stringify(pickupInfo), { expires: 100 });
		},
		formatTime(time, _type = 'MM-DD HH:mm:ss') {
			return moment(time).format(_type)
		},
		getValidity(end_time) {
			let timer = setInterval(() => {
				let time = moment(new Date().getTime())
				let endTime = moment(end_time + 5000)
				let downTime = (endTime - time) || 0
				if (downTime > 0) {
					this.validity = formatSecondsAsDaysOrTime(downTime / 1000);
				} else {
					this.validity = `00:00:00`
					this.getDetail(() => {
						this.handleStatusPage()
					})
					clearInterval(timer)
				}
			}, 1000)
		},
		handleScroll(e) {
			e = e.target
			if (this.luck_list_end) {
				return
			}
			if ((e.clientHeight + e.scrollTop) / e.scrollHeight > .8) {
				this.luck_list_end = false
				this.page_index++
				this.getReceivedList()
			}
		},
		handleStatusPage() {
			// 如果 我领取过了
			// taskFinishStatus  任务完成状态（0:未完成，1:已完成，2:已过期）
			if (this.detail.postBizData.myReceived) {
				this.receiveAmount = this.detail.postBizData.myReceived.amountValue || 0
				// 如果 任务完成状态 = 未完成
				if (this.detail.postBizData.myReceived.taskFinishStatus == 0) {
					// 显示任务未完成页面
					this.status = `opened`
				} else if (this.detail.postBizData.myReceived.taskFinishStatus == 1) {
					//如果 任务完成状态 = 已经完成
					if (this.receiveAmount == 0) {
						// 领取到空红包
						this.status = `opened`
						this.reportStatus = `empty`
					} else {
						// 显示成功页面
						this.status = `success`
					}
				} else {
					// 如果 任务完成状态 = 已经过期
					if (this.detail.postBizData.status == 1) {
						// 显示未打开页面
						this.status = 'not-open'
					} else {
						// 显示已经过期页面
						this.status = 'expire'
						this.reportStatus = `empty`
					}
				}
			} else {
				// 如果 我没有领取过
				// 如果 红包状态 = 进行中
				if (this.detail.postBizData.status == 1) {
					// 如果 过了红包的领取截止时间 = true
					if (this.detail.postBizData.receiveTimeExpired) {
						// 显示过期页面
						this.status = 'expire'
						this.reportStatus = `empty`
					} else {
						// 如果 过了红包的领取截止时间 = false
						// 显示未打开页面
						this.status = 'not-open'
					}
				} else {
					// 红包状态 = 已经结束了 ｜ 已经终止 ｜ 终止退款中
					// 显示过期页面
					this.status = 'expire'
					this.reportStatus = `empty`
				}
			}

			// this.status = 'not-open'

			// getList
			if (this.status !== 'not-open') {
				this.getReceivedList()
			} else {
				this.getValidity(this.detail.postBizData.endTimestamp)
			}
		},
		async getDetail(fn) {
			let { data } = await axios.post(`${baseURL}/denet/post/getDetail`, {
				baseInfo: {
					appVersionCode: appVersionCode,
					mid: this.mid
				},
				params: {
					postId: this.detail.postId
				}
			})
			if (data.code == 0) {
				this.detail.postBizData = JSON.parse(data.data.postBizData)
				this.customCover = this.detail.postBizData && this.detail.postBizData.posterType == 2 ? 1 : 0;
				this.customGiveaway = this.detail.postBizData && this.detail.postBizData.rewardType == 2 ? 1 : 0;
				if (fn) fn();
			}
		},
		async getReceivedList() {
			let { data } = await axios.post(`${baseURL}/denet/post/luckdrop/getReceivedList`, {
				baseInfo: {
					appVersionCode: 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
				}
			}
		},

		copyLinkHandle() {
			Report.reportLog({
				baseInfo: {
					appVersionCode: appVersionCode,
					mid: this.mid,
					pageSource: Report.pageSource.mobileLandingPage,
					appType,
					machineCode: this.mid
				},
				params: {
					eventData: {
						businessType: Report.businessType.buttonClick,
						objectType: Report.objectType.copyLinkButton,
						postId: this.detail.postId || '',
						srcContentId: this.detail.srcContentId || '',
						senderId: this.detail.srcUserId || '',
						redPacketType: 1,
						customCover: this.customCover,
						customGiveaway: this.customGiveaway,
					}
				}
			})
		},
		reportData() {
			if (this.isMobile) {
				// 手机端
				Report.reportLog({
					baseInfo: {
						appVersionCode: appVersionCode,
						mid: this.mid,
						pageSource: Report.pageSource.mobileLandingPage,
						appType,
						machineCode: this.mid
					},
					params: {
						eventData: {
							businessType: Report.businessType.pageView,
							postId: this.detail.postId,
							srcContentId: this.detail.srcContentId,
							senderId: this.detail.srcUserId,
							redPacketType: 1,
							customCover: this.customCover,
							customGiveaway: this.customGiveaway,
						}
					}
				})
			} else if (this.isChrome) {
				// pc端
				Report.reportLog({
					baseInfo: {
						appVersionCode: appVersionCode,
						mid: this.mid,
						pageSource: Report.pageSource.newUserLandingPage,
						appType,
						machineCode: this.mid
					},
					params: {
						eventData: {
							businessType: Report.businessType.pageView,
							postId: this.detail.postId,
							srcContentId: this.detail.srcContentId,
							senderId: this.detail.srcUserId,
							redPacketType: 1,
							customCover: this.customCover,
							customGiveaway: this.customGiveaway,
						},
						extParams: {
							status: this.reportStatus,
						}
					}
				});
			} else {
				Report.reportLog({
					baseInfo: {
						appVersionCode: appVersionCode,
						mid: this.mid,
						pageSource: Report.pageSource.newUserLandingPage,
						appType,
						machineCode: this.mid
					},
					params: {
						eventData: {
							businessType: Report.businessType.pageView,
							postId: this.detail.postId,
							srcContentId: this.detail.srcContentId,
							senderId: this.detail.srcUserId,
							redPacketType: 1,
							customCover: this.customCover,
							customGiveaway: this.customGiveaway,
						},
						extParams: {
							status: 'not-chrome',
						}
					}
				})
			}
		}
	}
}
</script>

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

.content {
	overflow: hidden;
	width: 100%;
	height: 100%;
	background: #fff;

	.loading {
		position: absolute;
		transform: translate(-50%, -50%);
		top: 50%;
		left: 50%;
		margin: auto;
		width: 40px;
		border-radius: 50%;
	}

	.logo {
		display: flex;
		align-items: center;
		height: 70px;
		margin-left: 25px;

		img {
			width: 99px;
			height: 32px;
		}
	}

	.show {
		display: flex;
		align-items: center;
		height: calc(100% - 70px);

		.center {
			display: flex;
			margin: -50px auto 0;
			justify-content: space-between;
			width: 1000px;
			position: relative;

			.head-in-custom {
				position: absolute;
				bottom: 100%;
				left: 0;
				background: #fff;
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 15px;
				color: #000;
				height: 54px;

				img {
					width: 30px;
					height: 30px;
					border-radius: 50%;
					margin-right: 10px;
				}

			}

			.giveaway {
				position: relative;
				overflow: hidden;
				width: 375px;
				height: 500px;
				border-radius: 20px;
				background-color: #fff;
				box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);

				&.bg {
					background: linear-gradient(17.98deg, #3438FF 3.69%, #8B56FC 74.32%);
				}

				&.custom {
					background: unset;
					height: auto !important;
				}

				&.auto-height {
					height: auto;
				}



				.lottery {
					position: absolute;
					top: 0;
					right: 0;
					width: 110px;
					height: 94px;
				}

				.head {
					display: flex;
					height: 50px;
					align-items: center;

					img {
						width: 20px;
						height: 20px;
						border-radius: 50%;
						margin: 0 10px 0 15px;
						border: solid 2px #fff;
					}

					span {
						color: #fff;
						font-size: 13px;
						font-weight: 700;
						line-height: 16px;
						letter-spacing: 0.005em;
					}
				}

				.price {
					text-align: center;

					.usdt {
						margin: 10px 0;
						color: #FFFFFF;
						font-weight: bold;
						font-size: 16px;
						line-height: 20px;
						text-align: center;
						letter-spacing: 0.3px;
						display: flex;
						align-items: center;
						justify-content: center;

						span {
							color: #F9C545;
						}

					}

					.money {
						display: flex;
						align-items: center;
						justify-content: center;

						img {
							width: 46px;
							height: 46px;
							margin-right: 15px;
							border-radius: 50%;
							border: solid 3px #fff;
						}

						span {
							color: #fff;
							font-size: 60px;
							font-weight: 800;
							line-height: 76px;
						}
					}
				}

				.time {
					display: flex;
					height: 46px;
					color: #FFCC4D;
					align-items: center;
					justify-content: center;
					font-weight: bold;
					font-size: 26px;
					line-height: 33px;
					text-align: center;
					background: rgba($color: #000000, $alpha: .15);

					.img {
						width: 26px;
						margin-right: 10px;
					}
				}

				.box {
					margin: auto;
					width: 200px;
					height: 200px;
					margin-top: 27px;

					img {
						width: 100%;
						height: 100%;
					}
				}
			}

			.desc {
				width: 520px;

				.title {
					color: #2C2C2C;
					font-size: 36px;
					line-height: 40px;
					font-weight: 900;
					margin-top: 90px;
					margin-bottom: 20px;
				}

				.issue {
					font-size: 15px;
					color: #A4A4A4;
				}

				.button {
					cursor: pointer;
					height: 64px;
					margin-top: 30px;
				}
			}
		}
	}
}

.small {
	width: 100%;
	height: 100%;
	position: relative;
	background-color: #fff;

	&.bg {
		background: linear-gradient(17.98deg, #3438FF 3.69%, #8B56FC 74.32%);
	}

	&.custom {
		background: #111214 !important;
	}

	.lottery {
		position: absolute;
		top: 0;
		right: 0;
		width: 110px;
		height: 94px;
	}

	.luck-list {
		height: calc(100% - 430px);
	}

	.head {
		display: flex;
		height: 50px;
		align-items: center;

		img {
			width: 20px;
			height: 20px;
			border-radius: 50%;
			margin: 0 10px 0 15px;
			border: solid 2px #fff;
		}

		span {
			color: #fff;
			font-size: 13px;
			font-weight: 700;
			line-height: 16px;
			letter-spacing: 0.005em;
		}
	}

	.price {
		text-align: center;

		.usdt {
			margin: 10px 0;
			color: #FFFFFF;
			font-weight: bold;
			font-size: 16px;
			line-height: 20px;
			text-align: center;
			letter-spacing: 0.3px;
			display: flex;
			align-items: center;
			justify-content: center;

			span {
				color: #F9C545;
			}
		}

		.money {
			display: flex;
			align-items: center;
			justify-content: center;

			img {
				width: 46px;
				height: 46px;
				margin-right: 15px;
				border-radius: 50%;
				border: solid 3px #fff;
			}

			span {
				color: #fff;
				font-size: 60px;
				font-weight: 800;
				line-height: 76px;
			}
		}
	}

	.time {
		display: flex;
		height: 46px;
		color: #FFCC4D;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 26px;
		line-height: 33px;
		text-align: center;
		background: rgba($color: #000000, $alpha: .15);

		.img {
			width: 26px;
			margin-right: 10px;
		}
	}

	.box {
		margin: auto;
		width: 200px;
		height: 200px;
		margin-top: 27px;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.area-cp-link {
		position: absolute;
		bottom: 0;
		background: #fff;
		overflow: hidden;
		width: 100%;
		flex-wrap: wrap;
		height: 238px;
		box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1);
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;

		.area-list {
			clear: both;
			margin: 15px;

			.item {
				clear: both;
				overflow: hidden;
				margin: 7px 0;
				font-size: 16px;
				font-weight: 500;

				.icon {
					float: left;
					margin-right: 8px;
					margin-top: -2px;
				}

				.font {
					float: left;
					margin-right: 8px;
				}

				.pc {
					float: left;
					margin-top: -2px;
				}
			}
		}

		.area-content {
			margin: 0 15px;
			color: #4B4B4B;
			padding: 7px 10px;
			font-size: 13px;
			border-radius: 5px;
			background: #F4F4F4;
			word-break: break-all;
		}

		.area-btn {
			flex: 1;
			display: flex;
			justify-content: center;

			.btn {
				margin: 15px 15px 0 15px;
				display: inline-block;
				width: 100%;
				height: 47px;
				font-size: 18px;
				line-height: 34px;
				color: #FFFFFF;
				border-radius: 100px;
				background: #389AFF;
			}
		}
	}
}

.layer {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, .5);

	.layer-box {
		width: 300px;
		height: 170px;
		background: #FFFFFF;
		border-radius: 11px;
		opacity: 1;
		position: absolute;
		top: 250px;
		left: 50%;
		margin-left: -150px;

		.layer-txt {
			margin: 30px 0;
			width: 100%;
			padding: 0 27px;
			font-weight: 600;
			font-size: 18px;
			text-align: center;
		}

		.layer-btn {
			width: 190px;
			height: 40px;
			background: #389AFF;
			border-radius: 100px;
			margin: 0 auto;
			text-align: center;
			line-height: 40px;
			color: #fff;
			font-weight: 600;
			font-size: 18px;
		}
	}
}

.luck-list {
	flex: 1;
	width: 100%;
	height: 310px;
	overflow-y: auto;

	.luck-item {
		display: flex;
		padding: 12px 0;
		margin: 0 16px;
		border-bottom: 1px solid #F2F2F2;
		justify-content: space-between;
		position: relative;

		.header {
			border-radius: 50%;
		}

		.luck-king {
			position: absolute;
			top: 36px;
			right: 0px;
			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;
			}
		}

		.userLogo {
			position: relative;
			width: 42px;
			height: 42px;
			margin-right: 12px;

			.medal {
				position: absolute;
				right: -5px;
				bottom: -5px;
				width: 18px;
				height: 18px;
			}

			img {
				width: 100%;
				height: 100%;
			}
		}

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

		.luck-custom-prize {
			font-weight: 500;
			font-size: 14px;
			letter-spacing: 0.3px;
			color: #F5B945;
		}
	}

	.luck-item:last-child {
		border: 0;
	}
}

.succTop {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	height: 150px;
	margin-bottom: 13px;
	background: #7D52FD;
	border-radius: 0 586px 586px/0 0 104px 104px;

	.img {
		height: 62px;
	}

	.expire {
		color: #FFFFFF;
		font-size: 22px;
		font-weight: 800;
		line-height: 36px;
		margin-top: 15px;
		text-align: center;
	}

	.tips {
		color: #FFFFFF;
		font-size: 22px;
		font-weight: 800;
		line-height: 26px;
		margin-top: 15px;
	}

	.win {
		font-size: 21px;
		font-weight: 800;
		color: #fff;
	}

	.win-money {
		display: flex;
		margin-top: -10px;
		align-items: center;
		justify-content: center;

		img {
			width: 44px;
			height: 44px;
			margin-right: 15px;
			border-radius: 50%;
			border: solid 3px #fff;
		}

		span {
			color: #fff;
			font-size: 60px;
			font-weight: 800;
			line-height: 76px;
		}
	}
}

.succTitle {
	display: flex;
	padding: 5px 0;
	justify-content: space-between;
	box-shadow: inset 0px -1px 0px #F2F2F2;

	span {
		margin: 0 16px;
		font-size: 12px;
		color: #B0B0B0;

		&:last-child {
			text-align: right;
		}
	}
}

.customImg {
	width: 100%;
	min-height: 373px;
}

.customBottom {
	width: 100%;
	background: #111214;
	padding: 10px 16px;
	font-weight: 500;
	font-size: 12px;
	line-height: 14px;
	letter-spacing: 0.3px;
	color: #838383;
	line-height: 20px;

	.theme {
		display: flex;
		height: 20px;
		align-items: center;
		justify-content: flex-start;

		.icon {
			width: 12px;
		}

		.time2 {
			margin: 0 4px;
			color: #1D9BF0;
		}
	}

	.winner-info {
		display: flex;
		height: 20px;
		align-items: center;
		justify-content: flex-start;

		.count {
			color: #1D9BF0;
			margin-right: 4px;
		}

		.prize-name {
			color: #1D9BF0;
			margin-left: 4px;
		}
	}
}
</style>