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

<?php

use common\helpers\ComponentHelper;
ComponentHelper::loadComponentView('com-export-dialog');
?>
<style>
    @media screen and (max-width: 1500px) {
        #app {
            min-width: 1270px;
        }
    }
    .demo-form-inline .el-select .el-input {
        width: 100px;
    }

    /* 订单表格 start */
    .width-pre10 {
        width: 10%;
    }

    .width-50 {
        width: 80px;
    }

    .width-400 {
        width: 350px;
    }

    .order-table {
        overflow-x: scroll;
    }

    .tab-title,
    .tab-cont {
        width: 100%;
        min-width: 1290px;
        font-size: 13px;
    }

    .tab-title {
        padding: 20px 0;
    }

    .tab-title>li {
        padding: 0 10px;
    }

    .tab-cont {
        border: 1px solid #F2F2F2;
        margin-bottom: 20px;
    }

    .tab-cont-row {
        padding: 10px 0;
        background-color: #F7F7F7;
    }

    .tab-cont-info {
        height: 100px;
    }

    .tab-cont-info>li {
        /* display: flex;
        flex-direction: column;
        justify-content: center; */
        height: 100%;
        padding: 16px 10px;
    }

    .tab-btns {
        width: 320px;
        margin-right: 20px;
    }

    .tab-goods-name {
        margin: 0 10px;
    }

    .border-right {
        border-right: 1px solid #f2f2f2;
    }

    .border-bottom {
        border-bottom: 1px solid #f2f2f2;
    }

    .no-border-bottom {
        border-bottom: none !important;

    }

    .cursor {
        cursor: pointer;
    }

    .edit-icon {
        color: #03c5ff;
        cursor: pointer;
    }

    .popover-btn {
        font-size: 12px;
        padding: 0 10px;
        border-right: 1px solid var(--primary, #03c5ff);
        cursor: pointer;
        display: inline-block;
        line-height: 1;
        color: #03c5ff;
    }

    .popover-btn:last-child {
        border-right: none;
    }

    .width-s {
        width: 250px;
    }

    .el-button--text {
        padding: 0 !important;
    }

    /* 订单表格 end */
</style>
<div id="app" v-cloak>
    <el-card shadow="never" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>订单列表</span>
            <div style="float: right; margin: -5px 0">
                <!-- <el-button type="primary" size="small" @click="handle('edit')">添加商品</el-button>-->
                <!--                <el-button type="primary" size="small">订单导出</el-button>-->
                <com-export-dialog style="float: right;margin-top: -5px" :field_list='export_list' :action_url="export_url" :params="search_data">
                </com-export-dialog>
            </div>
            <div style="float: right; margin: -5px 0">
                <!-- <el-button type="primary" size="small" @click="handle('edit')">添加商品</el-button>
                <el-button type="primary" size="small">商品导出</el-button> -->
            </div>
        </div>
        <div class="table-body">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane v-for="item in tabs" :key="item.value" :label="item.name" :name="item.value">
                    <el-form :inline="true" :model="search_data" size="small" class="demo-form-inline">
                        <el-form-item label="订单号">
                            <el-input placeholder="请输入订单号或售后编号" v-model="search_data.order_no"></el-input>
                        </el-form-item>
                        <el-form-item label="">
                            <el-input placeholder="请输入内容" v-model="search_data.keyword" class="input-with-select">
                                <el-select v-model="search_data.type" slot="prepend" placeholder="请选择">
                                    <el-option label="用户电话" value="mobile"></el-option>
                                    <el-option label="商品名称" value="goods_name"></el-option>
                                    <el-option label="交易单号" value="trade_no"></el-option>
                                </el-select>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="售后类型">
                            <el-select v-model="search_data.refund_type" clearable placeholder="请选择售后类型">
                                <el-option :label="item" :value="index" v-for="(item, index) in refund_type_list" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="商品类型">
                            <el-select v-model="search_data.goods_type" clearable placeholder="请选择商品类型">
                                <el-option v-for="(name, value) in goods_type" :key="value" :label="name" :value="value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">搜索</el-button>
                            <el-button type="danger" @click="clearSearch" v-if="show_clear_search_btn">清除条件</el-button>
                            <el-button type="primary" @click="batchRefundSubmit" :disabled="batchRefund.is_refund_button_disabled">批量退款</el-button>
                        </el-form-item>
                    </el-form>

                    <!-- 订单表格 start -->
                    <div class="order-table">
                        <ul class="tab-title" flex="dir:left cross:center">
                            <li class="width-50" flex="main:center">
                                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="allSelOrder"></el-checkbox>
                            </li>
                            <li class="width-50" flex="main:center">
                                ID
                            </li>
                            <li class="width-400">商品信息</li>
                            <li class="width-pre10">价格/数量</li>
                            <li class="width-pre10">售后状态</li>
                            <li class="width-pre10">申请退款金额</li>
                            <li class="width-pre10">售后方式</li>

                            <li class="width-s">售后原因</li>
                            <li class="width-s">收货人信息</li>
                            <li class="">操作</li>
                        </ul>

                        <div class="tab-cont" v-for="(item, index) in list" :key="index">
                            <div class="tab-cont-row" flex="main:justify cross:center">
                                <div flex="dir:left cross:center">
                                    <div class="width-50" flex="main:center">
                                        <el-checkbox-group v-model="checkedOrder" @change="orderChange">
                                            <el-checkbox :label="item.id">{{''}}</el-checkbox>
                                        </el-checkbox-group>
                                    </div>
                                    <div style="padding-right: 20px;">售后编号：{{ item.order_no || '-' }}</div>
                                    <div style="padding-right: 20px;" v-if="item.base_user">
                                        <el-button type="text" @click="navUserDetail(item.base_user.id)" class="all_text">
                                            用户({{item.base_user.id}})：{{ item.base_user.nickname || item.base_user.username }}
                                        </el-button>
                                    </div>
                                    <div style="padding-right: 20px;">申请时间：{{ item.created_at|dateTimeFormat('Y-m-d H:i:s')}}</div>
                                    <div style="padding-right: 20px;">订单编号：{{ item.order['order_no'] || '-' }}</div>
                                    <el-tag size="small" effect="plain" :type="item.orderDetail.order_status >= 1 ? 'success' : 'danger'">{{ order_status_map[item.orderDetail.order_status] }}</el-tag>
                                    <div style="padding-left: 20px;" v-if="item.refund_status == 1 && item.lastStep">完成时间：{{ item.lastStep.created_at|dateTimeFormat('Y-m-d H:i:s')}}</div>
                                </div>

                            </div>
                            <ul class="tab-cont-info" flex="dir:left cross:center" v-if="true">
                                <li class="width-50 border-bottom"></li>
                                <li class="width-50 border-right border-bottom" flex="cross:center">{{ item.id }}</li>
                                <li class="tab-shop-info width-400 border-bottom" flex="dir:left">
                                    <div style="position: relative;">
                                        <el-image style="width: 50px; height: 50px; border-radius: 5px;" :src="item.orderDetail['pic_url']"></el-image>
                                    </div>
                                    <div class="tab-goods-name">
                                        <com-ellipsis :line="1" :text="item.orderDetail['goods_name'].toString()"></com-ellipsis>
                                        <template v-if="item.orderDetail['attr_list'] && item.orderDetail['attr_list.length'] > 0">
                                            <el-tag style="margin-right: 2px;margin-top: 5px;" v-for="(attrItem, attrIndex) in item.orderDetail['attr_list']" :key="attrIndex" size="small">
                                                {{ attrItem }}
                                            </el-tag>
                                        </template>

                                        <el-tag v-else size="small">
                                            无规格
                                        </el-tag>
                                    </div>
                                </li>
                                <li class="width-pre10 border-bottom">
                                    <div class="cursor" flex="cross:center">
                                        <p style="padding-right: 10px;">
                                            {{getOrderPrice(item.orderDetail)}}
                                            <span v-if="item.orderDetail['adjust_money'] != 0">(调价：￥{{ item.orderDetail['adjust_money'] }})</span>
                                        </p>
                                    </div>
                                    <p>{{ item.orderDetail['num'] }}{{item.goods_unit||'件'}}</p>
                                </li>
                                <li class="width-pre10 border-right border-bottom" flex="cross:center">
                                    <div>
                                        <el-tag size="small" effect="plain" :type="item.refund_status == 1 ? 'success' : 'danger'">{{ refund_status_list[item.refund_status] }}</el-tag>
                                    </div>
                                </li>
                                <li class="width-pre10 border-right">
                                    <div>
<!--                                        <p>{{getOrderPrices(item,item.orderDetail, 'goods_price')}}</p>-->
                                        <p>￥{{item.refund_price}}</p>
                                    </div>
                                </li>
                                <li class="width-pre10 border-right">
                                    <div>
                                        <p>{{ refund_type_list[item.type] }}</p>
                                        <p v-if="item.type != 3">退款金额：{{getOrderPrices(item,item.orderDetail, 'reality_refund_price')}}</p>
                                    </div>
                                </li>
                                <li class="width-s border-right">
                                    <p>{{ item.reason }}</p>
                                    <com-ellipsis :line="1" :text="item.remark.toString()"></com-ellipsis>
                                </li>
                                <li class="width-s border-right">
                                    <div v-if="item.order && item.order.province == 0 && item.order.community_addons_data">
                                        <p>{{ item.order.community_addons_data.name | emptyFilled }}</p>
                                        <p>{{ item.order.community_addons_data.contact_name | emptyFilled }}</p>
                                        <p>{{ item.order.community_addons_data.contact_phone | emptyFilled}} </p>
                                        <p style="display: flex;align-items: center;">
                                            <com-ellipsis :line="1" :text="item.order.community_addons_data.address"></com-ellipsis>
                                        </p>
                                    </div>
                                    <div v-else>
                                        <p>{{ item.order.receiver_name | emptyFilled }}</p>
                                        <p>{{ item.order.mobile |emptyFilled}} </p>
                                        <p style="display: flex;align-items: center;">
                                            <com-ellipsis v-if="(item.order.region_name ).trim() != 'null'" :line="1" :text="item.order.region_name + '' + item.order.address"></com-ellipsis>
                                            <span v-else>--</span>
                                        </p>
                                    </div>
                                </li>
                                <li>
                                    <el-button size="small" type="text" @click="handle('detail',item)">售后详情</el-button>
                                    <el-button size="small" type="text" @click="handle('fen_run',item)" v-if="item.refund_status == 1">分润明细</el-button>
                                </li>
                            </ul>
                        </div>

                    </div>
                    <div style="text-align: right;margin: 20px 0;">
                        <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
                    </div>
                    <!-- 订单表格 end -->
                </el-tab-pane>
            </el-tabs>
        </div>
    </el-card>


    <el-dialog :close-on-click-modal="false" class="fenRunData" title="分润明细" :visible.sync="dialogTableVisible_fenRun">
        <el-tabs v-model="activeNames" @tab-click="commissionHandleClick">
            <el-tab-pane v-for="(v, k) in commission_type" :label="v.label" :key="v.name" :name="v.name">
                <el-table :data="fenRunData">
                    <el-table-column label="用户">
                        <template slot-scope="scope">
                            <div class="table-info-img-text">
                                <el-image class="table-info-img circle" :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>
                                <div class="table-info-text">
                                    <div>{{scope.row.nickname}}<span style="color:blue">({{scope.row.user_id}})</span></div>
                                    <div>{{scope.row.mobile}}</div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column property="change_num" :label="v.label">
                        <template slot-scope="scope">
                            <span v-if="scope.row.change_type=='add'" style="color:green;">+{{scope.row.change_num}}</span>
                            <span v-else style="color:red;">-{{scope.row.change_num}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column property="is_frozen" label="状态"></el-table-column>
                    <el-table-column property="capital_type_text" label="类型">
                        <template slot-scope="scope">
                            {{scope.row.capital_type_text}} : {{scope.row.desc}}
                        </template>
                    </el-table-column>
                    <el-table-column property="from_type_text" label="所属插件"></el-table-column>
                </el-table>
            </el-tab-pane>
    </el-dialog>

</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                export_list: {},
                export_url: 'mall/order/refund',
                price: 0,
                visibles: false,
                hidden: false,
                current: -1,
                detailIndex: -1,
                checkAll: false,
                isIndeterminate: false,
                checked: false,
                select: '',
                goods_name: '',
                goods_id: '',
                batchRefund: {// 批量退款数据
                    refund_ids: null,
                    is_refund_button_disabled: false,
                },
                tabs: [
                    {
                        name: '全部',
                        value: '999'
                    },
                    {
                        name: '售后申请',
                        value: '0'
                    },
                    {
                        name: '售后中',
                        value: '3,4,5'
                    },
                    {
                        name: '售后完成',
                        value: '1'
                    }
                ],
                refund_type_list: {},
                refund_status_list: {},
                checkedOrder: [], //选中的订单
                activeName: '999',
                list: [],
                listLoading: false,
                page: 1,
                pageCount: 0,
                mch_id: 0, // 这个地方不知道要怎么获取
                search_data: { // 筛选条件
                    type: "mobile",
                    keyword: null,
                    order_no: null,
                    refund_type: null,
                    goods_type: ''
                },
                order_status_map: {},
                goods_type: <?= $goods_type ?>,
                dialogTableVisible_fenRun: false,
                fenRunData: [],
                user_level: {},
                commission_type: [],
                activeNames: 'commission',
                order_detail_id: 0,
                order_id: 0,
            };
        },
        mounted: function() {
            this.getOrderStatus();
            this.getList();
        },
        computed: {
            show_clear_search_btn: function() {
                return !isEmpty(this.search_data.order_no) || !isEmpty(this.search_data.keyword);
            }
        },
        updated: function() {
            // console.log('ssssss')
        },
        methods: {
            handleClick(res) { //标签页切换
                this.page = 1;
                if (this.search_data.refund_status == this.activeName) return;
                if (this.activeName == '999') {
                    this.search_data.refund_status = null;
                } else {
                    this.search_data.refund_status = this.activeName;
                }
                this.getList(this.search_data);
            },
            search() {
                this.getList(this.search_data);
            },
            clearSearch() {
                this.search_data.order_no = null;
                this.search_data.type = 'mobile';
                this.search_data.keyword = null;
                this.getList();
            },
            navUserDetail(id) {
                this.$navigate({
                    r: 'mall/user/user-detail',
                    id: id
                })
            },
            handle(type, data = null) {
                let id = data ? parseInt(data.id) : '';
                switch (type) {
                    // 订单详情
                    case 'detail':
                        let params = {
                            r: 'mall/order/refund-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 'fen_run':
                        this.dialogTableVisible_fenRun = true;
                        this.order_id = data.order_id;
                        this.order_detail_id = data.order_detail_id;
                        this.getCapitalLog(data.order_id, data.order_detail_id, this.activeNames)
                        break;
                }
            },
            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.getList(this.search_data);
                    } else {
                        self.$message.error(e.data.msg);
                    }
                    if (callback) callback(e.data);
                }).catch(e => {
                    console.log(e);
                });
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getList(this.search_data);
            },
            getOrderStatus() {
                let self = this;
                request({
                    params: {
                        r: 'mall/order/get-order-status',
                    },
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                        self.order_status_map = e.data.data.order_status_map;
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    self.$message.error(e);
                });
            },
            // 获取商品列表
            getList(params = {}) {
                let self = this;
                let basic_params = {
                    r: 'mall/order/refund',
                    page: self.page,
                };
                params = Object.assign(basic_params, params);
                console.log(params);
                if (self.listLoading == false) {
                    self.listLoading = true;
                    request({
                        params: params,
                        method: 'get',
                    }).then(e => {
                        self.listLoading = false;
                        if (e.data.code == 0) {
                            self.list = e.data.data.list;
                            self.export_list = e.data.data.export_list;
                            self.refund_type_list = e.data.data.refund_type_list;
                            self.refund_status_list = e.data.data.refund_status_list;
                            self.commission_type = e.data.data.commission_type;
                            self.pageCount = e.data.data.page_count;
                        } else {
                            self.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        self.$message.error(e.data.msg);
                        self.listLoading = false;
                    });
                }
            },
            getOrderPrice(data){
                let text = '';
                switch (data.marketing_type) {
                    case 'ScoreMall' :
                        text = data.extra_info;
                        break;
                    default :
                        text = '￥'+data.goods_price;
                }
                return text;
            },
            getOrderPrices(order,orderDetail, field = null){
                let text = '';
                switch (orderDetail.marketing_type) {
                    case 'ScoreMall' :
                        text = orderDetail.extra_info;
                        break;
                    default :
                        text = '￥'+order.refund_price;
                }
                return text;
            },
            orderChange(val) {
                let checkedCount = val.length;
                this.checkAll = checkedCount == this.list.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.list.length;
                this.batchRefund.refund_ids = val;
            },
            allSelOrder(boo) {
                let ids = [];
                this.list.forEach(v => {
                    ids.push(v.id);
                })
                this.checkedOrder = boo ? ids : [];
                this.isIndeterminate = false;
                this.batchRefund.refund_ids = ids;
            },
            batchRefundSubmit() {// 批量退款
                if (this.batchRefund.refund_ids === '' ||  this.batchRefund.refund_ids == null){
                    return this.$message.error("请选择需要操作操作的订单!");
                }
                let refund_ids = this.batchRefund.refund_ids.join(',');
                this.batchRefund.is_refund_button_disabled = true;
                request({
                    params: {
                        r: 'mall/order/batch-refund',
                    },
                    method: 'post',
                    data: {
                        refund_ids: refund_ids,
                    }
                }).then(e => {
                    if (e.data.code === 0) {
                        this.$message({
                            message: e.data.msg,
                            type: 'success',
                            duration: 2000,
                            onClose: () => {
                                window.location.reload();
                            }
                        });
                    } else {
                        this.batchRefund.is_refund_button_disabled = false;
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            getCapitalLog(order_id, order_detail_id, wallet_type) {
                request({
                    params: {
                        r: 'mall/order/commission-and-score-list-by-order-detail-id',
                        order_detail_id: order_detail_id,
                        order_id: order_id,
                        wallet_type: wallet_type,
                    },
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                        this.fenRunData = e.data.data.list;
                        this.user_level = e.data.data.user_level;
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            commissionHandleClick(tab, event) {
                this.getCapitalLog(this.order_id, this.order_detail_id, this.activeNames)
            },
        }
    });
</script>