qimall/addons/Happiness/client/views/order/refund.php

<?php

use common\helpers\ComponentHelper;

?>
<style>
    .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> -->
            </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-select>
                            </el-input>
                        </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-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">
                                ID
<!--                                <el-checkbox v-model="checkAll"></el-checkbox>-->
                            </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="">操作</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 v-model="checkAll"></el-checkbox>-->
                                    </div>
                                    <div style="padding-right: 20px;">售后编号：{{ item.order_no || '-' }}</div>
                                    <div style="padding-right: 20px;">用户：{{ item.base_user.nickname || '-' }}</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>
                                </div>

                            </div>
                            <ul class="tab-cont-info" flex="dir:left cross:center" v-if="true">
                                <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'] }}件</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>{{getOrderPrice(item.orderDetail)}}</p>
                                    </div>
                                </li>
                                <li class="width-pre10 border-right">
                                    <div>
                                        <p>{{ refund_type_list[item.type] }}</p>
                                        <p v-if="item.type != 3">退款金额：{{getOrderPrice(item.orderDetail)}}</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>
                                    <el-button size="small" type="text" @click="handle('detail',item)">售后详情</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>

</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                price: 0,
                visibles: false,
                hidden: false,
                current: -1,
                detailIndex: -1,
                checkAll: false,
                checked: false,
                select: '',
                goods_name: '',
                goods_id: '',
                tabs: [
                    {
                        name: '全部',
                        value: '999'
                    },
                    {
                        name: '售后申请',
                        value: '0'
                    },
                    // {
                    //     name: '售后中',
                    //     value: '3,4,5'
                    // },
                    {
                        name: '售后完成',
                        value: '1'
                    }
                ],
                refund_type_list: {},
                refund_status_list: {},
                activeName: '999',
                list: [],
                listLoading: false,
                page: 1,
                pageCount: 0,
                mch_id: 0, // 这个地方不知道要怎么获取
                search_data: { // 筛选条件
                    type: "mobile",
                    keyword: null,
                    order_no: null,
                    goods_type: null,
                },
                goods_type: <?= $goods_type ?>,
                sign:'',
            };
        },
        mounted: function() {
            this.getList();
        },
        created() {
            this.sign = getQuery('sign')
        },
        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) { //标签页切换
                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();
            },
            handle(type, data = null) {
                let id = data ? parseInt(data.id) : '';
                switch (type) {
                    // 订单详情
                    case 'detail':
                        let params = {
                            r: 'happiness/client/order/refund-detail',
                            sign:this.sign
                        };
                        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;
                }
            },
            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();
            },
            // 获取商品列表
            getList(params = {}) {
                let self = this;
                let basic_params = {
                    r: 'happiness/client/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.refund_type_list = e.data.data.refund_type_list;
                            self.refund_status_list = e.data.data.refund_status_list;
                            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;
            },
        }
    });
</script>