liveh5-nuxt/app/pages/collectCode/signature/panel/index.vue

<script setup>
import {VueSignaturePad}  from 'vue-signature-pad';
import { showToast } from 'vant';
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 goBack = () => {
  router.back()
};
const submitSignature = () => {
  if (signaturePad.value?.isEmpty()) {
    showToast(t('collectCode.signature.pleaseSign'));
    return;
  }
  const { data } = signaturePad.value?.saveSignature();
  imgUrl.value = data;
  confirm()
};

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>
    </div>
  </div>
</template>