feat: 球局详情完善 & 订单详情完善

src/mod_user/orderDetail/index.module.scss

@@ -1,5 +1,16 @@
 @use "~@/scss/images.scss" as img;
 
+.errorTip {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  flex-direction: column;
+  font-weight: 600;
+  font-size: 16px;
+}
+
 .container {
   padding: 20px;
   box-sizing: border-box;
@@ -193,7 +204,9 @@
     align-items: center;
     align-self: stretch;
     color: #000;
-    font-feature-settings: 'liga' off, 'clig' off;
+    font-feature-settings:
+      "liga" off,
+      "clig" off;
     font-family: "PingFang SC";
     font-size: 14px;
     font-style: normal;
@@ -205,7 +218,7 @@
   .summaryList {
     border-radius: 12px;
     border: 1px solid rgba(0, 0, 0, 0.06);
-    background: #FFF;
+    background: #fff;
     box-shadow: 0 4px 36px 0 rgba(0, 0, 0, 0.06);
 
     .summaryItem {
@@ -218,8 +231,10 @@
       .title {
         width: 120px;
         display: inline-block;
-        color: rgba(60, 60, 67, 0.60);
-        font-feature-settings: 'liga' off, 'clig' off;
+        color: rgba(60, 60, 67, 0.6);
+        font-feature-settings:
+          "liga" off,
+          "clig" off;
         font-family: "PingFang SC";
         font-size: 14px;
         font-style: normal;
@@ -229,7 +244,9 @@
 
       .content {
         color: #000;
-        font-feature-settings: 'liga' off, 'clig' off;
+        font-feature-settings:
+          "liga" off,
+          "clig" off;
         font-family: "PingFang SC";
         font-size: 14px;
         font-style: normal;
@@ -248,7 +265,9 @@
     align-items: center;
     align-self: stretch;
     color: #000;
-    font-feature-settings: 'liga' off, 'clig' off;
+    font-feature-settings:
+      "liga" off,
+      "clig" off;
     font-family: "PingFang SC";
     font-size: 14px;
     font-style: normal;
@@ -260,7 +279,7 @@
   .policyList {
     border-radius: 12px;
     border: 1px solid rgba(0, 0, 0, 0.06);
-    background: #FFF;
+    background: #fff;
     box-shadow: 0 4px 36px 0 rgba(0, 0, 0, 0.06);
 
     .policyItem {
@@ -269,7 +288,9 @@
       align-items: center;
       color: #000;
       text-align: center;
-      font-feature-settings: 'liga' off, 'clig' off;
+      font-feature-settings:
+        "liga" off,
+        "clig" off;
       font-family: "PingFang SC";
       font-size: 12px;
       font-style: normal;
@@ -280,7 +301,9 @@
       &:nth-child(1) {
         color: #000;
         text-align: center;
-        font-feature-settings: 'liga' off, 'clig' off;
+        font-feature-settings:
+          "liga" off,
+          "clig" off;
         font-family: "PingFang SC";
         font-size: 14px;
         font-style: normal;
@@ -289,7 +312,8 @@
         border: none;
       }
 
-      .time, .rule {
+      .time,
+      .rule {
         width: 50%;
         padding: 10px 12px;
       }
@@ -314,7 +338,9 @@
     align-items: center;
     align-self: stretch;
     color: #000;
-    font-feature-settings: 'liga' off, 'clig' off;
+    font-feature-settings:
+      "liga" off,
+      "clig" off;
     font-family: "PingFang SC";
     font-size: 14px;
     font-style: normal;
@@ -324,7 +350,7 @@
   }
 
   .content {
-    color: rgba(22, 24, 35, 0.60);
+    color: rgba(22, 24, 35, 0.6);
     font-family: "PingFang SC";
     font-size: 14px;
     font-style: normal;

src/mod_user/orderDetail/index.tsx

@@ -3,8 +3,11 @@ import { View, Text, Button, Image } from "@tarojs/components";
 import Taro, { useDidShow, useRouter } from "@tarojs/taro";
 import dayjs from "dayjs";
 import { delay } from "@/utils";
-import orderService, { GameOrderRes } from "@/services/orderService";
-import detailService, { GameDetail } from "@/services/detailService";
+import orderService, {
+  GameOrderRes,
+  OrderStatus,
+} from "@/services/orderService";
+import detailService, { GameData } from "@/services/detailService";
 import { withAuth } from "@/components";
 import { calculateDistance, getCurrentLocation } from "@/utils";
 import img from "@/config/images";
@@ -111,7 +114,7 @@ function GameInfo(props) {
 }
 
 function OrderMsg(props) {
-  const { detail, orderInfo } = props;
+  const { detail, checkOrderInfo } = props;
   const {
     start_time,
     end_time,
@@ -120,10 +123,10 @@ function OrderMsg(props) {
     wechat_contact,
     price,
   } = detail;
-  const { order_info: { registrant_nickname } = {} } = orderInfo
+  const { order_info: { registrant_nickname } = {} } = checkOrderInfo;
   const startTime = dayjs(start_time);
   const endTime = dayjs(end_time);
-  const startYear = startTime.format('YYYY')
+  const startYear = startTime.format("YYYY");
   const startMonth = startTime.format("M");
   const startDay = startTime.format("D");
   const startDate = `${startYear}年${startMonth}月${startDay}日`;
@@ -157,32 +160,38 @@ function OrderMsg(props) {
       </View>
       {/* 订单信息摘要 */}
       <View className={styles.summaryList}>
-        {
-          summary.map((item, index) => (<View key={index} className={styles.summaryItem}>
+        {summary.map((item, index) => (
+          <View key={index} className={styles.summaryItem}>
             <Text className={styles.title}>{item.title}</Text>
             <Text className={styles.content}>{item.content}</Text>
-          </View>))
-        }
+          </View>
+        ))}
       </View>
     </View>
   );
 }
 
 function RefundPolicy(props) {
-  const { orderInfo } = props
-  const { refund_policy = [] } = orderInfo
-  const policyList = [{
-    time: '申请退款时间',
-    rule: '退款规则',
-  }, ...refund_policy.map((item, index) => {
-    const [, theTime] = item.application_time.split('undefined ')
-    const theTimeObj = dayjs(theTime)
-    const year = theTimeObj.format('YYYY')
-    const month = theTimeObj.format('M')
-    const day = theTimeObj.format('D')
-    const time = theTimeObj.format('HH:MM')
-    return { time: `${year}年${month}月${day}日${time}${index === 0 ? '前' : '后'}`, rule: item.refund_rule }
-  })]
+  const { checkOrderInfo } = props;
+  const { refund_policy = [] } = checkOrderInfo;
+  const policyList = [
+    {
+      time: "申请退款时间",
+      rule: "退款规则",
+    },
+    ...refund_policy.map((item, index) => {
+      const [, theTime] = item.application_time.split("undefined ");
+      const theTimeObj = dayjs(theTime);
+      const year = theTimeObj.format("YYYY");
+      const month = theTimeObj.format("M");
+      const day = theTimeObj.format("D");
+      const time = theTimeObj.format("HH:MM");
+      return {
+        time: `${year}年${month}月${day}日${time}${index === 0 ? "前" : "后"}`,
+        rule: item.refund_rule,
+      };
+    }),
+  ];
   return (
     <View className={styles.refundPolicy}>
       <View className={styles.moduleTitle}>
@@ -190,12 +199,12 @@ function RefundPolicy(props) {
       </View>
       {/* 订单信息摘要 */}
       <View className={styles.policyList}>
-        {
-          policyList.map((item, index) => (<View key={index} className={styles.policyItem}>
+        {policyList.map((item, index) => (
+          <View key={index} className={styles.policyItem}>
             <View className={styles.time}>{item.time}</View>
             <View className={styles.rule}>{item.rule}</View>
-          </View>))
-        }
+          </View>
+        ))}
       </View>
     </View>
   );
@@ -212,22 +221,43 @@ function Disclaimer() {
 
 const OrderCheck = () => {
   const { params } = useRouter();
-  const { id, gameId } = params;
-  const [detail, setDetail] = useState<GameDetail | {}>({});
+  const { id: stringId, gameId: stringGameId } = params;
+  const [id, gameId] = [Number(stringId), Number(stringGameId)];
+  const [detail, setDetail] = useState<GameData | {}>({});
   const [location, setLocation] = useState<number[]>([0, 0]);
-  const [orderInfo, setOrderInfo] = useState<GameOrderRes | {}>({})
+  const [checkOrderInfo, setCheckOrderInfo] = useState<GameOrderRes | {}>({});
+  const [orderDetail, setOrderDetail] = useState({});
 
   useDidShow(async () => {
-    const res = await detailService.getDetail(Number(gameId));
-    const orderRes = await orderService.getOrderInfo(Number(gameId))
-    setOrderInfo(orderRes.data)
-    console.log(res);
-    if (res.code === 0) {
-      setDetail(res.data);
+    let gameDetail = {};
+    if (id) {
+      const res = await orderService.getOrderDetail(id);
+      if (res.code === 0) {
+        setOrderDetail(res.data);
+        gameDetail = res.data.game_info;
+      }
+    } else if (gameId) {
+      const res = await detailService.getDetail(gameId);
+      if (res.code === 0) {
+        gameDetail = res.data;
+      }
     }
+    if (gameDetail.id) {
+      setDetail(gameDetail);
+      onInit(gameDetail.id);
+    }
+  });
+
+  async function checkOrder(gid) {
+    const orderRes = await orderService.getCheckOrderInfo(gid);
+    setCheckOrderInfo(orderRes.data);
+  }
+
+  async function onInit(gid) {
+    checkOrder(gid);
     const location = await getCurrentLocation();
     setLocation([location.latitude, location.longitude]);
-  });
+  }
 
   //TODO: get order msg from id
   const handlePay = async () => {
@@ -235,56 +265,102 @@ const OrderCheck = () => {
       title: "支付中...",
       mask: true,
     });
-    const res = await orderService.createOrder(Number(gameId));
-    if (res.code === 0) {
-      const { payment_required, payment_params } = res.data;
-      if (payment_required) {
-        const {
-          timeStamp,
-          nonceStr,
-          package: package_,
-          signType,
-          paySign,
-        } = payment_params;
-        await Taro.requestPayment({
-          timeStamp,
-          nonceStr,
-          package: package_,
-          signType,
-          paySign,
-          success: async () => {
-            Taro.hideLoading();
-            Taro.showToast({
-              title: "支付成功",
-              icon: "success",
-            });
-            await delay(1000);
-            Taro.navigateBack({
-              delta: 1,
-            });
-          },
-          fail: () => {
-            Taro.hideLoading();
-            Taro.showToast({
-              title: "支付失败",
-              icon: "none",
-            });
-          },
-        });
+    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;
+    if (payment_required) {
+      const {
+        timeStamp,
+        nonceStr,
+        package: package_,
+        signType,
+        paySign,
+      } = payment_params;
+      await Taro.requestPayment({
+        timeStamp,
+        nonceStr,
+        package: package_,
+        signType,
+        paySign,
+        success: async () => {
+          Taro.hideLoading();
+          Taro.showToast({
+            title: "支付成功",
+            icon: "success",
+          });
+          await delay(1000);
+          Taro.navigateBack({
+            delta: 1,
+          });
+        },
+        fail: () => {
+          Taro.hideLoading();
+          Taro.showToast({
+            title: "支付失败",
+            icon: "none",
+          });
+        },
+      });
     }
   };
+  if (!id && !gameId) {
+    return (
+      <View className={styles.errorTip}>
+        <Text>异常订单</Text>
+        <Button
+          type="warn"
+          onClick={() => {
+            Taro.redirectTo({ url: "/pages/list/index" });
+          }}
+        >
+          回到首页
+        </Button>
+      </View>
+    );
+  }
   return (
     <View className={styles.container}>
       {/* Game Date and Address */}
       <GameInfo detail={detail} currentLocation={location} />
       {/* Order message */}
-      <OrderMsg detail={detail} orderInfo={orderInfo} />
+      <OrderMsg detail={detail} checkOrderInfo={checkOrderInfo} />
       {/* Refund policy */}
-      <RefundPolicy orderInfo={orderInfo} />
+      <RefundPolicy checkOrderInfo={checkOrderInfo} />
       {/* Disclaimer */}
       <Disclaimer />
-      <Button className={styles.payButton} type="primary" onClick={handlePay}>支付</Button>
+      {!id ||
+        (orderDetail.order_status === OrderStatus.PENDING && (
+          <Button
+            className={styles.payButton}
+            type="primary"
+            onClick={handlePay}
+          >
+            {orderDetail.order_status === OrderStatus.PENDING ? "继续" : ""}支付
+          </Button>
+        ))}
     </View>
   );
 };