feat: 修改代码结构

apps/user/app/(main)/(content)/(user)/order/page.tsx

@@ -31,13 +31,13 @@ export default function Page() {
         }}
         renderItem={(item) => {
           return (
-            <Card className='rounded-[32px] border border-[#D9D9D9] pb-5 pl-3 pr-3 pt-3 shadow-[0px_0px_4.5px_0px_rgba(0,0,0,0.25)] sm:pl-16'>
+            <Card className='rounded-[32px] border border-[#D9D9D9] pb-5 pl-5 pr-4 pt-3 shadow-[0px_0px_4.5px_0px_rgba(0,0,0,0.25)] sm:pl-16'>
               <div className={'flex justify-between'}>
                 <div>
                   <div className={'text-[#666]'}>{t('orderNo')}</div>
                   <p className='text-xs text-[#4D4D4D]'>{item.order_no}</p>
                 </div>
-                <div>
+                <div className={'hidden sm:block'}>
                   {item.status === 1 ? (
                     <>
                       <AiroButton
@@ -64,8 +64,20 @@ export default function Page() {
                     </AiroButton>
                   )}
                 </div>
+                <div className={'sm:hidden'}>
+                  <AiroButton
+                    variant={'dangerLink'}
+                    className={'min-w-0 px-0'}
+                    onClick={async () => {
+                      await closeOrder({ orderNo: item.order_no });
+                      ref.current?.refresh();
+                    }}
+                  >
+                    {t('cancelOrder')}
+                  </AiroButton>
+                </div>
               </div>
-              <CardContent className='px-0 py-3 text-sm'>
+              <CardContent className='px-0 py-3 pb-0 text-sm sm:pb-6'>
                 <ul className='grid grid-cols-2 gap-3 *:flex *:flex-col lg:grid-cols-4'>
                   <li>
                     <span className='text-[#225BA9]'>{t('name')}</span>
@@ -88,6 +100,24 @@ export default function Page() {
                     <time>{formatDate(item.created_at)}</time>
                   </li>
                 </ul>
+                <div className={'mt-2 flex justify-center sm:hidden'}>
+                  {item.status === 1 ? (
+                    <>
+                      <AiroButton variant={'primary'} className={'ml-2'} asChild>
+                        <Link key='payment' href={`/payment?order_no=${item.order_no}`}>
+                          {t('payment')}
+                        </Link>
+                      </AiroButton>
+                    </>
+                  ) : (
+                    <AiroButton
+                      variant={'default'}
+                      onClick={() => OrderDetailDialogRef?.current?.show(item.order_no)}
+                    >
+                      {t('detail')}
+                    </AiroButton>
+                  )}
+                </div>
               </CardContent>
             </Card>
           );