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

<template>
    <!-- 邀请页 -->
    <div class="area-process">
        <v-head :left-data="state.detail.postUserInfo || null" :rightData="state.detail.remainAmountValue"></v-head>
        <div class="box-process">
            <div class="item" v-for="item, i in state.boxs">
                <hover-tip :txt="item.txt" v-show="item.show || item.openStatus" :icon="item.hover_icon"></hover-tip>
                <img :src="item.icon" alt="" @mouseenter="mouseItem(i)" @mouseleave="mouseLeaveItem(i)" />
                <img :src="require('@/assets/img/icon-flash-active.png')" alt="" class="flash"
                    v-if="item.openStatus == 0 && item.taskFinishStatus == 1" />
            </div>
            <div class="line">
                <div class="full" ref="line_full"></div>
            </div>
        </div>
        <div class="area-success-message" @mouseover="mouseOver" @mouseleave="mouseLeave">
            <div class="content-success-message" ref="content_success_message">
                <div class="success-message" v-for="item, index in state.success_message_list" :key="index">
                    <img :src="item.userInfo.avatarUrl" alt="" />
                    <span>{{ item.userInfo.nickName }} </span> &nbsp;
                    <span>Opened Treasure Chest</span>
                </div>
            </div>
        </div>
    </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">
            {{ 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 { receiveList } from '@/http/treasure.js'
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'

let content_success_message = ref(null)
let state = inject('state')

// ---- 走马灯
state.success_message_list = []



// ---- 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')


// ---- tab区域 ----
state.tab_index = 0
state.tabs = [{
    txt: 'invite friends'
}, {
    txt: 'invited'
}]


watch(state, () => {
    if (content_success_message && content_success_message.value) {
        let dom = content_success_message.value
        let width = dom.clientWidth
        let s = parseInt(width / 80)
        dom.style.animationDuration = s + 's'
    }
})

state.boxs = []

let line_full = ref(null)
onMounted(() => {
    state.inviteInit()
})

state.inviteInit = () => {
    if (state.detail.inviteCount > 0) {
        state.tabs[1].txt = `invited(${state.detail.inviteCount})`
    }

    state.detail.treasureRecords.forEach((item, index) => {
        if (item.openStatus == 0) {
            item.hover_icon = require('@/assets/svg/icon-user.svg')
            // 最后一条
            if ((index + 1) == state.detail.treasureRecords.length) {
                item.icon = gold_close_box
            } else {
                item.icon = silver_close_box
            }
            item.txt = item.inviteProgress
        } else {
            item.icon = silver_open_box
            item.hover_icon = require('@/assets/svg/icon-green-yes.svg')
            // 最后一条
            if ((index + 1) == state.detail.treasureRecords.length) {
                item.icon = gold_open_box
            } else {
                item.icon = silver_open_box
            }
            item.txt = '$' + item.amountValue
        }

        state.boxs.push(item)
    })

    receiveList({
        params: {
            postId: state.postId,
            pageNum: 1,
            pageSize: 10,
        }
    }).then((res) => {
        if (res.code == 0) {
            state.success_message_list = res.data
            state.success_message_list = state.success_message_list.concat(state.success_message_list)
            state.success_message_list = state.success_message_list.concat(state.success_message_list)
        }
    })
    btnStatus()

}

const setLineFull = (box_num = 0, needInviteCount = 0, successInviteCount = 0) => {
    if (box_num == 0) {
        line_full.value.style.width = (successInviteCount / needInviteCount) * 80 + 'px'
    } else if (box_num = 1) {
        line_full.value.style.width = ((successInviteCount / needInviteCount) * 100 + 80) + 'px'
    } else if (box_num = 2) {
        line_full.value.style.width = ((successInviteCount / needInviteCount) * 100 + 180) + 'px'
    }
}

const btnStatus = () => {
    for (let i in state.boxs) {
        if (state.boxs[i].taskFinishStatus == 0) {
            let num = state.boxs[i].needInviteCount - state.boxs[i].successInviteCount
            if (num == 1) {
                state.open_btn.txt = 'Invite a friend to open the chest'
            } else {
                state.open_btn.txt = `Invite ${num} friends to open the chest`
            }
            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 Chest'
            state.open_btn.disabled = false
            if (!state.treasureId) {
                state.treasureId = item.id
            }
        }
        if (item.taskFinishStatus == 1) {
            setLineFull(index, item.needInviteCount, item.successInviteCount)
        }
        // 三个箱子全部打开了 
        if (item.openStatus == 1) {
            open_num++
        }
        if (open_num == state.boxs.length) {
            state.open_btn.txt = 'All Chests are Open'
            state.open_btn.disabled = true
        }
    })
}

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

const mouseOver = () => {
    if (content_success_message && content_success_message.value && content_success_message.value.style) {
        content_success_message.value.style.animationPlayState = 'paused'
    }
}
const mouseLeave = () => {
    if (content_success_message && content_success_message.value && content_success_message.value.style) {
        content_success_message.value.style.animationPlayState = 'running'
    }
}

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

    .box-process {
        width: 350px;
        height: 90px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        position: absolute;
        top: 32px;
        left: 13px;

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

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

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

        .item:nth-child(1) {

            margin-left: 56px;
        }

        .item:nth-child(2) {
            width: 60px;
            height: 60px;
            margin-left: 40px;
        }

        .item:nth-child(3) {
            img {
                width: 90px;
                height: 90px;
            }

            margin-left: 40px;
        }

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

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

    }

    .area-success-message {
        height: 30px;
        width: 100%;
        position: absolute;
        bottom: 13px;
        overflow: hidden;

        .content-success-message {

            width: fit-content;
            display: flex;
            animation: rolling 18s linear infinite;

            .success-message {
                cursor: default;
                width: fit-content;
                height: 30px;
                padding: 0 9px;
                border-radius: 100px;
                background: rgba(255, 255, 255, 0.1);
                display: flex;
                align-items: center;
                overflow: hidden;
                margin-right: 15px;

                img {
                    width: 20px;
                    height: 20px;
                    border-radius: 100px;
                    margin-right: 8px;

                }

                span {
                    font-style: normal;
                    font-weight: 500;
                    font-size: 12px;
                    line-height: 14px;
                    white-space: nowrap;
                }

                span:nth-child(2) {
                    color: #1D9BF0;
                }

                span:nth-child(3) {
                    color: #A8A8A8;
                }
            }
        }
    }
}

@keyframes rolling {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

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

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

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

.area-info {
    width: 375px;


}
</style>