hook.tsx 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. import { ref, reactive, onMounted } from "vue";
  2. import { getUserCouponList } from "@/api/user-coupon";
  3. import dayjs from "dayjs";
  4. import { ElTag } from "element-plus";
  5. interface SearchFormProps {
  6. userId: string;
  7. couponCode: string;
  8. status: number | undefined;
  9. }
  10. interface PaginationProps {
  11. total: number;
  12. pageSize: number;
  13. currentPage: number;
  14. layout: string;
  15. }
  16. export function useUserCoupon() {
  17. const form = reactive<SearchFormProps>({
  18. userId: "",
  19. couponCode: "",
  20. status: undefined
  21. });
  22. const loading = ref(false);
  23. const dataList = ref([]);
  24. const pagination = reactive<PaginationProps>({
  25. total: 0,
  26. pageSize: 10,
  27. currentPage: 1,
  28. layout: "total, sizes, prev, pager, next, jumper"
  29. });
  30. const statusMap: Record<number, { text: string; type: string }> = {
  31. 0: { text: "未使用", type: "success" },
  32. 1: { text: "已使用", type: "info" },
  33. 2: { text: "已过期", type: "danger" }
  34. };
  35. const typeMap: Record<number, { text: string; type: string }> = {
  36. 1: { text: "满减券", type: "primary" },
  37. 2: { text: "折扣券", type: "success" },
  38. 3: { text: "立减券", type: "warning" },
  39. 4: { text: "商品券", type: "info" }
  40. };
  41. const columns = ref([
  42. {
  43. label: "优惠券码",
  44. prop: "couponCode",
  45. minWidth: 180
  46. },
  47. {
  48. label: "用户ID",
  49. prop: "userId",
  50. minWidth: 120
  51. },
  52. {
  53. label: "优惠券名称",
  54. prop: "couponName",
  55. minWidth: 150
  56. },
  57. {
  58. label: "类型",
  59. prop: "couponType",
  60. minWidth: 100,
  61. cellRenderer: ({ row }) => {
  62. const item = typeMap[row.couponType] || { text: "未知", type: "info" };
  63. return <ElTag type={item.type}>{item.text}</ElTag>;
  64. }
  65. },
  66. {
  67. label: "状态",
  68. prop: "status",
  69. minWidth: 100,
  70. cellRenderer: ({ row }) => {
  71. const item = statusMap[row.status] || { text: "未知", type: "info" };
  72. return <ElTag type={item.type}>{item.text}</ElTag>;
  73. }
  74. },
  75. {
  76. label: "领取时间",
  77. prop: "receiveTime",
  78. minWidth: 160,
  79. formatter: ({ receiveTime }) => receiveTime ? dayjs(receiveTime).format("YYYY-MM-DD HH:mm:ss") : "-"
  80. },
  81. {
  82. label: "有效期",
  83. minWidth: 200,
  84. cellRenderer: ({ row }) => {
  85. const start = row.validStartTime ? dayjs(row.validStartTime).format("YYYY-MM-DD") : "";
  86. const end = row.validEndTime ? dayjs(row.validEndTime).format("YYYY-MM-DD") : "";
  87. return `${start} ~ ${end}`;
  88. }
  89. },
  90. {
  91. label: "使用时间",
  92. prop: "useTime",
  93. minWidth: 160,
  94. formatter: ({ useTime }) => useTime ? dayjs(useTime).format("YYYY-MM-DD HH:mm:ss") : "-"
  95. }
  96. ]);
  97. async function onSearch() {
  98. loading.value = true;
  99. try {
  100. const params: any = {
  101. page: pagination.currentPage,
  102. pageSize: pagination.pageSize
  103. };
  104. if (form.userId) params.userId = Number(form.userId);
  105. if (form.couponCode) params.couponCode = form.couponCode;
  106. if (form.status !== undefined) params.status = form.status;
  107. const { data } = await getUserCouponList(params);
  108. if (data) {
  109. dataList.value = data.list || [];
  110. pagination.total = data.total || 0;
  111. }
  112. } catch (error) {
  113. console.error("查询用户优惠券失败:", error);
  114. } finally {
  115. loading.value = false;
  116. }
  117. }
  118. function resetForm(formRef: any) {
  119. if (!formRef) return;
  120. formRef.resetFields();
  121. pagination.currentPage = 1;
  122. onSearch();
  123. }
  124. function handleSizeChange(val: number) {
  125. pagination.pageSize = val;
  126. pagination.currentPage = 1;
  127. onSearch();
  128. }
  129. function handleCurrentChange(val: number) {
  130. pagination.currentPage = val;
  131. onSearch();
  132. }
  133. onMounted(() => {
  134. onSearch();
  135. });
  136. return {
  137. form,
  138. loading,
  139. columns,
  140. dataList,
  141. pagination,
  142. onSearch,
  143. resetForm,
  144. handleSizeChange,
  145. handleCurrentChange
  146. };
  147. }