fix(view):兼容性优化

tianwu
1 parent f2911672
Showing 4 changed files with 90 additions and 13 deletions
apps/web-payment/package.json
apps/web-payment/src/views/payment/component/PasswordInput.vue
apps/web-payment/src/views/payment/index.vue
pnpm-lock.yaml
@@ -46,6 +46,7 @@
     "element-plus": "catalog:",
     "pinia": "catalog:",
     "qs": "catalog:",
+    "vconsole": "^3.15.1",
     "vue": "catalog:",
     "vue-router": "catalog:"
   },
@@ -127,15 +127,14 @@ const handlePaste = (index: number, event: ClipboardEvent) =&gt; {
   }
 };
  
-// 处理点击输入框 - 禁止点击跳转
-const handleFocus = (index: number, event: FocusEvent) => {
-  event.preventDefault();
+// 处理聚焦事件 - 定位到正确输入位置并唤起软键盘
+const handleFocus = (index: number) => {
   // 找到第一个空的输入框位置
   const firstEmptyIndex = passwordValues.value.findIndex((v) => !v);
   const targetIndex =
     firstEmptyIndex === -1 ? props.length - 1 : firstEmptyIndex;
  
-  // 如果点击的不是当前应该输入的位置，则重新聚焦到正确位置
+  // 如果聚焦的不是当前应该输入的位置，则重新聚焦到正确位置
   if (index !== targetIndex) {
     nextTick(() => {
       inputRefs.value[targetIndex]?.focus();
@@ -144,6 +143,18 @@ const handleFocus = (index: number, event: FocusEvent) =&gt; {
   currentIndex.value = targetIndex;
 };
  
+// 处理点击事件 - 确保软键盘唤起
+const handleClick = (index: number) => {
+  // 在下一帧确保输入框获得焦点，从而唤起软键盘
+  nextTick(() => {
+    const firstEmptyIndex = passwordValues.value.findIndex((v) => !v);
+    const targetIndex =
+      firstEmptyIndex === -1 ? props.length - 1 : firstEmptyIndex;
+    inputRefs.value[targetIndex]?.focus();
+    currentIndex.value = targetIndex;
+  });
+};
+
 // 检查是否完成输入
 const checkComplete = () => {
   const password = passwordValues.value.join('');
@@ -246,8 +257,8 @@ defineExpose({
                   @input="handleInput(index, $event)"
                   @keydown="handleKeydown(index, $event)"
                   @paste="handlePaste(index, $event)"
-                  @focus="handleFocus(index, $event)"
-                  @mousedown.prevent
+                  @focus="handleFocus(index)"
+                  @click="handleClick(index)"
                 />
               </div>
  
@@ -13,6 +13,7 @@ import {
 } from '@element-plus/icons-vue';
 import { ElButton, ElDialog, ElIcon, ElMessage, ElRadio } from 'element-plus';
 import qs from 'qs';
+import VConsole from 'vconsole';
  
 import {
   getOpenId,
@@ -73,6 +74,24 @@ const paymentSuccess = ref&lt;boolean&gt;(false);
 const payErrorDialog = ref<boolean>(false);
 const errorMessage = ref<string>('支付失败');
  
+const handleShowConsole = () => {
+  const vConsole = new VConsole({ theme: 'dark' });
+};
+
+let pressTimer = null;
+
+const onPressStart = () => {
+  pressTimer = setTimeout(() => {
+    // console.log('已长按 6 秒');
+    handleShowConsole();
+  }, 6000);
+};
+
+const onPressEnd = () => {
+  clearTimeout(pressTimer);
+  pressTimer = null;
+};
+
 // 计算显示金额
 const displayAmount = computed(() => {
   return fenToYuan(orderInfoData.value?.amount || 0);
@@ -177,9 +196,9 @@ const handlepayBtnShowClick = async (pipeline: Pipeline) =&gt; {
  
   // 判断是否是园区卡支付
   if (channelName.includes('园区卡') || channelName.includes('卡支付')) {
+    showCardDialog.value = true;
     // 如果还没有加载园区卡列表，先加载
     if (cardList.value.length === 0) {
-      showCardDialog.value = true;
       await getListUserCards();
     }
   } else {
@@ -260,8 +279,8 @@ const queryPayment = async () =&gt; {
       payee: orderInfoData.value.mchName,
     };
     const queryString = qs.stringify(params);
-    if (typeof jWeixin !== 'undefined' && jWeixin.miniProgram) {
-      jWeixin.miniProgram.redirectTo({
+    if (typeof wx !== 'undefined' && wx.miniProgram) {
+      wx.miniProgram.redirectTo({
         url: `/packageA/pages/wxPay/index?${queryString}`,
       });
       loading.value = false;
@@ -287,8 +306,8 @@ const queryPayment = async () =&gt; {
     const queryString = qs.stringify(pramsData);
  
     // 跳转到微信支付页面
-    if (typeof jWeixin !== 'undefined' && jWeixin.miniProgram) {
-      jWeixin.miniProgram.navigateTo({
+    if (typeof wx !== 'undefined' && wx.miniProgram) {
+      wx.miniProgram.navigateTo({
         url: `/packageA/pages/wxPay/index?${queryString}`,
       });
       loading.value = false;
@@ -331,6 +350,15 @@ const handlePay = async () =&gt; {
     // 园区卡支付逻辑
     try {
       showPasswordDialog.value = true;
+      const scrollHeight = Math.max(
+        document.body.scrollHeight,
+        document.documentElement.scrollHeight,
+      );
+
+      window.scrollTo({
+        top: scrollHeight,
+        behavior: 'smooth',
+      });
     } catch {}
   } else {
     // 其他支付方式（微信、支付宝等）
@@ -418,10 +446,15 @@ const paySuccessHandler = (data: any) =&gt; {
   });
 };
  
-const payFailHandler = (msg: any) => {};
+const payFailHandler = (msg: any) => {
+  errorMessage.value = msg || '获取订单信息失败';
+  payErrorDialog.value = true;
+};
  
 const payTimeoutHandler = () => {
   // errorMessage: '支付结果查询超时，请稍后在订单中查看支付状态'
+  errorMessage.value = '支付结果查询超时，请稍后在订单中查看支付状态';
+  payErrorDialog.value = true;
 };
  
 const checkPayResult = async (paymentId: number | string) => {
@@ -492,7 +525,15 @@ init();
 </script>
  
 <template>
-  <div class="cashier-container" v-loading="loadLoading">
+  <div
+    class="cashier-container"
+    v-loading="loadLoading"
+    @mousedown="onPressStart()"
+    @mouseup="onPressEnd()"
+    @mouseleave="onPressEnd()"
+    @touchstart="onPressStart()"
+    @touchend="onPressEnd()"
+  >
     <!-- 无效参数提示 -->
     <div v-if="!hasValidParams" class="error-container">
       <div class="error-content">
@@ -883,6 +883,9 @@ importers:
       qs:
         specifier: 'catalog:'
         version: 6.14.0
+      vconsole:
+        specifier: ^3.15.1
+        version: 3.15.1
       vue:
         specifier: ^3.5.24
         version: 3.5.24(typescript@5.9.3)
@@ -5742,6 +5745,10 @@ packages:
     resolution: {integrity: sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==}
     engines: {node: '>=18'}
  
+  copy-text-to-clipboard@3.2.2:
+    resolution: {integrity: sha512-T6SqyLd1iLuqPA90J5N4cTalrtovCySh58iiZDGJ6FGznbclKh4UI+FGacQSgFzwKG77W7XT5gwbVEbd9cIH1A==}
+    engines: {node: '>=12'}
+
   core-js-compat@3.46.0:
     resolution: {integrity: sha512-p9hObIIEENxSV8xIu+V68JjSeARg6UVMG5mR+JEUguG3sI6MsiS1njz2jHmyJDvA+8jX/sytkBHup6kxhM9law==}
  
@@ -8035,6 +8042,9 @@ packages:
     resolution: {integrity: sha512-ypMKuglUrZUD99Tk2bUQ+xNQj43lPEfAeX2o9cTteAmShXy2VHDJpuwu1o0xqoKCt9jLVAvwyFKdLTPXKAfJyA==}
     engines: {node: '>=10'}
  
+  mutation-observer@1.0.3:
+    resolution: {integrity: sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA==}
+
   mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
  
@@ -10288,6 +10298,9 @@ packages:
     resolution: {integrity: sha512-4yoz1kEWqUjzi5zsPbAS/903QXSYp0UOtHsPpp7p9rHAw/W+dkInskAE386Fat3oKRROwO98d9ZB0G4cObgUyw==}
     engines: {node: '>= 0.10'}
  
+  vconsole@3.15.1:
+    resolution: {integrity: sha512-KH8XLdrq9T5YHJO/ixrjivHfmF2PC2CdVoK6RWZB4yftMykYIaXY1mxZYAic70vADM54kpMQF+dYmvl5NRNy1g==}
+
   vdirs@0.1.8:
     resolution: {integrity: sha512-H9V1zGRLQZg9b+GdMk8MXDN2Lva0zx72MPahDKc30v+DtwKjfyOSXWRIX4t2mhDubM1H09gPhWeth/BJWPHGUw==}
     peerDependencies:
@@ -15023,6 +15036,8 @@ snapshots:
     dependencies:
       is-what: 5.5.0
  
+  copy-text-to-clipboard@3.2.2: {}
+
   core-js-compat@3.46.0:
     dependencies:
       browserslist: 4.28.0
@@ -17462,6 +17477,8 @@ snapshots:
       arrify: 2.0.1
       minimatch: 3.1.2
  
+  mutation-observer@1.0.3: {}
+
   mz@2.7.0:
     dependencies:
       any-promise: 1.3.0
@@ -19917,6 +19934,13 @@ snapshots:
  
   validator@13.15.23: {}
  
+  vconsole@3.15.1:
+    dependencies:
+      '@babel/runtime': 7.28.4
+      copy-text-to-clipboard: 3.2.2
+      core-js: 3.46.0
+      mutation-observer: 1.0.3
+
   vdirs@0.1.8(vue@3.5.24(typescript@5.9.3)):
     dependencies:
       evtd: 0.2.4