86 lines
2.3 KiB
Vue
86 lines
2.3 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";
|
||
|
|
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>
|