print-web/src/views/manage/member/index/index.vue

<template>
    <el-container class="flex-column">
        <div class="table-search" style="border-bottom: 0;">
            <search @success="handleSuccess"></search>
        </div>
        <el-main class="nopadding">
            <div class="table-container">
                <tablePage ref="tablePage" @success="tableHandle" @successFull="tableHandleFull" @total="orderTotal"></tablePage>
            </div>
        </el-main>
    </el-container>
</template>

<script>
import search from './components/search';
import tablePage from './components/table';
import scStatistic from '@/components/scStatistic';
export default {
    components: {
        search,tablePage,scStatistic
    },
    data(){
        return {
            totalLoading:true,
            searchKey:{},
            dataSelect:[],
            dataSelectFull:[],
            totalData:{},
            searchData:null
        }
    },
    methods: {
        orderTotal(data,searchKey){
            this.totalLoading = false;
            this.totalData = data;
            if (searchKey.create) {
                var start = this.$TOOL.dateFormat(searchKey.create[0], "yyyy-MM-dd");
                var end = this.$TOOL.dateFormat(searchKey.create[1], "yyyy-MM-dd");
                this.searchData = start+"-"+end;
            }
        },
        tableHandle(data){
            this.dataSelect = data;
        },
        tableHandleFull(data){
            this.dataSelectFull = data;
        },
        handleSuccess(data){
            this.$refs.tablePage.upData(data)
        },
        handleClick(name){
            this.activeName = name;
            this.searchKey.type = name;
            this.$refs.tablePage.upData(this.searchKey)
        }
    }
}
</script>

<style>
.user-card-body{display: flex;align-items: center;justify-content: space-around;padding: 10px 0;}
.user-card-body .card-item{text-align: center;}
.user-card-body .card-item .card-num span{font-size: 12px;color: #666;font-weight: normal;}
.user-card-body .card-tips{font-size: 12px;color: #666;display: flex;align-items: center;}
.user-card-body .card-tips i{font-style: normal;margin-left: 5px;}
.user-card-body .card-num{font-size: 20px;font-weight: bold;}
.mb10{margin-bottom: 15px;}
.news-title{
    font-size: 16px;
    color: #000;
    font-weight: bold;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.news-title::before{
    content: "";
    width: 4px;
    height: 16px;
    display: block;
    background-color: var(--el-color-primary);;
    margin-right: 8px;
}
.news-title span{margin-left: 10px;font-weight: normal;color: #666;font-size: 12px;}
</style>