refactor(signature): 优化签名面板功能和界面

- 移除了不必要的弹窗和屏幕方向检测功能
- 调整了签名面板的布局和样式
-优化了签名提交流程，直接跳转到支付页面
- 修复了外部链接页面的标题和安全问题
- 改进了支付页面的加载提示

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>

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>
 

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
   }
 }

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>