shuhi-ui/src/views/mallOrder/refund/components/confirm-refund-dialog.vue

<template>
    <ele-modal :width="400" v-model="visible" title="确定后退款将立即退到买家账户" :body-style="{ padding: '30px 40px' }">
        <div class="text-base text-gray-700 mb-6">
            同意申请并退款 ￥{{ refundAmount }} 给买家吗？
        </div>
        
        <template #footer>
            <div class="flex justify-end gap-3">
                <el-button @click="visible = false" class="rounded-full px-6">取消</el-button>
                <el-button type="primary" :loading="loading" @click="handleSubmit" class="rounded-full px-6">同意退款</el-button>
            </div>
        </template>
    </ele-modal>
</template>

<script setup>
import { ref } from 'vue';
import { EleMessage } from 'ele-admin-plus/es';
import request from '@/utils/request';

const visible = ref(false);
const loading = ref(false);
const currentRefundOrderId = ref('');
const refundAmount = ref('0.00');

const emit = defineEmits(['success']);

const open = (refundOrderId, amount) => {
    currentRefundOrderId.value = refundOrderId;
    refundAmount.value = amount || '0.00';
    visible.value = true;
};

const handleSubmit = () => {
    loading.value = true;
    request.post('/shop/shopOrder/refund/refundMoney', {
        refundOrderId: currentRefundOrderId.value
    })
    .then(res => {
        if (res.data.code === 200) {
            EleMessage.success('退款成功');
            visible.value = false;
            emit('success');
        } else {
            EleMessage.error(res.data.msg || '退款失败');
        }
    })
    .catch(e => {
        console.error(e);
        EleMessage.error('网络错误');
    })
    .finally(() => {
        loading.value = false;
    });
};

defineExpose({
    open
});
</script>