c8899348a4
- 移除了 nuxt 配置中的 postcss-mobile-forever 插件- 在 package.json 和 pnpm-lock.yaml 中添加了 postcss-px-to-viewport 依赖 -调整了签名面板的样式，为 VueSignaturePad 添加了高度属性 - 移除了签名确认时的冗余代码，优化了确认流程
76 lines
2.1 KiB
Vue
76 lines
2.1 KiB
Vue
<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);
|
|
definePageMeta({
|
|
layout: ''
|
|
});
|
|
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'));
|
|
return;
|
|
}
|
|
const { data } = signaturePad.value?.saveSignature();
|
|
imgUrl.value = data;
|
|
show.value = true;
|
|
};
|
|
|
|
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>
|
|
<van-dialog v-model:show="show" show-cancel-button @confirm="confirm">
|
|
<img class="w-300px h-200px" :src="imgUrl" />
|
|
</van-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|