From d885680be19bbe737e7246e616e9025d6a9c58d9 Mon Sep 17 00:00:00 2001
From: xingyy <64720302+Concur-max@users.noreply.github.com>
Date: Wed, 26 Feb 2025 19:57:21 +0800
Subject: [PATCH] =?UTF-8?q?refactor(signature):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=AD=BE=E5=90=8D=E9=9D=A2=E6=9D=BF=E5=8A=9F=E8=83=BD=E5=92=8C?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除了不必要的弹窗和屏幕方向检测功能
- 调整了签名面板的布局和样式
-优化了签名提交流程，直接跳转到支付页面
- 修复了外部链接页面的标题和安全问题
- 改进了支付页面的加载提示
---
 .../collectCode/signature/panel/index.vue     | 10 +-
 app/pages/externallinks/index.vue             |  8 +-
 app/pages/payment/index.vue                   |  7 +-
 app/pages/signature/panel/index.vue           | 93 +++++--------------
 4 files changed, 34 insertions(+), 84 deletions(-)

diff --git a/app/pages/collectCode/signature/panel/index.vue b/app/pages/collectCode/signature/panel/index.vue
index 35f174d..5795741 100644
--- a/app/pages/collectCode/signature/panel/index.vue
+++ b/app/pages/collectCode/signature/panel/index.vue
@@ -1,11 +1,9 @@
 <script setup>
 import {VueSignaturePad}  from 'vue-signature-pad';
 import { showToast } from 'vant';
-import { onMounted } from 'vue';
 import {codeAuthStore} from "~/stores-collect-code/auth/index.js";
 import {signOffline} from "~/api/goods/index.js";
 import {useI18n} from "vue-i18n";
-
 const {t} = useI18n();
 const {formData,number}=codeAuthStore()
 const signaturePad = ref(null);
@@ -14,11 +12,10 @@ definePageMeta({
 });
 const router = useRouter();
 const imgUrl = ref('');
-const show = ref(false);
+
 const goBack = () => {
   router.back()
 };
-
 const submitSignature = () => {
   if (signaturePad.value?.isEmpty()) {
     showToast(t('collectCode.signature.pleaseSign'));
@@ -26,7 +23,7 @@ const submitSignature = () => {
   }
   const { data } = signaturePad.value?.saveSignature();
   imgUrl.value = data;
-  show.value = true;
+  confirm()
 };
 
 const clearSignature = () => {
@@ -67,9 +64,6 @@ const confirm=async ()=>{
           {{ $t('collectCode.signature.confirm') }}
         </van-button>
       </div>
-      <van-dialog v-model:show="show" show-cancel-button @confirm="confirm">
-        <img class="w-300px h-200px" :src="imgUrl" />
-      </van-dialog>
     </div>
   </div>
 </template>
diff --git a/app/pages/externallinks/index.vue b/app/pages/externallinks/index.vue
index 97aa4b8..0b20584 100644
--- a/app/pages/externallinks/index.vue
+++ b/app/pages/externallinks/index.vue
@@ -1,15 +1,19 @@
 <script setup>
 definePageMeta({
   layout: 'default',
-  i18n: 'menu.profile',
 })
+
 const route = useRoute()
 const url=route.query.url??''
+useHead({
+  title: route.query.title
+})
+
 </script>
 
 <template>
 <div>
-  <iframe :src="url"></iframe>
+  <iframe sandbox="allow-same-origin allow-scripts allow-forms" :src="url"></iframe>
 </div>
 </template>
 
diff --git a/app/pages/payment/index.vue b/app/pages/payment/index.vue
index 0ecb3d4..51553ff 100644
--- a/app/pages/payment/index.vue
+++ b/app/pages/payment/index.vue
@@ -30,6 +30,7 @@ const confirmPay=async ()=>{
     message: t('payment.loading'),
     forbidClick: true,
   });
+
  const res=await createBuyOrder({
    buyUid:payment.value.buyUid,
    price:payStatus.value===0?payment.value.leftPrice:amount.value,
@@ -38,12 +39,6 @@ const confirmPay=async ()=>{
    testReturnEndPoint:'/payment/result'
  })
   if (res.status===0){
-/*    router.push({
-      path:'/externallinks',
-      query:{
-        url:res.data.checkoutSessionUrl
-      }
-    })*/
     window.location.href=res.data.checkoutSessionUrl
   }
 }
diff --git a/app/pages/signature/panel/index.vue b/app/pages/signature/panel/index.vue
index bab8907..3e05c75 100644
--- a/app/pages/signature/panel/index.vue
+++ b/app/pages/signature/panel/index.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {showToast} from 'vant';
+import {showToast,showLoadingToast } from 'vant';
 import {onMounted, onUnmounted, ref} from 'vue';
 import {signOffline, signOnline} from "~/api/goods/index.js";
 import {VueSignaturePad} from "vue-signature-pad";
@@ -10,44 +10,22 @@ const {t:$t} = useI18n()
 definePageMeta({
   layout: ''
 })
-const { userInfo ,payment} = authStore()
+const {  payment} = authStore()
 const signaturePad = ref(null);
-const isLandscapeMode = ref(false);
-
-const checkScreenOrientation = () => {
-
-  const orientation = screen.orientation?.type || window.orientation;
-  if (orientation === 'landscape-primary' || orientation === 'landscape-secondary' ||
-      orientation === 90 || orientation === -90) {
-    isLandscapeMode.value = true;
-  } else {
-    isLandscapeMode.value = false;
-    showToast($t('signature.tips.landscape'));
-  }
-};
-
-onMounted(() => {
-
-  nextTick(() => {
-    checkScreenOrientation();
-  });
-  window.addEventListener('orientationchange', checkScreenOrientation);
-  screen.orientation?.addEventListener('change', checkScreenOrientation);
-});
-onUnmounted(() => {
-  window.removeEventListener('orientationchange', checkScreenOrientation);
-  screen.orientation?.removeEventListener('change', checkScreenOrientation);
-});
 const imgUrl = ref('')
-const show = ref(false)
 const clearSignature = () => {
   signaturePad.value?.clearSignature();
 };
+const toast=ref(false)
 const submitSignature = () => {
   if (signaturePad.value?.isEmpty()) {
     showToast($t('signature.pleaseSign'));
     return;
   }
+  toast.value=showLoadingToast({
+    message: '加载中...',
+    forbidClick: true,
+  });
   const { data } = signaturePad.value?.saveSignature(); // 返回 base64 格式的图片数据
   imgUrl.value = data;
   confirm()
@@ -59,7 +37,8 @@ const confirm = async () => {
     signImgFileData: imgUrl.value
   })
   if (res.status===0){
-    router.push('/payment')
+    await router.push('/payment')
+    toast.value?.close()
   }
 }
 const goBack = () => {
@@ -68,50 +47,28 @@ router.back()
 </script>
 
 <template>
-  <div class="signature-container bg-gray ">
-    <template v-if="isLandscapeMode">
-      <div class="signature-content px-10px py-10px">
+  <div class="signature-container">
+    <div class="flex flex-col h-100vh px-20px py-20px bg-gray w-100vw">
+      <client-only>
         <VueSignaturePad
             width="100%"
+            height="93%"
             class="signature bg-#fff rounded-10px mb-10px"
             ref="signaturePad"
         />
-        <div class="control-buttons justify-evenly">
-          <van-button
-              class="control-button"
-              size="mini"
-              type="primary"
-              @click="goBack"
-          >
-            {{ $t('signature.action.back') }}
-          </van-button>
-          <van-button
-              class="control-button"
-              size="mini"
-              type="warning"
-              @click="clearSignature"
-          >
-            {{ $t('signature.action.clear') }}
-          </van-button>
-          <van-button
-              class="control-button"
-              size="mini"
-              type="primary"
-              @click="submitSignature"
-          >
-            {{ $t('signature.action.confirm') }}
-          </van-button>
-        </div>
+      </client-only>
+      <div class="flex justify-evenly">
+        <van-button class="!h-40px mr-15px" type="primary" @click="goBack">
+          {{ $t('collectCode.signature.back') }}
+        </van-button>
+        <van-button class="!h-40px" type="warning" @click="clearSignature">
+          {{ $t('collectCode.signature.clear') }}
+        </van-button>
+        <van-button class="!h-40px" type="primary" @click="submitSignature">
+          {{ $t('collectCode.signature.confirm') }}
+        </van-button>
       </div>
-    </template>
-    <template v-else>
-      <div class="orientation-hint">
-        <p>{{$t('signature.tips.landscape')}}</p>
-      </div>
-    </template>
-    <van-dialog v-model:show="show" class="signature-dialog" show-cancel-button @confirm="confirm">
-      <img class="h-100px" :src="imgUrl"/>
-    </van-dialog>
+    </div>
   </div>
 </template>