qimall/backend/modules/admin/views/register-manage/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>
            </el-form>
        </div>
        <div class="table-body">
            <el-table :data="tableData" stripe v-loading="loading" style="margin-bottom: 15px;">
                <el-table-column prop="id"  label="id" align="center"></el-table-column>
                <el-table-column prop="username"  label="账号" align="center"></el-table-column>
                <el-table-column prop="view_times"  label="商城浏览时长" align="center">
                    <template slot-scope="scope">
                        {{ formatSeconds(scope.row.view_times) }}
                    </template>
                </el-table-column>
                <el-table-column prop="addons_view_times"  label="应用浏览时长" align="center">
                    <template slot-scope="scope">
                        {{ formatSeconds(scope.row.addons_view_times) }}
                    </template>
                </el-table-column>
                <el-table-column label="注册时间" prop="created_at" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.created_at|dateTimeFormat('Y-m-d H:i:s') }}
                    </template>
                </el-table-column>
                <el-table-column prop="reference_name"  label="推荐人" align="center"></el-table-column>

                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="small" type="text" @click="openDialog(scope.row.id)">应用浏览时长</el-button>
                    </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>

    <el-dialog title="应用浏览时长" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
        <el-table :data="dialogeData" stripe v-loading="dialogLoading" style="margin-bottom: 15px;">
            <el-table-column prop="username"  label="账号" align="center"></el-table-column>
            <el-table-column prop="addons_name"  label="应用名称" align="center"></el-table-column>
            <el-table-column prop="view_times"  label="浏览时长" align="center">
                <template slot-scope="scope">
                    {{ formatSeconds(scope.row.view_times) }}
                </template>
            </el-table-column>
        </el-table>
        <div style="text-align: right;margin: 20px 0;">
            <el-pagination @current-change="dialogPagination" background layout="prev, pager, next" :page-count="dialogPageCount"></el-pagination>
        </div>
    </el-dialog>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],
                dialogeData: [],
                page: 1,
                pageCount: 0,
                loading: false,
                dialogVisible: false,
                dialogPage: 1,
                dialogPageCount: 0,
                dialogLoading:false,
            }
        },
        created() {
            this.loadList();
        },
        methods: {
            formatSeconds(value) {
                let result = parseInt(value)
                let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);
                let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
                let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));

                let res = '';
                if(h !== '00') res += `${h}时`;
                if(m !== '00') res += `${m}分`;
                res += `${s}秒`;
                return res;
            },
            addonsView(item){
                let params = {
                    r: 'admin/register-manage/addons-view'
                };
                let id = item ? parseInt(item.id) : '';
                if (id) params = Object.assign(params, {
                    id: id
                });
                navigateTo(params);
            },
            loadList() {
                this.loading = true;
                this.$request({
                    params: {
                        r: 'admin/register-manage/index',
                        page: this.page
                    },
                }).then(e => {
                    if(e.data.code==0){
                        this.loading = false;
                        this.tableData = e.data.data.list
                        this.pageCount = e.data.data.page_count;
                    }
                }).catch(e => {
                });
            },
            openDialog(admin_id) {
                this.dialogVisible = true;
                this.dialogList(admin_id)
            },
            dialogList(admin_id) {
                this.dialogLoading = true;
                this.$request({
                    params: {
                        r: 'admin/register-manage/addons-view',
                        page: this.dialogPage,
                        admin_id: admin_id,
                    },
                }).then(e => {
                    if(e.data.code==0){
                        this.dialogLoading = false;
                        this.dialogeData = e.data.data.list
                        this.dialogPageCount = e.data.data.page_count;
                    }
                }).catch(e => {
                });
            },
            dialogPagination(currentPage) {
                let self = this;
                self.dialogPage = currentPage;
                self.dialogList();
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.loadList();
            },
            handleClose() {
                this.dialogPage = 1;
                this.dialogeData = [];
                this.dialogVisible = false;
            }
        },
    });
</script>
<style>
    .el-tabs__header {
        font-size: 16px;
    }

    .table-body {
        padding: 20px;
        background-color: #fff;
    }

    .table-body .el-button {
        padding: 0 !important;
        border: 0;
        margin: 0 5px;
    }

    .input-item {
        width: 250px;
        margin: 0 0 20px;
        display: inline-block;
    }

    .input-item .el-input__inner:hover {
        border: 1px solid #dcdfe6;
        /*border-right: 0;*/
        outline: 0;
    }

    .input-item .el-input__inner:focus {
        border: 1px solid #dcdfe6;
        /*border-right: 0;*/
        outline: 0;
    }

    .input-item .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        margin: 0;
    }

    .batch {
        margin: 0 0 20px;
        display: inline-block;
    }

    .batch .el-button {
        padding: 9px 15px !important;
    }

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

    .table1 .el-table__footer-wrapper,
    .table1 .el-table__header-wrapper {
        border-bottom: 1.4px solid #D6D6D6;
    }
    .user_img{
        position: relative;
        margin-right: 8px;
        /* height: 50px;
        width: 50px; */
    }
    .default-avatar{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 8px;
    }
    .uer-nickname {
        flex: 1;
    }
</style>