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',
            };
            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>