qimall/addons/Mch/client/views/user/detail.php

<div id="user_detail_view" v-if="detailInfo"  v-cloak>
    <div class="user_info">
        <div class="user_detail">
            <el-image style="height:50px;width:50px;border-radius: 50%;margin-right: 20px;" :src="detailInfo.user.avatar_url?detailInfo.user.avatar_url:'/resources/img/common/default-avatar.png'" lazy></el-image>
            <div style="flex:1;">
                <div style="margin-bottom: 20px;" class="my_flex">
                    <div style="flex:1;">
                        <div class="user_name">
                            {{detailInfo.user.nickname}}
                        </div>
                    </div>

                </div>
                <el-row :gutter="24" style="margin-bottom: 20px;">
                    <el-col :span="6">手机号：{{detailInfo.user.mobile || '无'}}</el-col>
                    <el-col :span="6">最近访问时间：{{detailInfo.last_time | dateTimeFormat("Y-m-d H:i:s")}}</el-col>
                </el-row>
            </div>
        </div>
    </div>
    <div class="user_info">
        <div class="my_flex">
            <div class="assets_info">
                <div>累计消费金额</div>
                <div class="info">{{detailInfo.pay_money}}</div>
            </div>
            <div class="assets_info">
                <div>累计消费订单数</div>
                <div class="info">{{detailInfo.pay_nums}}</div>
            </div>
            <div class="assets_info">
                <div>下单数</div>
                <div class="info">{{detailInfo.order_nums}}</div>
            </div>
            <div class="assets_info">
                <div>客单价</div>
                <div class="info">{{detailInfo.ke_dan_jia}}</div>
            </div>
            <div class="assets_info">
                <div>累计退款金额</div>
                <div class="info">{{detailInfo.refund_money}}</div>
            </div>
            <div class="assets_info">
                <div>累计退款订单数</div>
                <div class="info">{{detailInfo.refund_nums}}</div>
            </div>
            <div class="assets_info">
                <div>最近下单时间</div>
                <div class="info">{{detailInfo.last_time | dateTimeFormat("Y-m-d H:i:s")}}</div>
            </div>
            </div>
    </div>

    <el-table :data="order_detail_list" stripe v-loading="loading" size="small" style="margin-bottom: 15px;" >
            <el-table-column prop="goods_name"  label="商品" align="center"></el-table-column>
            <el-table-column prop="num"  label="付款件数" align="center"></el-table-column>
            <el-table-column prop="goods_price"  label="付款金额" align="center"></el-table-column>
    </el-table>
    <div flex="box:last cross:center">
        <div></div>
        <div>
            <el-pagination v-if="pagination" :page-size="pagination.defaultPageSize"
                           style="display: inline-block;float: right;" background @current-change="pageChange"
                           layout="prev, pager, next" :total="pagination.totalCount">
            </el-pagination>
        </div>
    </div>
</div>

<script>
    // getQuery('order_id'),
    const app = new Vue({
        el: '#user_detail_view',
        data() {
            return {
                user_id: 0,
                detailInfo: null,
                order_detail_list:[],
                pagination: null,
                loading: false,
            }
        },
        mounted(){
            this.user_id = getQuery('id');
            this.getList();
        },
        methods:{
            getList(){
                let that = this;
                request({
                    params: {
                        r: 'mch/client/user/detail',
                        id: this.user_id
                    },
                    method: 'get'
                }).then(res => {
                    if(res.data.code == 0){
                        this.propertyArr = [];
                        this.detailInfo = res.data.data.detail;
                        this.order_detail_list = res.data.data.order_detail_list.list;
                        this.pagination = res.data.data.order_detail_list.pagination;
                    }else{
                        this.$message.error(res.data.msg);
                    }
                    this.tagLoading = false;
                }).catch(err => { 

                })
            },
            pageChange(page) {
                this.search.page = page;
                this.getList();
            },
        }
    })
</script>

<style>
.el-main{
    flex-basis: unset;
    display: flex;
    display: -webkit-flex; 
}
#user_detail_view{
    flex: 1;
}
.user_info{
    background: #FFF;
    padding: 20px;
    margin-bottom: 10px;
}  

.user_detail{
    display: flex;
    /* align-items: center; */
}

.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_material{
    display: flex;
    margin-bottom: 10px;
}

.material_m{
    background: #FFF;
    flex: 1;
    padding: 10px 30px
}

.material_m:first-child{
    margin-right: 8px;
}

.material_m:last-child{
    margin-left: 8px;
}

.material_title{
    font-size: 16px;
    margin-bottom: 20px;
    border-left: 5px solid #1479F0;
    padding-left: 8px;
    line-height: 24px;
}

.my_flex{
    display: flex;
}

.assets_title{
    font-size: 16px;
    margin-bottom: 15px;
    align-items: flex-end;
}

.assets_info{
    flex: 1;
}

.assets_info .info{
    /* font-weight: bold; */
    margin-top: 5px;
    font-size: 20px;
}

.assets_mo{
    background: #F2F2F2;
    padding: 20px 30px;
}

.title_bu{
    font-size: 12px;
    color: #2E8FF6;
    margin-left: 10px;
}

.title_bu:hover{
    cursor:pointer;
}

.hover-close:hover{
    color: #2E8FF6;
    cursor:pointer;
}

.title_bu_text{
    font-size: 12px;
    color: #2E8FF6; 
}

.title_bu_text:hover{
    cursor:default;
}

.lable_i{
    background: #F4F4F4;
    padding: 5px 15px;
    margin-right: 14px;
}

.round_page{
    display: flex;
    justify-content: center;
}

.round{
    width: 10px;
    height: 10px;
    background: #F2F2F2;
    border-radius: 50%;
    margin-right: 10px;
}

.page_sel{
    background: #2E8FF4;
}

.el-dialog__body {
    padding: 15px 20px 20px;
}

.up_user_s .el-select{
    margin-right: 10px;
}

</style>