boss/pages/main/index/vip_order.vue

<template>
  <div id="vip-order">
    <div class="title">订单总量：企业{{whole.company_order_num}}, 开发者{{whole.person_order_num}} 累计收入: 企业 ¥{{whole.company_paid_money}}, 开发者 ¥{{whole.person_paid_money}}</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",
  "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}) {
      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/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>