qimall/backend/modules/mall/views/order/component/order-refund.php

<template id="order-refund">
    <div>
        <el-dialog title="售后处理" :visible.sync="isShowChangeShipping" @close="dialogClose" :close-on-click-modal="false">
            <el-form :model="refundForm" :rules="rules" ref="refundForm" label-width="80px" size="small" label-position="top" style="padding: 0 20px;">
                <el-alert v-if="handle_type == 'send_address'" title="需您同意售后申请，买家才能退货给您； 买家退货后您需再次确认收货后，退款将自动原路退回至买家付款账户。" :closable="false" type="warning"></el-alert>
                <el-alert v-else-if="handle_type == 'exchange'" title="需您同意售后申请，买家才能退货给您； 您确认收到退货后重新发货，买家确认收到退货商品售后结束。" :closable="false" type="warning"></el-alert>

                <el-form-item :label="'售后类型： ' + refund_type[refund_info.type]"></el-form-item>
                <template v-if="handle_type == 'send_address'">
                    <el-form-item :label="'售后金额： ' + refund_info.refund_price"></el-form-item>
<!--                    <el-form-item :label="'实付金额： ' + refund_info.orderDetail.goods_price"></el-form-item>-->
                    <el-form-item :label="'运费金额： ' + (refund_info.order.shipping_money ?? 0)"></el-form-item>
                    <el-form-item label="退款金额:" v-if="refund_info.type != 3">
                        <el-input v-model="refundForm.refund_price"  onInput="value=toNumber(value,2)" style="width:50%"></el-input>
                    </el-form-item>
                    <el-form-item label="备注:" >
                        <el-input v-model="refundForm.refund_remark"  style="width:50%"></el-input>
                    </el-form-item>

                    <el-form-item label="退货地址：">
                        <el-radio-group v-model="refundForm.address_type">
                            <el-radio border :label="1">选择地址 </el-radio>
                            <el-radio border :label="2">使用新地址</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item v-if="refundForm.address_type == 1">
                        <el-select class="width-150" placeholder="请选择退货地址" @change="selectAddress" v-model="default_address.name">
                            <el-option
                                    v-for="items in address_list"
                                    :label="items.name"
                                    :value="items.address">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <div v-if="refundForm.address_type == 1" style="padding-left: 25px;">
                        <el-form-item label="">
                            收件人：{{ default_address.consignee }}<br/>
                            手机号码：{{ default_address.mobile }}<br/>
                            收货地址：{{ default_address.address }}
                        </el-form-item>
                    </div>

                    <div v-if="refundForm.address_type == 2">
                        <el-form-item label="收货人" prop="consignee">
                            <el-input style="width:50%" v-model="refundForm.consignee"></el-input>
                        </el-form-item>

                        <el-form-item label="收货人手机号码" prop="mobile">
                            <el-input style="width:50%" v-model="refundForm.mobile"  maxlength="11" onkeyup="value= value.replace(/[^\d]/g,'')"></el-input>
                        </el-form-item>

                        <el-form-item label="详细地址" prop="address">
                            <el-input style="width:50%" type="textarea" v-model="refundForm.address"></el-input>
                        </el-form-item>
                    </div>
                </template>

                <template v-else-if="handle_type == 'exchange'">
                    <el-form-item :label="'收货人： ' +  refund_info.order.receiver_name"></el-form-item>
                    <el-form-item :label="'收货人手机号码： ' +  refund_info.order.mobile"></el-form-item>
                    <el-form-item :label="'收货地址： ' + refund_info.order.region_name +' '+ refund_info.order.address"></el-form-item>

                    <el-form-item label="快递公司" prop="company">
                        <el-select style="width:30%" v-model="refundForm.express_id" placeholder="请选择快递公司" style="width: 100%" @change="handleExpressChange">
                            <el-option v-for="company in express_companys" :key="company.id" :label="company.name" :value="company.id">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="商家编码" prop="customer_name" v-if="refundForm.saler_express === '京东物流' || refundForm.saler_express === '京东快运'">
                        <el-input style="width:50%"  placeholder="请输入商家编码" size="small" v-model="refundForm.customer_name" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="快递单号" prop="saler_express_no">
                        <el-input style="width:50%" v-model="refundForm.saler_express_no"></el-input>
                    </el-form-item>
                </template>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="isShowChangeShipping = false">取 消</el-button>
                <el-button type="primary" @click="comfirm('refundForm')" :v-loading="changeShippingLoading">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    Vue.component('order-refund', {
        template: '#order-refund',
        props: {
            is_show: {
                type: Boolean,
                default: false
            },
            refund_info: {
                type: Object,
                default: function() {
                    return {};
                }
            },
            changeShippingLoading:{
                type:Boolean,
                default:false
            },
            default_address: {
                type: Object,
                default: function() {
                    return {};
                }
            },
            address_list: {
                type: Array,
                default: function() {
                    return {};
                }
            },
            handle_step_status: {
                default: 0
            },
            handle_type: {
                type: String,
                default: 'send_address'
            }
        },
        data() {
            return {
                express_companys: [],
                refundForm: {
                    address_type: 1,
                    consignee: null,
                    mobile: null,
                    address: null,

                    express_id: null,
                    saler_express: null,
                    saler_express_no: null,
                    customer_name: null,
                    refund_price:'',
                    refund_remark:'',
                },
                isShowChangeShipping: false,
                refund_type: {
                    '1': '仅退款',
                    '2': '退货退款',
                    '3': '换货',
                },
                rules: {
                    consignee: [{
                        required: true,
                        message: '请填写收货人姓名',
                        trigger: 'blur'
                    }],
                    mobile: [{
                        required: true,
                        validator: (rule, value, callback) => {
                            if(value==''){
                                callback('请输入手机号');
                                return
                            }
                            // if(!(/^1\d{10}$/.test(value))){
                            //     callback('手机号码有误，请重填');
                            // }
                            callback();
                        }
                    }],
                    address: [{
                        required: true,
                        message: '请填写收货地址',
                        trigger: 'blur'
                    }],
                }
            }
        },
        watch: {
            is_show: function(newVal) {
                if(newVal){
                    // 获取订单物流信息列表
                    if(isEmpty(this.express_companys)) this.getOrderShipping();
                }
                this.isShowChangeShipping = newVal;
                this.refundForm.id = this.refund_info.id
                this.refundForm.step_status = this.handle_step_status;
                this.refundForm.refund_price = this.refund_info.refund_price
            }
        },

        methods: {
            getOrderShipping(){
                request({
                    params: {
                        r: 'mall/order/shipping'
                    },
                }).then(res => {
                    if(res.data.code == 0){
                        this.express_companys = res.data.data.express_list
                    }
                })
            },
            handleExpressChange(e){
                let index = this.express_companys.findIndex(v => v.id == e);
                this.refundForm.saler_express = this.express_companys[index].name;
            },
            comfirm(formName) {
                if (this.refundForm.address_type == 2) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            this.$emit('submit',this.refundForm);
                        } else {
                            console.log('error submit!!');
                            return;
                        }
                    });
                } else {
                    this.refundForm.mobile = this.default_address.mobile;
                    this.refundForm.consignee = this.default_address.consignee;
                    this.refundForm.address = this.default_address.address;
                    this.$emit('submit',this.refundForm);
                }
            },
            dialogClose() {
                this.$emit('close')
            },
            selectAddress(data) {
                this.$emit('address', data);
            }
        }
    })
</script>