liveh5-nuxt/app/pages/collectCode/signature/panel/index.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">
      <client-only>
        <VueSignaturePad
            width="100%"
            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">
          返回
        </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>