qianMing.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <template>
  2. <view>
  3. <!-- 合同模板 -->
  4. <view class="sfht-mt24">
  5. <view class="form-label-select form-radius-box">
  6. <view class="phone-form-label"><text class="form-label-require"></text>签名</view>
  7. <view class="form-radio-select" @click="handleQianming">
  8. <view>{{!!data.qianming? '已签名': ''}}</view>
  9. <icon></icon>
  10. </view>
  11. </view>
  12. </view>
  13. <uni-popup ref="popupRef" type="bottom" background-color="#fff" :is-mask-click="false" :mask-click="false">
  14. <view class="ht-qm-popup">
  15. <view class="icon-title-navBar-box">
  16. <view @click="goback2" class="nav-bar-icon"></view>
  17. <text class="nav-bar-title">签名</text>
  18. </view>
  19. <writeSign @getBase64="getBase64"></writeSign>
  20. </view>
  21. </uni-popup>
  22. </view>
  23. </template>
  24. <script setup>
  25. import {
  26. ref,
  27. reactive,
  28. nextTick
  29. } from "vue";
  30. import writeSign from "@/components/writeSign/index.vue"
  31. import {
  32. throttleAdvanced
  33. } from "@/utils/common.js"
  34. import {
  35. base64ToPath
  36. } from "image-tools";
  37. import {
  38. useHetong
  39. } from "../useHetong.js"
  40. const {
  41. injectHetong
  42. } = useHetong();
  43. const data = injectHetong()
  44. const popupRef = ref(null)
  45. const handleQM = throttleAdvanced((img) => {
  46. data.hetong.qianming = img.replace(/^data:image\/\w+;base64,/, '')
  47. goback2();
  48. })
  49. function handleQianming() {
  50. popupRef.value.open()
  51. }
  52. function goback2() {
  53. popupRef.value.close()
  54. }
  55. function getBase64(img) {
  56. if (!img) {
  57. uni.showToast({
  58. title: '签名异常'
  59. })
  60. return;
  61. }
  62. handleQM(img)
  63. }
  64. </script>
  65. <style>
  66. </style>