boss/pages/main/index/vip_order.vue

<template>
  <div id="vip-order">
    <div
      class="title"
    >订单总量：初创版{{whole.company_order_num}}，企业版{{whole.premius_order_num}}, 开发者{{whole.person_order_num}} 累计收入: 初创版 ¥{{whole.company_paid_money}}，企业版￥{{whole.premius_paid_money}}, 开发者 ¥{{whole.person_paid_money}}</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>
            <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",
  "is_first_name",
  "num",
  "need_pay_money",
  "paid_money",
  "order_no",
  "start_date",
  "pay_date",
  "origin_end_date",
  "end_date"
];
// 现在环境是线上还是测试, 默认线上
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 }) {
      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/getVipOrders", {
        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>