qimall/addons/Happiness/backend/views/store-expenses/index.php

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 1000px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>支出统计</span>
        </div>
        <div class="table-body">
            <div class="stat_details">
                <div class="order_module" v-for="(item,index) in Total_Money" :key="item.type">
                    <div class="oirder_modul_title">
                        <div class="text">{{item.name}}</div>
                        <el-tooltip class="item" effect="dark" v-if="item.prompt" :content="item.prompt" placement="bottom">
                            <i class="el-icon-question stat_icon"></i>
                        </el-tooltip>
                    </div>
                    <div class="price">
                        ￥{{item.value}}
                    </div>
                </div>
            </div>

            <div>
                <el-form :inline="true" :model="search_data" size="small" class="demo-form-inline">
                <div class="flex">
                    <el-form-item label="">
                        <el-input placeholder="请输入用户ID" v-model="search_data.user_id" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input placeholder="请输入用户昵称/手机号" v-model="search_data.user" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-select v-model="search_data.is_store_admin" placeholder="是否小店店主">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="是" value="1"></el-option>
                            <el-option label="否" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <el-select v-model="search_data.level" placeholder="请选择身份等级">
                            <el-option label="全部" 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>
                </div>
                </el-form>
            </div>

            <el-table :data="list" stripe v-loading="listLoading" size="small" style="margin-bottom: 15px; width: 100%">
                <el-table-column prop="user_id" label="会员ID" align="center"></el-table-column>
                <el-table-column label="会员信息" width="200" prop="store_name">
                    <template slot-scope="scope">
                        <com-image style="float: left;margin-right: 10px;" mode="aspectFill" :src="scope.row.user.avatar_url"></com-image>
                        <div>{{scope.row.user.nickname}}</div>
                        <div>{{scope.row.user.mobile}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="is_store_admin" label="是否小店店主" align="center">
                    <template scope="scope">
                        <span v-if="scope.row.is_store_admin == 1">是</span>
                        <span v-else>否</span>
                    </template>
                </el-table-column>
                <el-table-column prop="identity_info" label="身份等级" align="center"></el-table-column>
                <el-table-column label="小店收益" align="center">
                    <template slot-scope="scope">
                        <div>￥{{scope.row.store_money}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="分享奖励" align="center">
                    <template slot-scope="scope">
                        <div>￥{{scope.row.share_money}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="promotion_money" label="推广奖励" align="center">
                    <template slot-scope="scope">
                        <div>￥{{scope.row.promotion_money}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="agent_money" label="代理奖励" align="center">
                    <template slot-scope="scope">
                        <div>￥{{scope.row.agent_money}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="fans_money" label="锁定奖励" align="center">
                    <template slot-scope="scope">
                        <div>￥{{scope.row.fans_money}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="pension_money" label="养老金" align="center">
                    <template slot-scope="scope">
                        <div>￥{{scope.row.pension_money}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="pv_money" label="PV值" align="center">
                    <template slot-scope="scope">
                        <div>￥{{scope.row.pv_money}}</div>
                    </template>
                </el-table-column>

                <el-table-column label="操作" style="width: 180px;" fixed="right" align="center">
                    <template slot-scope="scope">
                        <template>
                            <el-button type="text" size="small" @click="handle('detail',scope.row)">查看明细</el-button>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
            <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() {
            return {
                search_data: {
                    user_id:null,
                    user:null,
                    is_store_admin: null,
                    level: null,
                },
                list: [],
                page: 1,
                pageCount: 0,
                listLoading: false,
                //金额统计
                Total_Money: {
                    "store_money":{
                        type: 'store_money',
                        name: '小店收益',
                        value: '0.00',
                        prompt: '',
                    },
                    "share_money":{
                        type: 'share_money',
                        name: '分享奖励',
                        value: '0.00',
                        prompt: '',
                    },
                    "promotion_money":{
                        type: 'promotion_money',
                        name: '推广奖励',
                        value: '0.00',
                        prompt: '',
                    },
                    "agent_money":{
                        type: 'agent_money',
                        name: '代理奖励',
                        value: '0.00',
                        prompt: '',
                    },
                    "fans_money":{
                        type: 'fans_money',
                        name: '锁定奖励',
                        value: '0.00',
                        prompt: '',
                    },
                    "pension_money":{
                        type: 'pension_money',
                        name: '养老金',
                        value: '0.00',
                        prompt: '',
                    },
                    "pv_money":{
                        type: 'pv_money',
                        name: 'PV值',
                        value: '0.00',
                        prompt: '',
                    },
                }
            };
        },
        mounted: function() {
            this.getList();
        },
        computed: {
            show_clear_search_btn: function() {
                return !isEmpty(this.search_data.user_id) || !isEmpty(this.search_data.user) ||
                    !isEmpty(this.search_data.is_store_admin) || !isEmpty(this.search_data.level);
            }
        },
        methods: {
            getList() {
                let self = this;
                let basic_params = {
                    r: 'happiness/store-expenses/index',
                    page: self.page,
                };
                params = Object.assign(basic_params, this.search_data);
                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.pageCount = e.data.data.page_count;

                            //金额统计
                            for (let field in this.Total_Money) {
                                if (e.data.data.total_money[field]) {
                                    this.Total_Money[field]['value'] = e.data.data.total_money[field];
                                } else {
                                    this.Total_Money[field]['value'] = '0.00';
                                }
                            }

                        } else {
                            self.$message.error(e.data.msg);
                        }
                    }).catch(e => {

                    });
                }
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getList();

            },
            search() {
                this.page = 1;
                this.getList();
            },
            clearSearch() {
                this.search_data.level = null;
                this.search_data.is_store_admin = null;
                this.search_data.user_id = null;
                this.search_data.user = null;
                this.getList();
            },
            handle(type, data = null) {
                let id = data ? parseInt(data.id) : '';
                let user_id = data ? parseInt(data.user_id) : '';
                switch (type) {
                    // 详情
                    case 'detail':
                        let params = {
                            r: 'happiness/store-expenses/detail'
                        };
                        if (user_id) params = Object.assign(params, {
                            user_id: user_id
                        });
                        navigateTo(params);
                        break;
                }
            },
        }
    })
</script>

<style>
    .flex {
        display: flex;
        align-items: center;
    }
    .stat_details{
        padding: 0 0 20px;
        display: flex;
    }
    .stat_details .order_module{
        flex: 1;
        background: #F2F2F2;
        margin: 0 5px;
        padding: 20px 25px;
    }

    .order_module{
        display: flex;
        flex-direction: column;
    }

    .order_module:last-child{
        margin-right: 0;
    }

    .order_module:first-child{
        margin-left: 0;
    }

    .price{
        font-size: 14px;
        flex: 1;
        word-break: break-all;
    }

    .oirder_modul_title{
        font-size: 12px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
    }

    .oirder_modul_title .text{
        margin-right: 10px;
    }
    .stat_icon{
        font-size: 19px;
        color: #BFBFBF;
    }
</style>