yihuo/pages/store_detail/convert_confirm.vue

<template>
    <view class="cu-modal" :class="{ show: visible }">
        <view class="mask" @click="close"></view>
        <view class="cu-dialog wrapper" v-if="visible">
            <view class="content">
                <view class="marginT15 title">确定要全部兑换吗？</view>

                <view style="margin: 0 5px 0 20px">
                    <scroll-view scroll-y style="height: 440rpx">
                        <view class="flex-wrap flex-align-around">
                            <view v-for="item in goods2" :key="item.data.id" class="item">
                                <image
                                    class="super-image"
                                    :src="item.data.cover"
                                    mode="aspectFit"
                                />

                                <view
                                    class="bg-title bold"
                                    :style="
                                        'background-image:url(' + ossurl.welfare.detail.numBg + ')'
                                    "
                                >
                                    <text class="font0">x</text>
                                    {{ item.total }}
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
                <view class="marginY12 flex-align-center" style="color: #c49300">
                    总可兑换：
                    <view style="color: #644b00; font-size: 32rpx" class="bold">{{ total }}</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/utils'
    import resource from '@/utils/resource'
    import ossurl from '@/utils/ossurl'
    export default {
        data() {
            return {
                ossurl,
                resource,
                LEVEL_MAP,
                visible: false,
                goods2: [],
                goods: [],
                total: 0
            }
        },
        computed: {
            itemSize() {
                let width = (this.$store.state.systemInfo.screenWidth - 80 - 30 - 8) / 3
                let height = (132 / 88) * width
                return { width, height }
            }
        },
        methods: {
            show(goods, total) {
                this.goods = goods
                let goodsMap = {}
                goods.forEach((item) => {
                    let key = item.spuId + '_' + item.level
                    let obj = goodsMap[key]
                    if (obj) {
                        goodsMap[key] = {
                            total: obj.total + 1,
                            data: obj.data
                        }
                    } else {
                        goodsMap[key] = {
                            total: 1,
                            data: item
                        }
                    }
                })
                this.total = total
                this.goods2 = Object.values(goodsMap)
                this.visible = true
            },
            async apply() {
                this.realApply()
            },
            async realApply() {
                const res = await this.$service.award.convertApply(
                    this.goods.map((item) => item.id)
                )
                if (res) {
                    this.$emit('convert-success')
                    this.close()
                }
            },
            close() {
                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;

            .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 {
                margin: 0 13px 13px 0;
                position: relative;
                width: 158rpx;
                height: 206rpx;
                background: #ffffff;
                border-radius: 12rpx 12rpx 12rpx 12rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 2rpx solid #eaeaea;
                .super {
                    position: absolute;
                    z-index: 0;
                    left: 0;
                    top: 0;
                }
                .super-image {
                    width: 146rpx;
                    height: 170rpx;
                }
                .super-text {
                    width: 125rpx;
                    height: 48rpx;
                    position: absolute;
                    bottom: 10rpx;
                }
                .bg-title {
                    width: 36rpx;
                    height: 32rpx;
                    background-size: 100% 100%;
                    font-size: 20rpx;
                    font-family: Arial, Arial;
                    font-weight: 400;
                    color: #ffffff;
                    line-height: 32rpx;
                    text-align: center;
                    position: absolute;
                    right: 0;
                    top: 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>