feat: 订单详情支付

src/mod_user/orderDetail/index.module.scss

@@ -18,10 +18,53 @@
 }
 
 .gameInfoContainer {
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 12px;
+  overflow: hidden;
+
+  .paidInfo {
+    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
+    padding: 8px 12px;
+    color: #000;
+    font-feature-settings:
+      "liga" off,
+      "clig" off;
+    font-family: "PingFang SC";
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 28px;
+    letter-spacing: -0.23px;
+  }
+
+  .gameStatus {
+    padding: 12px 12px 8px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    color: rgba(60, 60, 67, 0.6);
+    font-feature-settings:
+      "liga" off,
+      "clig" off;
+    font-family: "PingFang SC";
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: -0.23px;
+
+    .statusText {
+      color: #000;
+      font-size: 18px;
+      font-weight: 600;
+      line-height: 32px;
+    }
+  }
+
   .gameInfo {
-    border-top-left-radius: 12px;
-    border-top-right-radius: 12px;
-    background-color: #fff;
     padding: 12px;
     box-sizing: border-box;
     display: flex;
@@ -186,11 +229,7 @@
 
   .gameInfoActions {
     min-height: 12px;
-    /* height: 12px; */
-    background-color: #fff;
     border-top: 0.5px solid rgba(0, 0, 0, 0.06);
-    border-bottom-left-radius: 12px;
-    border-bottom-right-radius: 12px;
   }
 }
 

src/mod_user/orderDetail/index.tsx

@@ -17,7 +17,8 @@ import styles from "./index.module.scss";
 dayjs.locale("zh-cn");
 
 function GameInfo(props) {
-  const { detail, currentLocation } = props;
+  const { detail, currentLocation, orderDetail } = props;
+  const { order_status } = orderDetail;
   const { latitude, longitude, location, location_name, start_time, end_time } =
     detail || {};
 
@@ -49,6 +50,15 @@ function GameInfo(props) {
 
   return (
     <View className={styles.gameInfoContainer}>
+      {order_status !== OrderStatus.PENDING && (
+        <>
+          <View className={styles.paidInfo}>已支付 ¥ 90</View>
+          <View className={styles.gameStatus}>
+            <Text className={styles.statusText}>球局暂未开始</Text>
+            <Text>球局开始前2小时，我们将通过短信通知你</Text>
+          </View>
+        </>
+      )}
       <View className={styles.gameInfo}>
         {/* Date and Weather */}
         <View className={styles.gameInfoDateWeather}>
@@ -150,7 +160,7 @@ function OrderMsg(props) {
     },
     {
       title: "费用",
-      content: `${price} 元`,
+      content: `${price} 元 / 人`,
     },
   ];
   return (
@@ -259,39 +269,28 @@ const OrderCheck = () => {
     setLocation([location.latitude, location.longitude]);
   }
 
+  async function getPaymentParams() {
+    const unPaidRes = await orderService.getUnpaidOrder(detail.id);
+    if (unPaidRes.code === 0 && unPaidRes.data.has_unpaid_order) {
+      return unPaidRes.data.payment_params;
+    }
+    const createOrderRes = await orderService.createOrder(detail.id);
+    if (createOrderRes.code === 0) {
+      return createOrderRes.data.payment_params;
+    }
+    throw new Error("支付调用失败");
+  }
+
   //TODO: get order msg from id
   const handlePay = async () => {
     Taro.showLoading({
       title: "支付中...",
       mask: true,
     });
-    let wxPayRes: any = {};
-    try {
-      if (orderDetail.game_info?.id) {
-        const res = await orderService.getUnpaidOrder(orderDetail.game_info.id);
-        if (res.code === 0) {
-          wxPayRes = {
-            ...res.data,
-            payment_required: res.data.has_unpaid_order,
-          };
-        }
-      } else {
-        const res = await orderService.createOrder(detail.id);
-        if (res.code === 0) {
-          wxPayRes = res.data;
-        }
-      }
-    } catch (error) {
-      Taro.hideLoading();
-      Taro.showToast({
-        title: "支付调用失败",
-        icon: "none",
-      });
-      return;
-    }
 
-    const { payment_required, payment_params } = wxPayRes;
+    try {
-    if (payment_required) {
+      const payment_params = await getPaymentParams();
+
       const {
         timeStamp,
         nonceStr,
@@ -324,6 +323,12 @@ const OrderCheck = () => {
           });
         },
       });
+    } catch (error) {
+      Taro.hideLoading();
+      Taro.showToast({
+        title: error.message,
+        icon: "none",
+      });
     }
   };
   if (!id && !gameId) {
@@ -344,23 +349,22 @@ const OrderCheck = () => {
   return (
     <View className={styles.container}>
       {/* Game Date and Address */}
-      <GameInfo detail={detail} currentLocation={location} />
+      <GameInfo
+        detail={detail}
+        orderDetail={orderDetail}
+        currentLocation={location}
+      />
       {/* Order message */}
       <OrderMsg detail={detail} checkOrderInfo={checkOrderInfo} />
       {/* Refund policy */}
       <RefundPolicy checkOrderInfo={checkOrderInfo} />
       {/* Disclaimer */}
       <Disclaimer />
-      {!id ||
+      {(!id || orderDetail.order_status === OrderStatus.PENDING) && (
-        (orderDetail.order_status === OrderStatus.PENDING && (
+        <Button className={styles.payButton} type="primary" onClick={handlePay}>
-          <Button
+          {orderDetail.order_status === OrderStatus.PENDING ? "继续" : ""}支付
-            className={styles.payButton}
+        </Button>
-            type="primary"
+      )}
-            onClick={handlePay}
-          >
-            {orderDetail.order_status === OrderStatus.PENDING ? "继续" : ""}支付
-          </Button>
-        ))}
     </View>
   );
 };

src/pages/detail/index.tsx

@@ -1014,7 +1014,7 @@ function Index() {
   };
 
   async function fetchUserInfoById(user_id) {
-    const userDetailInfo = await LoginService.getUserInfoById(Number(user_id));
+    const userDetailInfo = await LoginService.getUserInfoById(user_id);
     if (userDetailInfo.code === 0) {
       // console.log(userDetailInfo.data);
       setUserInfo(userDetailInfo.data);