HomeLease/pages/InstallationAgreement/InstallationAgreement.vue

<template>
  <view class="page">
    <uv-form ref="form" :model="userInfo" :rules="rules" labelPosition="left" labelWidth="auto">
      <uv-form-item borderBottom label="电话:" prop="phone">
        <uv-input v-model="userInfo.phone" border="none"></uv-input>
      </uv-form-item>
      <uv-form-item borderBottom label="地址:" prop="location">
        <uv-input v-model="userInfo.location" border="none"></uv-input>
      </uv-form-item>
      <uv-form-item borderBottom label="主体名称:" prop="name">
        <uv-input v-model="userInfo.name" border="none"></uv-input>
      </uv-form-item>
      <uv-form-item borderBottom label="统一社会信用代码:" prop="code">
        <uv-input v-model="userInfo.code" border="none"></uv-input>
      </uv-form-item>
      <uv-form-item label="营业执照">
        <image-uploader
          ref="uploader"
          :height="'150rpx'"
          :width="'150rpx'"
          @success="handleUploadSuccess"
        />
      </uv-form-item>
      <text>签名区域</text>
      <uv-form-item>
        <view style="width: auto; height: 500rpx; background-color: #8f939c">
          <l-signature
            ref="signatureRef"
            :openSmooth="openSmooth"
            :penColor="penColor"
            :penSize="penSize"
            disableScroll
          ></l-signature>
        </view>
      </uv-form-item>
      <view class="btn-signature">
        <uv-button
          customStyle="margin-top: 10px"
          text="清空签名"
          type="error"
          @click="onClick('clear')"
        ></uv-button>
        <uv-button
          customStyle="margin-top: 10px"
          text="确认签名"
          type="primary"
          @click="onClick('save')"
        ></uv-button>
        <uv-button
          customStyle="margin-top: 10px"
          text="提交协议"
          type="primary"
          @click="submit"
        ></uv-button>
      </view>
    </uv-form>
  </view>
</template>

<script>
import { tempUrlToRealUrl } from '../../utils/tempUrl-to-realUrl'

export default {
  data() {
    return {
      tempUrl: '',
      userInfo: {
        name: '',
        code: '',
        phone: '',
        location: '',
        businessLicenseUrl: '',
        signatureUrl: '',
      },

      rules: {
        name: {
          type: 'string',
          required: true,
          message: '请填写主体名称',
          trigger: ['blur', 'change'],
        },
        phone: {
          type: 'string',
          required: true,
          // pattern: /^1[3-9]\d{9}$/,
          message: '请填写正确的手机号码',
          trigger: ['blur', 'change'],
        },
        location: {
          type: 'string',
          required: true,
          message: '请填写地址',
          trigger: ['blur', 'change'],
        },
        code: {
          type: 'string',
          required: true,
          // pattern: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/,
          message: '请填写正确的统一社会信用代码',
          trigger: ['blur', 'change'],
        },
        // license: {
        //   type: 'string',
        //   required: true,
        //   message: '请上传营业执照',
        //   trigger: ['blur', 'change'],
        // },
        // signature: {
        //   type: 'string',
        //   required: true,
        //   message: '请签名',
        //   trigger: ['blur', 'change'],
        // },
      },
      radio: '',
      switchVal: false,
    }
  },
  methods: {
    handleUploadSuccess(result) {
      console.log('图片上传成功:', result.url)
      this.userInfo.businessLicenseUrl = result.url
      uni.showToast({
        title: '上传成功',
        icon: 'success',
      })
    },
    // 提交
    async submit() {
      // await this.onClick('save')

      if (this.userInfo.businessLicenseUrl === '') {
        uni.showToast({
          icon: 'error',
          title: '请上传营业执照',
        })
        return
      }
      if (this.userInfo.signatureUrl === '') {
        uni.showToast({
          icon: 'error',
          title: '请确认签名',
        })
        return
      }

      // 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
      this.$refs.form
        .validate()
        .then(res => {
          uni.showToast({
            icon: 'success',
            title: '校验通过',
          })
          // 这里可以添加实际的提交逻辑
          console.log('表单数据:', this.userInfo)
        })
        .catch(errors => {
          uni.showToast({
            icon: 'error',
            title: '校验失败',
          })
          console.log('验证错误:', errors)
        })
    },
    // 重置
    reset() {
      this.$refs.form.resetFields()
      this.$refs.form.clearValidate()
      this.userInfo.businessLicenseUrl = ''
    },

    hideKeyboard() {
      uni.hideKeyboard()
    },
    async onClick(type) {
      if (type === 'openSmooth') {
        this.openSmooth = !this.openSmooth
        return
      }
      if (type === 'save') {
        await this.$refs.signatureRef.canvasToTempFilePath({
          success: async res => {
            // 是否为空画板 无签名
            console.log('签名返回是否为空', res.isEmpty)
            if (res.isEmpty) {
              this.userInfo.signatureUrl = ''
              return
            }

            // 生成图片的临时路径
            // H5 生成的是base64
            this.tempUrl = res.tempFilePath
            console.log('临时路径', res.tempFilePath)

            this.userInfo.signatureUrl = await tempUrlToRealUrl(res.tempFilePath)
            console.log('签名路径', this.userInfo.signatureUrl)
            console.log('签名上传成功')
            uni.showToast({ title: '签名上传成功', icon: 'success' })
          },
        })
        return
      }
      if (type === 'clear') {
        this.userInfo.signatureUrl = ''
      }
      if (this.$refs.signatureRef) this.$refs.signatureRef[type]()
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
  padding: 10rpx 30rpx;
}

.btn-signature {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>