feat: 订单模块基本完成

2025-09-16 14:34:11 +08:00
parent 4a00c7f1d8
commit a045b39580
13 changed files with 799 additions and 288 deletions
--- a/src/order_pages/orderDetail/index.module.scss
+++ b/src/order_pages/orderDetail/index.module.scss
@@ -229,7 +229,34 @@

  .gameInfoActions {
    min-height: 12px;
+    padding: 0 12px;
    border-top: 0.5px solid rgba(0, 0, 0, 0.06);
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 10px;
+
+    & > .button {
+      margin: 12px 0;
+      padding: 4px 10px;
+      height: 28px;
+      border-radius: 999px;
+      border: 0.5px solid rgba(0, 0, 0, 0.06);
+      color: #000;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 20px;
+      letter-spacing: -0.23px;
+
+      &:first-child {
+        background: #000;
+        color: #fff;
+        &.payNow {
+          background-color: #ff3b30;
+        }
+      }
+    }
  }
 }

@@ -432,3 +459,47 @@
  font-weight: 600;
  line-height: normal;
 }
+
+.dialogFooter {
+  // width: 100%;
+  width: calc(100% + 1px);
+  height: 44px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  position: absolute;
+  // margin: 0 -24px -24px;
+  bottom: 0;
+  left: 0;
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
+  border-bottom-left-radius: 16px;
+  border-bottom-right-radius: 16px;
+  overflow: hidden;
+
+  & > .cancel, & > .confirm {
+    padding: 12px 10px;
+    height: 44px;
+    width: 50%;
+    text-align: center;
+    // border: 0.5px solid rgba(0, 0, 0, 0.06);
+    color: #000;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+
+    &:last-child {
+      background: #000;
+      color: #fff;
+    }
+  }
+
+  & > .cancel {
+    border-radius: 0;
+  }
+
+  & > .confirm {
+    border-radius: 0;
+  }
+}
--- a/src/order_pages/orderDetail/index.tsx
+++ b/src/order_pages/orderDetail/index.tsx
@@ -1,31 +1,80 @@
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import { View, Text, Button, Image } from "@tarojs/components";
+import { Dialog } from "@nutui/nutui-react-taro";
 import Taro, { useDidShow, useRouter } from "@tarojs/taro";
 import dayjs from "dayjs";
+import classnames from "classnames";
 import orderService, {
+  CancelType,
  GameOrderRes,
  OrderStatus,
+  RefundStatus,
 } from "@/services/orderService";
 import {
  payOrder,
  delay,
  calculateDistance,
  getCurrentLocation,
+  getOrderStatus,
+  generateOrderActions,
+  reloadPage,
 } from "@/utils";
 import detailService, { GameData } from "@/services/detailService";
-import { withAuth } from "@/components";
+import { withAuth, RefundPopup } from "@/components";
 import img from "@/config/images";
 import { DECLAIMER } from "./config";
 import styles from "./index.module.scss";

 dayjs.locale("zh-cn");

+const refundTextMap = new Map([
+  [RefundStatus.NONE, "已支付"],
+  [RefundStatus.PENDING, "退款中"],
+  [RefundStatus.SUCCESS, "已退款"],
+]);
+
+const gameNoticeMap = new Map([
+  [
+    "pending",
+    { title: "球局暂未开始", content: "球局开始前2小时，我们将通过短信通知你" },
+  ],
+  [
+    "pendinging",
+    {
+      title: "球局即将开始，请按时抵达球局",
+      content: "球局开始前2小时，我们将通过短信通知你",
+    },
+  ],
+  ["progress", { title: "球局已开始", content: "友谊第一，比赛第二" }],
+  ["finish", { title: "球局已结束", content: "" }],
+]);
+
+function genGameNotice(order_status, start_time) {
+  const startTime = dayjs(start_time);
+  let key = "";
+  if (order_status === OrderStatus.FINISHED) {
+    key = "finish";
+  }
+  const leftHour = startTime.diff(dayjs(), "hour");
+  const start = startTime.isBefore(dayjs());
+  if (start) {
+    key = "progress";
+  } else if (leftHour > 2) {
+    key = "pending";
+  } else if (leftHour < 2) {
+    key = "pendinging";
+  }
+  return gameNoticeMap.get(key) || {};
+}
+
 function GameInfo(props) {
  const { detail, currentLocation, orderDetail } = props;
-  const { order_status } = orderDetail;
+  const { order_status, refund_status } = orderDetail;
  const { latitude, longitude, location, location_name, start_time, end_time } =
    detail || {};

+  const refundRef = useRef(null);
+
  const openMap = () => {
    Taro.openLocation({
      latitude, // 纬度（必填）
@@ -52,14 +101,129 @@ function GameInfo(props) {
  const startDate = `${startMonth}月${startDay}日 ${theDayOfWeek}`;
  const gameRange = `${startTime.format("HH:mm")} - ${endTime.format("HH:mm")}`;

+  const orderStatus = getOrderStatus(orderDetail);
+
+  const gameNotice = genGameNotice(order_status, start_time);
+
+  function handleViewGame(gameId) {
+    Taro.navigateTo({
+      url: `/game_pages/detail/index?id=${gameId}&from=orderList`,
+    });
+  }
+
+  async function handleDeleteOrder(item) {
+    const { order_id } = item;
+    // TODO：删除订单,刷新这一页，然后后面的全清除掉
+    const onCancel = () => {
+      Dialog.close("detailCancelOrder");
+    };
+    const onConfirm = async () => {
+      try {
+        const deleteRes = await orderService.deleteOrder({
+          order_id,
+        });
+        if (deleteRes.code !== 0) {
+          throw new Error(deleteRes.message);
+        }
+        Taro.showToast({
+          title: "删除成功",
+          icon: "none",
+        });
+        delay(2000);
+        Taro.redirectTo({ url: "/order_pages/orderList/index" });
+      } catch (e) {
+        Taro.showToast({
+          title: e.message,
+          icon: "error",
+        });
+      } finally {
+        Dialog.close("detailCancelOrder");
+      }
+    };
+    Dialog.open("detailCancelOrder", {
+      title: "确定删除订单吗？",
+      content: "删除订单后，您将无法恢复订单。请确认是否继续取消？",
+      footer: (
+        <View className={styles.dialogFooter}>
+          <Button className={styles.cancel} onClick={onCancel}>
+            取消
+          </Button>
+          <Button className={styles.confirm} type="primary" onClick={onConfirm}>
+            确认
+          </Button>
+        </View>
+      ),
+      onConfirm,
+      onCancel,
+    });
+  }
+
+  async function handleCancelOrder(item) {
+    const { order_no } = item;
+    const onCancel = () => {
+      Dialog.close("detailCancelOrder");
+    };
+    const onConfirm = async () => {
+      try {
+        const cancelRes = await orderService.cancelUnpaidOrder({
+          order_no,
+          cancel_reason: "用户主动取消",
+        });
+        if (cancelRes.code !== 0) {
+          throw new Error(cancelRes.message);
+        }
+        reloadPage();
+        Taro.showToast({
+          title: "取消成功",
+          icon: "none",
+        });
+      } catch (e) {
+        Taro.showToast({
+          title: e.message,
+          icon: "error",
+        });
+      } finally {
+        Dialog.close("detailCancelOrder");
+      }
+    };
+    Dialog.open("detailCancelOrder", {
+      title: "确定取消订单吗？",
+      content: "取消订单后，您将无法恢复订单。请确认是否继续取消？",
+      footer: (
+        <View className={styles.dialogFooter}>
+          <Button className={styles.cancel} onClick={onCancel}>
+            取消
+          </Button>
+          <Button className={styles.confirm} type="primary" onClick={onConfirm}>
+            确认
+          </Button>
+        </View>
+      ),
+      onConfirm,
+      onCancel,
+    });
+  }
+
+  function handleQuit(item) {
+    if (refundRef.current) {
+      refundRef.current.show(item, (result) => {
+        if (result) {
+          reloadPage();
+        }
+      });
+    }
+  }
+
  return (
    <View className={styles.gameInfoContainer}>
-      {Boolean(order_status) && order_status !== OrderStatus.PENDING && (
+      {["progress", "expired"].includes(orderStatus) && (
        <>
-          <View className={styles.paidInfo}>已支付 ¥ 90</View>
+          <View className={styles.paidInfo}>
+            {refundTextMap.get(refund_status)} ¥ 90
+          </View>
          <View className={styles.gameStatus}>
-            <Text className={styles.statusText}>球局暂未开始</Text>
-            <Text>球局开始前2小时，我们将通过短信通知你</Text>
+            <Text className={styles.statusText}>{gameNotice.title}</Text>
+            {gameNotice.content && <Text>{gameNotice.content}</Text>}
          </View>
        </>
      )}
@@ -122,13 +286,36 @@ function GameInfo(props) {
        </View>
      </View>
      {/* Action bar */}
-      <View className={styles.gameInfoActions}></View>
+      <View className={styles.gameInfoActions}>
+        {orderDetail.order_id
+          ? generateOrderActions(
+              orderDetail,
+              {
+                handleDeleteOrder,
+                handleCancelOrder,
+                handleQuit,
+                handlePayNow: () => {},
+                handleViewGame,
+              },
+              "detail"
+            )?.map((obj) => (
+              <Button
+                className={classnames(styles.button, styles[obj.className])}
+                onClick={obj.action}
+              >
+                {obj.text}
+              </Button>
+            ))
+          : ""}
+      </View>
+      <Dialog id="detailCancelOrder" />
+      <RefundPopup ref={refundRef} />
    </View>
  );
 }

 function OrderMsg(props) {
-  const { detail, checkOrderInfo } = props;
+  const { detail, orderDetail, checkOrderInfo } = props;
  const {
    start_time,
    end_time,
@@ -137,7 +324,8 @@ function OrderMsg(props) {
    wechat_contact,
    price,
  } = detail;
-  const { order_info: { registrant_nickname, registrant_phone } = {} } = checkOrderInfo;
+  const { order_no } = orderDetail;
+  const { order_info: { registrant_phone } = {} } = checkOrderInfo;
  const startTime = dayjs(start_time);
  const endTime = dayjs(end_time);
  const startYear = startTime.format("YYYY");
@@ -159,18 +347,30 @@ function OrderMsg(props) {
        </View>
      ),
    },
-    {
-      title: "报名人昵称",
-      content: registrant_nickname,
-    },
    {
      title: "报名人电话",
      content: registrant_phone,
    },
+    {
+      title: "组织人微信号",
+      content: wechat_contact,
+    },
+    {
+      title: "组织人电话",
+      content: wechat_contact,
+    },
    {
      title: "费用",
      content: `${price} 元 / 人`,
    },
+    ...(order_no
+      ? [
+          {
+            title: "订单号",
+            content: order_no,
+          },
+        ]
+      : []),
  ];
  return (
    <View className={styles.orderSummary}>
@@ -199,8 +399,12 @@ function RefundPolicy(props) {
      rule: "退款规则",
    },
    ...refund_policy.map((item, index) => {
-      const isLast = index === refund_policy.length - 1
-      const theTimeObj = dayjs(isLast ? refund_policy.at(-2).deadline_formatted : item.deadline_formatted);
+      const isLast = index === refund_policy.length - 1;
+      const theTimeObj = dayjs(
+        isLast
+          ? refund_policy.at(-2).deadline_formatted
+          : item.deadline_formatted
+      );
      const year = theTimeObj.format("YYYY");
      const month = theTimeObj.format("M");
      const day = theTimeObj.format("D");
@@ -332,6 +536,9 @@ const OrderCheck = () => {
      </View>
    );
  }
+
+  const { order_status, cancel_type } = orderDetail;
+
  return (
    <View className={styles.container}>
      {/* Game Date and Address */}
@@ -341,14 +548,20 @@ const OrderCheck = () => {
        currentLocation={location}
      />
      {/* Order message */}
-      <OrderMsg detail={detail} checkOrderInfo={checkOrderInfo} />
+      <OrderMsg
+        detail={detail}
+        orderDetail={orderDetail}
+        checkOrderInfo={checkOrderInfo}
+      />
      {/* Refund policy */}
      <RefundPolicy checkOrderInfo={checkOrderInfo} />
      {/* Disclaimer */}
      <Disclaimer />
-      {(!id || orderDetail.order_status === OrderStatus.PENDING) && (
+      {(!id ||
+        (order_status === OrderStatus.PENDING &&
+          cancel_type === CancelType.NONE)) && (
        <Button className={styles.payButton} onClick={handlePay}>
-          {orderDetail.order_status === OrderStatus.PENDING ? "继续" : "确认"}
+          {order_status === OrderStatus.PENDING ? "继续" : "确认"}
          支付
        </Button>
      )}
--- a/src/order_pages/orderList/index.module.scss
+++ b/src/order_pages/orderList/index.module.scss
@@ -311,74 +311,6 @@
  }
 }

-.refundPolicy {
-  .moduleTitle {
-    display: flex;
-    padding: 15px 0 8px;
-    justify-content: space-between;
-    align-items: center;
-    align-self: stretch;
-    color: #000;
-    font-feature-settings:
-      "liga" off,
-      "clig" off;
-    font-family: "PingFang SC";
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 20px;
-    letter-spacing: -0.23px;
-  }
-
-  .policyList {
-    border-radius: 12px;
-    border: 1px solid rgba(0, 0, 0, 0.06);
-    background: #fff;
-    box-shadow: 0 4px 36px 0 rgba(0, 0, 0, 0.06);
-
-    .policyItem {
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      color: #000;
-      text-align: center;
-      font-feature-settings:
-        "liga" off,
-        "clig" off;
-      font-family: "PingFang SC";
-      font-size: 12px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 20px;
-      border-top: 1px solid rgba(0, 0, 0, 0.06);
-
-      &:nth-child(1) {
-        color: #000;
-        text-align: center;
-        font-feature-settings:
-          "liga" off,
-          "clig" off;
-        font-family: "PingFang SC";
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 600;
-        line-height: 20px;
-        border: none;
-      }
-
-      .time,
-      .rule {
-        width: 50%;
-        padding: 10px 12px;
-      }
-
-      .rule {
-        border-left: 1px solid rgba(0, 0, 0, 0.06);
-      }
-    }
-  }
-}
-
 .dialogFooter {
  // width: 100%;
  width: calc(100% + 1px);
--- a/src/order_pages/orderList/index.tsx
+++ b/src/order_pages/orderList/index.tsx
@@ -1,14 +1,14 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { View, Text, Button, Image, ScrollView } from "@tarojs/components";
 import Taro, { useDidShow } from "@tarojs/taro";
 import { Avatar, Dialog } from "@nutui/nutui-react-taro";
 import dayjs from "dayjs";
 import classnames from "classnames";
 import orderService, { OrderStatus, CancelType } from "@/services/orderService";
-import { withAuth } from "@/components";
-import { payOrder } from "@/utils";
+import { withAuth, RefundPopup } from "@/components";
+import { payOrder, generateOrderActions } from "@/utils";
 import styles from "./index.module.scss";
-// import orderListArrowRight from "@/static/order/orderListArrowRight.svg";
+
 dayjs.locale("zh-cn");

 const PAGESIZE = 20;
@@ -45,11 +45,12 @@ function generateTimeMsg(game_info) {
  return (
    <>
      <Text>
-        {diffDay <= 2
+        {diffDay <= 2 && diffDay >= 0
          ? diffDayMap.get(diffDay)
          : startTime.format("YYYY-MM-DD")}
      </Text>
      <Text>({DayOfWeekMap.get(dayofWeek)})</Text>
+      <Text>{startTime.format('ah')}点</Text>
      <Text>{gameLength}</Text>
    </>
  );
@@ -58,6 +59,7 @@ function generateTimeMsg(game_info) {
 const OrderList = () => {
  const [list, setList] = useState<any[][]>([]);
  const [total, setTotal] = useState(0);
+  const refundRef = useRef(null)

  const end = list.length * PAGESIZE >= total;

@@ -118,48 +120,6 @@ const OrderList = () => {
    });
  }

-  function renderCancelContent(checkOrderInfo) {
-    const { refund_policy = [] } = checkOrderInfo;
-    const policyList = [
-      {
-        time: "申请退款时间",
-        rule: "退款规则",
-      },
-      ...refund_policy.map((item, index) => {
-        const isLast = index === refund_policy.length - 1;
-        const theTimeObj = dayjs(
-          isLast
-            ? refund_policy.at(-2).deadline_formatted
-            : item.deadline_formatted
-        );
-        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} ${isLast ? "后" : "前"}`,
-          rule: item.refund_rule,
-        };
-      }),
-    ];
-    return (
-      <View className={styles.refundPolicy}>
-        <View className={styles.moduleTitle}>
-          <Text>退款政策</Text>
-        </View>
-        {/* 订单信息摘要 */}
-        <View className={styles.policyList}>
-          {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>
-    );
-  }
-
  async function handleDeleteOrder(item) {
    const { id: order_id } = item
    // TODO：删除订单,刷新这一页，然后后面的全清除掉
@@ -211,90 +171,65 @@ const OrderList = () => {
  }

  async function handleCancelOrder(item) {
-    const { order_no, order_status, game_info, amount } = item;
-    if (order_status === OrderStatus.PENDING) {
-      const onCancel = () => {
-        Dialog.close("cancelOrder");
-      };
-      const onConfirm = async () => {
-        try {
-          const cancelRes = await orderService.cancelUnpaidOrder({
-            order_no,
-            cancel_reason: "用户主动取消",
-          });
-          if (cancelRes.code !== 0) {
-            throw new Error(cancelRes.message);
-          }
-          getOrders(item.page, false);
-          Taro.showToast({
-            title: "取消成功",
-            icon: "none",
-          })
-        } catch (e) {
-          Taro.showToast({
-            title: e.message,
-            icon: "error",
-          });
-        } finally {
-          Dialog.close("cancelOrder");
+    const { order_no } = item;
+    const onCancel = () => {
+      Dialog.close("cancelOrder");
+    };
+    const onConfirm = async () => {
+      try {
+        const cancelRes = await orderService.cancelUnpaidOrder({
+          order_no,
+          cancel_reason: "用户主动取消",
+        });
+        if (cancelRes.code !== 0) {
+          throw new Error(cancelRes.message);
        }
-      };
-      Dialog.open("cancelOrder", {
-        title: "确定取消订单吗？",
-        content: "取消订单后，您将无法恢复订单。请确认是否继续取消？",
-        footer: (
-          <View className={styles.dialogFooter}>
-            <Button className={styles.cancel} onClick={onCancel}>
-              取消
-            </Button>
-            <Button
-              className={styles.confirm}
-              type="primary"
-              onClick={onConfirm}
-            >
-              确认
-            </Button>
-          </View>
-        ),
-        onConfirm,
-        onCancel,
-      });
-      return;
-    }
-    const res = await orderService.getCheckOrderInfo(game_info.id);
+        getOrders(item.page, false);
+        Taro.showToast({
+          title: "取消成功",
+          icon: "none",
+        })
+      } catch (e) {
+        Taro.showToast({
+          title: e.message,
+          icon: "error",
+        });
+      } finally {
+        Dialog.close("cancelOrder");
+      }
+    };
    Dialog.open("cancelOrder", {
      title: "确定取消订单吗？",
-      content: renderCancelContent(res.data),
-      onConfirm: async () => {
-        try {
-          const refundRes = await orderService.applicateRefund({
-            order_no,
-            refund_amount: amount,
-            refund_reason: "用户主动退款",
-          });
-          if (refundRes.code !== 0) {
-            throw new Error(refundRes.message);
-          }
-          getOrders(item.page, false);
-          Taro.showToast({
-            title: "退出成功",
-            icon: "none",
-          })
-        } catch (e) {
-          Taro.showToast({
-            title: e.message,
-            icon: "error",
-          });
-        } finally {
-          Dialog.close("cancelOrder");
-        }
-      },
-      onCancel: () => {
-        Dialog.close("cancelOrder");
-      },
+      content: "取消订单后，您将无法恢复订单。请确认是否继续取消？",
+      footer: (
+        <View className={styles.dialogFooter}>
+          <Button className={styles.cancel} onClick={onCancel}>
+            取消
+          </Button>
+          <Button
+            className={styles.confirm}
+            type="primary"
+            onClick={onConfirm}
+          >
+            确认
+          </Button>
+        </View>
+      ),
+      onConfirm,
+      onCancel,
    });
  }

+  function handleQuit (item) {
+    if (refundRef.current) {
+      refundRef.current.show(item, (result) => {
+        if (result) {
+          getOrders(item.page)
+        }
+      })
+    }
+  }
+
  function handleViewOrderDetail(orderId) {
    Taro.navigateTo({
      url: `/order_pages/orderDetail/index?id=${orderId}`,
@@ -314,19 +249,7 @@ const OrderList = () => {
      >
        {/* <View className={styles.bg} /> */}
        {list.flat().map((item) => {
-          const unPay = item.order_status === OrderStatus.PENDING;
-          const expired =
-            item.order_status === OrderStatus.FINISHED ||
-            [CancelType.TIMEOUT, CancelType.USER].includes(item.cancel_type);
-          // const expiredTime = dayjs(item.expire_time).isSame(dayjs(), "day")
-          //   ? dayjs(item.expire_time).format("HH:mm:ss")
-          //   : dayjs(item.expire_time).format("YYYY-MM-DD HH:mm:ss");
-          const showCancel =
-            item.order_status === OrderStatus.PENDING &&
-            item.cancel_type === CancelType.NONE;
-          const showQuit =
-            item.order_status === OrderStatus.PAID &&
-            item.cancel_type === CancelType.NONE;
+          const unPay = item.order_status === OrderStatus.PENDING && item.cancel_type === CancelType.NONE;

          const {
            game_info: {
@@ -352,10 +275,10 @@ const OrderList = () => {
                  <View
                    className={classnames(
                      styles.payNum,
-                      styles[unPay && !expired ? "pending" : "paid"]
+                      styles[unPay ? "pending" : "paid"]
                    )}
                  >
-                    <Text>{unPay && !expired ? "待支付" : "已支付"}</Text> ¥{" "}
+                    <Text>{unPay ? "待支付" : "已支付"}</Text> ¥{" "}
                    <Text>{item.amount}</Text>
                  </View>
                </View>
@@ -372,18 +295,48 @@ const OrderList = () => {
                <View className={styles.gameOtherInfo}>
                  {participants.length >= 0 ? (
                    <View className={styles.avatarCards}>
-                      {/* participants */[{ user: { avatar_url: 'https://img.yzcdn.cn/vant/cat.jpeg', id: 1 } }, { user: { avatar_url: 'https://img.yzcdn.cn/vant/cat.jpeg', id: 2 } }, { user: { avatar_url: 'https://img.yzcdn.cn/vant/cat.jpeg', id: 3 } }].map((participant) => {
-                        const {
-                          user: { avatar_url, id },
-                        } = participant;
-                        return <Image className={styles.avatar} mode="aspectFill" key={id} src={avatar_url} />;
-                      })}
+                      {
+                        /* participants */ [
+                          {
+                            user: {
+                              avatar_url: "https://img.yzcdn.cn/vant/cat.jpeg",
+                              id: 1,
+                            },
+                          },
+                          {
+                            user: {
+                              avatar_url: "https://img.yzcdn.cn/vant/cat.jpeg",
+                              id: 2,
+                            },
+                          },
+                          {
+                            user: {
+                              avatar_url: "https://img.yzcdn.cn/vant/cat.jpeg",
+                              id: 3,
+                            },
+                          },
+                        ].map((participant) => {
+                          const {
+                            user: { avatar_url, id },
+                          } = participant;
+                          return (
+                            <Image
+                              className={styles.avatar}
+                              mode="aspectFill"
+                              key={id}
+                              src={avatar_url}
+                            />
+                          );
+                        })
+                      }
                    </View>
                  ) : (
                    ""
                  )}
                  <View className={styles.participantProgress}>
-                    <Text className={styles.current}>报名人数 {current_players}</Text>
+                    <Text className={styles.current}>
+                      报名人数 {current_players}
+                    </Text>
                    <Text>/</Text>
                    <Text>{max_players}</Text>
                  </View>
@@ -400,45 +353,27 @@ const OrderList = () => {
              <View className={styles.orderActions}>
                <View className={styles.extraActions}></View>
                <View className={styles.mainActions}>
-                  {expired && (
+                  {generateOrderActions(
+                    item,
+                    {
+                      handleDeleteOrder,
+                      handleCancelOrder,
+                      handleQuit,
+                      handlePayNow,
+                      handleViewGame,
+                    },
+                    "list"
+                  )?.map((obj) => (
                    <Button
-                      className={classnames(styles.button, styles.cancelOrder)}
-                      onClick={handleDeleteOrder.bind(null, item)}
+                      className={classnames(
+                        styles.button,
+                        styles[obj.className]
+                      )}
+                      onClick={obj.action}
                    >
-                      删除订单
+                      {obj.text}
                    </Button>
-                  )}
-                  {showCancel && (
-                    <Button
-                      className={classnames(styles.button, styles.cancelOrder)}
-                      onClick={handleCancelOrder.bind(null, item)}
-                    >
-                      取消订单
-                    </Button>
-                  )}
-                  {showQuit && (
-                    <Button
-                      className={classnames(styles.button, styles.cancelOrder)}
-                      onClick={handleCancelOrder.bind(null, item)}
-                    >
-                      退出活动
-                    </Button>
-                  )}
-                  {unPay && !expired ? (
-                    <Button
-                      className={classnames(styles.button, styles.payNow)}
-                      onClick={handlePayNow.bind(null, item)}
-                    >
-                      立即支付
-                    </Button>
-                  ) : (
-                    <Button
-                      className={classnames(styles.button, styles.gameDetail)}
-                      onClick={handleViewGame.bind(null, item.game_info.id)}
-                    >
-                      球局详情
-                    </Button>
-                  )}
+                  ))}
                </View>
              </View>
            </View>
@@ -447,6 +382,7 @@ const OrderList = () => {
        {end && <View className={styles.endTips}>已经到底了～</View>}
      </ScrollView>
      <Dialog id="cancelOrder" />
+      <RefundPopup ref={refundRef} />
    </View>
  );
 };