boss/pages/main/index/vip_manager.vue

<template>
  <div id="vip-manager">
    <div
      class="title"
    >会员数：正常{{whole.total_normal}}, 过期{{whole.total_overdue}}; 初创版会员: 正常{{whole.company_normal}}, 过期{{whole.company_overdue}};企业版会员: 正常{{whole.premium_normal}}, 过期{{whole.premius_overdue}};开发者会员: 正常{{whole.person_normal}}, 过期{{whole.person_overdue}}</div>
    <div class="table">
      <el-table v-if="tableData.length" height="100%" border style="width: 100%" :data="tableData">
        <el-table-column
          v-for="(prop, index) of tableProps"
          :key="index"
          :prop="prop"
          :label="tableHeaders[index]"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              class="ctrls"
              v-if="prop === 'uid'"
              @click="clickUID(scope.row)"
            >{{scope.row[prop]}}</el-button>
            <span v-else>{{scope.row[prop]}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      @current-change="changePagination"
      :current-page.sync="currentPage"
      :page-size="10"
      layout="total, prev, pager, next"
      :total="totalCount"
    ></el-pagination>
  </div>
</template>

<script>
    const tableHeaders = [
        "用户ID",
        "昵称",
        "会员类型",
        "开始时间",
        "到期时间",
        "最新购买",
        "累计月数",
        "累计金额",
        "当前状态",
    ]
    const tableProps = [
        "uid",
        "nickname",
        "type_name",
        "start_date",
        "end_date",
        "pay_date",
        "total_month",
        "total_price",
        "status_name",
    ]

    // 现在环境是线上还是测试, 默认线上
    let env = ''

    export default {
        data() {
            return {
                // 原始数据
                listData: {},
                // 头部信息
                titleInfo: {},
                // 数据总条目
                totalCount: 0,
                // 当前页面
                currentPage: 1,
                // 列表头显示内容
                tableHeaders,
                // 列表头字段
                tableProps,
                // 列表数据
                tableData: [],
            }
        },
        computed: {
            whole() {
                return this.listData.whole || {}
            }
        },
        mounted() {
            this.getTableData()
        },
        filters: {
            toDate(val) {
                return new Date(val * 1000).toLocaleDateString()
            },
            projectLink(i) {
                const type = i.entity_type
                let link = 'javascript:void(0)'
                if(type === '1') link = `/rooter/outsourceitem/${i.entity_id}>`
                else if(type === '3') link = `/rooter/wagedetails?job_id=${i.entity_id}`
                return link
            }
        },
        methods: {
            /**
             * 点击 uid
             */
            clickUID({uid}) {
                if(env === 'test') window.open(`https://dev.test.proginn.com/rooter/user/${uid}`)
                else window.open(`https://www.proginn.com/rooter/user/${uid}`)
            },
            // 页码变动
            changePagination() {
                this.getTableData()
            },
            // 格式化列表数据
            formatTableData(data) {
                return data.map(i => {
                    let projectName = '--'
                    let prePay = ''
                    let servicePay = ''
                    let getPay = ''
                    let realGet = ''
                    return {
                        ...i,
                    }
                })
            },
            // 获取列表数据
            async getTableData() {
                this.tableData = []
                const p = this.currentPage
                const res = await this.$post("/api/admin/vip/getVips", { page: this.currentPage, page_size: 10 })
                // console.log(res)
                const data = res.data
                env = data.current_env
                const list = data.list
                this.listData = data
                this.tableData = list // this.formatTableData(list, data)
                this.totalCount = Number(data.total)
                this.totalPage = data.pages
            }
        }
    }
</script>

<style scoped>
  .table {
    height: 100%;
    height: calc(100% - 80px);
  }
</style>