qimall/addons/TeamData/backend/views/default/order.php

<?php
use common\helpers\ComponentHelper;
ComponentHelper::loadComponentView('com-export-dialog');
?>
<style>
    .default-avatar{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        float: left;
        margin-right: 8px;
    }
</style>
<div id="my_customer"  v-cloak>
    <div>
        <el-card class="box-card">
            <el-form size="small" :inline="true">
                <el-form-item>
                    <el-input style="width: 200px" v-model="searchData.keyword" placeholder="商品ID/商品名称" clearable></el-input>
                </el-form-item>

                <el-form-item>
                    <el-input style="width: 200px" v-model="searchData.order_no" placeholder="订单编号" clearable></el-input>
                </el-form-item>

                <el-form-item>
                    <el-date-picker size="small" v-model="searchData.date" type="datetimerange" style="float: left"
                                    value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="创建日期开始"
                                    @change="selectDateTime" end-placeholder="创建日期结束">
                    </el-date-picker>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="searchs">搜索</el-button>
                </el-form-item>
                <el-form-item style="float: right">
                    <com-export-dialog style="float: right;margin-top: -5px" :field_list='export_list' :action_url="export_url" :params="searchData">
                    </com-export-dialog>
                </el-form-item>
            </el-form>
        </el-card>
        <el-table :data="orderList" stripe style="width: 100%" v-loading="listLoading">
            <el-table-column label="序号" prop="id" align="center"></el-table-column>
            <el-table-column label="产品信息">
                <template slot-scope="scope">
                    <div class="table-info-img-text" @click="onShowDetails(scope.row.detail)">
                        <el-image class="table-info-img" :src="scope.row.detail[0].pic_url">
                            <div slot="error" class="image-slot">
                                <com-image src="/resources/img/common/default-avatar.png"></com-image>
                            </div>
                        </el-image>
                        <div class="table-info-text">
                            <div>{{scope.row.detail[0].goods_name}}</div>
                            <div>(商品ID：{{scope.row.detail[0].goods_id}})<el-button style="margin-left: 5px" type="primary" size="mini">更多</el-button></div>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="订单编号">
                <template slot-scope="scope">
                    <div>{{scope.row.order_no}}</div>
                </template>
            </el-table-column>
            <el-table-column label="订单金额" align="center">
                <template slot-scope="scope">
                    <div>{{scope.row.pay_money}}</div>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center">
                <template slot-scope="scope">
                    <div>{{scope.row.created_at | dateTimeFormat("Y-m-d H:i:s")}}</div>
                </template>
            </el-table-column>
        </el-table>
        <div style="text-align: right; padding: 20px 0; background-color: #FFFFFF">
            <el-pagination @current-change="pagination" background layout="prev, pager, next"
                           :page-count="pageCount" :current-page="currentPage"></el-pagination>
        </div>

        <el-dialog
                title="订单详情"
                :visible.sync="dialogVisible"
                width="50%">
                <el-table :data="details" stripe style="width: 100%">
                    <el-table-column label="序号" prop="id" align="center"></el-table-column>
                    <el-table-column label="产品信息">
                        <template slot-scope="scope">
                            <div class="table-info-img-text">
                                <el-image class="table-info-img" :src="scope.row.pic_url">
                                    <div slot="error" class="image-slot">
                                        <com-image src="/resources/img/common/default-avatar.png"></com-image>
                                    </div>
                                </el-image>
                                <div class="table-info-text">
                                    <div>{{scope.row.goods_name}}</div>
                                    <div>(商品ID：{{scope.row.goods_id}})</div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="购买数量">
                        <template slot-scope="scope">
                            <div>{{scope.row.num}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品单价" align="center">
                        <template slot-scope="scope">
                            <div>{{scope.row.price}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品金额" align="center">
                        <template slot-scope="scope">
                            <div>{{scope.row.goods_price}}</div>
                        </template>
                    </el-table-column>
                </el-table>
        </el-dialog>

    </div>
</div>
<script>
    // getQuery('order_id'),
    const app = new Vue({
        el: '#my_customer',
        data() {
            return {
                activeName: '1',
                tabArr: [],
                orderList: [],
                listLoading: false,
                search_type: '',
                pageCount: 1,
                currentPage: 1,
                searchData: {
                    keyword: '',
                    order_no: '',
                    start_date: '',
                    end_date: '',
                    user_id: '',
                    page: 1,
                    fields: {}
                },
                export_list: {},
                export_url: 'team-data/default/order',
                details: [],
                dialogVisible: false,
            }
        },
        mounted(){
            this.searchData.user_id = getQuery('user_id');
            this.getList();
        },
        methods: {
            onShowDetails(list) {
                this.details = list
                this.dialogVisible = true
            },
            selectDateTime(e) {
                if (e != null) {
                    this.searchData.start_date = e[0];
                    this.searchData.end_date = e[1];
                } else {
                    this.searchData.start_date = '';
                    this.searchData.end_date = '';
                }
                this.searchs();
            },
            getList(){
                this.listLoading = true;
                this.is_team = true;
                this.is_commission = false;
                request({
                    params: {
                        r: 'team-data/default/order',
                        ...this.searchData
                    },
                    method: 'get',
                }).then(res => {
                    this.listLoading = false;
                    if(res.data.code == 0){
                        this.orderList = res.data.data.list;
                        this.export_list = res.data.data.export_list;
                        this.searchData.fields = res.data.data.fields;
                        this.pageCount = res.data.data.page_count;
                    }else {
                        this.listLoading = false;
                        this.$message.error(res.data.msg);
                    }

                }).catch(err => {
                    this.$message.error(err.data.msg);
                })
            },
            handleClick(tab, event){
            },
            pagination(currentPage){
                this.searchData.page = currentPage;
                this.getList();
            },
            searchs() {
                this.searchData.page = 1;
                this.getList();
            }
        }
    })
</script>

<style>
.user_info{
    background: #FFF;
    padding: 20px;
    margin-bottom: 10px;
}

.user_detail{
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

.user_detail .info{
    display: flex;
    font-size: 12px;
    color: #939393;
}

.user_detail .info .text{
    color: #000;
    margin-right: 40px;
}

.user_detail .user_name{
    font-size: 15px;
    margin-bottom: 10px;
}

.user_total{
    background: #F2F2F2;
    display: flex;
    padding: 20px 30px;
}

.user_total .module{
    flex: 1;
    color: #919191;
}

.module_value{
    font-size: 25px;
    color: #000;
    margin-top: 8px;
}

.tab_module{
    background: #FFF;
    padding: 10px 20px;
}

.tab_search{
    display: flex;
}

.search_but{
    display: flex;
    flex: 1;
    color: #797979;
    align-items: center;
}

.search_but div{
    border: 1px solid #E6E6E6;
    padding: 5px 20px;
    margin-right: 30px;
    border-radius: 30px;
    height: 30px;
}

.search_but div:hover{
    cursor:pointer
}

.search_but_sel{
    color: #FFF;
    background: #2E8FF4;
}

.search_form{
    display:flex;
}

</style>