de-net/src/view/iframe/treasure-hunt/components/boxs.vue

<template>
    <div class="area-boxs">
        <!-- 箱子 -->
        <div class="box-process">
            <div class="item" v-for="item, i in state.boxs"
                :key="i"
                :style="{ 'margin-left': item.icon_margin_left, 'z-index': 10 - i }">
                <!--悬浮 -->
                <!-- < hover - tip : txt=" item.txt" v-show="item.show || item.openStatus" :icon="item.hover_icon">
                </hover-tip> -->
                <!-- 金额 -->
                <span class="money" :style="{ 'color': item.money_color, 'top': item.money_top }">
                    <img :src="require('@/assets/svg/icon-green-yes.svg')" alt="" v-if="item.openStatus == 1" />
                    {{ item.txt }}
                </span>
                <!-- 宝箱 -->
                <img :src="item.icon" alt="" @mouseenter="mouseItem(i)" @mouseleave="mouseLeaveItem(i)"
                    :style="{ 'width': item.icon_width, 'height': item.icon_width }" class="box"
                    :class="{ 'active': i == 0 && item.openStatus == 0 ? true : item.openStatus == 0 && state.boxs[i-1]['openStatus'] == 1  }" @click="clickBox(item)" />
                <!-- 发光 -->
                <img :src="require('@/assets/img/icon-flash-active.png')" alt="" class="flash"
                    v-if="i == 0 && item.openStatus == 0 ? true : item.openStatus == 0 && state.boxs[i-1]['openStatus'] == 1"
                    :style="{ 'margin-left': item.flash_margin_top, 'margin-top': item.flash_margin_top, 'width': item.flash_width, 'height': item.flash_width }" />

                <!-- 进度条 -->
                <div class="line" :style="{ 'width': item.line_width, 'left': item.line_left }">
                    <div class="full" :style="{ 'width': item.full_width }"></div>
                </div>
            </div>
        </div>
        <!-- 人数 -->
        <div class="people">
            <div class="item" v-for="item, i in state.boxs"
                :style="{ 'margin-left': item.icon_margin_left, 'width': item.icon_width }">
                <img :src="require('@/assets/svg/icon-user1.svg')" alt="" />
                <span>{{ item.inviteProgress }}</span>
            </div>

        </div>
    </div>
</template>
<script setup>
import { onMounted, inject, watch } from 'vue'
import { checkIsLogin } from '@/uilts/chromeExtension'


let state = inject('state')
// ---- box 区域
let silver_close_box = require('@/assets/img/icon-silver-close-box.png')
let silver_open_box = require('@/assets/img/icon-silver-open-box.png')
let gold_open_box = require('@/assets/img/icon-gold-open-box.png')
let gold_close_box = require('@/assets/img/icon-gold-close-box.png')
let purple_open_box = require('@/assets/img/icon-purple-open-box.png')
let purple_close_box = require('@/assets/img/icon-purple-close-box.png')
let global_refresh = inject('global_refresh')

watch(global_refresh, () => {
    if (global_refresh.value) {
        init()
    }
})

onMounted(() => {
    init()
})
const init = () => {
    boxsStatus()
    btnStatus()
}

async function clickBox(item) {
    let _userInfo = await checkIsLogin()
    if (!_userInfo) {
        return
    }

    if (item.openStatus == 0 && item.taskFinishStatus == 1 && state.btn_loading == false) {
        state.btn_loading = true
        state.treasureOpen()
    }
}

state.boxs = [{
    icon: '',
    icon_open: silver_open_box,
    icon_close: silver_close_box,
    icon_margin_left: '17px',
    icon_width: '46px',

    show: false,
    flash_width: '70px',
    flash_margin_top: `-${70 / 2}px`,
    line_width: '25px',
    line_left: `-${25 - 10}px`,
    money_color: '#BFCCE4',
    money_top: '-20px'
}, {
    icon: '',
    icon_open: gold_open_box,
    icon_close: gold_close_box,

    show: false,
    icon_width: '46px',
    flash_width: '70px',
    icon_margin_left: '33px',
    flash_margin_top: `-${70 / 2}px`,
    line_width: '55px',
    line_left: `-${55 - 10}px`,
    money_color: '#FCB936', money_top: '-20px'

}, {
    icon: '',
    icon_open: gold_open_box,
    icon_close: gold_close_box,

    show: false,
    icon_width: '66px',
    flash_width: '90px',
    icon_margin_left: '31px',
    flash_margin_top: `-${90 / 2}px`,
    line_width: '60px',
    line_left: `-${60 - 15}px`,
    money_color: '#FCB936', money_top: '-15px'

}, {
    icon: purple_close_box,
    icon_open: purple_open_box,
    icon_close: purple_close_box,
    show: false,
    icon_width: '84px',
    flash_width: '108px',
    icon_margin_left: '23px',
    flash_margin_top: `-${108 / 2}px`,
    line_width: '60px',
    line_left: `-${60 - 20}px`,
    money_color: '#FCB936', money_top: '-10px'
}]

const setLineFull = (box_num = 0, finishNeedInviteCount = 0, successInviteCount = 0) => {
    state.boxs[box_num].full_width = `${(successInviteCount / finishNeedInviteCount) * 100}%`
}

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
        }
    })
}



const mouseItem = (i) => {
    state.boxs[i].show = true
    state.active_share_channel = true
}
const mouseLeaveItem = (i) => {
    state.boxs[i].show = false
    state.active_share_channel = false
}

const boxsStatus = () => {
    state.detail.treasureRecords.forEach((item, index) => {
        let box = state.boxs[index]
        if (item.openStatus == 0) {
            box.icon = box.icon_close
        } else {
            box.icon = box.icon_open
        }
        box.txt = `$${item.targetAmountUsdValue}`
        state.boxs[index] = Object.assign(box, item)
    })
}

</script>
<style lang="scss" scoped>
.area-boxs {
    position: relative;

    .people {
        display: flex;
        position: absolute;
        bottom: 0px;
        left: 10px;

        .item {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            user-select: none;

            img {
                user-select: none;
                width: 16px;
                height: 16px;
                margin-right: 3px;
                cursor: pointer;
            }

            span {
                color: #FFFFFF;
                opacity: 0.4;
                font-weight: 500;
                font-size: 12px;
            }


        }

    }

    .box-process {
        width: 350px;
        height: 90px;
        margin: 0 auto;
        display: flex;
        align-items: center;

        img {
            width: 60px;
            height: 60px;
            z-index: 2;
            user-select: none;
        }



        .item {
            z-index: 2;
            display: flex;
            justify-content: center;
            position: relative;

            .box {

                cursor: pointer;
            }

            .active {
                animation: bounce-up 0.5s linear infinite;
            }

            .flash {
                position: absolute;
                left: 50%;
                top: 50%;
                z-index: 0;
                width: 100%;
                height: 100%;
            }

            .money {
                display: flex;
                align-items: center;
                white-space: nowrap;
                position: absolute;
                top: -20px;
                font-weight: 700;
                font-size: 16px;

                img {
                    width: 13px;
                    height: 13px;
                    margin-right: 4px;
                }
            }

            .line {
                width: 40px;
                height: 4px;
                background: rgba(255, 210, 59, 0.2);
                position: absolute;
                border-radius: 100px;
                overflow: hidden;
                left: -40px;
                top: 50%;

                .full {
                    position: absolute;
                    left: 0;
                    top: 0;
                    height: 4px;
                    width: 0px;
                    background: #FFD23B;
                }
            }
        }
    }
}

@keyframes bounce-up {
    25% {
        -webkit-transform: translateY(1px);
    }

    50%,
    100% {
        -webkit-transform: translateY(0);
    }

    75% {
        -webkit-transform: translateY(-1px);
    }
}
</style>