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

<template>
    <!-- 邀请页 -->
    <div class="area-process" v-show-log="state.log_invite_show">
        <v-head :left-data="state.detail.postUserInfo || null" :rightData="state.detail.remainAmountUsdValue"></v-head>
        <v-carousel></v-carousel>
        <v-boxs></v-boxs>
    </div>

    <div class="area-nav">
        <div class="item" :class="{ active: state.tab_index == i }" @click="state.tab_index = i"
            v-for="item, i in state.tabs">
            <img :src="require('@/assets/svg/icon-invite.svg')" alt=""
                :style="{ opacity: state.tab_index == 0 ? '1' : '0.55' }" v-if="i == 0" />
            <img :src="require('@/assets/svg/icon-invite-list.svg')" alt=""
                :style="{ opacity: state.tab_index == 1 ? '1' : '0.55' }" v-if="i == 1" />
            {{ item.txt }}
        </div>
    </div>
    <div class="area-info">
        <invite-friends v-show="state.tab_index == 0"></invite-friends>
        <invite-list v-show="state.tab_index == 1"></invite-list>
    </div>
    <v-dialog v-show="state.dialog.show"></v-dialog>
</template>
<script setup>
import { ref, onMounted, watch, inject } from 'vue'

import VHead from '@/view/iframe/treasure-hunt/components/head.vue'
import InviteList from '@/view/iframe/treasure-hunt/components/invite-list.vue'
import HoverTip from '@/view/iframe/treasure-hunt/components/hover-tip.vue'
import InviteFriends from '@/view/iframe/treasure-hunt/components/invite-friends.vue'
import VDialog from '@/view/iframe/treasure-hunt/components/dialog.vue'
import VBoxs from '@/view/iframe/treasure-hunt/components/boxs.vue'
import VCarousel from '@/view/iframe/treasure-hunt/components/carousel.vue'

import Report from "@/log-center/log"


let state = inject('state')

state.log_invite_show = {
    businessType: Report.businessType.pageView,
    pageSource: Report.pageSource.inviteFriendsPage,
    redPacketType: Report.redPacketType.treasure,
    shareLinkId: state.invite_code,
    myShareLinkId: state.detail.inviteCopyUrl,
    currentInvitedNum: state.inviteCount,
    postId: state.postId
}


// ---- tab区域 ----
state.tab_index = 0
state.tabs = [{
    txt: 'Invite Friends'
}, {
    txt: 'Invited'
}]


let line_full = ref(null)
onMounted(() => {
    state.inviteInit()
    setInterval(() => {
        state.init(() => {
            state.inviteInit()
            state.inviteListRefresh()
        })
    }, 30000)
})

const clickItem = (item) => {
    window.open(`https://twitter.com/${item.userInfo.nickName}`)
}
state.inviteInit = () => {
    // state.boxs = []
    btnStatus()

}

const btnStatus = () => {
    for (let i in state.boxs) {
        if (state.boxs[i].taskFinishStatus == 0) {
            let num = state.boxs[i].finishNeedInviteCount - state.boxs[i].successInviteCount
            if (num == 1) {
                state.open_btn.txt = 'Invite 1 Friend to Open'
            } else {
                state.open_btn.txt = `Invite ${num} Friends to Open`
            }
            state.open_btn.disabled = true
            break
        }
    }

    state.treasureId = ''
    let open_num = 0
    // 有打开的箱子 Open the chest
    state.boxs.forEach((item, index) => {
        if (item.taskFinishStatus == 1 && item.openStatus == 0) {
            state.open_btn.txt = 'Open the Treasure Chest'
            state.open_btn.disabled = false
            if (!state.treasureId) {
                state.treasureId = item.id
            }
        }
        // setLineFull(index, item.finishNeedInviteCount, item.successInviteCount)
        // 三个箱子全部打开了
        if (item.openStatus == 1) {
            open_num++
        }
        if (open_num == state.boxs.length) {
            state.open_btn.txt = 'All Chests Have Been Opened'
            state.open_btn.disabled = true
        }
    })
}





</script>
<style lang="scss"  scoped>
.area-process {
    width: 375px;
    height: 170px;
    background: linear-gradient(179.96deg, #735931 0.04%, #0E0803 53.64%);
    position: relative;
}


.area-nav {
    width: 375px;
    height: 38px;
    display: flex;

    .item {
        display: flex;
        justify-content: center;
        align-items: center;
        user-select: none;
        color: #757575;
        background: #F0F0F0;
        text-align: center;
        width: 50%;
        font-weight: 500;
        font-size: 14px;
        line-height: 38px;
        cursor: pointer;

        img {
            margin-right: 8px;
            width: 20px;
            height: 20px;
        }
    }

    .active {
        background: #FFFFFF;
        color: #000000;
    }
}

.area-info {
    width: 375px;


}
</style>