[add][ui]

src/assets/svg/icon-back-2.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.1427 11.3184V13.3184H8.14273L13.6427 18.8184L12.2227 20.2384L4.30273 12.3184L12.2227 4.39844L13.6427 5.81844L8.14273 11.3184H20.1427Z" fill="black"/>
+</svg>

src/assets/svg/icon-user1.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.4">
+<path d="M8 3C8.66304 3 9.29893 3.26339 9.76777 3.73223C10.2366 4.20107 10.5 4.83696 10.5 5.5C10.5 6.16304 10.2366 6.79893 9.76777 7.26777C9.29893 7.73661 8.66304 8 8 8C7.33696 8 6.70107 7.73661 6.23223 7.26777C5.76339 6.79893 5.5 6.16304 5.5 5.5C5.5 4.83696 5.76339 4.20107 6.23223 3.73223C6.70107 3.26339 7.33696 3 8 3ZM8 9.25C10.7625 9.25 13 10.3688 13 11.75V13H3V11.75C3 10.3688 5.2375 9.25 8 9.25Z" fill="white"/>
+</g>
+</svg>

src/uilts/help.js

@@ -1,4 +1,5 @@
 import { appVersionCode } from '@/http/configAPI.js'
+var moment = require('moment')
 
 export function getQueryString(name) {
   let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
@@ -278,3 +279,29 @@ export const getInnerIframeURL = (url) => {
   }
   return iframeUrl;
 }
+
+export const getBeforeTimeFormat = (timestamp) => {
+  let _d1 = moment(new Date().getTime())
+  let _d2 = moment(timestamp)
+  const plural = (n, s) => {
+    let _str = `${n} ${s} ago`
+    if (n > 1) {
+      _str = `${n} ${s}s ago`
+    }
+    return _str
+  }
+  let _d = moment.duration(_d1.diff(_d2)).days()
+  if (_d) {
+    return plural(_d, 'day')
+  }
+  let _h = moment.duration(_d1.diff(_d2)).hours()
+  if (_h) {
+    return plural(_h, 'hour')
+  }
+  let _m = moment.duration(_d1.diff(_d2)).minutes()
+  if (_m) {
+    return plural(_m, 'min')
+  }
+  let _s = moment.duration(_d1.diff(_d2)).seconds()
+  return plural(_s, 'sec')
+}

src/view/iframe/treasure-hunt/all-invite-list.vue

@@ -0,0 +1,242 @@
+<template>
+    <div class="invite-list">
+        <div class="head">
+            <img height="20" :src="require('@/assets/svg/icon-back-2.svg')" @click="clickBack" />
+            <span>{{ state.inviteCount }} People Get Money</span>
+        </div>
+        <div class="content">
+            <div class="error" v-if="state.invited_list.length == 0">
+                Invite people to hunt treasure with you!
+            </div>
+            <div class="list" v-else @scroll="handleScroll($event)">
+                <div class="item" v-for="item in state.invited_list" :key="item.userInfo.uid">
+                    <div class="left">
+                        <img :src="item.userInfo.avatarUrl" alt="" @click="clickItem(item)" />
+                    </div>
+                    <div class="right">
+                        <div>
+                            <div class="name">{{ item.userInfo.nickName }}</div>
+                            <div class="time">{{ getBeforeTimeFormat(item.timestamp) }}</div>
+                        </div>
+                        <div class="money">$123</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+import { inviteList, inviteListRefresh } from '@/http/treasure'
+import { inject, onMounted } from 'vue'
+import { getBeforeTimeFormat } from "@/uilts/help"
+import Report from "@/log-center/log"
+
+let state = inject('state')
+state.invited_list = []
+let page_num = 1
+let page_size = 10
+let list_end = false
+
+const clickBack = () => {
+    state.page = '邀请页'
+}
+
+onMounted(() => {
+    list()
+})
+
+const clickItem = (item) => {
+    window.open(`https://twitter.com/${item.userInfo.nickName}`)
+}
+
+function handleScroll(e) {
+    if (list_end) {
+        return
+    }
+    e = e.target
+    if ((e.clientHeight + e.scrollTop) / e.scrollHeight > .8) {
+        list_end = true
+        inviteListScroll()
+    }
+}
+
+const list = () => {
+    state.inviteListRefresh()
+}
+
+// 刷新时调用
+state.inviteListRefresh = () => {
+    let last_timestamp = 0
+    if (state.invited_list.length > 0) {
+        last_timestamp = state.invited_list[0].timestamp
+    }
+
+    inviteListRefresh({
+        params: {
+            postId: state.postId,
+            lastTimestamp: last_timestamp,
+        }
+    }).then((res) => {
+        if (res.code == 0) {
+            handleCommon(res.data)
+        }
+    })
+}
+
+const handleCommon = (data) => {
+    state.inviteCount = data.inviteCount
+    if (state.inviteCount > 0) {
+        state.tabs[1].txt = `invited(${state.inviteCount})`
+    }
+    if (data.inviteUsers.length > 0) {
+        data.inviteUsers.forEach(item => {
+            if (state.invited_list.filter((item2) => { return item2.userInfo.uid == item.userInfo.uid }).length == 0) {
+                state.invited_list.push(item)
+            }
+        })
+        state.invited_list = state.invited_list.sort((a, b) => {
+            return b.timestamp - a.timestamp
+        })
+
+        list_end = false
+    } else {
+        list_end = false
+    }
+}
+
+// 滚动
+let inviteListScroll = () => {
+    // state.invited_list
+    let last_timestamp = 0
+    let len = state.invited_list.length
+    if (len > 0) {
+        last_timestamp = state.invited_list[len - 1].timestamp
+    }
+
+    inviteList({
+        params: {
+            inviteCode: state.invite_code,
+            postId: state.postId,
+            lastTimestamp: last_timestamp,
+            pageSize: page_size
+        }
+    }).then((res) => {
+        if (res.code == 0) {
+
+            handleCommon(res.data)
+        }
+    })
+}
+
+
+</script>
+<style lang="scss" scoped>
+.invite-list {
+    width: 375px;
+    height: 500px;
+
+    .head {
+        width: 100%;
+        height: 48px;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+
+        background: #FFFFFF;
+        box-shadow: inset 0px -1px 0px #F2F2F2;
+
+        img {
+            width: 24px;
+            height: 24px;
+            margin: 0 12px;
+            cursor: pointer;
+        }
+
+        span {
+            font-style: normal;
+            font-weight: 700;
+            font-size: 17px;
+            line-height: 20px;
+            letter-spacing: 0.3px;
+
+            color: #000000;
+        }
+    }
+
+    .content {
+        position: relative;
+        height: calc(100% - 48px);
+
+        .footer {
+            background: #fff;
+            padding: 10px 16px 25px 16px;
+        }
+
+        .error {
+            height: 204px;
+            color: #BABABA;
+            background-color: #fff;
+            font-weight: 500;
+            font-size: 15px;
+            line-height: 204px;
+            text-align: center;
+
+        }
+
+        .list {
+            background: #fff;
+            overflow-y: auto;
+
+            .item {
+                height: 60px;
+                display: flex;
+                align-items: center;
+
+                .left {
+                    width: 58px;
+                    text-align: center;
+
+                    img {
+                        cursor: pointer;
+                        border-radius: 50px;
+                        width: 30px;
+                        height: 30px;
+                    }
+                }
+
+                .right {
+                    flex: 1;
+                    box-shadow: inset 0px -1px 0px #F2F2F2;
+
+                    display: flex;
+                    align-items: center;
+                    height: 100%;
+                    justify-content: space-between;
+
+                    .name {
+                        color: #000000;
+                        font-weight: 500;
+                        font-size: 15px;
+                        cursor: pointer;
+                    }
+
+                    .time {
+                        color: #A6A6A6;
+                        font-weight: 400;
+                        font-size: 12px;
+                        margin-right: 17px;
+                    }
+
+                    .money {
+                        color: #FCB936;
+                        font-weight: 500;
+                        font-size: 13px;
+                        margin-right: 16px;
+
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,296 @@
+<template>
+    <div class="area-boxs">
+        <!-- 箱子 -->
+        <div class="box-process">
+            <div class="item" v-for="item, i in state.boxs" :style="{ 'margin-left': item.icon_margin_left }">
+                <!--悬浮 -->
+                <!-- < 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 }">
+                    <img :src="require('@/assets/svg/icon-green-yes.svg')" alt="" v-if="item.openStatus == 0" />
+                    {{ 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': item.openStatus == 0 && item.taskFinishStatus == 1 }" />
+                <!-- 发光 -->
+                <img :src="require('@/assets/img/icon-flash-active.png')" alt="" class="flash"
+                    v-if="item.openStatus == 0 && item.taskFinishStatus == 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="" />
+                {{ item.successInviteCount }}/{{ item.finishNeedInviteCount }}
+            </div>
+
+        </div>
+    </div>
+</template>
+<script setup>
+import { onMounted, inject } from 'vue'
+import { object } from '_vue-types@3.0.2@vue-types';
+// ---- 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 state = inject('state')
+state.detail.treasureRecords = [
+    {
+        "id": 1710,
+        "taskFinishStatus": 0,
+        "needInviteCount": 1,
+        "amountValue": "0",
+        "amountUsdValue": "0",
+        "openStatus": 0,
+        "inviteProgress": "0/1",
+        "successInviteCount": 0,
+        "finishNeedInviteCount": 1
+    },
+    {
+        "id": 1711,
+        "taskFinishStatus": 0,
+        "needInviteCount": 5,
+        "amountValue": "0",
+        "amountUsdValue": "0",
+        "openStatus": 0,
+        "inviteProgress": "0/5",
+        "successInviteCount": 0,
+        "finishNeedInviteCount": 4
+    },
+    {
+        "id": 1712,
+        "taskFinishStatus": 0,
+        "needInviteCount": 25,
+        "amountValue": "0",
+        "amountUsdValue": "0",
+        "openStatus": 0,
+        "inviteProgress": "0/25",
+        "successInviteCount": 0,
+        "finishNeedInviteCount": 20
+    }
+]
+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'
+}, {
+    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'
+
+}, {
+    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: '55px',
+    line_left: `-${55 - 15}px`,
+    money_color: '#FCB936'
+
+}, {
+    icon: '',
+    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: '55px',
+    line_left: `-${55 - 18}px`,
+    money_color: '#FCB936'
+}]
+
+const setLineFull = (box_num = 0, finishNeedInviteCount = 0, successInviteCount = 0) => {
+    state.boxs[box_num].full_width = `${(successInviteCount / finishNeedInviteCount) * 100}%`
+}
+
+onMounted(() => {
+    boxsStatus()
+    console.log('state.boxs', state.boxs)
+})
+
+const mouseItem = (i) => {
+    state.boxs[i].show = true
+}
+const mouseLeaveItem = (i) => {
+    state.boxs[i].show = 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.amountUsdValue}`
+        state.boxs[index] = Object.assign(box, item)
+    })
+}
+
+</script>
+<style lang="scss" scoped>
+.area-boxs {
+    position: relative;
+
+    .people {
+        display: flex;
+        position: absolute;
+        bottom: 0px;
+
+
+        .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;
+            }
+
+            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 {
+                position: absolute;
+                top: -20px;
+                font-weight: 700;
+                font-size: 16px;
+
+                img {
+                    width: 13px;
+                    height: 13px;
+                }
+            }
+
+            .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>

src/view/iframe/treasure-hunt/components/carousel.vue

@@ -0,0 +1,176 @@
+<template>
+
+    <div class="area-carousel">
+        <!-- left -->
+        <div class="area-left" @click="state.page = '总邀请者页'">
+            <div>
+                <img :src="require('@/assets/svg/icon-user1.svg')" alt="" />
+                <span>{{ state.inviteCount }}</span>
+            </div>
+            <div>Get Money</div>
+        </div>
+        <div class="area-right">
+            <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"
+                        @click="clickItem(item)">
+                        <img :src="item.userInfo.avatarUrl" alt="" />
+                        <span>Get</span> &nbsp;
+                        <span>$</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</template>
+<script setup>
+import { inject, ref, onMounted } from 'vue'
+import { receiveList } from '@/http/treasure.js'
+let content_success_message = ref(null)
+let state = inject('state')
+// ---- 走马灯
+state.success_message_list = []
+
+onMounted(() => {
+    receiveList({
+        params: {
+            postId: state.postId,
+            pageNum: 1,
+            pageSize: 1000,
+        }
+    }).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)
+
+            if (content_success_message && content_success_message.value) {
+                let dom = content_success_message.value
+                let s = state.success_message_list.length * 4
+                dom.style.animationDuration = s + 's'
+            }
+        }
+    })
+})
+
+
+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-carousel {
+    width: 100%;
+    display: flex;
+
+    .area-left {
+        cursor: pointer;
+        user-select: none;
+        width: 78px;
+
+
+        div:nth-child(1) {
+            margin-bottom: 6px;
+            display: flex;
+            align-items: center;
+
+            img {
+                width: 16px;
+                height: 16px;
+                margin-left: 14px;
+                margin-right: 6px;
+            }
+
+            span {
+                color: #FFFFFF;
+                font-weight: 600;
+                font-size: 12px;
+            }
+        }
+
+        div:nth-child(2) {
+            text-align: center;
+            color: #FFFFFF;
+            opacity: 0.4;
+            font-weight: 400;
+
+        }
+
+    }
+
+    .area-right {
+        flex: 1;
+        overflow: hidden;
+
+        .area-success-message {
+            height: 30px;
+            width: 100%;
+
+            .content-success-message {
+                width: fit-content;
+                display: flex;
+                animation: rolling 18s linear infinite;
+                animation-duration: 10s;
+                animation-play-state: running;
+
+                .success-message {
+                    cursor: pointer;
+                    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: 10px;
+
+                    img {
+                        width: 20px;
+                        height: 20px;
+                        border-radius: 100px;
+                        margin-right: 5px;
+
+                    }
+
+                    span {
+                        font-style: normal;
+                        font-weight: 500;
+                        font-size: 12px;
+                        line-height: 14px;
+                        white-space: nowrap;
+                    }
+
+                    span:nth-child(2) {
+                        color: #FFFFFF;
+                        opacity: 0.5;
+
+                    }
+
+                    span:nth-child(3) {
+                        color: #FFFFFF;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@keyframes rolling {
+    from {
+        transform: translateX(0);
+    }
+
+    to {
+        transform: translateX(-50%);
+    }
+}
+</style>

src/view/iframe/treasure-hunt/index.vue

@@ -1,12 +1,14 @@
 <template>
-    <v-cover v-show="state.page == '封面页'"></v-cover>
+    <v-cover v-if="state.page == '封面页'"></v-cover>
     <v-invite v-if="state.page == '邀请页'"></v-invite>
     <v-result v-if="state.page == '开奖页'"></v-result>
+    <all-invite-list v-if="state.page == '总邀请者页'"></all-invite-list>
     <open-box v-show="state.open_box.show"></open-box>
     <v-toast :show="state.toast.show" :txt="state.toast.txt" :has_icon="state.toast.has_icon"></v-toast>
     <div v-show="state.loading_redbag" class="redbag">
         <img :src="require('@/assets/img/icon-loading-redbag.png')" alt />
     </div>
+
 </template>
 <script setup>
 import { reactive, provide, onMounted } from 'vue'
@@ -18,6 +20,7 @@ import { reSetBindTwtterId, reSetBindPostContent, reSetBindRepost } from '@/http
 import { getQueryString } from '@/uilts/help'
 import { getChromeStorage, sendChromeTabMessage } from '@/uilts/chromeExtension.js'
 import VToast from '@/view/iframe/treasure-hunt/components/toast.vue'
+import AllInviteList from '@/view/iframe/treasure-hunt/all-invite-list.vue'
 import OpenBox from '@/view/iframe/treasure-hunt/components/open-box.vue'
 import Report from "@/log-center/log"
 

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

@@ -2,27 +2,8 @@
     <!-- 邀请页 -->
     <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>
-        <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"
-                    @click="clickItem(item)">
-                    <img :src="item.userInfo.avatarUrl" alt="" />
-                    <span>{{ item.userInfo.nickName }} </span> &nbsp;
-                    <span>Opened Treasure Chest</span>
-                </div>
-            </div>
-        </div>
+        <v-carousel></v-carousel>
+        <v-boxs></v-boxs>
     </div>
 
     <div class="area-nav">
@@ -43,16 +24,18 @@
 </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'
+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 content_success_message = ref(null)
+
 let state = inject('state')
 
 state.log_invite_show = {
@@ -65,15 +48,6 @@ state.log_invite_show = {
     postId: state.postId
 }
 
-// ---- 走马灯
-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
@@ -83,7 +57,6 @@ state.tabs = [{
     txt: 'Invited'
 }]
 
-state.boxs = []
 
 let line_full = ref(null)
 onMounted(() => {
@@ -100,73 +73,10 @@ const clickItem = (item) => {
     window.open(`https://twitter.com/${item.userInfo.nickName}`)
 }
 state.inviteInit = () => {
-    state.boxs = []
-    state.detail.treasureRecords.forEach((item, index) => {
-        if (item.openStatus == 0) {
-            item.hover_icon = require('@/assets/svg/icon-user.svg')
-            if (index > 0) {
-                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 > 0) {
-                item.icon = gold_open_box
-            } else {
-                item.icon = silver_open_box
-            }
-            item.txt = '$' + item.amountUsdValue
-        }
-
-        state.boxs.push(item)
-    })
-
-    receiveList({
-        params: {
-            postId: state.postId,
-            pageNum: 1,
-            pageSize: 100,
-        }
-    }).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)
-
-            if (content_success_message && content_success_message.value) {
-                let dom = content_success_message.value
-                let s = state.success_message_list.length * 4
-                dom.style.animationDuration = s + 's'
-            }
-        }
-    })
+    // state.boxs = []
     btnStatus()
 
 }
-let line_width = 0
-const setLineFull = (box_num = 0, finishNeedInviteCount = 0, successInviteCount = 0) => {
-    if (box_num == 0) {
-        // 第一个宝箱起点是0，终点是55
-        line_width = (successInviteCount / finishNeedInviteCount) * 55
-    } else if (box_num == 1) {
-        if (line_width == 55) {
-            // 第二个宝箱起点88，终点是155
-            line_width = 88
-            line_width = (successInviteCount / finishNeedInviteCount) * (155 - line_width) + line_width
-        }
-    } else if (box_num == 2) {
-        if (line_width == 155) {
-            line_width = 192
-            // 第二个宝箱起点是192，终点是260
-            line_width = (successInviteCount / finishNeedInviteCount) * (260 - line_width) + line_width
-        }
-    }
-    line_full.value.style.width = line_width + 'px'
-}
 
 const btnStatus = () => {
     for (let i in state.boxs) {
@@ -193,7 +103,7 @@ const btnStatus = () => {
                 state.treasureId = item.id
             }
         }
-        setLineFull(index, item.finishNeedInviteCount, item.successInviteCount)
+        // setLineFull(index, item.finishNeedInviteCount, item.successInviteCount)
         // 三个箱子全部打开了
         if (item.openStatus == 1) {
             open_num++
@@ -205,23 +115,9 @@ const btnStatus = () => {
     })
 }
 
-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>
@@ -230,144 +126,8 @@ const mouseLeave = () => {
     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;
-            animation-duration: 10s;
-            animation-play-state: running;
-
-            .success-message {
-                cursor: pointer;
-                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;