vue-admin-scaffold/src/views/MemberOrderView.vue

<template>
    <PagingTable url="/admin/membership/orders" :where="where">
        <template #filter>
            <EnumSelect :enum="MemberOrderStatus" v-model="where.status" placeholder="筛选状态" />
        </template>
        <ElTableColumn prop="id" label="#" width="80" />
        <ElTableColumn prop="userId" label="用户ID" min-width="120" />
        <ElTableColumn prop="planId" label="会员类型" min-width="120" />
        <ElTableColumn prop="name" label="会员名称" min-width="120" />
        <ElTableColumn prop="price" label="价格" min-width="120" />
        <ElTableColumn prop="status" label="状态" :formatter="statusFormatter" width="100" />
        <ElTableColumn prop="payMethod" label="支付方式" :formatter="payMethodFormatter" width="120" />
        <ElTableColumn prop="createdAt" label="创建时间" :formatter="timeFormatter" width="150" />
    </PagingTable>
</template>
<script setup>
import PagingTable from '@/components/PagingTable.vue'
import { useTimeFormatter, useEnumFormatter } from '@/utils/formatter'
import { MemberOrderStatus, PayMethod } from '@/enums'
import EnumSelect from '@/components/EnumSelect.vue'
import { ref } from 'vue'
const timeFormatter = useTimeFormatter()
const statusFormatter = useEnumFormatter(MemberOrderStatus)
const payMethodFormatter = useEnumFormatter(PayMethod)
const where = ref({})
</script>