book-hi/pages-car/components/fast-refund-dialog.vue

<template>
    <common-dialog ref="refundDialog" :showTitle="false" :showFooter="false" :showCancel="false" width="620rpx"
        :custom-style="{ padding: '0', borderRadius: '20rpx' }">
        <view class="refund-dialog-box">
            <view class="icon-area">
                <u-icon name="checkmark-circle-fill" size="100" color="#ff9900"></u-icon>
            </view>
            <view class="refund-title">
                尊敬的用户 您可享极速到账
            </view>
            <view class="refund-desc">
                商品未发货，本次退款尊享未发秒退服务
            </view>
            <button class="confirm-refund-btn" @click="confirmRefund">
                确认退款 ¥ {{ order ? order.payMoney : '0.00' }}
            </button>
        </view>
    </common-dialog>
</template>

<script>
    import CommonDialog from '@/components/common-dialog.vue';
    export default {
        components: {
            CommonDialog
        },
        data() {
            return {
                order: null
            };
        },
        methods: {
            open(order) {
                this.order = order;
                this.$refs.refundDialog.openPopup();
            },
            closePopup() {
                this.$refs.refundDialog.closePopup();
            },
            confirmRefund() {
                if (!this.order) return;
                this.$u.api.fastRefundAjax({
                    orderId: this.order.orderId
                }).then(res => {
                    if (res.code == 200) {
                        this.$u.toast('退款申请提交成功');
                        this.closePopup();
                        this.$emit('refresh');
                    } else {
                        this.$u.toast(res.msg || '退款申请失败');
                    }
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .refund-dialog-box {
        padding: 50rpx 40rpx 80rpx;
        position: relative;
        background: #fff;

        .close-btn {
            position: absolute;
            top: 20rpx;
            right: 20rpx;
            padding: 10rpx;
            z-index: 10;
        }

        .icon-area {
            display: flex;
            justify-content: center;
            margin-bottom: 30rpx;
        }

        .refund-title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 20rpx;
            text-align: center;
        }

        .refund-desc {
            font-size: 26rpx;
            color: #999;
            margin-bottom: 50rpx;
            text-align: center;
        }

        .confirm-refund-btn {
            background: #333;
            color: #FFE4B5;
            font-size: 30rpx;
            border-radius: 44rpx;
            height: 88rpx;
            line-height: 88rpx;
            font-weight: 500;

            &::after {
                border: none;
            }

            &:active {
                opacity: 0.9;
            }
        }
    }
</style>