<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"; import {showLoadingToast} from 'vant' const {t} = useI18n(); const {formData,number,qrData}=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 toast= showLoadingToast({ message:t('collectCode.signature.loading'), forbidClick:true, }) try { const res=await signOffline({ auctionArtworkUuid:qrData.value.auctionArtworkUuid, userInfo:formData.value, signOrder:Number(number.value), signImgFileData:imgUrl.value, }) if (res.status===0){ if(Number(number.value)===1){ router.push('/collectCode/signature/result') }else if(Number(number.value)===2){ router.push('/collectCode/payment') } toast.close() } } catch (error) { toast.close() } } </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>