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

<?php
    use common\helpers\ComponentHelper;
    ComponentHelper::loadComponentView('../components/com-title', __DIR__);
    ComponentHelper::loadComponentView('com-list-page');
    ComponentHelper::loadComponentView('com-list-table');
?>
<com-list-page :crumbs="crumbs" id="application">
    <com-list-table 
        ref="table"
        :api="'star-chain/refund/index'"
        :search-list="searchList"
    >
        <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="goods" align="center" width="200px" label="商品">
            <template slot-scope="scope">
                <div class="goods">
                    <div class="goods-img">
                        <el-avatar shape="square" :src="getUrl(scope.row.goods.carousel_img_list)" fit="fill" style="width: 60px; height: 60px"></el-avatar>
                    </div>
                    <div class="goods-name">
                        <span>{{ sub(scope.row.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">
                {{ scope.row.refund.refund_price }}
            </template>
        </el-table-column>

        <el-table-column prop="status" label="推送状态" align="center">
            <template slot-scope="scope">
                {{ scope.row.status_text }}
            </template>
        </el-table-column>
        
        <el-table-column prop="refund_status_text" label="推送状态" align="center">
        </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" :loading="btnLoading" @click="showDetail(scope.row)">订单详情</el-button>
            </template>
        </el-table-column>
    </com-list-table>
    <!-- 订单详情 -->
    <el-dialog title="订单详情" :visible.sync="dialogVisible" width="50%">
        <el-descriptions class="margin-top" title="" :column="2" border v-if="refund">
            <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>
        </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>
</com-list-page>
<script>
const application = new Vue({
    el: '#application',
    data: {
        crumbs: [
            {
                title: '首页',
                router: 'mall/overview/index',
            },
            {
                title: '售后管理',
            }
        ],
        refund: {},
        dialogVisible: false,
        searchList: [
            {
                key: 'name',
                title: '商品名称',
                type: 'text',
            },
            {
                key: 'order_no',
                title: '订单号',
                type: 'text',
            },
            {
                key: 'data',
                title: '日期',
                type: 'date-time-range',
            },
        ],
        btnLoading: false,
        id: 0,
        refund: '',
        chain_refund_sn: '',
        status: 0,
        refund_status: 0,
    },
    methods: {
        /**
         * 字符串裁剪
         */
        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
            })
        },
        /**
         * 展示订单详情
         */
        showDetail(row) {
            this.btnLoading = true
            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.btnLoading = false
        },
        /**
         * 同意申请
         */
        agree() {
            this.$confirm('确认操作吗？').then(() => {
                request({
                    params: {
                        r: 'star-chain/refund/agree',
                    },
                    method: 'post',
                    data: {
                        id: this.id
                    },
                }).then(e => {
                    if (e.data.code === 0) {
                        this.$message.success('操作成功');
                        let self = this
                        setTimeout(() => {
                            self.dialogVisible = false
                            self.$refs['table'].reload()
                        }, 1500);
                    } else {
                        this.$message.error(e.data.msg);
                    }
                    this.listLoading = false
                }).
                catch(e => {
                    console.log(e);
                })
            }).catch(_ => {})
        },
        /**
         * 驳回申请
         */
        reject() {
            this.$confirm('确认操作吗？').then(() => {
                request({
                    params: {
                        r: 'star-chain/refund/reject',
                    },
                    method: 'post',
                    data: {
                        id: this.id
                    },
                }).then(e => {
                    if (e.data.code === 0) {
                        this.$message.success('操作成功');
                        let self = this
                        setTimeout(() => {
                            self.dialogVisible = false
                            self.$refs['table'].reload()
                        }, 1500);
                    } else {
                        this.$message.error(e.data.msg);
                    }
                    this.listLoading = false
                }).
                catch(e => {
                    console.log(e);
                })
            }).catch(_ => {})
        },
        /**
         * 获取图片地址
         */
        getUrl(urls) {
            return urls ? urls[0] : ''
        },
    },
})
</script>

<style>
    .goods {
        display: flex;
    }

    .goods-name {
        margin-left: 5px;
    }
</style>