qimall/addons/Happiness/backend/views/store-pension/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_keyword"
                                      clearable></el-input>
                        </el-form-item>
                        <el-form-item label="">
                            <el-input placeholder="请输入订单号" v-model="search_data.order_no" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="是否已经实名">
                            <el-select v-model="search_data.is_real" placeholder="是否已实名">
                                <el-option label="全部" value=""></el-option>
                                <el-option label="是" value="1"></el-option>
                                <el-option label="否" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="flex">
                        <el-form-item label="是否已入账">
                            <el-select v-model="search_data.is_entry" placeholder="是否已入账">
                                <el-option label="全部" value=""></el-option>
                                <el-option label="是" value="1"></el-option>
                                <el-option label="否" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="创建时间">
                            <el-date-picker v-model="dates" size="small" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="selectedDates"> </el-date-picker>
                        </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 label="实名认证信息" width="200" prop="money">
                    <template slot-scope="scope">
                        <div v-if="scope.row.thirdUser && scope.row.thirdUser.is_real==1">
                        <div>姓名: {{scope.row.thirdUser?scope.row.thirdUser.user_name:''}}</div>
                        <div>身份证: {{scope.row.thirdUser?scope.row.thirdUser.id_no:''}}</div>
                        </div>
                        <div v-if="!scope.row.thirdUser || scope.row.thirdUser.is_real==0">未实名</div>

                    </template>
                </el-table-column>

                <el-table-column label="关联订单" width="200" prop="money">
                    <template slot-scope="scope">
                        <div>{{scope.row.order_no}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="下单时间" width="200" prop="money">
                    <template slot-scope="scope">
                        <div>{{scope.row.created_at | dateTimeFormat('Y-m-d H:i:s')}}</div>
                    </template>
                </el-table-column>

                <el-table-column label="订单完成时间" width="200" prop="money">
                    <template slot-scope="scope" v-if="scope.row.settle_time>0">
                        <div>{{scope.row.settle_time | dateTimeFormat('Y-m-d H:i:s')}}</div>
                    </template>
                </el-table-column>

                <el-table-column label="订单已结算" width="200" prop="money">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.is_settle==1" type="success">已结算</el-tag>
                        <el-tag v-if="scope.row.is_settle==0" type="danger">未结算</el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="养老金" width="200" prop="money">
                    <template slot-scope="scope">
                        <div>￥{{scope.row.money}}</div>
                    </template>
                </el-table-column>

                <el-table-column label="处理状态" width="200" prop="money">
                    <template slot-scope="scope">
                        <div>{{scope.row.order_status_text}}</div>
                    </template>
                </el-table-column>

                <el-table-column label="公证处入账编号" width="200" prop="money">
                    <template slot-scope="scope">
                        <div>{{scope.row.result_sn}}</div>
                    </template>
                </el-table-column>

                <el-table-column label="公证处入账结果" width="200" prop="money">
                    <template slot-scope="scope">
                        <div>{{scope.row.result_code}}</div>
                    </template>
                </el-table-column>

                <el-table-column label="入账时间" width="200" prop="money">
                    <template slot-scope="scope">
                        <div v-if="scope.row.result_time>0">{{scope.row.result_time | dateTimeFormat('Y-m-d H:i:s')}}</div>
                    </template>
                </el-table-column>


                <el-table-column label="操作" style="width: 180px;" fixed="right" align="center">
                    <template slot-scope="scope">
                        <template>
                            <el-button v-if="scope.row.is_settle==1 && scope.row.order_status==0 && scope.row.thirdUser && scope.row.thirdUser.is_real==1" type="text"
                                       size="small" @click="handle('send',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_keyword:'',
                    is_real: '',
                    is_entry: '',
                    start_time:'',
                    end_time:''
                },
                list: [],
                dates: null,
                page: 1,
                pageCount: 0,
                listLoading: false,
                //金额统计
                Total_Money: {
                    "no_send":{
                        type: 'no_send',
                        name: '待发起',
                        value: '0',
                        prompt: '',
                    },
                    "is_send":{
                        type: 'is_send',
                        name: '已发起',
                        value: '0',
                        prompt: '',
                    },
                    "wait_entry":{
                        type: 'wait_entry',
                        name: '待打款金额',
                        value: '0',
                        prompt: '',
                    },
                    "is_entry":{
                        type: 'is_entry',
                        name: '已打款金额',
                        value: '0',
                        prompt: '',
                    }
                }
            };
        },
        mounted: function() {
            this.getList();
        },
        computed: {
            show_clear_search_btn: function() {
                return !isEmpty(this.search_data.user_keyword) || !isEmpty(this.search_data.is_real) || !isEmpty(this
                    .search_data.is_entry) || !isEmpty(this.search_data.start_time) || !isEmpty(this.search_data
                    .end_time);
            }
        },
        methods: {
            // 选中时间
            selectedDates(e) {
                if (e) {
                    this.search_data.start_time = e[0];
                    this.search_data.end_time = e[1];
                } else {
                    this.search_data.start_time = '';
                    this.search_data.end_time = '';
                    this.dates = null;
                }
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getList();
            },
            getList() {
                let self = this;
                let basic_params = {
                    r: 'happiness/store-pension/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 => {

                    });
                }
            },
            search() {
                this.page = 1;
                this.getList();
            },
            clearSearch() {
                this.search_data.user_keyword = null;
                this.search_data.is_real = null;
                this.search_data.is_entry = null;
                this.search_data.start_time = null;
                this.search_data.end_time = null;
                this.dates = null;
                this.getList();
            },
            handle(type, data = null) {
                let id = data ? parseInt(data.id) : '';
                let user_id = data ? parseInt(data.user_id) : '';
                switch (type) {
                    case 'send':
                      //确认提示
                      this.btnLoading=true;
                      this.$request({
                        params: {
                          r: 'happiness/store-pension/send'
                        },
                        data:{
                          id:id
                        },
                        method: 'post',
                      }).then(e => {
                        if (e.data.code === 0) {
                          this.$message.success('已发起');
                          this.getList();
                          this.btnLoading=false;
                        } else {
                          this.$message.error(e.data.msg);
                          this.btnLoading=false;
                        }

                      }).catch(e => {
                      });
                }
            },
        }
    })
</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>