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

src/order_pages/orderDetail/index.tsx

@@ -82,6 +82,7 @@ function GameInfo(props) {
     start_time,
     end_time,
     weather,
+    title,
   } = detail || {};
 
   const [{ iconDay, tempMax, tempMin }] = weather || [{}];
@@ -106,7 +107,9 @@ function GameInfo(props) {
 
   const startTime = dayjs(start_time);
   const endTime = dayjs(end_time);
-  const game_length = endTime.diff(startTime, "minutes") / 60;
+  const game_length = Number(
+    (endTime.diff(startTime, "minutes") / 60).toFixed()
+  );
 
   const startMonth = startTime.format("M");
   const startDay = startTime.format("D");
@@ -248,6 +251,11 @@ function GameInfo(props) {
             {gameNotice.content && <Text>{gameNotice.content}</Text>}
           </View>
         )}
+      {!orderDetail.order_id && (
+        <View className={styles.gameStatus}>
+          <Text className={styles.statusText}>{title}</Text>
+        </View>
+      )}
       <View className={styles.gameInfo}>
         {/* Date and Weather */}
         <View className={styles.gameInfoDateWeather}>
@@ -322,41 +330,32 @@ function GameInfo(props) {
         </View>
       </View>
       {/* Action bar */}
-      <View className={styles.gameInfoActions}>
-        {orderDetail.order_id ? (
-          <>
-            {generateOrderActions(
-              orderDetail,
-              {
-                handleDeleteOrder,
-                handleCancelOrder,
-                handleQuit,
-                handlePayNow: () => {},
-                handleViewGame,
-              },
-              "detail"
-            )?.map((obj) => (
-              <View
-                className={classnames(styles.button, styles[obj.className])}
-              >
-                <Text className={styles.buttonText}>{obj.text}</Text>
-                <Button
-                  className={styles.transparentButton}
-                  onClick={obj.action}
-                >
-                  {obj.text}
-                </Button>
-              </View>
-            ))}
-            <View className={styles.customer} onClick={handleCustomerService}>
-              <Image className={styles.customerIcon} src={CustomerIcon} />
-              <Text>客服</Text>
+      {orderDetail.order_id && (
+        <View className={styles.gameInfoActions}>
+          {generateOrderActions(
+            orderDetail,
+            {
+              handleDeleteOrder,
+              handleCancelOrder,
+              handleQuit,
+              handlePayNow: () => {},
+              handleViewGame,
+            },
+            "detail"
+          )?.map((obj) => (
+            <View className={classnames(styles.button, styles[obj.className])}>
+              <Text className={styles.buttonText}>{obj.text}</Text>
+              <Button className={styles.transparentButton} onClick={obj.action}>
+                {obj.text}
+              </Button>
             </View>
-          </>
-        ) : (
-          ""
-        )}
-      </View>
+          ))}
+          <View className={styles.customer} onClick={handleCustomerService}>
+            <Image className={styles.customerIcon} src={CustomerIcon} />
+            <Text>客服</Text>
+          </View>
+        </View>
+      )}
       <Dialog id="detailCancelOrder" />
       <RefundPopup ref={refundRef} />
     </View>
@@ -489,6 +488,7 @@ function OrderMsg(props) {
 function RefundPolicy(props) {
   const { checkOrderInfo } = props;
   const { refund_policy = [] } = checkOrderInfo;
+  const current = dayjs();
   const policyList = [
     {
       time: "申请退款时间",
@@ -508,9 +508,11 @@ function RefundPolicy(props) {
       return {
         time: `${year}年${month}月${day}日${time} ${isLast ? "后" : "前"}`,
         rule: item.refund_rule,
+        beforeCurrent: isLast ? true : current.isBefore(theTimeObj),
       };
     }),
   ];
+  const targetIndex = policyList.findIndex((item) => item.beforeCurrent);
   return (
     <View className={styles.refundPolicy}>
       <View className={styles.moduleTitle}>
@@ -519,8 +521,22 @@ function RefundPolicy(props) {
       {/* 订单信息摘要 */}
       <View className={styles.policyList}>
         {policyList.map((item, index) => (
-          <View key={index} className={styles.policyItem}>
-            <View className={styles.time}>{item.time}</View>
+          <View
+            key={index}
+            className={classnames(
+              styles.policyItem,
+              targetIndex > index && index !== 0 ? styles.pastItem : "",
+              targetIndex === index ? styles.currentItem : ""
+            )}
+          >
+            <View className={styles.time}>
+              {targetIndex === index && (
+                <View className={styles.currentTag}>
+                  <Text>当前时间段</Text>
+                </View>
+              )}
+              <Text>{item.time}</Text>
+            </View>
             <View className={styles.rule}>{item.rule}</View>
           </View>
         ))}
@@ -588,7 +604,7 @@ const OrderCheck = () => {
     if (!requireLoginWithPhone()) {
       throw new Error("请先绑定手机号");
     }
-    
+
     const unPaidRes = await orderService.getUnpaidOrder(detail.id);
     if (unPaidRes.code === 0 && unPaidRes.data.has_unpaid_order) {
       return unPaidRes.data.payment_params;