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

src/app.ts

@@ -3,15 +3,22 @@ import { Component, ReactNode } from "react";
 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() {

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 updateLocation();
-    await fetchUserInfo();
+    // await fetchUserInfo();
-    // await fetchDetail();
+    await fetchDetail();
   });
 
   const updateLocation = async () => {

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:
+    font-feature-settings: "liga" off, "clig" off;
-      "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:
+    font-feature-settings: "liga" off, "clig" off;
-      "liga" off,
-      "clig" off;
     font-family: "PingFang SC";
     font-size: 12px;
     font-style: normal;
@@ -136,9 +132,7 @@
 
           .date {
             color: #000;
-            font-feature-settings:
+            font-feature-settings: "liga" off, "clig" off;
-              "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:
+            font-feature-settings: "liga" off, "clig" off;
-              "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:
+          font-feature-settings: "liga" off, "clig" off;
-            "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:
+            font-feature-settings: "liga" off, "clig" off;
-              "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:
+            font-feature-settings: "liga" off, "clig" off;
-              "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:
+    font-feature-settings: "liga" off, "clig" off;
-      "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:
+        font-feature-settings: "liga" off, "clig" off;
-          "liga" off,
-          "clig" off;
         font-family: "PingFang SC";
         font-size: 14px;
         font-style: normal;
@@ -338,9 +340,7 @@
 
       .content {
         color: #000;
-        font-feature-settings:
+        font-feature-settings: "liga" off, "clig" off;
-          "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:
+    font-feature-settings: "liga" off, "clig" off;
-      "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:
+      font-feature-settings: "liga" off, "clig" off;
-        "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:
+        font-feature-settings: "liga" off, "clig" off;
-          "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:
+    font-feature-settings: "liga" off, "clig" off;
-      "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:
+  font-feature-settings: "liga" off, "clig" off;
-    "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;

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 } =
+  const {
-    detail || {};
+    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
+        {orderDetail.order_id ? (
-          ? generateOrderActions(
+          <>
+            {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 startDate = startTime.format("YYYY年M月D日");
-  const startMonth = startTime.format("M");
-  const startDay = startTime.format("D");
-  const startDate = `${startYear}年${startMonth}月${startDay}日`;
   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);
+      setStorage("backFlag", "0");
-      if (!id) {
+      init();
-        Taro.redirectTo({
+      setPaying(false);
-          url: `/order_pages/orderDetail/index?id=${payment_params.order_id}`,
-        });
-      } else {
-        init()
-      }
     }
   };
   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>

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:
+      font-feature-settings: "liga" off, "clig" off;
-        "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:
+          font-feature-settings: "liga" off, "clig" off;
-            "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);
+        color: rgba(60, 60, 67, 0.6);
-        font-feature-settings: 'liga' off, 'clig' off;
+        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);
+        color: rgba(60, 60, 67, 0.6);
-        font-feature-settings: 'liga' off, 'clig' off;
+        font-feature-settings: "liga" off, "clig" off;
         text-overflow: ellipsis;
         font-family: "PingFang SC";
         font-size: 12px;
@@ -232,7 +228,9 @@
           }
         }
 
-        .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;

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>
-                    <Text>{item.amount}</Text>
+                      {unPay ? "待支付" : refundTextMap.get(item.refund_status)}
+                    </Text>{" "}
+                    ¥ <Text>{item.amount}</Text>
                   </View>
                 </View>
                 <View className={styles.gameTime}>
@@ -304,27 +322,7 @@ const OrderList = () => {
                 <View className={styles.gameOtherInfo}>
                   {participants?.length >= 0 ? (
                     <View className={styles.avatarCards}>
-                      {
+                      {participants.map((participant) => {
-                        /* 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;
@@ -336,8 +334,7 @@ const OrderList = () => {
                             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,

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,
     });
   }
 

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);

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>