优化组件页面代码

src/app/(root)/billing/page.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { format } from "date-fns"
-import { CreditCard } from "lucide-react"
+import { CreditCard, Wallet } from "lucide-react"
 import { Suspense, useEffect, useState } from "react"
 import { Controller, useForm } from "react-hook-form"
 import { toast } from "sonner"
@@ -63,7 +63,6 @@ const filterSchema = z
     if (data.created_at_start && data.created_at_end) {
       const start = new Date(data.created_at_start)
       const end = new Date(data.created_at_end)
-
       if (end < start) {
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
@@ -152,7 +151,6 @@ export default function BillingPage() {
 
   return (
     <div className="space-y-3">
-      {/* 筛选表单 */}
       <form onSubmit={onFilter} className="bg-white p-4">
         <div className="flex flex-wrap items-end gap-4">
           <Controller
@@ -211,7 +209,6 @@ export default function BillingPage() {
                   value={skuProductCode}
                   onValueChange={value => {
                     setSkuProductCode(value as ProductCode)
-                    // 同步到表单值
                     field.onChange(value)
                   }}
                 >
@@ -316,16 +313,7 @@ export default function BillingPage() {
             type="button"
             variant="outline"
             onClick={() => {
-              reset({
-                bill_no: "",
-                inner_no: "",
-                created_at_start: "",
-                created_at_end: "",
-                phone: "",
-                resource_no: "",
-                product_code: ProductCode.All,
-                sku_code: "all",
-              })
+              reset()
               setSkuProductCode(ProductCode.All)
               setFilters({})
               table.pagination.onPageChange(1)
@@ -351,7 +339,6 @@ export default function BillingPage() {
 
                 return (
                   <div className="flex items-center gap-2">
-                    {/* 类型展示 */}
                     <div className="shrink-0">
                       {bill.type === 1 && (
                         <div className="flex gap-2 items-center bg-orange-50 w-fit px-2 py-1 rounded-md">
@@ -372,8 +359,6 @@ export default function BillingPage() {
                         </div>
                       )}
                     </div>
-
-                    {/* 账单详情 */}
                     <div className="text-sm">{bill.info}</div>
                   </div>
                 )
@@ -421,9 +406,46 @@ export default function BillingPage() {
                 )
               },
             },
-            // { header: "套餐名称", accessorKey: "info" },
             { header: "账单号", accessorKey: "bill_no" },
-            { header: "订单号", accessorKey: "trade.inner_no" },
+            {
+              header: "订单号",
+              accessorKey: "trade.inner_no",
+              cell: ({ row }) => {
+                const bill = row.original
+
+                return (
+                  <div className="flex items-center gap-2">
+                    <div className="shrink-0 w-20">
+                      {bill.trade?.acquirer === 1 && (
+                        <div className="flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md">
+                          <CreditCard size={16} />
+                          <span>支付宝</span>
+                        </div>
+                      )}
+                      {bill.trade?.acquirer === 2 && (
+                        <div className="flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md">
+                          <CreditCard size={16} />
+                          <span>微信</span>
+                        </div>
+                      )}
+                      {bill.trade?.acquirer === 3 && (
+                        <div className="flex gap-2 items-center bg-orange-50 w-fit px-2 py-1 rounded-md">
+                          <CreditCard size={16} />
+                          <span>银联</span>
+                        </div>
+                      )}
+                      {!bill.trade?.acquirer && (
+                        <div className="flex gap-2 items-center bg-red-50 w-full px-2 py-1 rounded-md">
+                          <Wallet size={16} />
+                          <span>余额</span>
+                        </div>
+                      )}
+                    </div>
+                    <div className="text-sm">{bill.trade?.inner_no}</div>
+                  </div>
+                )
+              },
+            },
             {
               header: "创建时间",
               accessorKey: "created_at",