qimall/addons/Store/client/views/order/refund-detail.php

<?php
use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('component/order-refund', __DIR__);
?>
<style>
    .card-box {
        border: none;
    }

    .marign-b-20 {
        margin-bottom: 20px;
    }

    .step-box {
        margin-top: 10px;
        padding-top: 10px;
    }

    .step-inactive {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background-color: #e8e8e8;
        transform: translate(-50%, -50%);
    }

    .step-inside {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: #cccbcb;
        transform: translate(-50%, -50%);
        text-align: center;
        line-height: 24px;
        z-index: 9;
        color: #fff;
        font-size: 12px;
    }

    .step-active {
        background-color: var(--primary, #fb6638);
    }

    .step-outside {
        background-color: transparent;
    }

    .step-box .el-step__title {
        font-size: 14px;
    }

    .text-other {
        padding: 10px 0;
        font-size: 12px;
    }

    .text-other>span:nth-child(1) {
        display: block;
        width: 100%;
        padding-left: 20px;
        text-align: left;
    }

    .text-child {
        padding: 5px 0 0 30px;
        color: #999;
    }
    .text-child>span {
        display: block;
        padding-top: 10px;
    }

    .text-item {
        padding: 10px 0;
        font-size: 12px;
    }

    .row-card-header {
        font-weight: 700;
        font-size: 14px;
    }

    .text-item>span:nth-child(1) {
        display: inline-block;
        width: 105px;
        padding-right: 20px;
        text-align: right;
    }

    .el-row-flex {
        display: flex;
        flex-flow: row wrap;
    }

    .el-row-flex .card-box {
        height: 100%;
    }

    .order-goods .el-table th>.cell,
    .order-goods .el-table {
        font-size: 13px;
    }

    .package-item {
        padding: 10px 0;
        font-size: 12px;
    }
    .package-item>span:nth-child(1) {
        display: inline-block;
        width: 105px;
        padding: 0 20px;
        text-align: left;
    }
    .package-item img {
        width: 55px;
        height: 55px;
        border-radius: 5px;
        margin-right: 10px;
    }
    .range-right {
        margin-right: 20px;
    }

    .color-red {
        color: red;
    }
    .color-green {
        color: green;
    }

    .consult {
        max-height: 600px;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .consult li {
        border-bottom: 1px solid #EBEEF5;
        font-size: 12px;
        padding: 10px 0 20px 10px;
    }
    .consult li div {
        /* display: block; */
        padding: 5px 0;
    }
    .handle-btn {
        display: inline-block;
        position: absolute;
        right: 0px;
        top: -5px;
    }
    .el-dialog {
        border-radius: 5px;
    }
    .el-dialog__header {
        padding:10px 30px;
        border-bottom: 1px solid #f2f2f2;
    }
    .el-form-item--small {
        margin:10px 0;
    }
    .el-form-item--small {
        margin-bottom:0 !important;
    }
</style>
<div id="app" v-cloak>
    <el-card shadow="never" style="border: none;" body-style="background-color: #f3f3f3;padding: 10px 0 0;" v-loading="cardLoading">
        <div slot="header">
            <span>订单详情</span>
        </div>

        <el-card class="card-box step-box marign-b-20" shadow="never">
            <el-steps :active="stepArrActive">
                <el-step v-for="(item,index) in stepArr" :key="index" :title="item.title" :description="item.created_at|dateTimeFormat('Y-m-d H:i:s')">
                    <template slot="icon">
                        <div class="step-inactive" :class="item.is_step == 1 ? 'step-outside' : ''">
                            <div class="step-inside" :class="item.is_step == 1 ? 'step-active' : ''">{{ index + 1 }}</div>
                        </div>
                    </template>
                </el-step>
            </el-steps>
        </el-card>

        <el-row :gutter="20" class="el-row-flex marign-b-20">
            <el-col :span="8">
                <el-card class="card-box" shadow="never">
                    <div slot="header" class="clearfix row-card-header" style="position: relative;">
                        <span>售后信息</span>
                        <template v-if="(step_status != -1 || step_status != -2) && option_limit == 0">
                            <!-- 仅退款 -->
                            <div class="handle-btn" v-if="orderDetail.type == 1">
                                <el-button type="primary" size="small" v-if="step_status == 5" @click="handle('handle', orderDetail, 6)">同意退款</el-button>
                                <el-button plain size="small" v-if="step_status == 5" @click="handle('handle', orderDetail, -1)">拒绝售后申请</el-button>
                            </div>

                            <!-- 退货退款 -->
                            <div class="handle-btn" v-if="orderDetail.type == 2">
                                <el-button type="primary" size="small" v-if="step_status == 1" @click="handle('send_address', orderDetail, 2)">同意退货，发送退货地址</el-button>
                                <el-button plain size="small" v-if="step_status == 1" @click="handle('handle', orderDetail, -1)">拒绝售后申请</el-button>
                                <el-button :loading="btnLoading" type="warning" plain size="small" v-if="step_status == 2 && is_show_revoce" @click="revoceRefund(orderDetail.id)">退货超期，撤销售后</el-button>
                                <el-button plain size="small" v-if="step_status == 2" @click="handle('handle', orderDetail, 4)">已收到退货，同意退款</el-button>
                                <el-button type="primary" size="small" v-if="step_status == 3" @click="handle('handle', orderDetail, 4)">确认收货并退款</el-button>
                                <el-button plain size="small" v-if="step_status == 3" @click="handle('handle', orderDetail, -2)">拒绝确认收货</el-button>
                            </div>

                            <!-- 换货 -->
                            <div class="handle-btn" v-if="orderDetail.type == 3">
                                <el-button type="primary" size="small" v-if="step_status == 7" @click="handle('send_address', orderDetail, 8)">同意换货，发送退货地址</el-button>
                                <el-button plain size="small" v-if="step_status == 7" @click="handle('handle', orderDetail, -1)">拒绝售后申请</el-button>
                                    <el-button :loading="btnLoading" type="warning" plain size="small" v-if="step_status == 8 && is_show_revoce" @click="revoceRefund(orderDetail.id)">退货超期，撤销售后</el-button>
                                <el-button plain size="small" v-if="step_status == 8" @click="handle('exchange', orderDetail, 10)">已收到退货，立即发货</el-button>
                                <el-button type="primary" size="small" v-if="step_status == 9" @click="handle('exchange', orderDetail, 10)">确认收货并重新发货</el-button>
                                <el-button plain size="small" v-if="step_status == 9" @click="handle('handle', orderDetail, -2)">拒绝确认收货</el-button>
                            </div>
                        </template>
                    </div>
                    <div class="text-item">
                        <span>售后状态</span><span class="text-color-primary">{{ stepText.title }}</span>
                    </div>
                    <div class="text-item">
                        <span>退款金额</span><span>￥{{ orderDetail.refund_price }} <span v-if="orderDetail.discount">+ {{orderDetail.discount}}</span></span>
                    </div>
                    <div class="text-item" v-if="orderDetail.type != 3">
                        <span>需返</span><span>{{ orderDetail.discount || '-' }}</span>
                    </div>
                    <div class="text-item">
                        <span>售后原因</span><span>{{ orderDetail.reason || '-' }}</span>
                    </div>
                    <div class="text-item">
                        <span>售后说明</span><span>{{ orderDetail.remark || '-' }}</span>
                    </div>
                    <div class="text-item">
                        <span>售后编号</span><span>{{ orderDetail.order_no }}</span>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card class="card-box " shadow="never">
                    <div slot="header" class="clearfix row-card-header">
                        <span>买家及收货信息</span>
                    </div>
                    <div class="text-item">
                        <span>买家</span><span>{{ orderDetail.base_user.nickname }}</span>
                    </div>
                    <div class="text-item">
                        <span>买家备注</span><span>{{ orderDetail.remark || '--' }}</span>
                    </div>
                    <div class="text-item" v-if="orderDetail.order.is_virtual == 0">
                        <span>配送方式</span><span>{{ shipping_type_list[orderDetail.order.shipping_type] }}</span>
                    </div>
                    <div class="text-item">
                        <span>收货人</span><span>{{ orderDetail.order.receiver_name || '--' }}</span>
                    </div>
                    <div class="text-item">
                        <span>收货地址</span><span>{{ orderDetail.order.region_name }} {{ orderDetail.order.address }}</span>
                    </div>
                    <div class="text-item">
                        <span>手机号码</span><span>{{ orderDetail.order.mobile }}</span>
                    </div>
                    <div v-if="orderDetail.order.pickup_info">
                        <h4>自提点信息</h4>
                        <div class="text-item">
                            <span>联系人姓名</span><span>{{ orderDetail.order.pickup_info.head_info.contact_name }}</span>
                        </div>
                        <div class="text-item">
                            <span>手机号码</span><span>{{ orderDetail.order.pickup_info.head_info.contact_phone }}</span>
                        </div>
                        <div class="text-item">
                            <span>详细地址</span><span>{{ orderDetail.order.pickup_info.head_info.address }}</span>
                        </div>
                    </div>
                    <div v-if="orderDetail.refund_status == 4" class="text-other" style="padding-bottom: 0px;">
                        <span>客户退回信息</span>
                        <div class="text-child">
                            <span>快递公司：{{ orderDetail.express }}</span>
                            <span>快递单号：{{ orderDetail.express_no }}</span>
                        </div>
                    </div>
                    <div v-if="orderDetail.refund_status == 4" class="text-other" style="padding-bottom: 0px;">
                        <span>客户退回信息</span>
                        <div class="text-child">
                            <span>快递公司：{{ orderDetail.express }}</span>
                            <span>快递单号：{{ orderDetail.express_no }}</span>
                        </div>
                    </div>
                    <div class="text-other">
                        <span v-if="orderDetail.type == 1 && orderDetail.refund_status == 1 && orderDetail.step_status != -1">退款已完成，退款金额：{{ orderDetail.reality_refund_price }} 元 <span v-if="orderDetail.discount">+ {{orderDetail.discount}}</span></span><span></span>
                        <span v-if="orderDetail.type == 2 && orderDetail.refund_status == 1 && orderDetail.step_status != -1">退款退货已完成，退款金额：{{ orderDetail.reality_refund_price }} 元 <span v-if="orderDetail.discount">+ {{orderDetail.discount}}</span></span><span></span>
                        <span v-if="orderDetail.type == 3 && orderDetail.refund_status == 1 && orderDetail.step_status != -1">换货已完成</span><span></span>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card class="card-box" shadow="never">
                    <div slot="header" class="clearfix row-card-header">
                        <span>订单信息</span>
                    </div>
                    <div class="text-item">
                        <span>订单状态</span><span :class="orderGoods.is_feedback == 1 ? 'color-red' : 'color-green'">{{ feedback_type_list[orderGoods.is_feedback] }}</span>
                    </div>
                    <div class="text-item">
                        <span>订单编号</span><span>{{ orderDetail.order.order_no }}</span>
                    </div>
                    <div class="text-item">
                        <span>交易单号</span><span>{{ orderDetail.order.out_trade_no || '-' }}</span>
                    </div>
                    <div class="text-item">
                        <span>支付方式</span><span>{{ payment_type_list[orderDetail.order.payment_type] }}</span>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <el-card class="card-box marign-b-20" shadow="never">
            <div slot="header" class="clearfix row-card-header">
                <span>商品信息</span>
            </div>
            <div class="order-goods">
                <el-table :data="orderGoodsList" style="width: 100%;" :header-cell-style="{background:'#F7F7F7','border-bottom': 0}">
                    <el-table-column label="商品" width="260">
                        <template slot-scope="scope">
                            <div style="display: flex;align-items: center;">
                                <el-image style="width: 50px; height: 50px;border-radius: 5px;margin-right: 10px" :src="scope.row.pic_url"></el-image>
                                <com-ellipsis :line="2">
                                    {{ scope.row.goods_name }}
                                </com-ellipsis>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="规格" width="210">
                        <template slot-scope="scope">
                            <el-tag size="small">
                                {{ scope.row.goods_attr_name || '无规格' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="单价" width="210">
                        <template slot-scope="scope">
                            <div>{{ scope.row.price }}
<!--                                <span v-if="scope.row.adjust_money != 0">(调价：￥{{ scope.row.adjust_money }})</span>-->
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="购买数量" width="210">
                        <template slot-scope="scope">
                            <div>{{ scope.row.num }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="优惠" width="210">
                        <template slot-scope="scope">
                            <div>￥{{ (scope.row.price * scope.row.num - scope.row.goods_price).toFixed(2) }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="赊账" width="210">
                        <template slot-scope="scope">
                            <div>￥{{scope.row.credit_money}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="小计" width="210">
                        <template slot-scope="scope">
                            <div>{{ getOrderPrice(scope.row) }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态">
                        <template slot-scope="scope">
                            <div>{{ feedback_type_list[scope.row.is_feedback] }}</div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>

        <el-card v-if="orderDetail.step.length > 0" class="card-box marign-b-20" shadow="never">
            <div slot="header" class="clearfix row-card-header">
                <span>协商记录</span>
            </div>
            <ul class="consult">
                <li v-for="(item,index) in orderDetail.step">
                    <div><span style="color: #409eff; padding-right: 10px;">{{ item.role == 1 ? '买家' : '商家' }}</span> {{ item.created_at|dateTimeFormat('Y-m-d H:i:s')}}</div>
                    <template v-for="val in JSON.parse(item.content)">
                        <template v-if="typeof val == 'object'">
                            <el-image
                                    v-for="img,k in val"
                                    style="width: 100px; height: 100px; margin-right: 20px; display: inline-block;"
                                    :src="img"
                                    :key="k"
                                    :preview-src-list="val">
                            </el-image>
                        </template>
                        <div v-else>{{ val }}</div>
                    </template>

                </li>
            </ul>
        </el-card>

        <el-card>
            <el-button type="primary" v-if="orderDetail.order_status == 1" size="small" @click="handle('shipping', orderDetail)">发货</el-button>
            <el-button type="primary" v-if="orderDetail.order_status == 2" size="small" @click="handle('take-delivery', orderDetail)">确认收货</el-button>
            <el-button type="primary" v-if="orderDetail.order_status == 3" size="small" @click="handle('sales', orderDetail)">订单完成</el-button>
        </el-card>

    </el-card>

    <!-- 修改退货地址 -->
    <order-refund :is_show="isShowChangeShipping" 
        :handle_step_status="handleStepStatus" 
        :handle_type="handleType" 
        :change-shipping-loading="changeShippingLoading" 
        :refund_info="orderDetail" 
        :default_address="default_address" 
        @submit="handleShipping"
        @close="isShowChangeShipping = false" 
        :address_list = "address_list" 
        @address = "selectAddress"
    ></order-refund>
    <!-- 拒绝售后申请弹框 -->
    <el-dialog title="拒绝理由" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" :close-on-click-modal="false">
        <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 6}"
                placeholder="请输入内容"
                v-model="refund_reason">
        </el-input>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="handle('refuse',{})">确 定</el-button>
        </span>
    </el-dialog>
</div>



<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                id: 0,
                detail: {},
                isShowChangeShipping: false,
                changeShippingLoading: false,
                dialogVisible: false,
                refund_reason : '',
                temp_param: {},
                shipping_form: {},
                activePackage: '0',
                handleType: '',
                cardLoading: false,
                logLoading: false,
                step_status: 0,
                orderGoodsList: [],
                goodDetails: [],
                orderAction: [],
                feedback_type_list: {},
                stepArrs: {
                    "1": [
                        {
                            title: '买家下单',
                            created_at: '0',
                            is_step: 0,
                        },
                        {
                            title: '买家付款',
                            created_at: '0',
                            is_step: 0,
                        },
                        {
                            title: '商家发货',
                            created_at: '0',
                            is_step: 0,
                        },
                        {
                            title: '交易完成',
                            created_at: '0',
                            is_step: 0,
                        }
                    ],
                },
                stepArr: [
                    {
                        title: '售后申请',
                        created_at: '0',
                        is_step: 0,
                    },
                    {
                        title: '处理售后申请',
                        created_at: '0',
                        is_step: 0,
                    },
                    {
                        title: '售后完成',
                        created_at: '0',
                        is_step: 0,
                    },
                ],
                stepArrActive: 0,
                handleStepStatus: 0,
                orderDetail: {
                    express: [],
                    step: [],
                    order: {}
                },
                orderGoods: {},
                orderExpress: [],
                stepText: {},
                order_status_list: {
                    '0': "待付款",
                    '1': "待发货",
                    '2': "已发货",
                    '3': "已收货",
                    '4': "已完成",
                    '-1': "售后申请",
                    '-2': "退款中",
                    '-3': "售后完成",
                    '-4': "已关闭",
                    '-5': "撤销申请",
                },
                payment_type_list: {
                    '0': "在线支付",
                    '1': "微信",
                    '2': "支付宝",
                    '3': "银联卡",
                    '5': "余额支付",
                    '7': "汇聚支付",
                    '8': "汇聚快捷支付",
                    '100': "线下支付"
                },
                shipping_type_list: {
                    '1': "物流配送",
                    '2': "买家自提",
                    '3': "货到付款",
                    '4': "本地配送"
                },
                default_address: {},
                address_list : [],
                is_show_revoce: false,
                btnLoading: false,
                option_limit: 0,
            };
        },
        created() {
            this.id = getQuery('id');
        },
        mounted() {
            this.getDetail();
        },
        methods: {
            handleShipping(data) {
                this.handle('send_address', data, null, true);
            },
            selectAddress(data) {
                this.handle('select_address', data);
            },
            getDetail() {
                let self = this;
                self.cardLoading = true;
                request({
                    params: {
                        r: 'store/client/order/refund-detail',
                        id: self.id
                    },
                    method: 'get',
                }).then(e => {
                    self.cardLoading = false;
                    if (e.data.code == 0) {
                        var data = e.data.data;
                        self.orderDetail = data.refund;
                        self.orderGoods = data.refund.orderDetail;
                        self.orderGoodsList = [data.refund.orderDetail];
                        self.address_list = data.address_list;
                        self.stepText = data.step_text;
                        self.default_address = data.address_list[0];
                        self.feedback_type_list = data.feedback_type_list;
                        self.step_status = self.orderDetail.step[0].step_status;
                        self.is_show_revoce = data.is_show_revoce

                        if (!isEmpty(data.step_arr)) self.getStepArr(data.step_arr, data.refund.step);
                        this.option_limit = data.refund.option_limit;
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            getStepArr(stepArr, order) {
                var stepNumArr = [];
                var last_num = order[0].step_num;
                order.forEach(function (item) {
                    stepNumArr[item.step_num] = item.created_at;
                });

                var newStepArr = [];
                stepArr.forEach(function (item) {
                    let step = {};
                    step['title'] = item.title;
                    step['is_step'] = 1;
                    if (stepNumArr[item.step_num]) {
                        step['created_at'] = stepNumArr[item.step_num];
                    } else if (last_num >= item.step_num && stepNumArr[last_num]) {// 如果一步到完成则获取最后一条时间
                        console.info(last_num+'--'+item.step_num,'123')
                        step['created_at'] = stepNumArr[last_num];
                    } else {
                        step['created_at'] = 0;
                        step['is_step'] = 0;
                    }
                    newStepArr.push(step);
                });
                this.stepArrActive = this.orderDetail.step[0].step_num;
                this.stepArr = newStepArr;
            },
            handle(type, data, step_status = null, submit = false) {
                let id = data ? parseInt(data.id) : '';
                switch (type) {
                    // 订单详情
                    case 'detail':
                        let params = {
                            r: 'store/client/order/detail'
                        };
                        if (id) params = Object.assign(params, {
                            id: id
                        });
                        navigateTo(params);
                    break;
                    // 删除订单
                    case 'destroy':
                        param = {
                            id: data.id,
                            type
                        };
                        this.$confirm('删除该条数据后不可以恢复, 是否继续?', '警告', {
                            type: 'warning'
                        }).then(() => {
                            this.send(param)
                        }).catch((err) => {})
                    break;
                    // 售后处理
                    case 'handle':
                        param = {
                            'id': id,
                            'step_status': step_status,
                        };
                        /*this.id = id;
                        this.step_status = step_status;
                        switch (step_status){
                            case 6:
                                this.refund_type = '仅退款'
                                this.showRefundForm();
                                return
                        }*/
                        if (step_status < 0) {// 拒绝操作
                            this.dialogVisible = true;
                            this.temp_param = param
                        } else {
                            this.send('store/client/order/handle-refund', param);
                        }
                    break;
                    case 'refuse':
                        let refuse_param = Object.assign(this.temp_param, {
                            'refund_reason': this.refund_reason
                        });
                        console.log(refuse_param)
                        this.send('store/client/order/handle-refund', refuse_param, (resp) => {
                            if (resp.code == 0) this.handleClose();
                        });
                        break;
                    case 'exchange':// 换货
                    case 'send_address':// 发送退货地址
                        if (submit) {
                            this.changeShippingLoading = true;
                            this.send('store/client/order/handle-refund', data, (resp) => {
                                if (resp.code == 0) this.isShowChangeShipping = false;
                            });
                            setTimeout(() => {
                                this.changeShippingLoading = false;
                            }, 100);
                        } else {
                            this.isShowChangeShipping = true
                            this.handleStepStatus = step_status;
                            this.handleType = type;
                        }
                    break;
                    //选择优惠券
                    case 'select_address':
                        for(let i = 0; i < this.address_list.length; i++) {
                            if (this.address_list[i]['address'] == data) {
                                this.default_address = this.address_list[i];
                            }
                        }
                }
            },
            // 拒绝售后申请弹框关闭
            handleClose() {
                this.refund_reason = ''
                this.dialogVisible = false
                this.temp_param = {}
                this.step_status = 5
            },
            send(url, params, callback) {
                let self = this;
                request({
                    params: {
                        r: url,
                    },
                    method: 'post',
                    data: params
                }).then(e => {
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                        self.getDetail();
                    } else {
                        self.$message.error(e.data.msg);
                    }
                    if (callback) callback(e.data);
                }).catch(e => {
                    console.log(e);
                });
            },
            getOrderPrice(data){
                let text = '';
                switch (data.marketing_type) {
                    case 'ScoreMall' :
                        text = data.extra_info;
                        break;
                    default :
                        text = '￥'+data.goods_price;
                }
                return text;
            },
            // 退货超期，撤销售后
            revoceRefund(id) {
                this.$confirm('是否确认撤销售后, 是否继续?', '警告', {
                    type: 'warning'
                }).then(() => {
                    this.btnLoading = true
                    request({
                        params: {
                            r: 'store/client/order/revoce-refund',
                            id: id
                        },
                        method: 'get',
                    }).then(e => {
                        if (e.data.code == 0) {
                            this.btnLoading = false
                            this.$message.success(e.data.msg);
                            // setTimeout(() => {
                            //     navigateTo({
                            //         r: 'mall/order/refund',
                            //     });
                            // }, 1500)
                            this.getDetail();
                        } else {
                            this.btnLoading = false
                            this.$message.error(e.data.msg);
                        }
                    })
                })
            }
        }
    });
</script>