From c9f6820882e6b76d35a77e2d569efe65a0c7b57c Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Sat, 10 Oct 2026 17:58:09 +0800
Subject: [PATCH] =?UTF-8?q?fix(order):=20=E4=BF=AE=E5=A4=8D=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AFiOS=20Safari=E4=BF=AE=E6=94=B9=E7=BB=93?=
 =?UTF-8?q?=E8=B4=A6=E5=BC=B9=E7=AA=97=E6=93=8D=E4=BD=9C=E6=A0=8F=E8=A2=AB?=
 =?UTF-8?q?=E6=88=AA=E6=96=AD=E5=8F=8A=E6=BB=9A=E5=8A=A8=E5=8D=A1=E6=AD=BB?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 架构重构：将修改结账、拒绝结账、发起争议弹窗的操作提交按钮从滚动体抽出，移入固定吸底的 popup-footer，保证任何情况下按钮始终完整可见、随手可点
- 视口适配：弹窗采用 85dvh 动态视口高度，配合 flex 列布局与 overflow: hidden，并在吸底栏集成 safe-area-inset-bottom，解决 iOS Safari 底部浮动地址栏遮挡
- 滚动解耦：弹窗内部 popup-body 独立滚动并开启 -webkit-overflow-scrolling 和 overscroll-behavior: contain，消除 WebKit 双层滚动容器死锁与橡皮筋卡死
- 防缩放优化：弹窗内全量输入框与 textarea 统一声明 16px 字体，杜绝 iOS Safari 聚焦时触发的强制页面缩放畸变
- 验证通过：运行全站门禁 ./scripts/check.sh（Go测试、MySQL测试、ESLint、Vue-TSC、Vite生产构建）全部通过
---
 .../orders/views/MobileOrderDetailView.css    | 40 ++++++++++++++++---
 .../orders/views/MobileOrderDetailView.vue    | 12 ++++--
 2 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/frontend/src/features/orders/views/MobileOrderDetailView.css b/frontend/src/features/orders/views/MobileOrderDetailView.css
index 47b9eb0..7b156bf 100644
--- a/frontend/src/features/orders/views/MobileOrderDetailView.css
+++ b/frontend/src/features/orders/views/MobileOrderDetailView.css
@@ -216,16 +216,22 @@
 
 /* ========== Popups ========== */
 .mobile-popup-form {
-  max-height: 85%;
-  padding-bottom: env(safe-area-inset-bottom);
+  display: flex !important;
+  flex-direction: column !important;
+  max-height: 85vh;
+  max-height: 85dvh;
+  overflow: hidden !important;
+  box-sizing: border-box;
 }
 
 .popup-header {
+  flex-shrink: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 16px;
   border-bottom: 1px solid #edf2f7;
+  background: #fff;
 }
 
 .popup-header h3 {
@@ -243,8 +249,25 @@
 }
 
 .popup-body {
+  flex: 1 1 auto;
+  min-height: 0;
   padding: 16px;
   overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+}
+
+.popup-footer {
+  flex-shrink: 0;
+  padding: 10px 16px;
+  padding-bottom: calc(10px + env(safe-area-inset-bottom));
+  background: #fff;
+  border-top: 1px solid #edf2f7;
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.popup-submit {
+  margin: 0;
 }
 
 .form-hint-info {
@@ -260,6 +283,15 @@
   margin-bottom: 12px;
 }
 
+/* iOS Safari：font-size < 16px 时聚焦会自动放大整个页面 */
+.mobile-popup-form input,
+.mobile-popup-form textarea,
+.popup-field :deep(.van-field__control),
+.custom-inline-input,
+.custom-select {
+  font-size: 16px !important;
+}
+
 .evidence-upload-row {
   display: flex;
   justify-content: space-between;
@@ -269,10 +301,6 @@
   margin-bottom: 16px;
 }
 
-.popup-submit {
-  margin-top: 10px;
-}
-
 .custom-select {
   border: none;
   background: transparent;
diff --git a/frontend/src/features/orders/views/MobileOrderDetailView.vue b/frontend/src/features/orders/views/MobileOrderDetailView.vue
index df28a3c..2d1c0dd 100644
--- a/frontend/src/features/orders/views/MobileOrderDetailView.vue
+++ b/frontend/src/features/orders/views/MobileOrderDetailView.vue
@@ -601,6 +601,8 @@ async function copyListingCode() {
           <span>上传新证据截图：</span>
           <input type="file" accept="image/*" @change="handleCounterEvidenceUpload" />
         </div>
+      </div>
+      <footer class="popup-footer">
         <van-button
           type="warning"
           block
@@ -612,7 +614,7 @@ async function copyListingCode() {
         >
           提交给对方确认
         </van-button>
-      </div>
+      </footer>
     </van-popup>
 
     <!-- POPUP: Renter Reject Counter Proposal Reason -->
@@ -634,6 +636,8 @@ async function copyListingCode() {
           placeholder="请详细叙述拒绝号主扣款的理由，这些信息将被客服作为判定依据"
           class="popup-field"
         />
+      </div>
+      <footer class="popup-footer">
         <van-button
           type="danger"
           block
@@ -645,7 +649,7 @@ async function copyListingCode() {
         >
           提交原因并提起争议
         </van-button>
-      </div>
+      </footer>
     </van-popup>
 
     <!-- POPUP: Create Generic Order Dispute -->
@@ -690,6 +694,8 @@ async function copyListingCode() {
           <span>上传证据截图：</span>
           <input type="file" accept="image/*" @change="handleEvidenceUpload" />
         </div>
+      </div>
+      <footer class="popup-footer">
         <van-button
           type="warning"
           block
@@ -701,7 +707,7 @@ async function copyListingCode() {
         >
           提交申诉客服仲裁
         </van-button>
-      </div>
+      </footer>
     </van-popup>
   </main>
 </template>