feat: 申请加入、退款政策、支付倒计时、详情页发布者信息展示

src/order_pages/orderList/index.module.scss

@@ -151,7 +151,7 @@
 
       .gameTitle {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         justify-content: space-between;
         padding: 12px 15px 0;
 
@@ -168,12 +168,14 @@
         }
 
         .payNum {
+          width: 90px;
           font-feature-settings: "liga" off, "clig" off;
           font-family: "PingFang SC";
           font-size: 12px;
           font-style: normal;
           font-weight: 600;
-          line-height: 18px;
+          line-height: 26px;
+          text-align: right;
           &.paid {
             color: #000;
           }
@@ -359,6 +361,45 @@
         }
       }
     }
+
+    .payTipContainer {
+      margin-top: -8px;
+      display: flex;
+      justify-content: flex-end;
+      align-items: flex-start;
+      padding: 0 12px 14px 12px;
+      .payTip {
+        font-family: PingFang SC;
+        font-weight: 400;
+        font-style: Regular;
+        font-size: 12px;
+        line-height: 20px;
+        // letter-spacing: -0.23px;
+        padding: 4px 12px;
+        background-color: #f7f7f7;
+        border-radius: 4px;
+        position: relative;
+
+        &::before {
+          content: "";
+          position: absolute;
+          top: -6px;
+          right: 30px;
+          width: 0;
+          height: 0;
+          border-style: solid;
+          border-width: 0 4px 6px 4px;
+          border-color: transparent transparent #f7f7f7 transparent;
+        }
+
+        .timeLeft {
+          display: inline-block;
+          color: #ff3b30;
+          font-weight: 600;
+          padding: 0 4px;
+        }
+      }
+    }
   }
 }
 

src/order_pages/orderList/index.tsx

@@ -17,7 +17,11 @@ import { withAuth, RefundPopup, GeneralNavbar } from "@/components";
 import { payOrder, generateOrderActions } from "@/utils";
 import emptyContent from "@/static/emptyStatus/publish-empty.png";
 import CustomerIcon from "@/static/order/customer.svg";
-import { insertDotInTags, genNTRPRequirementText, requireLoginWithPhone } from "@/utils/helper";
+import {
+  insertDotInTags,
+  genNTRPRequirementText,
+  requireLoginWithPhone,
+} from "@/utils/helper";
 import styles from "./index.module.scss";
 
 dayjs.locale("zh-cn");
@@ -115,7 +119,7 @@ const OrderList = () => {
     if (!requireLoginWithPhone()) {
       return; // 未登录或未绑定手机号，已跳转到登录页
     }
-    
+
     try {
       const unPaidRes = await orderService.getUnpaidOrder(item.game_info?.id);
       if (unPaidRes.code === 0 && unPaidRes.data.has_unpaid_order) {
@@ -306,6 +310,12 @@ const OrderList = () => {
             court_type,
           } = game_info || {};
 
+          const diffMs = dayjs(item.expire_time).diff();
+          const mm = String(Math.floor(diffMs / 1000 / 60)).padStart(2, "0");
+          const ss = String(Math.floor((diffMs / 1000) % 60)).padStart(2, "0");
+
+          const timeLeft = `${mm}:${ss}`;
+
           return (
             <View key={item.id} className={styles.orderItem}>
               <View
@@ -412,6 +422,20 @@ const OrderList = () => {
                   ))}
                 </View>
               </View>
+              {unPay && diffMs > 0 && (
+                <View className={styles.payTipContainer}>
+                  <View className={styles.payTip}>
+                    {current_players > 0 ? (
+                      <Text>{`已有${current_players}人参加, `}</Text>
+                    ) : (
+                      ""
+                    )}
+                    <Text>请在</Text>
+                    <Text className={styles.timeLeft}>{timeLeft}</Text>
+                    <Text>分钟内完成支付</Text>
+                  </View>
+                </View>
+              )}
             </View>
           );
         })}