yihuo/pages/lottery/result_com.vue

<template>
    <view class="cu-modal" :class="{ show: visible }" v-if="visible">
        <view class="mask"></view>
        <view
            class="wrapper cu-dialog"
            :class="{
                listWrapper: tableData.length > 1
            }"
            :style="{
                backgroundImage: tableData.length == 1 ? 'url(' + ossurl.box.raffleBg + ')' : ''
            }"
        >
            <view class="relative">
                <view class="content paddingY21">
                    <view
                        v-if="tableData.length == 1"
                        class="paddingT22 paddingB2"
                        @click="showDetail(tableData[0])"
                    >
                        <view class="levelTitle">
                            <image
                                :src="LEVEL_MAP[tableData[0].level].titleText"
                                mode="aspectFit"
                            />
                        </view>
                        <view class="superTitle">
                            {{ tableData[0].name }}
                        </view>
                        <image
                            class="super-image translateX"
                            :src="tableData[0].cover"
                            mode="aspectFit"
                        />
                    </view>
                    <view class="listBox" v-else>
                        <view class="lotteryTitle">
                            <image
                                class="lotteryTitleimage"
                                :src="ossurl.box.lotteryTitle"
                                mode="aspectFit"
                            />
                        </view>
                        <scroll-view scroll-y style="height: 700rpx">
                            <view class="flex-wrap flex-align-center paddingT22 paddingB2">
                                <view
                                    v-for="item in tableData"
                                    :key="item.id"
                                    class="marginB15 marginX5"
                                    @click="showDetail(item)"
                                >
                                    <card
                                    v-if="num == 1"
                                        :data="item"
                                        :show-add="!!periodQuantity"
                                    />
                                    <!-- <view
                                        v-if="num == 1"
                                        class="paddingT22 paddingB2"
                                        @click="showDetail(tableData[0])"
                                    >
                                        <view class="levelTitle">
                                            <image
                                                :src="LEVEL_MAP[tableData[0].level].titleText"
                                                mode="aspectFit"
                                            />
                                        </view>
                                        <view class="superTitle">
                                            {{ tableData[0].name }}
                                        </view>
                                        <image
                                            class="super-image translateX"
                                            :src="tableData[0].cover"
                                            mode="aspectFit"
                                        />
                                    </view> -->
                                    <card
                                        v-else
                                        :data="item"
                                        :size="{ width: 196, height: 300 }"
                                        :cover-size="{ width: 160, height: 203, top: 18 }"
                                        :text-size="{ width: 129, height: 58, bottom: 21 }"
                                        :addSize="{ width: 124, height: 28 }"
                                        :show-add="!!periodQuantity"
                                    />
                                </view>
                            </view>
                        </scroll-view>
                    </view>
                    <view v-if="!isDemo" class="flex-align-center paddingT10">
                        <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 v-else class="flex-align-center paddingT10">
                        <view class="relative">
                            <view class="agianBtn" @click="$router.back()">来把真的</view>
                        </view>
                    </view>
                    <view
                        class="flex-align-center paddingT12 showStore"
                        @click="$router.push('store')"
                    >
                        <view>
                            前往
                            <span class="color-theme storeText">仓库</span>
                            查看
                        </view>
                    </view>
                </view>
                <view v-if="roll && roll > 0" class="roll translateX flex-align-center">
                    骰子 + {{ roll }}
                </view>
            </view>
            <view class="paddingT30 flex-align-center">
                <view class="close cuIcon-close" @click="$router.back()"></view>
            </view>
            <view class="flex-align-center paddingT20">
                <view class="color-theme">抽奖动画</view>
                <view class="marginL12">
                    <switch
                        class="purple"
                        :checked="animalChecked"
                        @change="changeAnimalChecked"
                    ></switch>
                </view>
            </view>
        </view>

        <goods-detail ref="goodsDetailRef" />
    </view>
</template>

<script>
    import { throttle } from '@/utils'
    import resource from '@/utils/resource'
    import card from './card'
    import store from '@/store'
    import { SET_CLOSE_ANIMAL } from '@/store/mutation-types'
    import goodsDetail from './../store/goods_detail'
    import ossurl from '@/utils/ossurl'
    import { LEVEL_MAP } from '@/utils/config'
    export default {
        components: { card, goodsDetail },
        props: {
            num: Number,
            isDemo: Boolean,
            periodQuantity: Number
        },
        data() {
            return {
                LEVEL_MAP,
                ossurl,
                resource,
                tableData: [],
                total: 0,
                showDh: false,
                visible: false,
                animalChecked: true,
                roll: 0
            }
        },
        computed: {
            hide() {
                return !this.$store.state.hide
            }
        },
        methods: {
            show(value, rollValue = 0) {
                this.tableData = value
                this.cacuTotal()
                this.visible = true
                this.roll = rollValue
                if (rollValue) {
                    setTimeout(() => {
                        this.roll = 0
                    }, 1500)
                }
            },
            close() {
                this.visible = false
                this.total = 0
                this.showDh = false
                this.tableData = []
            },
            async cacuTotal() {
                let total = 0
                let flag = false
                if (this.tableData && this.tableData.length > 0) {
                    this.tableData.forEach((item) => {
                        if (!!item.magicAmount) {
                            total += item.magicAmount
                        }
                    })
                    this.total = total
                    this.showDh = this.tableData.every(
                        (item) => item.level !== 'B' && item.level !== 'A'
                    )
                }
            },
            changeAnimalChecked(e) {
                const checked = e.detail.value
                store.commit(SET_CLOSE_ANIMAL, !checked)
            },
            async dhAll() {
                if (!this.total) return
                throttle.call(() => {
                    this.realDh()
                })
            },
            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(() => {
                            this.$message.success('兑换成功')
                        }, 200)
                    } else {
                        this.$message.success('兑换成功')
                    }
                }
            },
            showDetail(item) {
                if (!item.spu) return
                this.$refs.goodsDetailRef.show(item.spu)
            }
        }
    }
</script>
<style lang="scss" scoped>
    .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    .wrapper {
        z-index: 1001;
        margin: 0 28rpx;
        width: calc(100vw - 56rpx);
        background-color: transparent;
        position: relative;
        background-size: 100% auto;
        background-repeat: no-repeat;
        padding-top: 200rpx;
        width: 646rpx;
        margin: 0 52rpx;
        &.listWrapper {
            height: auto;
            width: 100%;
            margin: 0;
            .showStore {
                color: #fff;
            }
        }
        .bg_popup {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }

        .content {
            position: relative;
            width: 100%;
            .super-image {
                width: 500rpx;
                height: 420rpx;
            }
            .btn-image {
                height: 100%;
            }
            .levelTitle {
                font-size: 40rpx;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 700;
                color: #000000;
                text-align: center;
                image {
                    width: 110rpx;
                    height: 40rpx;
                }
            }
            .superTitle {
                font-size: 24rpx;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 350;
                color: #b58100;
                line-height: 34rpx;
                text-align: center;
                margin-top: 12rpx;
            }
            .text {
                position: absolute;
                bottom: 20rpx;
                font-size: 20rpx;
                color: #fff;
                width: 100%;
                text-align: center;
            }
            .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;
            }
        }
        .prince-value {
            width: 374rpx;
            height: 52rpx;
            position: relative;
            .image {
                position: absolute;
                left: 0;
                top: 0;
                width: 374rpx;
                height: 52rpx;
            }
            .prince-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;
    }
    .lotteryTitle {
        text-align: center;
        .lotteryTitleimage {
            width: 400rpx;
            height: 80rpx;
        }
    }
    .close {
        width: 64rpx;
        height: 64rpx;
        background: #d8d8d8;
        font-size: 32rpx;
        text-align: center;
        line-height: 64rpx;
        color: #444;
        border-radius: 50%;
    }
</style>