yihuo/pages/store/convert_all.vue

<template>
    <view class="cu-modal" :class="{ show: visible }">
        <view class="cu-dialog wrapper">
            <view class="content">
                <view class="marginT15 title">确定要全部兑换吗？</view>
                <view class="marginT27 marginB20 flex-column-align-center" v-if="nums">
                    <view
                        v-if="nums.D"
                        class="item flex-align paddingL25"
                        @click="DCheck = !DCheck"
                    >
                        <view class="checkBox" v-if="DCheck">
                            <view class="cuIcon-check"></view>
                        </view>
                        <view class="">
                            <image class="icon-title" :src="LEVEL_MAP.D.titleText" />
                            <view class="font2 paddingY3">
                                共{{ nums.D.count }}件，可兑换{{ nums.D.amount }}源石
                            </view>
                        </view>
                    </view>
                    <view
                        v-if="nums.C"
                        class="item flex-align paddingL25 marginT30"
                        @click="CCheck = !CCheck"
                    >
                        <view class="checkBox" v-if="CCheck">
                            <view class="cuIcon-check"></view>
                        </view>

                        <view class="">
                            <image class="icon-title" :src="LEVEL_MAP.C.titleText" />
                            <view class="font2 paddingY3">
                                共{{ nums.C.count }}件，可兑换{{ nums.C.amount }}源石
                            </view>
                        </view>
                    </view>
                </view>
                <view class="flex-align-center paddingB15">
                    <view class="applyBtn" @click="apply">确认兑换</view>
                </view>
            </view>
            <view class="flex-align-center marginT30">
                <image
                    :src="resource.icon_close"
                    @click="close"
                    style="width: 60rpx; height: 60rpx"
                />
            </view>
        </view>
    </view>
</template>

<script>
    import { LEVEL_MAP } from '@/utils/config'
    import { throttle } from '@/utils'
    import resource from '@/utils/resource'
    export default {
        data() {
            return {
                nums: null,
                LEVEL_MAP,
                resource,
                visible: false,
                CCheck: false,
                DCheck: false
            }
        },
        methods: {
            show(res) {
                let nums = {}
                res.forEach((item) => {
                    if (item.level === 'C') {
                        nums.C = item.statistic
                    }
                    if (item.level === 'D') {
                        nums.D = item.statistic
                    }
                })
                this.DCheck = !!nums.D
                this.CCheck = !nums.D && nums.C

                this.nums = nums
                this.visible = true
            },
            async apply() {
                if (!this.CCheck && !this.DCheck) return
                throttle.call(this.realApply)
            },
            async realApply() {
                let levels = []
                this.CCheck && levels.push('C')
                this.DCheck && levels.push('D')
                const res = await this.$service.award.convertAll(levels)
                if (res) {
                    this.$emit('convertSuccess')
                    this.close()
                }
            },
            close() {
                this.nums = null
                this.visible = false
            }
        }
    }
</script>
<style lang="scss" scoped>
    .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    .wrapper {
        width: 100%;
        background: transparent;
        .content {
            margin: 0 20px;
            background: #ffffff;
            border-radius: 26rpx;
            border: 4rpx solid;
            .title {
                font-size: 48rpx;
                font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
                font-weight: 700;
                color: #000000;
                text-align: center;
                padding-top: 50rpx;
                padding-bottom: 30rpx;
            }
            .item {
                width: 520rpx;
                height: 120rpx;

                background: #fff7e3;
                position: relative;

                border-radius: 4rpx;
                overflow: hidden;
                .icon-title {
                    width: 110rpx;
                    height: 32rpx;
                }
                .un-check {
                    width: 32rpx;
                    height: 32rpx;
                    background: rgba(99, 108, 255, 0.4);
                    border: 1rpx solid rgba(99, 108, 255, 1);
                }
                .check {
                    width: 32rpx;
                    height: 32rpx;
                }
                .checkBox {
                    width: 32rpx;
                    height: 28rpx;
                    background: #000;
                    color: #fec433;
                    font-weight: bold;
                    font-size: 24rpx;
                    text-align: center;
                    line-height: 28rpx;
                    border-radius: 12rpx 0 0 0;
                    position: absolute;
                    right: 0;
                    bottom: 0;
                }
            }
        }
    }
    .applyBtn {
        width: 426rpx;
        height: 64rpx;
        background: #fec433;
        border-radius: 178rpx 178rpx 178rpx 178rpx;
        font-size: 28rpx;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 400;
        color: #000000;
        text-align: center;
        line-height: 64rpx;
    }
</style>