qimall/addons/Happiness/client/views/order/component/order-proactive-refund.php

<style>
    .set_scroll{
        overflow-y:auto;
        height:500px; 
    }
    /* 为滚动条的滑块设置样式 */
    .set_scroll::-webkit-scrollbar-track {
        background-color: #000; /* 滑块颜色 */
    }
    
    /* 为滚动条的滑块设置hover效果 */
    .set_scroll::-webkit-scrollbar-thumb:hover {
        background-color: #555; /* 滑块hover颜色 */
    }
</style>
<template id="order-proactive-refund">
    <div>
        <el-dialog title="主动退款" :visible.sync="isShowChangeRefund" @close="dialogClose" :close-on-click-modal="false" width="70%" >
            <div class='set_scroll pre-scrollable'>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark" style="padding: 20px 10px; margin: 20px 30px; background: #f3f3f3; color:red;">
                            <p style="font-size: 16px; font-weight:bold;">主动退款说明：</p>
                            <p style="font-size:14px;">主动交易成功的订单，佣金已分配，买家要求退款，佣金不会自动退回。若商家主动退款，退款金额根据订单结算状态扣减。</p>
                            <p style="font-size:14px;">订单已结算：从代理可提现账户扣减，此操作可能出现提现账户为负数；订单未结算：从未结算中扣减发放的佣金，全额退款默认扣佣。</p>
                            <p style="font-size:14px;">主动退款完成后，订单关联的换货/补发订单将同步关闭，请谨慎退款。</p>
                        </div>
                    </el-col>
                </el-row>

                <el-form :model="form" ref="refund" :rules="rules" size="small" class="demo-form-inline"  style="padding: 0 30px;">
                    <!-- <div v-if="form.shipping_type == 1"> -->
                        <el-form-item label="结算方式" prop="settlement_method">
                            <el-select filterable v-model="form.settlement_method" placeholder="请选择结算方式" >
                                <el-option v-for="(name,value) in settlement_method" :key="value" :label="name" :value="value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="退款原因" prop="reason">
                            <el-select filterable v-model="form.reason" placeholder="请选择退款原因" >
                                <el-option v-for="(item,index) in refund_reason" :key="index" :label="item" :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="退款说明" prop="remark">
                            <el-input style="width:50%" type="textarea" v-model="form.remark"></el-input>
                        </el-form-item>
                        <!-- 退款商品 -->
                        <el-form-item label="">
                            <el-table ref="multipleTable" :data="goods_refund" size="small" border style="width: 100%" :header-cell-style="{background:'#F7F7F7','border-bottom': 0}">
                                <el-table-column label="商品"  prop="goods_name">
                                    <template slot-scope="scope">
                                        <!-- <com-ellipsis :line="1" :text="scope.row.goods_name"></com-ellipsis> -->
                                        <div style="position: relative;display: flex;align-items: center;">
                                        <el-image style="width: 66px; height: 60px;border-radius: 5px;"
                                                :src="scope.row.pic_url"></el-image>
                                        <!-- <span v-if="repeal_list[scope.row.is_feedback]" class="com-order-refund-status">{{ repeal_list[scope.row.is_feedback] }}</span> -->
                                        <com-ellipsis :line="2" style="margin-left: 10px;">
                                            <p>{{ scope.row.goods_name }}</p>
                                            <p>数量：{{scope.row.num}}</p>
                                        </com-ellipsis>
                                </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="goods_price" label="可退金额(元)" >
                                    <template slot-scope="scope">
                                        <com-ellipsis :line="1" >
                                            {{scope.row.goods_price}}
                                        </com-ellipsis>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="refund_price" label="退款金额(元)" show-overflow-tooltip>
                                    <template slot-scope="scope">
                                        <!-- <el-input style="width:80%" v-model="form.refund_price"  ></el-input>  -->
                                        <el-input v-model="form.refund_price" @input="handleInput" >
                                            <template slot="append">包邮</template>
                                        </el-input>
                                    </template>
                                </el-table-column>
                                <!-- <el-table-column prop="num" label="扣减佣金" show-overflow-tooltip>
                                    <template slot-scope="scope"></template>
                                </el-table-column> -->
                            </el-table>
                        </el-form-item>

                    <!-- </div> -->
                    <div style="margin-top: 15px;">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="佣金扣减比例" prop="balance_pre">
                                    <!-- <el-input style="width:50%" type="textarea" v-model="form.desc"></el-input> -->
                                    <el-input v-model.number="form.balance_pre" @input="handlePreInput" style="width:60%">
                                        <template slot="append">%</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <div class="grid-content bg-purple" style="color:red;">
                                    <p>扣减佣金比例为0时，不扣除佣金</p>
                                    <p>扣减佣金比例为100时，代理佣金全部扣除</p>
                                </div>
                            </el-col>
                        </el-row>
                    </div>

                    <!-- 受益人信息 -->
                    <el-form-item label="">
                            <el-table ref="multipleTable" :data="user_commission_data" size="small" border  style="width: 100%" :header-cell-style="{background:'#F7F7F7','border-bottom': 0}">
                                <el-table-column label="收益人信息" prop="nickname" sortable>
                                    <template slot-scope="scope">
                                        <!-- <com-ellipsis :line="1" :text="scope.row.goods_name"></com-ellipsis> -->
                                        <div style="position: relative;display: flex;align-items: center;">
                                                <el-image style="width: 66px; height: 60px;border-radius: 5px;"
                                                        :src="scope.row.avatar_url">
                                                        <div slot="error" class="image-slot">
                                                            <el-image class="table-info-img" src="/resources/img/common/default-avatar.png"></el-image>
                                                        </div>
                                                </el-image>
                                                <!-- <span v-if="repeal_list[scope.row.is_feedback]" class="com-order-refund-status">{{ repeal_list[scope.row.is_feedback] }}</span> -->
                                                <com-ellipsis :line="3" style="margin-left: 10px;">
                                                    <p>{{scope.row.nickname }}</p>
                                                    <p>会员ID:{{scope.row.user_id}}</p>
                                                    <p>手机号:{{scope.row.mobile}}</p>
                                                </com-ellipsis>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="created_at" label="收益时间" >
                                    <template slot-scope="scope">
                                        {{ scope.row.created_at|dateTimeFormat('Y-m-d H:i:s') }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="capital_type_text" label="收益类型" show-overflow-tooltip >
                                    <template slot-scope="scope">
                                        {{scope.row.capital_type_text}}
                                    </template>
                                </el-table-column>
                                <!-- <el-table-column prop="num" label="收益比例/金额" show-overflow-tooltip width="80">
                                    <template slot-scope="scope">固定值</template>
                                </el-table-column> -->
                                <el-table-column prop="updated_at" label="结算时间" >
                                    <template slot-scope="scope">
                                        {{ scope.row.updated_at|dateTimeFormat('Y-m-d H:i:s') }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="change_num" label="结算佣金(元)" sortable show-overflow-tooltip >
                                    <template slot-scope="scope">
                                        {{scope.row.change_num}}
                                    </template>
                                </el-table-column>
                                <!-- <el-table-column prop="capital_type_text" label="累计扣佣(元)" show-overflow-tooltip>
                                    <template slot-scope="scope">
                                        0.00
                                    </template>
                                </el-table-column> -->
                                <el-table-column prop="change_num" label="本次扣佣(元)" show-overflow-tooltip >
                                    <template slot-scope="scope">
                                        {{scope.row.change_num *(form.balance_pre/100) | numFilter}}
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-form-item>
                        <div slot="header">
                            <span>订单详情</span>
                        </div>
                        <el-row :gutter="24">
                            <el-col :span="12" :offset="12">
                                <div class="grid-content bg-purple" style="text-align:right; font-size:16px;">
                                    <p style="font-weight:bold;">原结算佣金：<span>{{total}}元</span> 本次扣佣：<span>{{refund_price_total}}元</span></p>
                                </div>
                            </el-col>
                        </el-row>
                </el-form>
            </div>
            <el-row :gutter="24">
                    <el-col :span="12" :offset="12">
                        <div class="grid-content bg-purple" style="text-align:right; font-size:16px; margin:0px 20px;padding-top:20px;">
                            <p style="font-weight:bold;">退款给买家：<span style="color:red;">￥{{form.refund_price}}</span></p>
                            <!-- <p>包含运费：<span>￥0.00</span></p>
                            <p>包含运险费：<span>￥0.00</span></p> -->
                        </div>
                    </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button @click="isShowChangeRefund = false">取 消</el-button>
                <el-button type="primary" @click="addRefund('refund')" :v-loading="changeRefundLoading">确定退款且扣佣</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    Vue.component('order-proactive-refund', {
        template: '#order-proactive-refund',
        props: {
            is_show: {
                type: Boolean,
                default: false
            },
            order_info: {
                type: Object,
                default: function() {
                    return {};
                }
            },
            changeRefundLoading: {
                type:Boolean,
                default:false
            },
            
            refund_reason: {
                type: Object,
                default: function() {
                    return {};
                }
            },
            goods_id: {
                type: Number,
                default: 0,
            }
        },
        data() {
            return {
                form: {
                    id:'', //订单id
                    user_id: '',//用户id
                    order_detail_id: '', //申请售后商品id
                    main_order_detail_id: '', //申请售后主商城id
                    settlement_method:'', // 结算方式
                    reason:'', // 退款原因
                    refund_price: '', // 退款金额
                    remark: '', //退款说明
                    balance_pre: 100, //扣除佣金比例
                    shipping_status: 0,
                    type: 1,//售后方式--仅退款
                },
                all_loading: '',
                user_commission_data:[], //收益人数据
                goods_refund:[], //售后商品数据
                settlement_method: {
                    'return' : '原路退回', //结算方式
                },
                isShowChangeRefund: false,
                rules: {
                    settlement_method: [{
                        required: true,
                        message: '请选择结算方式',
                        trigger: 'change'
                    }],
                    reason: [{
                        required: true,
                        message: '请选择退款原因',
                        trigger: 'change'
                    }],
                    balance_pre: [{
                        required: true,
                        message: '请填写佣金扣除比例',
                        trigger: 'change'
                    }],
                }
            }
        },
        watch: {
            is_show: function(newVal) {
                if(newVal){
                    // 获取订单物流信息列表
                    this.$nextTick(()=>{
                        this.$refs.multipleTable.toggleAllSelection(true);
                    })
                    // if(isEmpty(this.express_companys)) this.getOrderShipping()
                }
                this.isShowChangeRefund = newVal;
                this.form.settlement_method = ''; // 结算方式
                this.form.reason = ''; // 退款原因
                this.form.remark = ''; //备注
            },
            order_info(val) {
                this.form.id = val.id;
                this.form.user_id = val.user_id;
            },
            goods_id(val) {
                if(val > 0){
                    this.getOrderDetail(val);
                }
            }
        },
        filters: {
            numFilter(value) {
                let realVal = '';
                if (!isNaN(value) && value !== "") {
                    realVal = value.toFixed(2);
                } else {
                    realVal = '--';
                }
                return realVal;
            }
        },
        mounted() {
            
        },
        computed: {
            total() {
                let total = 0;
                total = this.user_commission_data.reduce((sum, item) => sum + item.change_num, 0);
                return total.toFixed(2);
            },
            refund_price_total() {
                let total = 0;
                total = total = this.user_commission_data.reduce((sum, item) => sum + (item.change_num*(this.form.balance_pre/100)), 0);
                return total.toFixed(2);
            },
        },
        methods: {
            getGoodsCommission(id){
                request({
                    params: {
                        r: 'happiness/client/order/get-goods-commission-list',
                        goods_id: id,//订单详情商品id
                        order_id: this.form.id,//订单id
                        wallet_type: 'commission'
                    },
                }).then(res => {
                    if(res.data.code == 0){
                        // console.log(res.data);
                        this.user_commission_data = res.data.data.list;
                    }
                })
            },
            getOrderDetail(id){
                request({
                    params: {
                        r: 'happiness/client/order/get-order-detail',
                        order_detail_id: id,
                    },
                }).then(res => {
                    if(res.data.code == 0){
                        this.$set(this.form,'refund_price',res.data.data[0].goods_price);
                        this.goods_refund = res.data.data;
                        this.$set(this.form,'order_detail_id',res.data.data[0].id);
                        this.$set(this.form,'id',res.data.data[0].order_id);
                        this.$set(this.form,'user_id',res.data.data[0].user_id);
                        this.$set(this.form,'main_order_detail_id',res.data.data[0].main_order_detail_id);
                        this.getGoodsCommission(res.data.data[0].id);
                    }
                })
            },
            selectable(row,index){
                if (row.is_feedback != 0) {
                    return false;
                }
                return row.shipping_status == 0;
            },
           
            handleInput() {
                // if (this.form.refund_price === '') {
                //     this.form.refund_price = 0;
                // }
                if (this.form.refund_price > this.goods_refund[0].goods_price) {
                    this.form.refund_price = this.goods_refund[0].goods_price;
                }
                this.limitInput(this.form.refund_price, 'refund_price');
            },
            limitInput(value, name) {
                this.form[name] = ('' + value)
                .replace(/[^\d^\.]+/g, '')
                .replace(/^0+(\d)/, '$1')
                .replace(/^\./, '0.')
                .match(/^\d*(\.?\d{0,2})/g)[0] || ''
            },
            handlePreInput() {
                if (this.form.balance_pre > 100) {
                    this.form.balance_pre = 100;
                }
                if (this.form.balance_pre < 0) {
                    this.form.balance_pre = 0;
                }
            },
            comfirm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$emit('submit',this.form);
                    } else {
                        console.log('error submit!!');
                        return;
                    }
                });
            },

            addRefund(formName){
                this.changeRefundLoading = true;
                this.$refs[formName].validate((valid) => {
                    if (!valid) {
                        console.log('error submit!!');
                        return;
                    }
                });
                this.all_loading = this.$loading({
                    lock: true,
                    text: '正在处理订单退款数据。。。',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                request({
                    params: {
                        r: 'happiness/client/order/do-refund-submit'//团长添加
                    },
                    method: 'post',
                    data: this.form
                }).then(response => {
                    this.changeRefundLoading = false;
                    if (response.data.code == 0) {
                        this.handleRefund(response.data.data.id);//传入提交成功的售后单id
                    } else {
                        this.$message.error(response.data.msg);
                        this.all_loading.close();
                    }
                }).catch(response => {
                    this.changeRefundLoading = false;
                });
            },
            dialogClose() {
                this.$emit('close')
            },

            handleRefund(id) {
                request({
                    params: {
                        r: 'happiness/client/order/handle-refund',
                    },
                    method: 'post',
                    data: {
                        id: id,
                        step_status: 6,
                        balance_pre: this.form.balance_pre,
                        admin_handler_refund: 1,
                    }
                }).then(response => {
                    this.changeRefundLoading = false;
                    if (response.data.code == 0) {
                        this.all_loading.close();
                        this.$message.success('退款成功');
                        this.$emit('success');
                    } else {
                        this.$message.error(response.data.msg);
                    }
                }).catch(response => {
                    this.changeRefundLoading = false;
                });
            }
        }
    })
</script>