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

2025-10-01 11:21:58 +08:00
parent ce63c1a954
commit 0efcd36aa7
9 changed files with 217 additions and 139 deletions
--- a/src/app.ts
+++ b/src/app.ts
@@ -1,17 +1,24 @@
 import { Component, ReactNode } from "react";
- import "./nutui-theme.scss";
+import "./nutui-theme.scss";
 import "./app.scss";
 import "./scss/qweather-icons/qweather-icons.css";
 import { useGlobalStore } from "./store/global";
+import { removeStorage } from "./store/storage";

 interface AppProps {
  children: ReactNode;
 }

+function clearSpecStorage() {
+  removeStorage('list_reload_page_number')
+  removeStorage('backFlag')
+}
+
 class App extends Component<AppProps> {
  onLaunch(options) {
    console.log('launch options: ', options)
    console.log("小程序启动，初始化逻辑写这里");
+    clearSpecStorage()
  }

  componentDidMount() {
@@ -20,9 +27,9 @@ class App extends Component<AppProps> {
    // this.getLocation()
  }

-  componentDidShow() {}
+  componentDidShow() { }

-  componentDidHide() {}
+  componentDidHide() { }



--- a/src/game_pages/detail/index.tsx
+++ b/src/game_pages/detail/index.tsx
@@ -144,6 +144,14 @@ function Coursel(props) {
    getImagesMsg(image_list || []);
  }, [image_list]);

+  function previewImage(current_url) {
+    // console.log(image_list, "image_list");
+    Taro.previewImage({
+      current: current_url,
+      urls: list?.length > 0 ? list.map((c) => c.url) : [],
+    });
+  }
+
  return (
    <View className="detail-swiper-container">
      <View
@@ -152,7 +160,11 @@ function Coursel(props) {
      >
        {list.map((item, index) => {
          return (
-            <View className="detail-swiper-item" key={index}>
+            <View
+              className="detail-swiper-item"
+              key={index}
+              onClick={() => previewImage(item.url)}
+            >
              <Image
                src={item.url}
                mode="aspectFill"
@@ -1140,10 +1152,15 @@ function Index() {
  const sharePopupRef = useRef<any>(null);
  const commentRef = useRef();

+  useEffect(() => {
+    updateLocation();
+    fetchUserInfo();
+  }, []);
+
  useDidShow(async () => {
-    await updateLocation();
-    await fetchUserInfo();
-    // await fetchDetail();
+    // await updateLocation();
+    // await fetchUserInfo();
+    await fetchDetail();
  });

  const updateLocation = async () => {
--- a/src/order_pages/orderDetail/index.module.scss
+++ b/src/order_pages/orderDetail/index.module.scss
@@ -27,9 +27,7 @@
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
    padding: 8px 12px;
    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;
@@ -46,9 +44,7 @@
    align-items: flex-start;

    color: rgba(60, 60, 67, 0.6);
-    font-feature-settings:
-      "liga" off,
-      "clig" off;
+    font-feature-settings: "liga" off, "clig" off;
    font-family: "PingFang SC";
    font-size: 12px;
    font-style: normal;
@@ -136,9 +132,7 @@

          .date {
            color: #000;
-            font-feature-settings:
-              "liga" off,
-              "clig" off;
+            font-feature-settings: "liga" off, "clig" off;
            font-family: "PingFang SC";
            font-size: 16px;
            font-style: normal;
@@ -148,9 +142,7 @@

          .venueTime {
            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;
@@ -177,9 +169,7 @@
          align-items: center;
          gap: 12px;
          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;
@@ -223,9 +213,7 @@
            gap: 4px;
            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: 16px;
            font-style: normal;
@@ -241,9 +229,7 @@
          &Address {
            color: rgba(0, 0, 0, 0.8);
            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;
@@ -255,6 +241,26 @@
    }
  }

+  .customer {
+    margin-left: auto;
+    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;
+    }
+  }
+
  .gameInfoActions {
    min-height: 12px;
    padding: 0 12px;
@@ -298,9 +304,7 @@
    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;
@@ -326,9 +330,7 @@
        width: 120px;
        display: inline-block;
        color: rgba(60, 60, 67, 0.6);
-        font-feature-settings:
-          "liga" off,
-          "clig" off;
+        font-feature-settings: "liga" off, "clig" off;
        font-family: "PingFang SC";
        font-size: 14px;
        font-style: normal;
@@ -338,9 +340,7 @@

      .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;
@@ -362,7 +362,7 @@
          gap: 8px;

          .copy {
-            color: #007AFF;
+            color: #007aff;
          }
        }
      }
@@ -378,9 +378,7 @@
    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;
@@ -401,9 +399,7 @@
      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;
@@ -414,9 +410,7 @@
      &: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;
@@ -451,9 +445,7 @@
    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;
@@ -489,9 +481,7 @@
  background: #000;
  box-shadow: 0 8px 64px 0 rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(16px);
-  font-feature-settings:
-    "liga" off,
-    "clig" off;
+  font-feature-settings: "liga" off, "clig" off;
  font-family: "PingFang SC";
  font-size: 16px;
  font-style: normal;
@@ -516,7 +506,8 @@
  border-bottom-right-radius: 16px;
  overflow: hidden;

-  & > .cancel, & > .confirm {
+  & > .cancel,
+  & > .confirm {
    padding: 12px 10px;
    height: 44px;
    width: 50%;
@@ -545,9 +536,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;
--- a/src/order_pages/orderDetail/index.tsx
+++ b/src/order_pages/orderDetail/index.tsx
@@ -19,9 +19,12 @@ import {
  getOrderStatus,
  generateOrderActions,
 } from "@/utils";
+import { getStorage, setStorage } from "@/store/storage";
 import detailService, { GameData } from "@/services/detailService";
 import { withAuth, RefundPopup } from "@/components";
 import img from "@/config/images";
+import CustomerIcon from "@/static/order/customer.svg";
+import { handleCustomerService } from "@/services/userService";
 import { DECLAIMER } from "./config";
 import styles from "./index.module.scss";

@@ -65,8 +68,15 @@ function genGameNotice(order_status, start_time) {
 function GameInfo(props) {
  const { detail, currentLocation, orderDetail, init } = props;
  const { order_status, refund_status, amount } = orderDetail;
-  const { latitude, longitude, location, location_name, start_time, end_time, weather } =
-    detail || {};
+  const {
+    latitude,
+    longitude,
+    location,
+    location_name,
+    start_time,
+    end_time,
+    weather,
+  } = detail || {};

  const [{ iconDay, tempMax, tempMin }] = weather || [{}];

@@ -306,8 +316,9 @@ function GameInfo(props) {
      </View>
      {/* Action bar */}
      <View className={styles.gameInfoActions}>
-        {orderDetail.order_id
-          ? generateOrderActions(
+        {orderDetail.order_id ? (
+          <>
+            {generateOrderActions(
              orderDetail,
              {
                handleDeleteOrder,
@@ -324,8 +335,15 @@ function GameInfo(props) {
              >
                {obj.text}
              </Button>
-            ))
-          : ""}
+            ))}
+            <View className={styles.customer} onClick={handleCustomerService}>
+              <Image className={styles.customerIcon} src={CustomerIcon} />
+              <Text>客服</Text>
+            </View>
+          </>
+        ) : (
+          ""
+        )}
      </View>
      <Dialog id="detailCancelOrder" />
      <RefundPopup ref={refundRef} />
@@ -353,10 +371,7 @@ function OrderMsg(props) {
  const { order_info: { registrant_phone } = {} } = checkOrderInfo;
  const startTime = dayjs(start_time);
  const endTime = dayjs(end_time);
-  const startYear = startTime.format("YYYY");
-  const startMonth = startTime.format("M");
-  const startDay = startTime.format("D");
-  const startDate = `${startYear}年${startMonth}月${startDay}日`;
+  const startDate = startTime.format("YYYY年M月D日");
  const gameRange = `${startTime.format("HH:mm")} - ${endTime.format("HH:mm")}`;
  const summary = [
    {
@@ -485,9 +500,10 @@ const OrderCheck = () => {
  const [location, setLocation] = useState<number[]>([0, 0]);
  const [checkOrderInfo, setCheckOrderInfo] = useState<GameOrderRes | {}>({});
  const [orderDetail, setOrderDetail] = useState({});
+  const [paying, setPaying] = useState(false);

  useDidShow(() => {
-    init()
+    init();
  });

  async function init() {
@@ -535,20 +551,32 @@ const OrderCheck = () => {

  //TODO: get order msg from id
  const handlePay = async () => {
+    setPaying(true);
    Taro.showLoading({
      title: "支付中...",
      mask: true,
    });

-    let payment_params = {}
+    let payment_params = {};
    try {
      payment_params = await getPaymentParams();
+      if (!id) {
+        setStorage("backFlag", "1");
+        Taro.redirectTo({
+          url: `/order_pages/orderDetail/index?id=${payment_params.order_id}`,
+        });
+      }
      await payOrder(payment_params);
      Taro.hideLoading();
      Taro.showToast({
        title: "支付成功",
        icon: "success",
      });
+      const backFlag = getStorage("backFlag");
+      if (backFlag === "1") {
+        setStorage("backFlag", "0");
+        Taro.navigateBack();
+      }
      // Taro.navigateBack({
      //   delta: 1,
      // });
@@ -559,14 +587,9 @@ const OrderCheck = () => {
        icon: "none",
      });
    } finally {
-      await delay(1000);
-      if (!id) {
-        Taro.redirectTo({
-          url: `/order_pages/orderDetail/index?id=${payment_params.order_id}`,
-        });
-      } else {
-        init()
-      }
+      setStorage("backFlag", "0");
+      init();
+      setPaying(false);
    }
  };
  if (!id && !gameId) {
@@ -609,7 +632,11 @@ const OrderCheck = () => {
      {(!id ||
        (order_status === OrderStatus.PENDING &&
          cancel_type === CancelType.NONE)) && (
-        <Button className={styles.payButton} onClick={handlePay}>
+        <Button
+          className={styles.payButton}
+          disabled={paying}
+          onClick={handlePay}
+        >
          {order_status === OrderStatus.PENDING ? "继续" : "确认"}
          支付
        </Button>
--- 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,
--- a/src/services/detailService.ts
+++ b/src/services/detailService.ts
@@ -116,7 +116,7 @@ class GameDetailService {
    longitude: number;
  }): Promise<ApiResponse<UpdateLocationRes>> {
    return httpService.post("/user/update_location", location, {
-      showLoading: true,
+      showLoading: false,
    });
  }

--- a/src/services/loginService.ts
+++ b/src/services/loginService.ts
@@ -414,7 +414,9 @@ export const updateUserPhone = async (payload: ChangePhoneParams) => {
 // 获取指定用户信息
 export const getUserInfoById = async (id) => {
  try {
-    const response = await httpService.post("/user/detail_by_id", { id });
+    const response = await httpService.post("/user/detail_by_id", { id }, {
+      showLoading: false,
+    },);
    return response;
  } catch (error) {
    console.error("获取用户信息失败:", error);
--- a/src/static/order/customer.svg
+++ b/src/static/order/customer.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <g clip-path="url(#clip0_4767_29603)">
+    <path d="M12 10.6666C13.4728 10.6666 14.6667 9.47269 14.6667 7.99992C14.6667 6.52715 13.4728 5.33325 12 5.33325" stroke="#8C8C8C" stroke-width="1.33333" stroke-linejoin="round"/>
+    <path d="M4.00016 5.33325C2.5274 5.33325 1.3335 6.52715 1.3335 7.99992C1.3335 9.47269 2.5274 10.6666 4.00016 10.6666" stroke="#8C8C8C" stroke-width="1.33333" stroke-linejoin="round"/>
+    <path d="M4 10.6666V10.4999V9.66658V7.99992V5.33325C4 3.12411 5.79087 1.33325 8 1.33325C10.2091 1.33325 12 3.12411 12 5.33325V10.6666C12 12.8757 10.2091 14.6666 8 14.6666" stroke="#8C8C8C" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_4767_29603">
+      <rect width="16" height="16" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>