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>
      <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>
    </uv-form>
    <uv-action-sheet
      ref="sexSelect"
      :actions="actions"
      description="如果选择保密会报错"
      title="请选择性别"
      @select="sexSelect"
    >
    </uv-action-sheet>
  </view>
</template>

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

export default {
  data() {
    return {
      tempUrl: '',
      userInfo: {
        name: '',
        code: '',
        phone: '',
        location: '',
        businessLicense: '',
        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'],
        },
      },
      radio: '',
      switchVal: false,
    }
  },
  methods: {
    handleUploadSuccess(result) {
      console.log('图片上传成功:', result.url)
      this.userInfo.businessLicense = result.url
      uni.showToast({
        title: '上传成功',
        icon: 'success',
      })
    },
    // 提交
    submit() {
      this.onClick('save')
      // 如果有错误，会在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.businessLicense = ''
    },

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

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

            this.userInfo.signatureUrl = await tempUrlToRealUrl(res.tempFilePath)
            console.log('签名路径', this.userInfo.signatureUrl)
          },
        })
        return
      }
      if (this.$refs.signatureRef) this.$refs.signatureRef[type]()
    },
  },
}
</script>

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