qimall/addons/QiJuhe/backend/views/refund/index.php

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <div>
                <span>售后订单列表</span>
            </div>
        </div>
        <div class="table-body">
            <el-form :inline="true" v-model="searchData" class="demo-form-inline" label-width="100px">
                <el-row :gutter="24">
                    <el-form-item label="商品名称">
                        <el-input size="small" v-model="searchData.name"></el-input>
                    </el-form-item>
                    <el-form-item label="售后单号">
                        <el-input size="small" v-model="searchData.order_no"></el-input>
                    </el-form-item>
                    <el-form-item label="订单编号">
                        <el-input size="small" v-model="searchData.shop_order_no"></el-input>
                    </el-form-item>
                    <el-form-item label="售后时间">
                        <el-date-picker
                            size="small"
                            v-model="searchData.data"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd HH:mm:ss"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="售后状态">
                        <el-select size="small" v-model="searchData.refund_status">
                            <el-option v-for="(name, key) in refund_status_list" :key="key" :value="key" :label="name"></el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
                <el-row :gutter="24">
                    <el-form-item label=" ">
                        <el-button size="small" type="primary" @click="onSearch">查询</el-button>
                        <el-button size="small" type="primary" @click="onReset">重置</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
        </div>
        <div class="table-body">
            <el-table class="table-info" ref="multipleTable" stripe :data="list" v-loading="listLoading">
                <!-- 空数据 -->
                <template slot="empty">
                    <el-empty description="暂无订单"></el-empty>
                </template>

                <el-table-column type="selection"></el-table-column>

                <el-table-column prop="order_no" align="center" label="售后单号">
                    <template slot-scope="scope">
                        <a href="javascript:void(0);" @click="mallOrder(scope.row.refund.id)">
                            {{ scope.row.refund.order_no }}
                        </a>
                    </template>
                </el-table-column>

                <el-table-column prop="order_no" align="center" label="订单编号">
                    <template slot-scope="scope">
                        <a href="javascript:void(0);" @click="mallOrderDetail(scope.row.order_id)">
                            {{ scope.row.order_no }}
                        </a>
                    </template>
                </el-table-column>

                <el-table-column prop="goods" align="center" width="200px" label="商品">
                    <template slot-scope="scope">
                        <div class="goods">
                            <div class="goods-img">
                                <el-image :src="scope.row.detail.pic_url" fit="fill" style="width: 60px; height: 60px"></el-image>
                            </div>
                            <div class="goods-name">
                                <span>{{ sub(scope.row.detail.goods_name) }}</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column prop="attr" align="center" label="商品属性">
                    <template slot-scope="scope">
                        {{ scope.row.detail.goods_attr_name }}
                    </template>
                </el-table-column>

                <el-table-column prop="price" label="实际支付" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.order.goods_price }}
                        +
                        {{ scope.row.order.shipping_money }}
                    </template>
                </el-table-column>

                <el-table-column prop="price" label="申请退款" align="center">
                    <template slot-scope="scope">
                        <div>
                            <div>
                                {{ scope.row.refund.refund_price }}
                            </div>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column prop="price" label="推送状态" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.status_text }}
                    </template>
                </el-table-column>

                <el-table-column label="售后状态" align="center">
                    <template slot-scope="scope">
                        <el-tag size="small" effect="plain" :type="scope.row.refund.refund_status == 1 ? 'success' : 'danger'">{{ refund_status_list[scope.row.refund.refund_status] }}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="error_msg" label="错误信息" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.error_msg }}
                    </template>
                </el-table-column>

                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="showDetail(scope.row)">售后管理</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <!-- 分页 -->
            <el-row type="flex" class="page" justify="end">
                <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount" v-if="list"></el-pagination>
            </el-row>
        </div>

        <!-- 订单详情 -->
        <el-dialog title="订单详情" :visible.sync="dialogVisible" width="50%" @close="onCloseDialogVisible">
            <el-descriptions class="margin-top" title="" :column="2" border v-if="refund" v-loading="reqLoading">

                <el-descriptions-item>
                    <template slot="label">
                        售后订单编号
                    </template>
                    {{ refund.order_no }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        售后类型
                    </template>
                    {{ refund.type_text }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        售后原因
                    </template>
                    {{ refund.reason }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        售后金额
                    </template>
                    {{ refund.refund_price }}
                </el-descriptions-item>

                <el-descriptions-item span="2" v-if="chain_refund_sn">
                    <template slot="label">
                        供应链端售后订单号
                    </template>
                    {{ chain_refund_sn }}
                </el-descriptions-item>

                <el-descriptions-item span="2">
                    <template slot="label">
                        售后备注
                    </template>
                    {{ refund.remark }}
                </el-descriptions-item>

                <el-descriptions-item span="2">
                    <template slot="label">
                        售后凭证
                    </template>
                    <el-image :src="item" v-for="item in refund.pic_list" :preview-src-list="refund.pic_list" style="height:80px;margin-right:5px"></el-image>
                </el-descriptions-item>

                <!-- 部分退款 -->
                <template v-if="thirdOrder">
                    <el-descriptions-item span="2">
                        <template slot="label">
                            中台最多可退
                        </template>
                        {{ thirdOrder.amount }}
                    </el-descriptions-item>
                    <el-descriptions-item span="2">
                        <template slot="label">
                            申请退款金额*
                        </template>
                        <el-input :disabled="status != 0 || refund_status != 0" v-model="third_refund_amount" placeholder="请输入中台退款金额"></el-input>
                    </el-descriptions-item>
                </template>

            </el-descriptions>
            <span slot="footer" class="dialog-footer" v-if="status == 0 && refund_status == 0">
                <el-button type="warning" @click="reject">驳回售后</el-button>
                <el-button type="primary" @click="agree">推送售后</el-button>
            </span>
        </el-dialog>
    </el-card>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                searchData: {
                    name: '',
                    order_no: '',
                    data: '',
                    refund_status: ''
                },
                refund: {},
                listLoading: false,
                removeLoading: false,
                list: [],
                removeImportBtn: false,
                pageCount: 0,
                page: 1,
                dialogVisible: false,
                refund_status: 0,
                status: 0,
                chain_refund_sn: '',
                id: null,
                thirdOrder: null,
                third_refund_amount: '',
                reqLoading: false,
                refund_way: null,
                refund_status_list: {}
            };
        },
        methods: {
            /**
             * 获取商品库
             */
            getOrderList() {
                this.listLoading = true
                request({
                    params: {
                        r: 'qi-juhe/refund/index',
                        page: this.page,
                    },
                    method: 'post',
                    data: this.searchData,
                }).then(e => {
                    if (e.data.code === 0) {
                        this.list = e.data.data.list
                        this.pageCount = e.data.data.page_count
                        this.refund_status_list = e.data.data.refund_status_list;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                    this.listLoading = false
                }).
                catch(e => {
                    console.log(e);
                })
            },
            /**
             * 分页
             */
            pagination(currentPage) {
                this.page = currentPage
                this.getOrderList()
            },
            /**
             * 字符串裁剪
             */
            sub(string) {
                string = string + ''
                var reg = /[\u4e00-\u9fa5]/g, //专业匹配中文
                    slice = string.substring(0, 15),
                    chineseCharNum = (~~(slice.match(reg) && slice.match(reg).length)),
                    realen = slice.length * 2 - chineseCharNum;
                return string.substr(0, realen) + (realen < string.length ? "..." : "");
            },
            /**
             * 跳转到商城商品
             */
            mallOrder(id) {
                this.$navigate({
                    r: 'mall/order/refund-detail',
                    id: id
                })
            },
            /**
             * 跳转到订单详情
             */
            mallOrderDetail(id) {
                this.$navigate({
                    r: 'mall/order/detail',
                    id: id
                })
            },
            /**
             * 搜索
             */
            onSearch() {
                this.page = 1
                this.getOrderList()
            },
            /**
             * 重置
             */
            onReset() {
                this.searchData = {
                    name: '',
                    order_no: '',
                    receiver_name: '',
                    refund_status: ''
                }
            },
            /**
             * 展示订单详情
             */
            showDetail(row) {
                this.id = row.id
                this.refund = row.refund
                this.chain_refund_sn = row.chain_refund_sn
                this.status = row.status
                this.refund_status = row.refund_status
                this.dialogVisible = true
                this.refund_way = row.data.refund_way
                if (row.data.refund_way == 0) {
                    this.reqLoading = true
                    request({
                        params: {
                            r: 'qi-juhe/order/third-order-detail',
                            order_no: row.order_no,
                            refund_id: row.order_refund_id
                        },
                        method: 'get',
                    }).then(e => {
                        if (e.data.code === 0) {
                            this.reqLoading = false
                            this.thirdOrder = e.data.data
                            if (row.data.amount != parseInt(row.data.apply_amount * 100)) {
                                this.third_refund_amount = parseFloat(row.data.amount * 0.01).toFixed(2)
                            }
                        } else {
                            this.$message.error(e.data.msg);
                        }
                        this.listLoading = false
                    }).
                    catch(e => {
                        console.log(e);
                        this.$message.error('网络错误');
                    })
                }
            },
            /**
             * 同意申请
             */
            agree() {
                //  判断是否设置金额
                if (this.refund_way == 0 && this.third_refund_amount == '') {
                    this.$message.error('申请退款金额不能为空');
                    return
                }
                this.$confirm('确认操作吗？').then(() => {
                    request({
                        params: {
                            r: 'qi-juhe/refund/agree',
                        },
                        method: 'post',
                        data: {
                            id: this.id,
                            amount: this.third_refund_amount,
                            refund_way: this.refund_way
                        },
                    }).then(e => {
                        if (e.data.code === 0) {
                            this.$message.success('操作成功');
                            let self = this
                            setTimeout(() => {
                                self.thirdOrder = null
                                self.refund_way = null
                                self.third_refund_amount = ''
                                self.dialogVisible = false
                                self.getOrderList()
                            }, 1500);
                        } else {
                            this.$message.error(e.data.msg);
                        }
                        this.listLoading = false
                    }).
                    catch(e => {
                        console.log(e);
                    })
                }).catch(_ => {})
            },
            /**
             * 驳回申请
             */
            reject() {
                this.$confirm('确认操作吗？').then(() => {
                    request({
                        params: {
                            r: 'qi-juhe/refund/reject',
                        },
                        method: 'post',
                        data: {
                            id: this.id
                        },
                    }).then(e => {
                        if (e.data.code === 0) {
                            this.$message.success('操作成功');
                            let self = this
                            setTimeout(() => {
                                self.thirdOrder = null
                                self.third_refund_amount = ''
                                self.dialogVisible = false
                                self.getOrderList()
                            }, 1500);
                        } else {
                            this.$message.error(e.data.msg);
                        }
                        this.listLoading = false
                    }).
                    catch(e => {
                        console.log(e);
                    })
                }).catch(_ => {})
            },
            onCloseDialogVisible() {
                this.thirdOrder = null
                this.third_refund_amount = ''
            }
        },
        mounted: function() {
            this.page = getQuery('page') ? getQuery('page') : 1
            this.getOrderList()
        }
    })
</script>

<style>
    .goods {
        display: flex;
    }

    .goods-name {
        margin-left: 5px;
    }

    .page {
        margin-top: 10px;
    }
</style>