qimall/addons/Boss/backend/views/commission/unsettled.php

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>未结算明细</span>
        </div>
        <div class="table-body">
            <el-form ref="form" style="margin-bottom: 10px;" :model="search" label-width="96px" size="mini">
                <el-row :gutter="24">
                    <el-col :span="6" style="padding-left: 0;">
                        <el-form-item label="订单编号">
                            <el-input v-model="search.order_no" placeholder="请输入订单编号" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4" style="padding-left: 0;">
                        <el-form-item label="用户ID">
                            <el-input v-model="search.user_id" placeholder="请输入用户ID" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="分红类型">
                            <el-select v-model="search.type" placeholder="请选择分红类型">
                                <el-option label="永久分红" value="1"></el-option>
                                <el-option label="额外分红" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="结算状态">
                            <el-select v-model="search.is_settlement" placeholder="请选择结算状态">
                                <el-option label="待结算" value="0"></el-option>
                                <el-option label="已结算" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="primary" class="search_button all_button" size="small" @click="toSearch" >搜索</el-button>
                        <el-button type="danger"  class="search_button all_button" size="small" @click="resetSearch" >清除</el-button>
                    </el-col>
                </el-row>
            </el-form>

            <el-tabs v-model="activeName">
                <el-table :data="list" stripe v-loading="loading" size="small" style="margin-bottom: 15px;">

                    <el-table-column prop="id" width="100" label="ID" align="center"></el-table-column>

                    <el-table-column label="股东ID" prop="user_id" label="ID" align="center"></el-table-column>

                    <el-table-column label="股东信息" align="left">
                        <template slot-scope="scope">
                            <div v-if="scope.row.user">
                                <com-image style="float: left;margin-right: 5px;" class="avatar_url"
                                           mode="aspectFill" :src="scope.row.user.avatar_url ? scope.row.user.avatar_url : '/resources/img/common/default-avatar.png'"></com-image>
                                <div>{{scope.row.user.nickname}}<br/>{{scope.row.user.mobile}}</div>
                            </div>
                            <div v-else></div>
                        </template>
                    </el-table-column>

                    <el-table-column label="分红类型">
                        <template slot-scope="scope">
                            <div>{{ commonission_type[scope.row.type] ?? '--' }}</div>
                        </template>
                    </el-table-column>

                    <el-table-column label="股东等级" align="left">
                        <template slot-scope="scope">
                            <div>{{ boss_levels[scope.row.level] ?? '--' }}</div>
                        </template>
                    </el-table-column>

                    <el-table-column label="订单号" prop="order_no" align="center">
                        <template slot-scope="scope">
                            <div>{{ scope.row.order_no ?? '沉淀池分红' }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="总人数" prop="total_num" align="center"></el-table-column>
                    <el-table-column label="结算人数" prop="average_count" align="center"></el-table-column>
                    <el-table-column label="结算总金额" prop="amounts" align="center"></el-table-column>
                    <el-table-column label="可得分红" prop="commission" align="center"></el-table-column>

                    <el-table-column label="状态">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.is_settlement == 0" type="danger">未结算</el-tag>
                            <el-tag v-if="scope.row.is_settlement == 1" type="success">已结算</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column prop="created_at" label="创建时间" align="center">
                        <template slot-scope="scope">
                            {{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}
                        </template>
                    </el-table-column>
                </el-table>
            </el-tabs>
            <div style="text-align: right;margin: 20px 0;">
                <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
            </div>
        </div>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            loading: false,
            activeName: '-1',
            list: [],
            commonission_type: [],
            boss_levels: [],
            page: 1,
            pageCount: 0,
            search: {
                user_id: null,
                order_no: null,
                is_settlement: null,
            }
        },
        mounted() {
            this.loadData();
        },
        methods: {
            loadData() {
                let self = this;
                self.loading = true;
                let basic_params = {
                    r: 'boss/commission/unsettled',
                    page: self.page,
                };
                basic_params = Object.assign(basic_params, this.search);
                request({
                    params: basic_params,
                    method: 'get',
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        self.list = e.data.data.list.list;
                        self.commonission_type = e.data.data.commonission_type;
                        self.boss_levels = e.data.data.boss_levels;
                        self.pageCount = e.data.data.list.page_count;
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    self.loading = false;
                });
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.loadData();
            },
            toSearch() {
                this.page = 1;
                this.loadData();
            },
            resetSearch() {
                this.search = {
                    user_id: null,
                    order_no: null,
                    is_settlement: null,
                }
            }
        }
    });
</script>