qimall/addons/Bargain/backend/views/default/order-list.php

<?php
    use common\helpers\ComponentHelper;
    ComponentHelper::loadComponentView('com-user-info');
    ComponentHelper::loadComponentView('com-title');
?>
<com-list-page :crumbs="crumbs" id="application">
    <com-list-table
        ref="table"
        :api-params="apiParams"
        :tabs="tabs"
        @set-action-name="setActionName"
        :search-list="searchList"
    >
        <el-table-column label="会员" width="150">
            <template slot-scope="scope">
                <com-user-info :user="scope.row.user"></com-user-info>
            </template>
        </el-table-column>
        <el-table-column prop="order_no" label="订单号" width="200" align="center">
            <template slot-scope="scope">
                {{scope.row.order_no|emptyFilled}}
            </template>
        </el-table-column>
        <el-table-column prop="goods.goods" label="商品信息" width="210">
            <template slot-scope="scope">
                <div class="goods-info">
                    <el-avatar
                        shape="square"
                        size="large"
                        :src="scope.row.cover_pic"
                    ></el-avatar>
                    <div class="content">
                        <com-title :title="scope.row.goods_name" :max="8"></com-title>
                        <div class="price">￥{{ scope.row.price.toFixed(2) }}</div>
                    </div>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="reduce_price" label="减少金额" align="center"></el-table-column>
        <el-table-column prop="shipping_money" label="运费" align="center"></el-table-column>
        <el-table-column prop="total_pay_price" label="订单金额" align="center"></el-table-column>
        <el-table-column prop="order_status" label="状态" align="center">
            <template slot-scope="scope">
                <el-tag effect="dark" size="small" type="success" v-if="scope.row.order_status==0">进行中</el-tag>
                <el-tag effect="dark" size="small" type="" v-if="scope.row.order_status==1">成功</el-tag>
                <el-tag effect="dark" size="small" type="info" v-if="scope.row.order_status==2">失败</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="支付时间" width="150" align="center">
            <template slot-scope="scope">
                <span>{{ scope.row.pay_time|dateTimeFormat('Y-m-d H:i:s') }}</span>
            </template>
        </el-table-column>
        <el-table-column label="发布砍价时间" width="150" align="center">
            <template slot-scope="scope">
                <span>{{ scope.row.created_at|dateTimeFormat('Y-m-d H:i:s') }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="right">
            <template slot-scope="scope">
                <div class="btn">
                    <el-button v-if="scope.row.is_pay==1" @click="toOrderDetail(scope.row.order_id)" type="text" size="small">订单详情</el-button>
                    <el-button @click="toUserOrderDetail(scope.row.id)" type="text" size="small">砍价详情</el-button>
                </div>
            </template>
        </el-table-column>
    </com-list-table>
</com-list-page>
<script>
    const application = new Vue({
        el: '#application',
        data: {
            crumbs: [
                {
                    title: '砍价',
                },
                {
                    title: '砍价订单',
                }
            ],
            tabs: [
                {
                    label: '全部',
                    name: '-1',
                },
                {
                    label: '进行中',
                    name: '0',
                },
                {
                    label: '成功',
                    name: '1',
                },
                {
                    label: '失败',
                    name: '2',
                },
            ],
            searchList: [
                {
                    key: 'nickname',
                    title: '请输入用户昵称',
                    type: 'text',
                    clearable: true,
                },
                {
                    key: 'mobile',
                    title: '请输入用户手机号',
                    type: 'text',
                    clearable: true,
                },
                {
                    key: 'order_no',
                    title: '请输入订单号',
                    type: 'text',
                    clearable: true,
                },
            ],
            action: '-1',
            apiParams: {
                r: 'bargain/default/order-list',
                order_status: '-1',
            },
        },
        methods: {
            setActionName(e) {
                this.apiParams = Object.assign({...this.apiParams}, {
                    order_status: e
                })
                this.$nextTick(function() {
                    this.$refs.table.handleSearch();
                })
            },
            // 跳转到砍价列表详情
            toUserOrderDetail(order_id) {
                navigateTo({
                    r: 'bargain/default/user-order-list',
                    bargain_order_id: order_id, //直接跳转到订单详情页，但是要确保获取时字段统一
                })
            },
            // 跳转到订单详情
            toOrderDetail(order_id) {
                navigateTo({
                    r: 'mall/order/detail',
                    id: order_id, //直接跳转到订单详情页，但是要确保获取时字段统一
                })
            },
        }
    })
</script>
<style leng="scss">
    .goods-info {
        display: flex;
        align-items: center;
        .content {
            display: flex;
            align-items: center;
            align-items: flex-start;
            margin-left: 5px;
            .price {
                color: #ff4900;
                font-size: 16px;
            }
        }
    }
    .btn {
        .el-button + .el-button {
            margin-left: 0;
        }
    }
</style>