de-net/src/view/iframe/treasure-hunt/result.vue

<template>
    <div class="content">
        <!-- 结果页 -->
        <div class="header">
            <img :src="require('@/assets/subject/004-back-head-top.svg')" alt class="back" />
            <!-- 领到钱了 -->
            <template v-if="Number(state.detail.receiveAmountUsdValue) > 0">
                <div class="tip1">This Giveaway Expired on {{ moment(state.detail.endTimestamp).format('MM-DD') }}</div>
                <div class="tip2">🎉 Awesome! You are the Winner!</div>
                <div class="tip3">+${{ state.detail.receiveAmountUsdValue }}</div>
                <div class="tip3-back"></div>
            </template>
            <!-- 没有领到钱 -->
            <template v-else>
                <div class="rabbit">
                    <img :src="require('@/assets/subject/001-icon-rabbit.svg')" alt />
                    <p>Sorry, you missed this treasure</p>
                </div>
            </template>

        </div>
        <div class="list">
            <receive-list></receive-list>
        </div>
        <div class="footer">
            <!-- 领取到钱了 -->
            <template v-if="Number(state.detail.amountUsdValue) > 0">
                <div class="btn btn1" @click="clickDone">
                    <img :src="require('@/assets/svg/icon-wallet-success.svg')" alt />
                    <span>Wallet</span>
                </div>
                <get-more :style_type="4"
                    :reportData="{ pageSource: Report.pageSource.received_success_page, postId: state.postId, redPacketType: Report.redPacketType.treasure }">
                    <div class="btn btn2">
                        <img :src="require('@/assets/svg/icon-gold-box-close.svg')" alt />
                        <span>Get More</span>
                    </div>
                </get-more>
            </template>
            <!-- 没有领到钱 -->
            <template v-else>
                <div class="btn btn2 btn3" @click="clickBtn">
                    <img :src="require('@/assets/svg/icon-gold-box-close.svg')" alt />
                    <span>Look for more treasures</span>
                </div>
            </template>
        </div>
    </div>
</template>
<script setup>
import { inject, onMounted } from 'vue'
import ReceiveList from '@/view/iframe/treasure-hunt/components/receive-list.vue'
import { chromeExtensionUrl } from '@/uilts/chromeExtension.js'
import GetMore from '@/view/iframe/publish/components/get-more.vue'
import Report from "@/log-center/log"

let state = inject('state')
var moment = require('moment')

onMounted(() => {
    // 埋点
    logFunc()
})

const logFunc = (log = {}) => {
    log = Object.assign({
        pageSource: Report.pageSource.expiredPage,
        businessType: Report.businessType.pageView,
        myShareLinkId: state.detail.inviteCopyUrl,
        currentInvitedNum: state.inviteCount,
        redPacketType: Report.redPacketType.treasure,
        shareLinkId: state.invite_code || '',
        postId: state.postId
    }, log)

    if (Number(state.detail.amountUsdValue) > 0) {
        log.pageSource = Report.pageSource.received_success_page
    }
    Report.reportLog(log)
}

function clickDone() {
    window.open(`${chromeExtensionUrl + ('iframe/home.html')}`)

    // 埋点
    logFunc({
        businessType: Report.businessType.buttonClick,
        objectType: Report.objectType.wallet_button
    })
}

const clickBtn = () => {
    logFunc({
        businessType: Report.businessType.buttonClick,
        objectType: Report.objectType.getMoreGiveaway,
        currentInvitedNum: state.inviteCount,
    })
    window.open('https://twitter.com/search?q=%23denet');
}
</script>
<style lang="scss" scoped>
.content {
    width: 375px;
    background: #fff;

    .header {
        width: 100%;
        min-height: 150px;
        position: relative;

        .back {
            position: absolute;
            top: 0;
            left: 0;
        }

        .tip1 {
            color: #FFFFFF;
            opacity: 0.5;
            text-align: center;
            padding-top: 16px;
            font-weight: 700;
            font-size: 13px;
            width: 100%;
            z-index: 12;
            width: 100%;
        }

        .tip2 {
            color: #FFFFFF;
            text-align: center;
            font-weight: 800;
            width: 100%;
            position: absolute;
            font-size: 16px;
            margin-top: 11px;

        }

        .tip3-back {
            width: 100%;
            height: 43px;
            position: absolute;
            top: 74px;
            left: 0;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.826667) 26.4%, #FFFFFF 71.47%, rgba(255, 255, 255, 0) 100%);
            opacity: 0.15;
            z-index: 1;
        }

        .tip3 {
            position: absolute;
            top: 74px;
            z-index: 2;
            left: 0;
            width: 100%;
            line-height: 43px;
            height: 43px;
            color: #F5C03F;
            text-align: center;
            font-size: 26px;
            font-weight: 800;
        }


        .rabbit {
            width: 100%;
            height: 100%;
            text-align: center;
            position: absolute;
            z-index: 11;

            img {
                width: 150px;
                height: 80px;
                margin-top: 14px;
                margin-bottom: 4px;
            }

            .flower {
                width: 62px;
                height: 62px;
            }

            p {
                width: 100%;
                margin: 0;
                padding: 0;
                font-weight: 800;
                font-size: 16px;
                color: #fff;
                text-align: center;
                letter-spacing: 0.3px;
            }
        }
    }

    .list {
        height: 336px;
        margin-top: 10px;
    }

    .footer {
        height: 84px;
        display: flex;
        padding: 16px;
        justify-content: space-between;

        .btn {
            width: 166.5px;
            height: 52px;
            border-radius: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 18px;
            user-select: none;
            cursor: pointer;

            img {
                width: 24px;
                height: 24px;
                margin-right: 7px;
            }
        }

        .btn1 {
            background: #FFFFFF;
            border: 1px solid #DEDEDE;
            color: #585858;
        }

        .btn2 {
            color: #FFFFFF;
            background: #1D9BF0;
        }

        .btn3 {
            width: 100%;
        }
    }
}
</style>