qimall/addons/Pk/backend/views/financial/index.php

<?php
/**
 * @link:http://www.goodmall.com/
 * @copyright: Copyright (c) 2020
 * Created by PhpStorm
 * Author: ganxiaohao
 * Date: 2020-05-08
 * Time: 17:50
 */
use common\helpers\ComponentHelper;
//Yii::$app->loadComponentView('com-dialog-select');
//Yii::$app->loadComponentView('com-select-cat');
ComponentHelper::loadComponentView('com-share-pop');
?>
<div id="app" v-cloak>
    <el-card class="box-card"  shadow="never" style="border:0;min-width: 1200px;"
             body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header" style="display: flex;justify-content: space-between;align-items: center;">
            <div>财务明细</div>
        </div>

        <div class="table-body">
            <div class="head" style="display: flex;flex-wrap: wrap;margin-bottom: 10px;">

                <div style="display: flex;width: 340px;margin-right: 20px;align-items: center;margin-bottom: 15px;">
                    <div style="flex-shrink: 0;align-items: center;">查询条件：</div>
                    <el-select size="small" v-model="tiaojian" @change='tiaojianChange' class="select"  placeholder="请选择查询条件" style="margin-right: 10px;">
                        <el-option :key="index" :label="item.name" :value="item.value" v-for="(item, index) in tiaojianList"></el-option>
                    </el-select>
                    <el-input  clearable size="small" type="text" v-model="inputContent" @keyup.enter.native="toSearch" placeholder="请输入查询内容"></el-input>
                </div>

                <div style="display: flex;margin-right: 20px;align-items: center;margin-bottom: 15px;">
                    <div style="flex-shrink: 0;align-items: center;">付款时间：</div>
                    <el-date-picker
                        size="small"
                        v-model="time"
                        @change="datetimeChange"
                        :picker-options="pickerOptions"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        align="center">
                    </el-date-picker>
                </div>
                <div style="display: flex;width: 220px;margin-right: 20px;align-items: center;margin-bottom: 15px;">
                    <div style="flex-shrink: 0;align-items: center;">付款状态：</div>
                    <el-select size="small" v-model="search.is_pay" @change='toSearch' class="select" placeholder="请选择付款状态">
                        <el-option :key="index" :label="item.name" :value="item.value" v-for="(item, index) in payList"></el-option>
                    </el-select>
                </div>


                <el-button size="mini" type="primary" icon="el-icon-search" style="height: 32px;" @click='toSearch'>搜索</el-button>

                <el-button size="mini" type="danger"  style="height: 32px;" @click='resetForm'>重置</el-button>
            </div>
            <el-table
                v-loading="loading"
                :data="list"
                size="small"
                stripe
                style="width: 100%">
                <el-table-column
                    prop="id"
                    label="id"
                    align="center"
                    min-width="60">
                </el-table-column>
                <el-table-column
                    label="人员名称"
                    min-width="120">
                    <template slot-scope="scope">
                        <div style="display: flex;align-items: center;">
                            <el-image fit="cover" :src="scope.row.user.avatar_url ? scope.row.user.avatar_url : 'resources/img/common/default-avatar.png'" style="width: 40px;height: 40px;display: block;margin-right: 5px;flex-shrink: 0;"></el-image>
                            <div>
                                <div>{{scope.row.user.nickname}}</div>
                                <div>ID {{scope.row.user.id}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="order_no"
                    label="订单编号"
                    align="center"
                    min-width="180">
                </el-table-column>
                <el-table-column
                    prop="trade_no"
                    label="流水单号"
                    align="center"
                    min-width="180">
                </el-table-column>

                <el-table-column
                    prop="money"
                    label="费用(元)"
                    align="center"
                    min-width="80">
                </el-table-column>
                <el-table-column
                    prop="num"
                    label="付款状态"
                    align="center">
                    <template slot-scope="scope"><!-- 支付状态;1已支付;2已退款 -->
                        <el-tag v-if="scope.row.is_pay == 1" effect="dark">已支付</el-tag>
                        <el-tag v-if="scope.row.is_pay == 2" effect="dark" type="warning">已退款</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="num"
                    label="活动状态"
                    align="center"
                   >
                    <template slot-scope="scope"><!-- 活动状态;0未开始;1进行中;2已结束;3已取消 -->
                       <span v-if="scope.row.activity"> {{scope.row.activity.name}}</span>
                        <span v-else>--</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="created_at"
                    label="付款时间"
                    align="center"
                    min-width="120">
                    <template slot-scope="scope">
                        {{scope.row.created_at}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="num"
                    label="付款方式"
                    align="center"
                    min-width="80">
                    <template slot-scope="scope">
                       {{pay_type[scope.row.pay_type]}}
                    </template>
                </el-table-column>
            </el-table>

            <div flex="box:last cross:center" style="margin-top: 15px;"><!--  v-if="list.length > 0" -->
                <div></div>
                <div>
                    <el-pagination

                        style="display: inline-block;float: right;"
                        background
                        @current-change="pageChange"
                        layout="prev, pager, next"
                        :page-count="pageCount"
                    >
                    </el-pagination>
                </div>
            </div>


        </div>

    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                diy_img_prefix: '<?= Yii::getAlias('@attachurl') ?>',
                activeName:'first',
                time:'',
                pageCount:0,
                loading:false,
                srcList:[],
                PKlist:[//活动类型;1拉新;2业绩
                    {name:'全部',value:''},
                    {name:'拉新PK',value:1},
                    {name:'业绩PK',value:2},
                ],
                search: {
                    page: 1,
                    activity_status:'',
                    begin_time:'',
                    end_time:'',
                    is_pay:'',
                    order_no:'',
                    nickname:'',
                    /* activity_name:'',
                    begin_time:'',
                    end_time:'',
                    nickname:'',
                    name:'',
                    mobile:'',
                    performance_type:'',
                    status:'' */
                },
                statusList:[//状态;0未开始;1进行中;2已结束;3已取消;
                    {name:'全部',value:''},
                    {name:'未开始',value:0},
                    {name:'进行中',value:1},
                    {name:'已结束',value:2},
                    {name:'已取消',value:3},
                ],
                payList:[
                    {name:'全部',value:''},
                    {name:'已付款',value:1},
                    {name:'已退款',value:2},
                ],
                tiaojianList:[
                    {name:'订单编号',value:1},
                    {name:'人员名称',value:2},
                ],
                tiaojian:1,
                inputContent:'',
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                pay_type:[],
                list:[]
            };
        },
        mounted() {
            this.getList();
        },
        watch:{

        },
        methods: {
            pageChange(page){
                this.search.page = page;
                this.getList();
            },
            previewImg(img){
                this.srcList.push(img);
            },
            datetimeChange(){
                if(this.time){
                    this.search.begin_time = this.time[0];
                    this.search.end_time = this.time[1];
                }else{
                    this.search.begin_time = '';
                    this.search.end_time = '';
                }
                this.toSearch();
            },
            tiaojianChange(){//1订单编号 2人员名称
                /* console.log(this.tiaojian)
                this.toSearch(); */
                this.inputContent = "";
                this.search.order_no="";
                this.search.nickname = "";
            },
            toSearch() {
                this.search.page = 1;
                this.getList();
            },
            resetForm() {
                this.inputContent = '';
                this.search.activity_status = '';
                this.search.order_no = '';
                this.search.nickname = '';
                this.search.begin_time = '';
                this.search.end_time = '';
                this.search.is_pay = '';
                this.time = '';
                this.getList();
            },
            formatTime(timeStamp) {
                var date = new Date();
                date.setTime(timeStamp * 1000);
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                var d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                var h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                var minute = date.getMinutes();
                var second = date.getSeconds();
                minute = minute < 10 ? ('0' + minute) : minute;
                second = second < 10 ? ('0' + second) : second;
                return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
            },
            getList(){
                if(this.tiaojian == 1){//1订单编号 2人员名称
                    this.search.order_no = this.inputContent;
                }else if(this.tiaojian == 2){
                    this.search.nickname = this.inputContent;
                }

                let params = {
                    r: 'pk/financial/index',//财务明细
                    limit:10
                };
                params = Object.assign(params, this.search);

                this.loading = true;
                request({
                    params: params,
                    method: 'get',
                }).then(e => {

                    this.loading = false;
                    if (e.data.code == 0) {
                        this.list = e.data.data.list;
                        this.pay_type = e.data.data.pay_type;
                        this.pageCount = e.data.data.page_count;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.loading = false;
                });
            },
        }
    });
</script>

<style>
    .form-body {
        padding: 20px;
        background-color: #fff;
        margin-bottom: 20px;
        padding-right: 20%;
        min-width: 900px;
    }

    .form-body .el-form-item {
        padding-right: 25%;
        min-width: 850px;
    }

    .form-button {
        margin: 0;
    }

    .form-button .el-form-item__content {
        margin-left: 0 !important;
    }

    .button-item {
        padding: 9px 25px;
    }

    .check-group {
        font-size: 14px !important;
    }

    .check-group .el-col {
        display: flex;
    }

    .check-group .el-input {
        margin: 0 5px;
    }

    .check-group .el-col .el-checkbox {
        display: flex;
        align-items: center;
    }

    .check-group .el-col .el-input {
        width: 100px;
    }

    .check-group .el-col .el-input .el-input__inner {
        height: 30px;
        width: 100px;
    }

    .el-checkbox-group .el-col {
        margin-bottom: 10px;
    }

    .add-image-btn {
        width: 100px;
        height: 100px;
        color: #419EFB;
        border: 1px solid #e2e2e2;
        cursor: pointer;
    }
    .table-body {
        padding: 20px;
        background-color: #fff;
    }

    .el-table thead{
        font-size: 14px;
        color: #333;
    }
    .el-table__footer-wrapper, .el-table__header-wrapper{
        border-bottom: 1.4px solid #D6D6D6;
    }

    .el-date-editor .el-range-separator{/* 设置选择日期框的中间的 ‘至’ 的宽度 */
        width: 8%;
    }
</style>