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

src/game_pages/detail/index.tsx

@@ -7,6 +7,7 @@ import DetailService from "@/services/detailService";
 import * as LoginService from "@/services/loginService";
 import { getCurrentLocation } from "@/utils/locationUtils";
 import { useUserInfo, useUserActions } from "@/store/userStore";
+import { useGlobalState } from "@/store/global";
 import GameTags from "./components/GameTags";
 import Carousel from "./components/Carousel";
 import StickyBottom from "./components/StickyBottom";
@@ -33,6 +34,9 @@ function Index() {
   const { fetchUserInfo } = useUserActions(); // 获取登录用户的userInfo
   const myInfo = useUserInfo();
 
+  const { statusNavbarHeightInfo } = useGlobalState();
+  const { statusBarHeight, navBarHeight } = statusNavbarHeightInfo;
+
   useSceneRedirect("game_pages/detail/index");
 
   const isMyOwn = userInfo.id === myInfo.id;
@@ -151,7 +155,13 @@ function Index() {
   return (
     <View className={styles["detail-page"]}>
       {/* custom navbar */}
-      <view className={styles["custom-navbar"]}>
+      <view
+        className={styles["custom-navbar"]}
+        style={{
+          height: `${statusBarHeight}px`,
+          paddingTop: `${navBarHeight}px`,
+        }}
+      >
         <View className={styles["detail-navigator"]}>
           <View
             className={styles["detail-navigator-back"]}

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,7 +240,8 @@ function GameInfo(props) {
           {refundTextMap.get(refund_status)} ¥ {amount}
         </View>
       )}
-      {["progress", "expired"].includes(orderStatus) && (
+      {["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>}
@@ -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,7 +653,8 @@ const OrderCheck = () => {
       <Disclaimer />
       {(!id ||
         (order_status === OrderStatus.PENDING &&
-          cancel_type === CancelType.NONE)) && (
+          cancel_type === CancelType.NONE)) &&
+        !paying && (
           <Button
             className={styles.payButton}
             disabled={paying}

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,

src/store/orderStore.ts

@@ -0,0 +1,16 @@
+import { create } from "zustand";
+
+export interface OrderStore {
+  paying: boolean;
+  setPaying: (paying: boolean) => void;
+}
+
+export const useOrderStore = create<OrderStore>()((set) => ({
+  paying: false,
+  setPaying: (paying: boolean) => set({ paying }),
+}));
+
+export const useOrder = () => useOrderStore(({ paying, setPaying }) => ({
+  paying,
+  setPaying,
+}))

src/utils/orderActions.ts

@@ -8,10 +8,11 @@ export function getOrderStatus(orderData) {
   const unPay = order_status === OrderStatus.PENDING && ([CancelType.NONE].includes(cancel_type));
   const refund = [RefundStatus.PENDING, RefundStatus.SUCCESS].includes(refund_status);
   const expired =
-    order_status === OrderStatus.FINISHED ||
-    [CancelType.TIMEOUT, CancelType.USER].includes(cancel_type);
+    order_status === OrderStatus.FINISHED;
 
-  return unPay ? 'unpay' : refund ? 'refund' : expired ? cancel_type === CancelType.TIMEOUT ? 'timeout' : 'expired' : 'progress'
+  const canceled = [CancelType.TIMEOUT, CancelType.USER].includes(cancel_type);
+
+  return unPay ? 'unpay' : refund ? 'refund' : canceled ? 'canceled' : expired ? 'expired' : 'progress'
 }
 
 // scene: list、detail
@@ -54,7 +55,7 @@ export function generateOrderActions(orderData, actions, scene) {
 
   if (scene === 'list') {
     const actionMap = new Map([
-      ['timeout', [deleteOrder, gameDetail]],
+      ['canceled', [deleteOrder, gameDetail]],
       ['expired', [deleteOrder, gameDetail]],
       ['progress', [quitGame, gameDetail]],
       ['refund', [deleteOrder, gameDetail]],
@@ -65,7 +66,7 @@ export function generateOrderActions(orderData, actions, scene) {
 
   if (scene === 'detail') {
     const actionMap = new Map([
-      ['timeout', [deleteOrder, gameDetail]],
+      ['canceled', [deleteOrder, gameDetail]],
       ['expired', [gameDetail, deleteOrder]],
       ['progress', [gameDetail, quitGame]],
       ['refund', [deleteOrder, gameDetail]],