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" 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>
            <el-button
              type="text"
              class="ctrls"
              v-else-if="prop === 'operator_name'"
              @click="clickUID({uid:scope.row.operator_id})"
            >{{scope.row[prop]}}</el-button>
            <template v-else-if="prop === 'action'">
              <el-button type="text"  v-if="scope.row.status != 0" @click="cancelUserVip(scope.row)" >取消会员</el-button>
            </template>

            <span v-else>{{scope.row[prop]}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="order-footer" style="margin-top: 20px;">
      <el-pagination
        background
        @current-change="changePagination"
        @size-change="changePageSize"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      ></el-pagination>
    </div>

  </div>

</template>

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

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

  export default {
    data() {
      return {
        // 原始数据
        listData: {},
        // 头部信息
        titleInfo: {},
        // 数据总条目
        totalCount: 0,
        // 当前页面
        currentPage: 1,
        pageSize:20,
        // 列表头显示内容
        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 =
            this.$store.state.domainConfig.siteUrl +
            `/rooter/outsourceitem/${i.entity_id}>`;
        else if (type === "3")
          link =
            this.$store.state.domainConfig.siteUrl +
            `/rooter/wagedetails?job_id=${i.entity_id}`;
        return link;
      }
    },
    methods: {
      /**
       * 点击 uid
       */
      clickUID({ uid }) {
        window.open(
          this.$store.state.domainConfig.siteUrl + `/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: this.page_size
        });
        // 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;
      },
      async cancelUserVip(item) {
        const res = await this.$post("/api/admin/vip/cancelVips", {uid: item.uid});
        if (res.status > 0)
          this.$message({
            message: res.info,
            type: "success"
          });
        this.getTableData();
      }

    }
  };
</script>

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