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

<template>
    <v-cover v-if="state.page == '封面页'"></v-cover>
    <v-invite v-if="state.page == '邀请页'"></v-invite>
    <v-result v-if="state.page == '开奖页'"></v-result>
    <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>
</template>
<script setup>
import { reactive, provide, onMounted } from 'vue'
import VCover from '@/view/iframe/treasure-hunt/cover.vue'
import VInvite from '@/view/iframe/treasure-hunt/invite.vue'
import VResult from '@/view/iframe/treasure-hunt/result.vue'
import { inviteDetail, treasureDetail, treasureOpen } from '@/http/treasure.js'
import { reSetBindTwtterId, reSetBindRepost } from '@/http/help.js'
import { getQueryString } from '@/uilts/help'
import VToast from '@/view/iframe/treasure-hunt/components/toast.vue'
import OpenBox from '@/view/iframe/treasure-hunt/components/open-box.vue'


let state = reactive({
    page: '',
    detail: {},
    btn_loading: false,
    open_box: {
        show: false,
        data: {}
    },
    open_btn: {
        txt: '',
        disabled: false
    },
    dialog: {
        show: false,
    },
    start_task: {},
    toast: {}
})
provide('state', state)

let params = {}
onMounted(() => {
    params = JSON.parse(getQueryString('params') || '{}')
    state.postId = params.post_Id || ''
    state.tweetId = params.tweet_Id || ''
    state.invite_code = params.invite_code || ''
    state.init()
})

state.init = (callback) => {
    if (params.page_type == '邀请链接') {
        // 邀请链接
        inviteDetail({
            params: {
                inviteCode: params.invite_code
            }
        }).then((res) => {
            if (res.code == 0) {

                handleCommon(res, callback)
                // 绑定repostSrcContentId
                if (!res.data.repostSrcContentId) {
                    reSetBindRepost({
                        inviteCode: state.invite_code,
                        tweetId: state.tweetId
                    })
                }
            }
        })

    } else if (params.page_type == '原始链接') {
        // 原始链接
        treasureDetail({
            params: {
                postId: params.post_Id
            }
        }).then((res) => {
            if (res.code == 0) {
                handleCommon(res, callback)
            }
        })
    }
}
const handleCommon = (res, callback) => {
    state.detail = res.data
    state.postId = state.detail.postId
    try {
        state.tasks = JSON.parse(state.detail.startCondition)
        let follows = state.tasks.filter((item) => { return item.type == 1 })
        if (follows.length) {
            state.follows = follows[0].relatedUsers
        }
    }
    catch (error) {
        console.error('catch', error)
    }

    handleStatus()
    if (!res.data.srcContentId) {
        reSetBindTwtterId({
            postId: state.postId || '',
            tweetId: state.tweetId || ''
        })
    }
    callback && callback()
}
let silver_open_box_big = require('@/assets/img/icon-silver-open-box-big.png')
let gold_open_box_big = require('@/assets/img/icon-gold-open-box-big.png')

state.treasureOpen = () => {
    treasureOpen({
        params: {
            postId: state.postId,
            treasureId: state.treasureId,
        }
    }).then((res) => {
        if (res.code == 0) {
            // icon
            for (let i in state.boxs) {
                if (state.boxs[i].id == state.treasureId) {
                    if (i > 0) {
                        state.open_box.icon = gold_open_box_big
                    } else {
                        state.open_box.icon = silver_open_box_big
                    }
                    break
                }
            }
            state.open_box.show = true
            state.open_box.data = res.data

            state.init(() => {
                state.inviteInit()
                state.inviteList()
            })
        } else {
            state.btn_loading = false
            switch (String(res.code)) {
                case '2037':
                    state.dialog.show = true
                    break;
                case '2203':
                    state.toast.txt = 'You have already opened the treasure chest'
                    state.toast.show = true
                    break
                case '2208':
                    state.toast.txt = 'No treasure chests to open'
                    state.toast.show = true
                    break
                default:
                    state.toast.txt = 'System Error'
                    state.toast.show = true
                    break
            }
            state.toast.has_icon = false
            setTimeout(() => {
                state.toast.show = false
            }, 2000)

            state.init(() => {
                state.inviteInit()
                state.inviteList()
            })
        }
    })
}

const handleStatus = () => {
    // 如果 夺宝状态 = 未开始
    //   显示未开始页面
    // 如果 夺宝状态 = 进行中
    //   如果 夺宝参与状态 = 未参与夺宝
    //      显示封面页
    //   如果 夺宝参与状态 = 已参与夺宝
    //      显示邀请页
    // 如果 夺宝状态 = 已结束
    //  显示结束页面

    let { status, joinStatus } = state.detail || {}
    state.open_btn.txt = 'Start'
    // 如果 夺宝状态 = 未开始
    if (status == 0) {
        state.page = '封面页'

    }
    // 如果 夺宝状态 = 进行中
    else if (status == 1) {
        // 如果 夺宝参与状态 = 未参与夺宝
        if (joinStatus == 0) {
            // 显示封面页
            state.page = '封面页'
            state.cover_status = '有邀请人'
            state.open_btn.txt = 'Start'
            // state.cover_status = '无邀请人'
            // state.cover_status = '奖励已被领光'
        }
        // 如果 夺宝参与状态 = 已参与夺宝
        else if (joinStatus == 1) {
            state.page = '邀请页'
        }
    }
    // 如果 夺宝状态 = 已结束
    else {
        state.page = '封面页'
        state.cover_status = '奖励已被领光'
        state.open_btn.txt = 'Look for more treasures'
        state.btn_loading = false
    }
}
</script>
<style lang="scss" >
html,
body {
    margin: 0;
    padding: 0;
}
</style>