MemberPayLog.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <template>
  2. <div class="flex1 ov-hd">
  3. <vxe-table :loading="loading" border :data="list">
  4. <vxe-column title="订单号" field="id" min-width="100" :formatter="colNoData" />
  5. <vxe-column title="会员名称" field="cpyName" min-width="100" :formatter="colNoData" />
  6. <vxe-column title="会员级别" field="vipLevelDesc" width="100" :formatter="colNoData" />
  7. <vxe-column title="缴费金额" width="120" :formatter="colNoData">
  8. <template #default="{ row }"> {{ row.paymentAmount }}元 </template>
  9. </vxe-column>
  10. <vxe-column title="邮箱" field="email" min-width="100" :formatter="colNoData" />
  11. <vxe-column title="缴费人" field="createName" min-width="100" :formatter="colNoData" />
  12. <vxe-column title="缴费时间" field="createTime" width="170" :formatter="colNoData" />
  13. <vxe-column title="发票" width="100" :formatter="colNoData">
  14. <template #default="{ row }"> {{ +row.invoiceStatus ? '已开票' : '待开票' }} </template>
  15. </vxe-column>
  16. <vxe-column title="操作" class-name="small-padding fixed-width">
  17. <template #default="{ row }">
  18. <el-button v-if="+row.invoiceStatus" style="color: #999;" tag="a" text :underline="false"
  19. type="primary" :href="row.invoiceUrlAddr" target="_blank">查看发票</el-button>
  20. <el-button v-else type="primary" text @click="clickRowEdit(row)">上传发票</el-button>
  21. </template>
  22. </vxe-column>
  23. </vxe-table>
  24. </div>
  25. <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
  26. v-model:limit="queryParams.pageSize" @pagination="getList" />
  27. <uploadInvoiceForm v-if="showInvoice" v-model:show="showInvoice" :info="rowInfo"></uploadInvoiceForm>
  28. </template>
  29. <script setup name="Pay-log" lang="ts">
  30. import { colNoData } from '@/utils/noData';
  31. import { listVipPayment } from '@/api/dgtmedicine/vipPayment/index';
  32. import { DateRange } from '@/views/models/index';
  33. import { uploadInvoiceForm } from '../model/index';
  34. const { query }: any = useRoute()
  35. const router = useRouter();
  36. const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  37. const list = ref<any[]>([]);
  38. const loading = ref(true);
  39. const showSearch = ref(true);
  40. const showInvoice = ref(false);
  41. const total = ref(0);
  42. const queryFormRef = ref<ElFormInstance>();
  43. const data = reactive<any>({
  44. queryParams: {
  45. pageNum: 1,
  46. pageSize: 10,
  47. dateRange: [],
  48. id: '',
  49. startDate: '',
  50. endDate: '',
  51. }
  52. });
  53. const { queryParams } = toRefs(data);
  54. /** 点击行上传发票 */
  55. const rowInfo = ref<any>({});
  56. const clickRowEdit = (row: any) => {
  57. rowInfo.value = row;
  58. showInvoice.value = true;
  59. };
  60. /** 查询会员信息列表 */
  61. const getList = async () => {
  62. loading.value = true;
  63. const res = await listVipPayment({ ...queryParams.value, memberId: query?.memberId });
  64. list.value = res.rows;
  65. total.value = res.total;
  66. loading.value = false;
  67. };
  68. /** 搜索按钮操作 */
  69. const handleQuery = (level?: any) => {
  70. queryParams.value.pageNum = 1;
  71. getList();
  72. };
  73. /** 重置按钮操作 */
  74. const resetQuery = () => {
  75. queryFormRef.value?.resetFields();
  76. queryParams.value.startDate = '';
  77. queryParams.value.endDate = '';
  78. handleQuery();
  79. };
  80. onMounted(() => {
  81. getList();
  82. });
  83. </script>