eta_mini_crm_front/src/views/order/components/UserDialog.vue

<script setup>
import { ref, reactive } from 'vue'
import {apiOrderConfig} from '@/api/order'
import { InfoFilled } from '@element-plus/icons-vue'
const show = defineModel('show', { type: Boolean, default: false })
const props=defineProps({
    isRefund:{
        type:Boolean,
        default:false
    },
    row:{
        type:Object,
        default:()=>{}
    },
})
const emits = defineEmits(["success"])
emits("success")

watch(() => props.show, (newval) => {
  if (newval) {
    if (!props.isRefund) {
        getRefundData()
    } else {
        refundInfo.value = props.row||{}
    }
  }
})

const refundInfo = ref({})
const remark = ref('')
function getRefundData(){
    apiOrderConfig.getRefundDetail({
        ProductOrderNo:props.row.OrderID,
    }).then(res=>{
        if(res.Ret!==200) return
        refundInfo.value = res.Data||{}
        refundInfo.value.PaymentAmount = res.Data.RefundAmount
        remark.value = refundInfo.value.Remark||''
    })
}

function confirm() {
    apiOrderConfig.postOrderRefund({
        ProductOrderNo:props.row.OrderID,
        Remark:remark.value
    }).then(res=>{
        if(res.Ret!==200) return
        emits("success")
    })
}
</script>

<template>
  <el-dialog
    v-model="show"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    width="30%"
    draggable
    :title="props.isRefund ? '退款' : '退款详情'"
  >
    <div class="dialog-top">
        <div class="dialog-content-top">
            <div class="dialog-top-item">
                退款用户：{{ refundInfo.RealName }}
            </div>
            <div class="dialog-top-item">
                退回账号：{{  }}
            </div>
            <div class="dialog-top-item">
                退款金额：{{ refundInfo.PaymentAmount }}
            </div>
        </div>
        <div class="dialog-content">
            <div class="dialog-content-item">
                退款说明
            </div>
            <el-input
                type="textarea"
                :rows="5"
                placeholder="请输入内容"
                v-model="remark">
            </el-input>
        </div>
    </div>
    <div class="dialog-footer" v-if="props.isRefund">
        <el-button @click="show = false">取 消</el-button>
        <div class="button">
            <el-button type="primary" @click="confirm()" style="margin-right: 10px;">确定</el-button>
            <el-tooltip
                class="box-item"
                effect="dark"
                content="原支付渠道退款"
                placement="top"
            >
                <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
        </div>
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
.dialog-top {
    padding-bottom: 40px;
    .dialog-content-top {
        display: flex;
        justify-content: flex-start;
        padding-bottom: 30px;
        .dialog-top-item {
            flex: 1;
            padding-right: 20px;
        }
    }
    .dialog-content{
        .dialog-content-item {
            padding-bottom: 10px;
        }
    }
}
.dialog-footer {
    display: flex;
    justify-content: space-around;
    padding-bottom: 40px;
    .button {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
}

</style>