feat: 提交订单的loading 添加

feat: 修复了连接断开之后重连的逻辑
feat: 支付的时候防止重复点击
2025-12-01 16:55:10 +08:00 · 2025-12-01 16:39:55 +08:00 · 2025-12-01 15:15:48 +08:00 · 2025-12-01 14:18:37 +08:00 · 2025-11-26 23:58:18 +08:00 · 2025-11-26 23:35:31 +08:00
8 changed files with 273 additions and 163 deletions
--- a/src/main.js
+++ b/src/main.js
@@ -16,6 +16,8 @@ app.$mount();
 import { createSSRApp } from "vue";
 import * as Pinia from "pinia";
 import { createUnistorage } from "pinia-plugin-unistorage";
+import noclick from "./utils/noclick";
+
 export function createApp() {
  const app = createSSRApp(App);
  const pinia = Pinia.createPinia();
@@ -23,10 +25,11 @@ export function createApp() {
  pinia.use(createUnistorage());
  app.use(pinia);
  app.use(share);
+  app.use(noclick);

  return {
    app,
    pinia,
  };
 }
-// #endif
+// #endif
--- a/src/pages-booking/components/FooterSection/index.vue
+++ b/src/pages-booking/components/FooterSection/index.vue
@@ -21,7 +21,7 @@
      />
      <text
        class="font-size-16 font-500 color-white"
-        @click="emit('payClick', orderData)"
+        @click="$onMultipleClicks(() => emit('payClick', orderData))"
        >立即支付</text
      >
    </view>
--- a/src/pages-booking/index.vue
+++ b/src/pages-booking/index.vue
@@ -128,11 +128,6 @@ const isDeleting = ref(false); // 标志位，防止删除时watch冲突
 watch(
  quantity,
  async (newQuantity) => {
-    // 非酒店类型，不处理
-    if (orderData.value.commodityTypeCode !== "0") {
-      return;
-    }
-
    // 如果正在执行删除操作，跳过watch逻辑
    if (isDeleting.value) {
      isDeleting.value = false;
@@ -208,96 +203,107 @@ const validateUserForms = () => {

 // 处理支付点击事件
 const handlePayClick = ThrottleUtils.createThrottle(async (goodsData) => {
-  console.log("处理支付点击事件", userFormList.value);
-  // 判断是酒店类型
-  if (goodsData.commodityTypeCode === "0") {
-    // 校验用户姓名
-    if (!validateUserForms()) {
+  // 点击后立即展示 loading
+  uni.showLoading({ title: "正在提交订单..." });
+
+  try {
+    console.log("处理支付点击事件", userFormList.value);
+    // 判断是酒店类型
+    if (goodsData.commodityTypeCode === "0") {
+      // 校验用户姓名
+      if (!validateUserForms()) {
+        uni.hideLoading();
+        return;
+      }
+    }
+    // 校验手机号
+    if (!PhoneUtils.validatePhone(userFormList.value[0].contactPhone)) {
+      uni.hideLoading();
+      uni.showToast({ title: "请输入正确的手机号", icon: "none" });
      return;
    }
+
+    // 购买的商品id
+    const commodityId = goodsData.commodityId;
+    // 消费者信息
+    const consumerInfoEntityList = userFormList.value;
+    // 购买数量
+    const purchaseAmount = consumerInfoEntityList.length;
+    // 支付方式 0-微信 1-支付宝 2-云闪付
+    const payWay = "0";
+    // 支付渠道 0-app 1-小程序 2-h5
+    const paySource = "1";
+
+    const params = {
+      commodityId,
+      purchaseAmount,
+      payWay,
+      paySource,
+      consumerInfoEntityList,
+    };
+
+    //酒店类型添加入住时间、离店时间
+    if (goodsData.commodityTypeCode === "0" && selectedDate.value) {
+      const { startDate, endDate } = selectedDate.value;
+      // 入住时间
+      params.checkInData = startDate;
+      // 离店时间
+      params.checkOutData = endDate;
+    }
+
+    const res = await orderPay(params);
+    console.log("确认订单---2:", res);
+
+    // 检查接口返回数据
+    if (!res || !res.data) {
+      uni.hideLoading();
+      uni.showToast({ title: "订单创建失败，请重试", icon: "none" });
+      return;
+    }
+
+    const { data } = res;
+    const { nonceStr, packageVal, paySign, signType, timeStamp } = data;
+
+    // 验证支付参数是否完整
+    if (!nonceStr || !packageVal || !paySign || !signType || !timeStamp) {
+      uni.hideLoading();
+      uni.showToast({ title: "支付参数错误，请重试", icon: "none" });
+      return;
+    }
+
+    // 在发起微信支付前关闭 loading（避免与原生支付 UI 冲突）
+    uni.hideLoading();
+
+    // 调用微信支付
+    uni.requestPayment({
+      provider: "wxpay",
+      timeStamp: String(timeStamp), // 确保为字符串类型
+      nonceStr: String(nonceStr),
+      package: String(packageVal), // 确保为字符串类型
+      signType: String(signType),
+      paySign: String(paySign),
+      success: () => {
+        uni.showToast({
+          title: "支付成功",
+          icon: "success",
+          success: () => {
+            uni.navigateTo({
+              url: "/pages-order/order/list",
+            });
+          },
+        });
+      },
+      fail: () => {
+        uni.showToast({ title: "支付失败，请重试", icon: "none" });
+      },
+    });
+  } catch (error) {
+    console.error(error);
+    uni.showToast({ title: "请求出错，请重试", icon: "none" });
+  } finally {
+    // 防止某些分支忘记 hide，确保最终关闭 loading（requestPayment 后也可以安全调用 hide）
+    uni.hideLoading();
  }
-  // 校验手机号
-  if (!PhoneUtils.validatePhone(userFormList.value[0].contactPhone)) {
-    uni.showToast({ title: "请输入正确的手机号", icon: "none" });
-    return;
-  }
-
-  // 购买的商品id
-  const commodityId = goodsData.commodityId;
-  // 消费者信息
-  const consumerInfoEntityList = userFormList.value;
-  // 购买数量
-  const purchaseAmount = consumerInfoEntityList.length;
-  // 支付方式 0-微信 1-支付宝 2-云闪付
-  const payWay = "0";
-  // 支付渠道 0-app 1-小程序 2-h5
-  const paySource = "1";
-
-  const params = {
-    commodityId,
-    purchaseAmount,
-    payWay,
-    paySource,
-    consumerInfoEntityList,
-  };
-
-  //酒店类型添加入住时间、离店时间
-  if (goodsData.commodityTypeCode === "0" && selectedDate.value) {
-    const { startDate, endDate } = selectedDate.value;
-    // 入住时间
-    params.checkInData = startDate;
-    // 离店时间
-    params.checkOutData = endDate;
-  }
-
-  const res = await orderPay(params);
-  console.log("确认订单---2:", res);
-
-  // 检查接口返回数据
-  if (!res || !res.data) {
-    uni.showToast({ title: "订单创建失败，请重试", icon: "none" });
-    return;
-  }
-
-  const { data } = res;
-  const { nonceStr, packageVal, paySign, signType, timeStamp } = data;
-
-  // 验证支付参数是否完整
-  if (!nonceStr || !packageVal || !paySign || !signType || !timeStamp) {
-    // console.error("支付参数不完整:", {
-    //   nonceStr: !!nonceStr,
-    //   packageVal: !!packageVal,
-    //   paySign: !!paySign,
-    //   signType: !!signType,
-    //   timeStamp: !!timeStamp,
-    // });
-    uni.showToast({ title: "支付参数错误，请重试", icon: "none" });
-    return;
-  }
-
-  // 调用微信支付
-  uni.requestPayment({
-    provider: "wxpay",
-    timeStamp: String(timeStamp), // 确保为字符串类型
-    nonceStr: String(nonceStr),
-    package: String(packageVal), // 确保为字符串类型
-    signType: String(signType),
-    paySign: String(paySign),
-    success: () => {
-      uni.showToast({
-        title: "支付成功",
-        icon: "success",
-        success: () => {
-          uni.navigateTo({
-            url: "/pages-order/order/list",
-          });
-        },
-      });
-    },
-    fail: () => {
-      uni.showToast({ title: "支付失败，请重试", icon: "none" });
-    },
-  });
 }, 1000);
 </script>

--- a/src/pages-order/order/components/FooterSection/index.vue
+++ b/src/pages-order/order/components/FooterSection/index.vue
@@ -17,7 +17,7 @@
          'bg-2D91FF': ['1', '2', '3', '4', '5', '6'].includes(statusCode),
        },
      ]"
-      @click="handleButtonClick(orderData)"
+      @click="$onmultipleClicks(() => handleButtonClick(orderData))"
    >
      {{ buttonText }}
    </button>
@@ -71,10 +71,14 @@ const handleButtonClick = async (orderData) => {
      uni.navigateTo({
        url: `/pages/goods/index?commodityId=${orderData.commodityId}`,
      });
+      return;
    }

    // 待支付状态，调用支付接口
    if (statusCode.value === "0") {
+      // 显示 loading
+      uni.showLoading({ title: "正在提交订单..." });
+
      const orderId = orderData.orderId;
      const payWay = orderData.payWay;
      const paySource = orderData.paySource;
@@ -84,6 +88,7 @@ const handleButtonClick = async (orderData) => {

      // 检查接口返回数据
      if (!res || !res.data) {
+        uni.hideLoading();
        uni.showToast({ title: "订单创建失败，请重试", icon: "none" });
        return;
      }
@@ -93,17 +98,14 @@ const handleButtonClick = async (orderData) => {

      // 验证支付参数是否完整
      if (!nonceStr || !packageVal || !paySign || !signType || !timeStamp) {
-        // console.error("支付参数不完整:", {
-        //   nonceStr: !!nonceStr,
-        //   packageVal: !!packageVal,
-        //   paySign: !!paySign,
-        //   signType: !!signType,
-        //   timeStamp: !!timeStamp,
-        // });
+        uni.hideLoading();
        uni.showToast({ title: "支付参数错误，请重试", icon: "none" });
        return;
      }

+      // 在发起微信支付前关闭 loading（避免与原生支付 UI 冲突）
+      uni.hideLoading();
+
      // 调用微信支付
      uni.requestPayment({
        provider: "wxpay",
@@ -126,6 +128,7 @@ const handleButtonClick = async (orderData) => {
    }
  } catch (error) {
    console.error("操作失败:", error);
+    uni.hideLoading();
  }
 };
 </script>
--- a/src/pages/index/components/chat/ChatMainList/index.vue
+++ b/src/pages/index/components/chat/ChatMainList/index.vue
@@ -407,7 +407,7 @@ const getMainPageData = async () => {

 /// =============对话↓================
 // 初始化WebSocket
-const initWebSocket = () => {
+const initWebSocket = async () => {
  // 清理旧实例
  if (webSocketManager) {
    webSocketManager.destroy();
@@ -426,9 +426,10 @@ const initWebSocket = () => {

    // 连接成功回调
    onOpen: (event) => {
+      console.log("WebSocket连接成功");
      // 重置会话状态
      webSocketConnectStatus = true;
-      isSessionActive.value = true;
+      isSessionActive.value = false; // 连接成功时重置会话状态，避免影响新消息发送
    },

    // 连接断开回调
@@ -441,9 +442,9 @@ const initWebSocket = () => {

    // 错误回调
    onError: (error) => {
+      console.error("WebSocket错误:", error);
      webSocketConnectStatus = false;
      isSessionActive.value = false;
-      console.error("WebSocket错误:", error);
    },

    // 消息回调
@@ -458,67 +459,73 @@ const initWebSocket = () => {
    getAgentId: () => agentId.value,
  });

-  // 初始化连接
-  webSocketManager
-    .connect()
-    .then(() => {
-      webSocketConnectStatus = true;
-    })
-    .catch((error) => {
-      console.error("WebSocket连接失败:", error);
-    });
+  try {
+    // 初始化连接
+    await webSocketManager.connect();
+    console.log("WebSocket连接初始化成功");
+    webSocketConnectStatus = true;
+    return true;
+  } catch (error) {
+    console.error("WebSocket连接失败:", error);
+    webSocketConnectStatus = false;
+    return false;
+  }
 };

 // 处理WebSocket消息
-const handleWebSocketMessage = (data) => {
-  const aiMsgIndex = chatMsgList.value.length - 1;
-  if (!chatMsgList.value[aiMsgIndex] || aiMsgIndex < 0) {
-    return;
-  }
-
-  // 确保消息内容是字符串类型
-  if (data.content && typeof data.content !== "string") {
-    data.content = String(data.content);
-  }
-
-  // 直接拼接内容到AI消息
-  if (data.content) {
-    if (chatMsgList.value[aiMsgIndex].isLoading) {
-      chatMsgList.value[aiMsgIndex].msg = "";
+  const handleWebSocketMessage = (data) => {
+    const aiMsgIndex = chatMsgList.value.length - 1;
+    if (!chatMsgList.value[aiMsgIndex] || aiMsgIndex < 0) {
+      console.error("处理WebSocket消息时找不到对应的AI消息项");
+      return;
    }
-    chatMsgList.value[aiMsgIndex].msg += data.content;
-    chatMsgList.value[aiMsgIndex].isLoading = false;
-    nextTick(() => scrollToBottom());
-  }

-  // 处理完成状态
-  if (data.finish) {
-    const msg = chatMsgList.value[aiMsgIndex].msg;
-    if (!msg || chatMsgList.value[aiMsgIndex].isLoading) {
-      chatMsgList.value[aiMsgIndex].msg = "未获取到内容，请重试";
-      chatMsgList.value[aiMsgIndex].isLoading = false;
-      if (data.toolCall) {
+    // 确保消息内容是字符串类型
+    if (data.content && typeof data.content !== "string") {
+      data.content = String(data.content);
+    }
+
+    // 直接拼接内容到AI消息
+    if (data.content) {
+      if (chatMsgList.value[aiMsgIndex].isLoading) {
        chatMsgList.value[aiMsgIndex].msg = "";
      }
+      chatMsgList.value[aiMsgIndex].msg += data.content;
+      chatMsgList.value[aiMsgIndex].isLoading = false;
+      nextTick(() => scrollToBottom());
    }

-    // 处理toolCall
-    if (data.toolCall) {
-      chatMsgList.value[aiMsgIndex].toolCall = data.toolCall;
-    }
+    // 处理完成状态
+    if (data.finish) {
+      const msg = chatMsgList.value[aiMsgIndex].msg;
+      if (!msg || chatMsgList.value[aiMsgIndex].isLoading) {
+        chatMsgList.value[aiMsgIndex].msg = "未获取到内容，请重试";
+        chatMsgList.value[aiMsgIndex].isLoading = false;
+        if (data.toolCall) {
+          chatMsgList.value[aiMsgIndex].msg = "";
+        }
+      }

-    // 处理question
-    if (data.question && data.question.length > 0) {
-      chatMsgList.value[aiMsgIndex].question = data.question;
-    }
+      // 处理toolCall
+      if (data.toolCall) {
+        chatMsgList.value[aiMsgIndex].toolCall = data.toolCall;
+      }

-    // 重置会话状态
-    isSessionActive.value = false;
-  }
-};
+      // 处理question
+      if (data.question && data.question.length > 0) {
+        chatMsgList.value[aiMsgIndex].question = data.question;
+      }
+
+      // 重置会话状态
+      isSessionActive.value = false;
+    }
+  };

 // 重置消息状态
-const resetMessageState = () => {};
+const resetMessageState = () => {
+  // 重置当前会话消息ID
+  currentSessionMessageId = null;
+};

 // 初始化数据 首次数据加载的时候
 const initData = () => {
@@ -536,12 +543,39 @@ const sendMessage = async (message, isInstruct = false) => {

  await checkToken();

+  // 检查WebSocket连接状态，如果未连接，尝试重新连接
  if (!webSocketConnectStatus) {
-    uni.showToast({
-      title: "当前网络异常，请稍后重试",
-      icon: "none",
+    console.log("WebSocket未连接，尝试重新连接...");
+    // 显示加载提示
+    uni.showLoading({
+      title: "正在连接服务器...",
    });
-    return;
+    
+    // 尝试重新初始化WebSocket连接
+    try {
+      await initWebSocket();
+      // 等待短暂时间确保连接建立
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      
+      // 检查连接是否成功建立
+      if (!webSocketConnectStatus) {
+        uni.hideLoading();
+        uni.showToast({
+          title: "连接服务器失败，请稍后重试",
+          icon: "none",
+        });
+        return;
+      }
+      uni.hideLoading();
+    } catch (error) {
+      console.error("重新连接WebSocket失败:", error);
+      uni.hideLoading();
+      uni.showToast({
+        title: "连接服务器失败，请稍后重试",
+        icon: "none",
+      });
+      return;
+    }
  }

  if (isSessionActive.value) {
@@ -563,6 +597,8 @@ const sendMessage = async (message, isInstruct = false) => {
  };
  chatMsgList.value.push(newMsg);
  inputMessage.value = "";
+  // 发送消息后滚动到底部
+  setTimeoutScrollToBottom();
  sendChat(message, isInstruct);
  console.log("发送的新消息：", JSON.stringify(newMsg));
 };
@@ -578,9 +614,11 @@ const sendWebSocketMessage = (messageType, messageContent, options = {}) => {
  };

  try {
-    webSocketManager.sendMessage(args);
+    // 直接调用webSocketManager的sendMessage方法，利用其内部的消息队列机制
+    // 即使当前连接断开，消息也会被加入队列，等待连接恢复后发送
+    const result = webSocketManager.sendMessage(args);
    console.log(`WebSocket消息已发送 [类型:${messageType}]:`, args);
-    return true;
+    return result;
  } catch (error) {
    console.error("发送WebSocket消息失败:", error);
    isSessionActive.value = false;
@@ -590,9 +628,26 @@ const sendWebSocketMessage = (messageType, messageContent, options = {}) => {

 // 发送获取AI聊天消息
 const sendChat = (message, isInstruct = false) => {
-  if (!webSocketManager || !webSocketManager.isConnected()) {
-    console.error("WebSocket未连接");
-    isSessionActive.value = false;
+  // 检查WebSocket管理器是否存在，如果不存在，尝试重新初始化
+  if (!webSocketManager) {
+    console.error("WebSocket管理器不存在，尝试重新初始化...");
+    initWebSocket();
+    // 短暂延迟后再次检查连接状态
+    setTimeout(() => {
+      if (webSocketManager && webSocketManager.isConnected()) {
+        // 连接成功后重新发送消息
+        sendChat(message, isInstruct);
+      } else {
+        console.error("WebSocket重新初始化失败");
+        isSessionActive.value = false;
+        // 更新AI消息状态为失败
+        const aiMsgIndex = chatMsgList.value.length - 1;
+        if (aiMsgIndex >= 0 && chatMsgList.value[aiMsgIndex].msgType === MessageRole.AI) {
+          chatMsgList.value[aiMsgIndex].msg = "发送消息失败，请重试";
+          chatMsgList.value[aiMsgIndex].isLoading = false;
+        }
+      }
+    }, 1000);
    return;
  }

@@ -615,6 +670,8 @@ const sendChat = (message, isInstruct = false) => {
    },
  };
  chatMsgList.value.push(aiMsg);
+  // 添加AI消息后滚动到底部
+  setTimeoutScrollToBottom();
  const aiMsgIndex = chatMsgList.value.length - 1;

  // 发送消息
@@ -678,6 +735,7 @@ const resetConfig = () => {

  // 重置消息状态
  resetMessageState();
+  isSessionActive.value = false;

  // 清理定时器
  if (holdKeyboardTimer.value) {
--- a/src/pages/index/components/chat/ChatTopWelcome/styles/index.scss
+++ b/src/pages/index/components/chat/ChatTopWelcome/styles/index.scss
@@ -3,11 +3,21 @@
 }

 .ip {
+  position: relative;
  flex: 0 0 158px;
  width: 158px;
  height: 134px;
  animation: sprite-play calc(var(--ipLargeTime) * 1s)
    steps(var(--ipLargeImageStep)) infinite;
+  &::before {
+    content: "";
+    position: absolute;
+    background-color: #f9fcfd;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+  }
 }

@keyframes sprite-play {
--- a/src/utils/noclick.js
+++ b/src/utils/noclick.js
@@ -0,0 +1,28 @@
+// 防止处理多次点击
+// methods是需要点击后需要执行的函数， info是点击需要传的参数
+export function noMultipleClicks(fn, info, delay = 2000) {
+  if (typeof fn !== 'function') return;
+  // this 会是组件实例（因为通过 globalProperties 调用时 Vue 会把组件实例作为上下文）
+  const ctx = this || {};
+  if (!ctx.__noClickMap) ctx.__noClickMap = new WeakMap();
+
+  const map = ctx.__noClickMap;
+  if (map.get(fn)) {
+    console.log('请勿重复点击:', fn.name);
+    return;
+  }
+
+  map.set(fn, true);
+  // 保留组件上下文调用方法
+  fn.call(ctx, info);
+
+  setTimeout(() => {
+    map.set(fn, false);
+  }, delay);
+}
+
+export default {
+  install(app) {
+    app.config.globalProperties.$noMultipleClicks = noMultipleClicks;
+  }
+}
--- a/src/utils/share.js
+++ b/src/utils/share.js
@@ -3,7 +3,9 @@ export default {
    app.mixin({
      onLoad() {
        const page = getCurrentPages().pop();
-        if (page) {
+        console.log("Current page:", page);
+        const allowShare = page && page.route && page.route !== "pages/login/index";
+        if (allowShare) {
          uni.showShareMenu({
            withShareTicket: true,
            menus: ["shareAppMessage", "shareTimeline"],
Author	SHA1	Message	Date
zoujing	09452bf600	feat: 提交订单的loading 添加	2025-12-01 16:55:10 +08:00
zoujing	c20563ecf5	feat: 修复了连接断开之后重连的逻辑	2025-12-01 16:39:55 +08:00
zoujing	172bae663b	feat: 支付的时候防止重复点击	2025-12-01 15:15:48 +08:00
zoujing	9632f5c065	fix: 禁止分享登录页面	2025-12-01 14:18:37 +08:00
zoujing	3f803b662a	feat: 首页的动效的修复	2025-11-26 23:58:18 +08:00
zoujing	84b77b3fe6	feat: 商品数量的计算问题	2025-11-26 23:35:31 +08:00