boss/pages/main/index/cert_pro.vue

<template>
  <div id="withdraw">
    <div class="table">
      <el-table
        v-if="tableData.length"
        height="100%"
        border
        style="width: 100%"
        :data="tableData"
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          v-for="(prop, index) of tableProps"
          :key="index"
          :prop="prop"
          :label="tableHeaders[index]"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              v-if="prop === 'name'"
              @click="clickName(scope.row)"
            >{{scope.row[prop]}}</el-button>
            <el-button type="text" v-else-if="prop === 'ctrl'" @click="clickCtrl(scope.row, index)">编辑</el-button>
            <section v-else-if="prop === 'price'">
              <div>原价¥{{scope.row.origin_price}}</div>
              <div>现价¥{{scope.row.real_price}}</div>
              <div>会员价¥{{scope.row.vip_price}}</div>
            </section>
            <img class="img" v-else-if="prop === 'img'" :src="scope.row.img" alt="img">
            <span v-else>{{scope.row[prop]}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      background
      @current-change="getTableData"
      @size-change="changePageSize"
      :current-page.sync="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="20"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount"
    ></el-pagination>
  </div>
</template>

<script>
const tableHeaders = [
  "名称",
  "状态",
  "排序",
  "价格",
  "配图",
  "简介",
  "证书",
  "说明",
  "操作",
]
const tableProps = [
  "name",
  "status_name",
  "order",
  "price",
  "img",
  "introduction",
  "content",
  "description",
  "ctrl",
]

let env = 'test'

export default {
  data() {
    return {
      // 数据总条目
      totalCount: 0,
      currentPage: 1,
      currentPageSize: 20,
      // 列表头显示内容
      tableHeaders,
      // 列表头字段
      tableProps,
      // 列表数据
      tableData: []
    }
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    clickCtrl(item, index) {
      this.$router.push({
        path: '/main/cert_edit',
        query: {
          id: item.id
        }
      })
    },
    // 点击用户的 uid
    clickName(item) {
      if(env === 'test')window.open(`https://dev.test.proginn.com/cert/type/${item.id}`)
      else window.open(`https://www.proginn.com/cert/type/${item.id}`)
    },
    // 根据状态显示图表样式
    tableRowClassName({ row, rowIndex }) {
      let className = ""
      if(row.status === "1") className = "success-row"
      return className
    },
    // 格式化列表数据
    formatTableData(data) {
      return data.map(i => ({
        ...i,
        statusShow: i.status === "1" ? "到账" : "失败",
        created_atShow: new Date(Number(i.created_at) * 1000).toLocaleString(),
        taken_atShow: new Date(Number(i.taken_at) * 1000).toLocaleString(),
        ctrl: 1
      }))
    },
    changePageSize(pageSize) {
      this.currentPageSize = pageSize
      this.getTableData()
    },
    // 获取列表数据
    async getTableData(page = 1) {
      this.tableData = []
      let body = { page: this.currentPage,page_size:this.currentPageSize}
      const res = await this.$post("/api/admin/cert/getList", body)
      // console.log(res)
      const data = res.data
      env = data.current_env
      this.tableData = this.formatTableData(res.data.list)
      this.totalCount = Number(data.total)
      this.totalPage = data.totalPage
    }
  }
};
</script>

<style scoped>
.table {
  height: calc(100% - 40px);
}
.img {
  width: 100%;
  height: auto;
}
</style>