01e6f99e90
- 在 app/config/index.js 中添加新的路由名称 - 实现签名面板组件，支持签名、清空和确认功能 - 优化个人资料页面，支持国内外签署流程 - 更新签署协议页面，增加直接签署功能- 引入 vue-signature-pad 依赖
109 lines
2.5 KiB
Vue
109 lines
2.5 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";
|
|
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('请先签名');
|
|
return;
|
|
}
|
|
const { data } = signaturePad.value?.saveSignature(); // 返回 base64 格式的图片数据
|
|
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">
|
|
<VueSignaturePad
|
|
width="100%"
|
|
class="signature bg-#fff rounded-10px mb-10px"
|
|
ref="signaturePad"
|
|
/>
|
|
<div class="flex justify-evenly">
|
|
<van-button class="!h-40px mr-15px" type="primary" @click="goBack">
|
|
返回
|
|
</van-button>
|
|
<van-button class="!h-40px" type="warning" @click="clearSignature">
|
|
清空
|
|
</van-button>
|
|
<van-button class="!h-40px" type="primary" @click="submitSignature">
|
|
确认
|
|
</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>
|
|
|
|
<style scoped>
|
|
.signature-container {
|
|
width: 100%;
|
|
height: 100vh;
|
|
/* 强制竖屏显示 */
|
|
view-transition: none;
|
|
transform: rotate(0deg) !important;
|
|
}
|
|
|
|
:deep(.signature>canvas) {
|
|
height: 100%;
|
|
}
|
|
|
|
/* 横屏适配 */
|
|
@media screen and (orientation: landscape) {
|
|
.signature-container {
|
|
/* 在横屏时保持竖屏宽度 */
|
|
max-width: 100vh;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.flex {
|
|
/* 确保在横屏时内容不会过宽 */
|
|
max-width: 100vh;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
/* 确保签名板在各种屏幕尺寸下都能正常显示 */
|
|
.signature {
|
|
flex: 1;
|
|
min-height: 60vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
</style> |