share-fun-web/src/views/financialManagement/orderManagement/index.vue

<template>
  <div class="">
    <toolbar @on-filter="filterData" @on-reset="filterData" />

    <base-table
      class="m-10 bg-w p-20 br-10"
      :columns="columns"
      :items="items"
      :pagination="pagination"
      :page-change="pageChange"
    />
  </div>
</template>

<script>
import toolbar from './toolbar';
import mxFilterList from '@/mixins/filterList';
import { getPage } from '@/api/order';

export default {
  name: 'OrderManagement',

  components: { toolbar },

  mixins: [
    mxFilterList({
      fetchList: getPage // 在下方data再声明一个 fetchList: iGetList 同等效果
    })
  ],

  data() {
    return {
      columns: [
        {
          key: 'id',
          name: '订单编号',
          width: this.$col.b
        },
        {
          key: 'nickname',
          name: '账号昵称'
        },
        {
          key: 'phonenumber',
          name: '账号手机号码',
          width: this.$col.m
        },
        {
          key: 'payablePrice',
          name: '应付金额',
          width: this.$col.m,
          render: (h, { row }) => h('span', `￥${row.payablePrice}`)
        },
        {
          key: 'paidPrice',
          name: '实付金额',
          width: this.$col.m,
          render: (h, { row }) => h('span', `￥${row.paidPrice}`)
        },
        {
          key: 'payChannels',
          name: '支付渠道',
          width: this.$col.m
        },
        {
          key: 'createAt',
          name: '创建时间',
          width: this.$col.b
        },
        {
          key: 'payEndTime',
          name: '支付时间',
          width: this.$col.b
        },
        {
          key: 'state',
          name: '订单状态',
          width: this.$col.s,
          type: 'tag',
          fetchTagType: val => {
            switch (val) {
              case 1:
                return 'success';
              case 0:
                return 'info';
              case -1:
                return 'warning';
              default:
                return 'info';
            }
          },
          tagName: row => {
            switch (row.state) {
              case 1:
                return '已支付';
              case 0:
                return '未支付';
              case -1:
                return '取消支付';
              default:
                return '-';
            }
          }
        }
      ]
    };
  }
};
</script>

<style type="scss" scoped></style>