118 lines
2.7 KiB
Vue
118 lines
2.7 KiB
Vue
|
<script setup>
|
||
|
|
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";
|
||
|
|
import {authStore} from "~/stores/auth/index.js";
|
||
|
|
import {useI18n} from "vue-i18n";
|
||
|
|
const router = useRouter();
|
||
|
|
const {t:$t} = useI18n()
|
||
|
|
definePageMeta({
|
||
|
|
layout: ''
|
||
|
|
})
|
||
|
|
const { payment} = authStore()
|
||
|
|
const signaturePad = ref(null);
|
||
|
|
const imgUrl = ref('')
|
||
|
|
const clearSignature = () => {
|
||
|
|
signaturePad.value?.clearSignature();
|
||
|
|
};
|
||
|
|
const toast=ref(false)
|
||
|
|
const submitSignature = () => {
|
||
|
|
if (signaturePad.value?.isEmpty()) {
|
||
|
|
showToast($t('collectCode.signature.pleaseSign'));
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
toast.value=showLoadingToast({
|
||
|
|
message: $t('common.loading'),
|
||
|
|
forbidClick: true,
|
||
|
|
});
|
||
|
|
const { data } = signaturePad.value?.saveSignature(); // 返回 base64 格式的图片数据
|
||
|
|
imgUrl.value = data;
|
||
|
|
confirm()
|
||
|
|
|
||
|
|
};
|
||
|
|
const confirm = async () => {
|
||
|
|
const res = await signOnline({
|
||
|
|
auctionArtworkUuid:payment.value.auctionArtworkUuid,
|
||
|
|
signImgFileData: imgUrl.value
|
||
|
|
})
|
||
|
|
if (res.status===0){
|
||
|
|
await router.push('/payment')
|
||
|
|
toast.value?.close()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const goBack = () => {
|
||
|
|
router.back()
|
||
|
|
}
|
||
|
|
</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>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.signature-container {
|
||
|
|
position: fixed;
|
||
|
|
inset: 0;
|
||
|
|
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.van-button--mini+.van-button--mini) {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.van-dialog__content) {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.signature-content {
|
||
|
|
display: flex;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.control-buttons {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
padding: 0 10px 0;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.control-button {
|
||
|
|
width: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.orientation-hint {
|
||
|
|
position: fixed;
|
||
|
|
inset: 0;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
background-color: #fff;
|
||
|
|
font-size: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|