yihuo/pages/lottery_more/index.vue

<template>
    <page :nav="false" ref="pageRef">
        <view class="wrapper-p" :class="[num <= 10 ? 'flex-column-align' : 'paddingT30']">
            <view class="lotteryTitle">
                <image class="lotteryTitleimage" :src="ossurl.box.lotteryTitle" mode="aspectFit" />
            </view>
            <view class="content" v-if="tableData && tableData.length > 0">
                <view class="flex-wrap flex-align-center">
                    <view
                        class="flex-column-align-center marginB18 paddingX3"
                        v-for="(item, index) in tableData"
                        :key="item.id"
                    >
                        <card
                            v-if="num == 1"
                            :data="item"
                            :animal="animal"
                            :rotate="false"
                            :size="{ width: 164, height: 250 }"
                            :cover-size="{ width: 134, height: 169, top: 15 }"
                            :text-size="{ width: 107, height: 48, bottom: 16 }"
                            @show-detail="showDetail"
                            :show-add="!!periodQuantity"
                        />
                        <card
                            v-else-if="num == 5"
                            :data="item"
                            :animal="animal"
                            :rotate="false"
                            :size="{ width: 164, height: 250 }"
                            :cover-size="{ width: 134, height: 169, top: 15 }"
                            :text-size="{ width: 107, height: 48, bottom: 16 }"
                            @show-detail="showDetail"
                            :show-add="!!periodQuantity"
                        />
                        <card
                            v-else-if="num >= 10"
                            :data="item"
                            :animal="animal"
                            :rotate="false"
                            :size="{ width: 164, height: 250 }"
                            :cover-size="{ width: 134, height: 169, top: 15 }"
                            :text-size="{ width: 107, height: 48, bottom: 16 }"
                            @show-detail="showDetail"
                            :show-add="!!periodQuantity"
                        />
                    </view>
                </view>
            </view>
        </view>
        <view v-if="roll && roll > 0" class="roll translateX flex-align-center">
            骰子 + {{ roll }}
        </view>
        <view v-if="showResult">
            <view class="bottom-btns flex-align-center">
                <view v-if="!!total && showDh && hide" class="relative dhBtn" @click="dhAll">
                    <view>全部兑换</view>
                    <view class="btnText">共兑换源石 {{ total }}</view>
                </view>
                <view class="relative agianBtn" @click="$router.back()">再来一发</view>
            </view>
            <view class="flex-align-center paddingT12 showStore" @click="$router.replace('store')">
                <view>
                    前往
                    <span class="color-theme storeText">仓库</span>
                    查看
                </view>
            </view>
        </view>
        <goods-detail ref="goodsDetailRef" />
        <king ref="kingRef" />
        <hiddenTask ref="hiddenTaskRef" @refresh="init(true)" />
    </page>
</template>
<script>
    import card from './card'
    import ossurl from '@/utils/ossurl'
    import { LEVEL_MAP } from '@/utils/config'
    import { throttle, message } from '@/utils'
    import goodsDetail from './../store/goods_detail'
    import king from './../lottery/king'
    import store from '@/store'
    import hiddenTask from '../hidden_activity/hidden_task_dialog.vue'

    export default {
        components: { card, goodsDetail, king, hiddenTask },
        data() {
            return {
                LEVEL_MAP,
                ossurl,
                num: 1,
                animal: false,
                tableData: null,
                total: '-',
                showDh: false,
                showResult: false,
                periodQuantity: null,
                roll: 0
            }
        },
        computed: {
            hide() {
                return !this.$store.state.hide
            }
        },
        onLoad(options) {
            this.num = options.num
            this.tradeNo = options.tradeNo
        },
        mounted() {
            this.initData(0, true)
        },
        methods: {
            async initData(count, loading) {
                loading && this.$message.showLoading()
                setTimeout(async () => {
                    await this.getData()
                    if (this.tableData && this.tableData.length > 0) {
                        const closeVibrator = store.getters.closeVibrator
                        if (!closeVibrator) {
                            wx.vibrateLong()
                        }
                        this.$message.hideLoading()
                    } else {
                        if (count < 3) {
                            this.initData(count + 1)
                        } else {
                            this.$message.hideLoading()
                            this.$message.confirm(
                                '购买结果请至订单详情查看',
                                () => {
                                    this.$router.replace('order_award')
                                },
                                '',
                                ['去查看', '返回'],
                                () => this.$router.back()
                            )
                        }
                    }
                }, 400)
            },
            async getData() {
                const res = await this.$service.award.applyResult(this.tradeNo)
                if (res && res.inventoryList) {
                    let array = res.inventoryList
                    if (res.magicFireworksList && res.magicFireworksList.length > 0) {
                        array = [...res.magicFireworksList, ...res.inventoryList]
                    }
                    this.tableData = array
                    this.cacuTotal()
                    if (res.kingRealtime && res.kingRealtime.periodQuantity) {
                        this.periodQuantity = res.kingRealtime.periodQuantity
                    }
                    if (res.richmanTicketRealtime && res.richmanTicketRealtime.changeTicket) {
                        this.roll = res.richmanTicketRealtime.changeTicket
                        setTimeout(() => {
                            this.roll = 0
                        }, 2000)
                    } else {
                        this.roll = 0
                    }
                    this.$nextTick(() => {
                        this.animal = true
                        setTimeout(() => {
                            this.showDh = this.tableData.every(
                                (item) => item.level !== 'B' && item.level !== 'A'
                            )
                            this.showResult = true
                        }, 900)
                    })
                }
                const spuIds = res.inventoryList.map((item) => item.spu.id)
                const hideRes = await this.$service.award.hideTaskStart(JSON.stringify(spuIds))
                if (hideRes === 1 || hideRes === 2) {
                    this.$refs.hiddenTaskRef.show(hideRes)
                }
                return true
            },
            async cacuTotal() {
                let total = 0
                this.tableData.forEach((item) => {
                    total += item.magicAmount
                })
                this.total = total
            },
            async dhAll() {
                if (!this.total) return
                throttle.call(() => {
                    this.realDh()
                })
            },
            async dh(item) {
                if (!item.magicAmount) return
                throttle.call(() => {
                    this.realDh(item)
                })
            },
            async realDh(item) {
                let ids = []
                if (item) {
                    ids = [item.id]
                } else {
                    this.tableData.forEach((item) => {
                        if (item.magicAmount) {
                            ids.push(item.id)
                        }
                    })
                }
                const res = await this.$service.award.convertApply(ids)
                if (res) {
                    if (item) {
                        this.$set(item, 'magicAmount', 0)
                    } else {
                        this.tableData.forEach((item) => {
                            item.magicAmount = 0
                        })
                        this.tableData = [...this.tableData]
                    }
                    this.cacuTotal()
                    if (this.total === 0) {
                        this.$router.back()
                        setTimeout(() => {
                            message.success('兑换成功')
                        }, 200)
                    } else {
                        message.success('兑换成功')
                    }
                }
            },
            showDetail(item) {
                this.$refs.goodsDetailRef.show(item.spu)
            }
        }
    }
</script>
<style></style>
<style lang="scss" scoped>
    .bg {
        position: fixed;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        height: 1624rpx;
    }

    .wrapper-p {
        height: calc(100vh - 90rpx - 128rpx - 70rpx);
        position: relative;
        overflow: scroll;
    }
    .guang {
        position: absolute;
        width: 750rpx;
        height: 744rpx;
        z-index: -1;
    }
    .padding-bottom-num {
        padding-bottom: 238rpx;
    }
    .content {
        position: relative;
        height: 60vh;
        overflow: auto;
        .dh-wrapper {
            position: relative;
            margin-top: 20rpx;
            width: 164rpx;
            height: 46rpx;
            image {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
                z-index: -1;
            }
            .text {
                font-size: 20rpx;
                color: #fff;
            }
        }
    }

    .bottom-btns {
        padding: 40rpx 20rpx 00rpx 20rpx;
        .text {
            width: 100%;
            text-align: center;
            position: absolute;
            bottom: 30rpx;
            font-size: 24rpx;
            color: #fff;
        }
        .image {
            height: 128rpx;
            // width: 100%;
            width: 356rpx;
        }
    }

    .link {
        text-shadow: 0px 0px 20rpx #a76ef4;
        font-weight: 600;
        color: #a76ef4;
        font-size: 32rpx;
        padding-bottom: 100rpx;
        text-align: center;
    }
    .prince-value {
        width: 374rpx;
        height: 52rpx;
        position: relative;
        .image {
            position: absolute;
            left: 0;
            top: 0;
            width: 374rpx;
            height: 52rpx;
        }
        .text {
            color: white;
            font-size: 30rpx;
            position: relative;
        }
    }
    .roll {
        position: absolute;
        opacity: 1;
        bottom: 55%;
        width: 250rpx;
        height: 70rpx;
        background: linear-gradient(270deg, #6c6fff, #a948ff);
        z-index: 2000;
        font-size: 40rpx;
        color: #fff;
    }
    .dhBtn {
        background: #fff7e3;
        border-radius: 40rpx;
        text-align: center;
        height: 80rpx;
        padding: 0 36rpx;
        padding-top: 8rpx;
        font-size: 28rpx;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 350;
        color: #000000;
        margin-right: 20rpx;
        .btnText {
            font-size: 20rpx;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 350;
            color: #735200;
        }
    }
    .agianBtn {
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        padding: 0 50rpx;
        background: #fec433;
        border-radius: 40rpx;
    }

    .showStore {
        font-size: 24rpx;
    }
    .storeText {
        display: inline-block;

        font-size: 24rpx;
    }
    .lotteryTitle {
        padding-top: 80rpx;
        text-align: center;
        padding-bottom: 30rpx;
        .lotteryTitleimage {
            width: 400rpx;
            height: 80rpx;
        }
    }
</style>