tuanfeng-pc-mer/src/views/volumeManagement/components/VoucherOrder.vue

<!-- eslint-disable vue/script-indent -->
<template>
  <div class="tableBox">
    <el-select v-model="queruList.type" placeholder="请选择" style="margin: 10px;" @change="fuckYou">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.name"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-table
      ref="multipleTable" v-loading="loading" :data="tableData" border
      :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%"
    >
      <!-- <el-table-column label="订单id" width="220">
        <template slot-scope="scope">{{ scope.row.orderId }}</template>
        </el-table-column> -->
      <el-table-column prop="id" label="ID" width="220" />
      <el-table-column prop="shopId" label="商户ID" show-overflow-tooltip />
      <el-table-column prop="voucherId" label="代金券ID" show-overflow-tooltip />
      <el-table-column prop="number" label="数量" show-overflow-tooltip />
      <el-table-column prop="payId" label="订单号" show-overflow-tooltip />
      <el-table-column prop="payGrade" label="付款金额" show-overflow-tooltip />
      <el-table-column prop="payTime" label="购买时间" show-overflow-tooltip />
      <el-table-column prop="createTime" label="订单创建时间" show-overflow-tooltip />
    </el-table>
    <div class="fenye" style="margin-top: 10px;">
      <el-pagination
        :current-page="queruList.page" :page-sizes="[9, 20, 50, 100]" :page-size="9"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getAllVoucherOrder } from '@/api/volumeManagement'
export default {
  // eslint-disable-next-line vue/match-component-file-name
  name: 'VoucherTable',
  data() {
    return {
      options: [{ name: '未付款', value: 0 },
        { name: '已取消', value: 1 },
        { name: '已付款', value: 2 },
        { name: '未发放', value: 3 },
        { name: '已发放', value: 4 }],
      loading: false,
      tableData: [],
      queruList: {
        pageSize: 9,
        page: 1,
        type: 4
      },
      total: 0
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    getDataList() {
      getAllVoucherOrder(this.queruList).then((res) => {
        this.tableData = res.data.list
        this.total = res.data.total
      })
    },
    handleSizeChange(value) {
      this.queruList.pageSize = value
      this.getDataList()
    },
    handleCurrentChange(value) {
      this.queruList.page = value
      this.getDataList()
    },
    fuckYou() {
      this.getDataList()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>