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="userInfo.phone">
        <uv-input v-model="userInfo.phone" border="none"></uv-input>
      </uv-form-item>
      <uv-form-item borderBottom label="地址:" prop="userInfo.location">
        <uv-input v-model="userInfo.location" border="none"></uv-input>
      </uv-form-item>
      <uv-form-item borderBottom label="主体名称:" prop="userInfo.name">
        <uv-input v-model="userInfo.name" border="none"></uv-input>
      </uv-form-item>
      <uv-form-item borderBottom label="统一社会信用代码:" prop="userInfo.code">
        <uv-input v-model="userInfo.code" border="none"></uv-input>
      </uv-form-item>
      <uv-form-item label="营业执照" prop="pics">
        <uv-upload
          :fileList="fileList"
          :maxCount="9"
          :previewFullImage="true"
          multiple
          name="1"
          @afterRead="afterRead"
          @delete="deletePic"
        ></uv-upload>
      </uv-form-item>
      <uv-button
        customStyle="margin-top: 10px"
        text="提交"
        type="primary"
        @click="submit"
      ></uv-button>
      <uv-button customStyle="margin-top: 10px" text="重置" type="error" @click="reset"></uv-button>
    </uv-form>
    <uv-action-sheet
      ref="sexSelect"
      :actions="actions"
      description="如果选择保密会报错"
      title="请选择性别"
      @select="sexSelect"
    >
    </uv-action-sheet>
  </view>
</template>
<script>
export default {
  data() {
    return {
      userInfo: {
        name: '',
        sex: '',
        code: '',
        phone: '',
        location: '',
        businessLicense: '',
        pics: [],
      },
      actions: [
        {
          name: '男',
        },
        {
          name: '女',
        },
        {
          name: '保密',
        },
      ],
      rules: {
        'userInfo.name': {
          type: 'string',
          required: true,
          message: '请填写姓名',
          trigger: ['blur', 'change'],
        },
        'userInfo.sex': {
          type: 'string',
          max: 1,
          required: true,
          message: '请选择男或女',
          trigger: ['blur', 'change'],
        },
        pics: {
          type: 'array',
          required: true,
          message: '请上传照片',
          trigger: ['blur', 'change'],
        },
      },
      radio: '',
      switchVal: false,
    }
  },
  methods: {
    // 提交
    submit() {
      // 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
      this.$refs.form
        .validate()
        .then(res => {
          uni.showToast({
            icon: 'success',
            title: '校验通过',
          })
        })
        .catch(errors => {
          uni.showToast({
            icon: 'error',
            title: '校验失败',
          })
        })
    },
    // 重置
    reset() {
      this.$refs.form.resetFields()
      this.$refs.form.clearValidate()
    },
    // 性别选择
    showSexSelect() {
      this.$refs.sexSelect.open()
      this.hideKeyboard()
    },
    // 性别选择返回结果
    sexSelect(e) {
      this.userInfo.sex = e.name
      // 对部分表单字段进行校验
      this.$refs.form.validateField('userInfo.sex', err => {
        // 处理错误后的逻辑
      })
    },
    hideKeyboard() {
      uni.hideKeyboard()
    },
    afterRead(e) {
      // 这里直接模拟上传成功，这里的真实逻辑参考uv-upload组件示例
      setTimeout(() => {
        this.fileList = [
          {
            url: 'https://via.placeholder.com/100x100.png/3c9cff',
          },
          {
            url: 'https://via.placeholder.com/100x100.png/ff0000',
          },
        ]
        this.userInfo.pics = this.fileList
        this.$refs.form.validateField('pics', err => {
          // 处理错误后的逻辑
        })
      })
    },
    deletePic(e) {
      this.fileList.splice(e.index, 1)
      this.$refs.form.validateField('pics', err => {
        // 处理错误后的逻辑
      })
    },
  },
}
</script>
<style lang="scss">
.page {
  padding: 10rpx 30rpx;
}
</style>