d885680be1
- 移除了不必要的弹窗和屏幕方向检测功能 - 调整了签名面板的布局和样式 -优化了签名提交流程，直接跳转到支付页面 - 修复了外部链接页面的标题和安全问题 - 改进了支付页面的加载提示
70 lines
1.9 KiB
Vue
70 lines
1.9 KiB
Vue
<script setup>
|
|
import {VueSignaturePad} from 'vue-signature-pad';
|
|
import { showToast } from 'vant';
|
|
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);
|
|
definePageMeta({
|
|
layout: ''
|
|
});
|
|
const router = useRouter();
|
|
const imgUrl = ref('');
|
|
|
|
const goBack = () => {
|
|
router.back()
|
|
};
|
|
const submitSignature = () => {
|
|
if (signaturePad.value?.isEmpty()) {
|
|
showToast(t('collectCode.signature.pleaseSign'));
|
|
return;
|
|
}
|
|
const { data } = signaturePad.value?.saveSignature();
|
|
imgUrl.value = data;
|
|
confirm()
|
|
};
|
|
|
|
const clearSignature = () => {
|
|
signaturePad.value?.clearSignature();
|
|
};
|
|
|
|
const confirm=async ()=>{
|
|
const res=await signOffline({
|
|
userInfo:formData.value,
|
|
signOrder:Number(number.value),
|
|
signImgFileData:imgUrl.value
|
|
})
|
|
if (res.status===0){
|
|
router.push('/collectCode/signature/result')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<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"
|
|
/>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</template>
|