f1e4601f7c
- 新增悬浮窗组件，用于在直播页面显示"回到直播"按钮- 优化直播室侧边按钮，使用新的悬浮窗组件 - 修复商品详情页面的成交价显示问题 - 优化首页拍卖列表的成交价显示 -改进用户主页的拍卖信息展示 - 重构签名面板组件，使用 vue-signature-pad 替代原生实现 - 优化 nuxt 配置，启用 vscode devtools
70 lines
1.9 KiB
Vue
70 lines
1.9 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 w-100vw">
|
|
<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>
|