feat: 客服接入订单问题修改

2025-10-01 11:21:58 +08:00
parent ce63c1a954
commit 0efcd36aa7
9 changed files with 217 additions and 139 deletions
--- a/src/order_pages/orderList/index.module.scss
+++ b/src/order_pages/orderList/index.module.scss
@@ -29,9 +29,7 @@
      align-items: center;
      justify-content: center;
      color: rgba(0, 0, 0, 0.8);
-      font-feature-settings:
-        "liga" off,
-        "clig" off;
+      font-feature-settings: "liga" off, "clig" off;
      font-family: "PingFang SC";
      font-size: 12px;
      font-style: normal;
@@ -146,7 +144,7 @@
        .title {
          overflow: hidden;
          color: #000;
-          font-feature-settings: 'liga' off, 'clig' off;
+          font-feature-settings: "liga" off, "clig" off;
          text-overflow: ellipsis;
          font-family: "PingFang SC";
          font-size: 16px;
@@ -156,9 +154,7 @@
        }

        .payNum {
-          font-feature-settings:
-            "liga" off,
-            "clig" off;
+          font-feature-settings: "liga" off, "clig" off;
          font-family: "PingFang SC";
          font-size: 12px;
          font-style: normal;
@@ -180,8 +176,8 @@
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
-        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;
        text-overflow: ellipsis;
        font-family: "PingFang SC";
        font-size: 12px;
@@ -197,8 +193,8 @@
        justify-content: flex-start;
        gap: 4px;

-        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;
        text-overflow: ellipsis;
        font-family: "PingFang SC";
        font-size: 12px;
@@ -226,13 +222,15 @@
            height: 20px;
            border-radius: 50%;
            border: 1px solid rgba(0, 0, 0, 0.06);
-            &+.avatar {
+            & + .avatar {
              margin-left: -10px;
            }
          }
        }

-        .participantProgress, .levelReq, .playType {
+        .participantProgress,
+        .levelReq,
+        .playType {
          display: flex;
          height: 20px;
          padding: 0px 8px;
@@ -240,9 +238,9 @@
          gap: 4px;
          border-radius: 999px;
          border: 0.5px solid rgba(0, 0, 0, 0.16);
-          background: #FFF;
+          background: #fff;
          color: #000;
-          font-feature-settings: 'liga' off, 'clig' off;
+          font-feature-settings: "liga" off, "clig" off;
          font-family: "PingFang SC";
          font-size: 11px;
          font-style: normal;
@@ -271,6 +269,24 @@
      justify-content: space-between;

      .extraActions {
+        .customer {
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          gap: 4px;
+          color: var(--Labels-Secondary, 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: 600;
+          line-height: 16px;
+
+          .customerIcon {
+            width: 16px;
+            height: 16px;
+          }
+        }
      }

      .mainActions {
@@ -328,7 +344,8 @@
  border-bottom-right-radius: 16px;
  overflow: hidden;

-  & > .cancel, & > .confirm {
+  & > .cancel,
+  & > .confirm {
    padding: 12px 10px;
    height: 44px;
    width: 50%;
@@ -357,9 +374,9 @@

 .cancelTip {
  padding: 12px 15px;
-  color: rgba(60, 60, 67, 0.60);
+  color: rgba(60, 60, 67, 0.6);
  text-align: center;
-  font-feature-settings: 'liga' off, 'clig' off;
+  font-feature-settings: "liga" off, "clig" off;
  font-family: "PingFang SC";
  font-size: 16px;
  font-style: normal;
@@ -377,7 +394,7 @@

  .emptyTip {
    color: rgba(0, 0, 0, 0.85);
-    font-feature-settings: 'liga' off, 'clig' off;
+    font-feature-settings: "liga" off, "clig" off;
    font-family: "PingFang SC";
    font-size: 14px;
    font-style: normal;
--- a/src/order_pages/orderList/index.tsx
+++ b/src/order_pages/orderList/index.tsx
@@ -5,10 +5,17 @@ import { Avatar, Dialog } from "@nutui/nutui-react-taro";
 import dayjs from "dayjs";
 import "dayjs/locale/zh-cn";
 import classnames from "classnames";
-import orderService, { OrderStatus, CancelType, refundTextMap } from "@/services/orderService";
+import orderService, {
+  OrderStatus,
+  CancelType,
+  refundTextMap,
+} from "@/services/orderService";
+import { getStorage, removeStorage, setStorage } from "@/store/storage";
+import { handleCustomerService } from "@/services/userService";
 import { withAuth, RefundPopup } from "@/components";
 import { payOrder, generateOrderActions } from "@/utils";
 import emptyContent from "@/static/emptyStatus/publish-empty.png";
+import CustomerIcon from "@/static/order/customer.svg";
 import styles from "./index.module.scss";

 dayjs.locale("zh-cn");
@@ -69,6 +76,14 @@ const OrderList = () => {
    getOrders(1);
  }, []);

+  useDidShow(() => {
+    const targetPage = getStorage("list_reload_page_number");
+    if (targetPage) {
+      removeStorage("list_reload_page_number");
+      getOrders(Number(targetPage));
+    }
+  });
+
  function addPageInfo(arr, page) {
    return arr.map((item) => ({ ...item, page }));
  }
@@ -236,13 +251,14 @@ const OrderList = () => {
    }
  }

-  function handleViewOrderDetail(orderId) {
+  function handleViewOrderDetail({ page, id: orderId }) {
+    setStorage("list_reload_page_number", page);
    Taro.navigateTo({
      url: `/order_pages/orderDetail/index?id=${orderId}`,
    });
  }

-  const flatList = list.flat()
+  const flatList = list.flat();

  return (
    <View className={styles.container}>
@@ -277,7 +293,7 @@ const OrderList = () => {
            <View key={item.id} className={styles.orderItem}>
              <View
                className={styles.gameInfo}
-                onClick={handleViewOrderDetail.bind(null, item.id)}
+                onClick={() => handleViewOrderDetail(item)}
              >
                <View className={styles.gameTitle}>
                  <View className={styles.title}>{item?.game_info?.title}</View>
@@ -287,8 +303,10 @@ const OrderList = () => {
                      styles[unPay ? "pending" : "paid"]
                    )}
                  >
-                    <Text>{unPay ? "待支付" : refundTextMap.get(item.refund_status)}</Text> ¥{" "}
-                    <Text>{item.amount}</Text>
+                    <Text>
+                      {unPay ? "待支付" : refundTextMap.get(item.refund_status)}
+                    </Text>{" "}
+                    ¥ <Text>{item.amount}</Text>
                  </View>
                </View>
                <View className={styles.gameTime}>
@@ -304,40 +322,19 @@ 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.map((participant) => {
+                        const {
+                          user: { avatar_url, id },
+                        } = participant;
+                        return (
+                          <Image
+                            className={styles.avatar}
+                            mode="aspectFill"
+                            key={id}
+                            src={avatar_url}
+                          />
+                        );
+                      })}
                    </View>
                  ) : (
                    ""
@@ -360,7 +357,15 @@ const OrderList = () => {
                </View>
              </View>
              <View className={styles.orderActions}>
-                <View className={styles.extraActions}></View>
+                <View className={styles.extraActions}>
+                  <View
+                    className={styles.customer}
+                    onClick={handleCustomerService}
+                  >
+                    <Image className={styles.customerIcon} src={CustomerIcon} />
+                    <Text>客服</Text>
+                  </View>
+                </View>
                <View className={styles.mainActions}>
                  {generateOrderActions(
                    item,