feat: 修复用户手动取消订单的状态显示、修复支付过程中订单支付按钮一直展示的问题

src/order_pages/orderDetail/index.config.ts

@@ -1,4 +1,5 @@
 export default definePageConfig({
   navigationBarTitleText: "订单详情",
+  navigationStyle: 'custom',
   navigationBarBackgroundColor: "#FAFAFA",
 });

src/order_pages/orderDetail/index.module.scss

@@ -11,6 +11,15 @@
   font-size: 16px;
 }
 
+.navbar {
+  box-shadow: none;
+
+  & > view > view:nth-child(2) {
+    justify-content: flex-start;
+    margin-left: -30px;
+  }
+}
+
 .container {
   padding: 20px;
   box-sizing: border-box;

src/order_pages/orderDetail/index.tsx

@@ -20,8 +20,10 @@ import {
   generateOrderActions,
 } from "@/utils";
 import { getStorage, setStorage } from "@/store/storage";
+import { useGlobalStore } from "@/store/global";
+import { useOrder } from "@/store/orderStore";
 import detailService, { GameData } from "@/services/detailService";
-import { withAuth, RefundPopup } from "@/components";
+import { withAuth, RefundPopup, GeneralNavbar } from "@/components";
 import img from "@/config/images";
 import CustomerIcon from "@/static/order/customer.svg";
 import { handleCustomerService } from "@/services/userService";
@@ -49,6 +51,9 @@ const gameNoticeMap = new Map([
 function genGameNotice(order_status, start_time) {
   const startTime = dayjs(start_time);
   let key = "";
+  if (order_status === OrderStatus.PENDING) {
+    return {};
+  }
   if (order_status === OrderStatus.FINISHED) {
     key = "finish";
   }
@@ -235,12 +240,13 @@ function GameInfo(props) {
           {refundTextMap.get(refund_status)} ¥ {amount}
         </View>
       )}
-      {["progress", "expired"].includes(orderStatus) && (
-        <View className={styles.gameStatus}>
-          <Text className={styles.statusText}>{gameNotice.title}</Text>
-          {gameNotice.content && <Text>{gameNotice.content}</Text>}
-        </View>
-      )}
+      {["progress", "expired"].includes(orderStatus) &&
+        order_status !== OrderStatus.PENDING && (
+          <View className={styles.gameStatus}>
+            <Text className={styles.statusText}>{gameNotice.title}</Text>
+            {gameNotice.content && <Text>{gameNotice.content}</Text>}
+          </View>
+        )}
       <View className={styles.gameInfo}>
         {/* Date and Weather */}
         <View className={styles.gameInfoDateWeather}>
@@ -505,7 +511,7 @@ const OrderCheck = () => {
   const [location, setLocation] = useState<number[]>([0, 0]);
   const [checkOrderInfo, setCheckOrderInfo] = useState<GameOrderRes | {}>({});
   const [orderDetail, setOrderDetail] = useState({});
-  const [paying, setPaying] = useState(false);
+  const { paying, setPaying } = useOrder();
 
   useDidShow(() => {
     init();
@@ -615,8 +621,19 @@ const OrderCheck = () => {
 
   const { order_status, cancel_type } = orderDetail;
 
+  const { statusNavbarHeightInfo } = useGlobalStore();
+  const { totalHeight } = statusNavbarHeightInfo;
+
   return (
-    <View className={styles.container}>
+    <View
+      className={styles.container}
+      style={{ paddingTop: `${totalHeight + 8}px` }}
+    >
+      <GeneralNavbar
+        title={id ? "订单详情" : "加入活动"}
+        titleClassName={styles.titleClassName}
+        className={styles.navbar}
+      />
       {/* Game Date and Address */}
       <GameInfo
         detail={detail}
@@ -636,16 +653,17 @@ const OrderCheck = () => {
       <Disclaimer />
       {(!id ||
         (order_status === OrderStatus.PENDING &&
-          cancel_type === CancelType.NONE)) && (
-        <Button
-          className={styles.payButton}
-          disabled={paying}
-          onClick={handlePay}
-        >
-          {order_status === OrderStatus.PENDING ? "继续" : "确认"}
-          支付
-        </Button>
-      )}
+          cancel_type === CancelType.NONE)) &&
+        !paying && (
+          <Button
+            className={styles.payButton}
+            disabled={paying}
+            onClick={handlePay}
+          >
+            {order_status === OrderStatus.PENDING ? "继续" : "确认"}
+            支付
+          </Button>
+        )}
     </View>
   );
 };

src/order_pages/orderList/index.tsx

@@ -11,6 +11,7 @@ import orderService, {
   refundTextMap,
 } from "@/services/orderService";
 import { getStorage, removeStorage, setStorage } from "@/store/storage";
+import { useGlobalStore } from "@/store/global";
 import { handleCustomerService } from "@/services/userService";
 import { withAuth, RefundPopup, GeneralNavbar } from "@/components";
 import { payOrder, generateOrderActions } from "@/utils";
@@ -256,8 +257,14 @@ const OrderList = () => {
 
   const flatList = list.flat();
 
+  const { statusNavbarHeightInfo } = useGlobalStore();
+  const { totalHeight } = statusNavbarHeightInfo;
+
   return (
-    <View className={styles.container}>
+    <View
+      className={styles.container}
+      style={{ paddingTop: `${totalHeight + 8}px` }}
+    >
       <GeneralNavbar
         title="订单列表"
         backgroundColor="transparent"
@@ -278,7 +285,9 @@ const OrderList = () => {
           const unPay =
             item.order_status === OrderStatus.PENDING &&
             item.cancel_type === CancelType.NONE;
-          const timeout = item.cancel_type === CancelType.TIMEOUT;
+          const canceled = [CancelType.USER, CancelType.TIMEOUT].includes(
+            item.cancel_type
+          );
           const { game_info } = item;
 
           const {
@@ -300,7 +309,7 @@ const OrderList = () => {
               >
                 <View className={styles.gameTitle}>
                   <View className={styles.title}>{item?.game_info?.title}</View>
-                  {!timeout && (
+                  {!canceled && (
                     <View
                       className={classnames(
                         styles.payNum,