print-package-app/pages/complete-info/PersonForm.vue

<template>
  <view class="form">
    <view class="group">
      <view class="flex-row">
        <text class="text_1">*</text>
        <text class="text_2">身份证照片</text>
      </view>
      <view class="flex-row group_4">
        <image
          v-show="!form.legalPersonIdCardFrontImg"
          @click="selectImg('front')"
          src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/print-package-app/frontIDCard.png"
          class="image_1"
        />
        <view v-show="form.legalPersonIdCardFrontImg" class="image-area">
          <image class="image__close-icon" @click="clearImage('front')" src="/static/imgs/general/close-icon.png"></image>
          <image class="image_1" :src="form.legalPersonIdCardFrontImg" mode="aspectFit" @click="preview(form.legalPersonIdCardFrontImg)"></image>
        </view>
        <image
          v-show="!form.legalPersonIdCardBackImg"
          @click="selectImg('back')"
          src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/print-package-app/backDCard.png"
          class="image_1 image_3"
        />
        <view v-show="form.legalPersonIdCardBackImg" class="image-area">
          <image class="image__close-icon" @click="clearImage('back')" src="/static/imgs/general/close-icon.png"></image>
          <image class="image_1 image_3" :src="form.legalPersonIdCardBackImg" mode="aspectFit" @click="preview(form.legalPersonIdCardBackImg)"></image>
        </view>
      </view>
    </view>
    <view class="divider" v-show="form.legalPersonName"></view>
    <view class="justify-between group" v-show="form.legalPersonName">
      <view class="flex-row">
        <text class="text_1">*</text>
        <text class="text_2">联系人</text>
      </view>
      <text class="text_2">{{ form.legalPersonName }}</text>
    </view>
    <view class="divider"></view>
    <view class="justify-between group">
      <view class="flex-row">
        <text class="text_1">*</text>
        <text class="text_2">联系手机</text>
      </view>
      <text class="text_2">{{ form.legalPersonMobile }}</text>
    </view>
  </view>
</template>

<script>
import { getFrontIdCardOcr } from '@/apis/commonApi.js'
import { uploadImage } from '@/utils/hook.js'
import { validateField } from '@/utils/index.js'

const validateFields = [
  {
    name: 'legalPersonIdCardFrontImg',
    rules: [{ required: true, message: '请上传身份证正面照' }]
  },
  {
    name: 'legalPersonIdCardBackImg',
    rules: [{ required: true, message: '请上传身份证背面照' }]
  },
  {
    name: 'legalPersonMobile',
    rules: [
      { required: true, message: '请输入联系人手机号' },
      { type: 'phone', message: '请输入正确的手机号' }
    ]
  }
]

export default {
  data() {
    return {
      form: {
        id: null,
        legalPersonIdCardFrontImg: '',
        legalPersonIdCardBackImg: '',
        legalPersonIdCardNo: '',
        legalPersonMobile: this.$store.state.userInfo.mobile || '',
        legalPersonName: ''
      }
    }
  },
  methods: {
    // 校验
    validate() {
      for (let field of validateFields) {
        const { name, rules } = field
        const value = this.form[name]
        const { isValid, msg } = validateField(value, rules)
        if (!isValid) {
          uni.showToast({
            title: msg,
            icon: 'none'
          })
          return false
        }
      }
      // 将视频路径写入imgItemList
      if (this.videoUrl) {
        this.form.imgItemList.push({
          type: fileType.VIDEO,
          imgUrl: this.videoUrl
        })
      }
      return this.form
    },
    selectImg(type) {
      uploadImage()
        .then((urls) => {
          if (urls) {
            // 营业执照OCR
            if (type == 'front') {
              this.idCardFrontOcr(urls[0])
            }
            if (type == 'back') {
              this.form.legalPersonIdCardBackImg = urls[0]
            }
          }
        })
        .catch((e) => {
          uni.showToast({
            title: '上传失败:' + (e.message || e),
            icon: 'fail',
            duration: 1500
          })
        })
    },
    clearImage(type) {
      if (type == 'front') {
        this.form.legalPersonIdCardFrontImg = ''
        this.form.legalPersonIdCardNo = null
        this.form.legalPersonName = ''
      }
      if (type == 'back') {
        this.form.legalPersonIdCardBackImg = ''
      }
    },
    // 身份证正面OCR
    idCardFrontOcr(url) {
      getFrontIdCardOcr({ image: url }).then((res) => {
        if (res && res.success) {
          this.form.legalPersonIdCardNo = res.num
          this.form.legalPersonName = res.name
          this.form.legalPersonIdCardFrontImg = url
        } else {
          uni.showToast({
            title: '身份证OCR识别失败,请选择其他图片',
            icon: 'error'
          })
        }
      })
    },
    preview(url) {
      uni.previewImage({
        urls: [url],
        current: url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form {
  width: 750rpx;
  background-color: #fff;
}
.group {
  padding: 24rpx 28rpx 24rpx 32rpx;
  font-size: 28rpx;
  line-height: 40rpx;
  white-space: nowrap;
  .text_3 {
    color: rgb(0, 122, 255);
  }
  .text_1 {
    color: rgb(245, 34, 45);
  }
  .text_2 {
    margin-left: 4rpx;
    color: rgb(0, 0, 0);
  }
}
.group_4 {
  padding: 10rpx 0 10rpx 19rpx;
}
.image_1 {
  flex: 1 1 324rpx;
  width: 324rpx;
  height: 280rpx;
}
.image_3 {
  margin-left: 19rpx;
}
.image-area {
  position: relative;
  width: 324rpx;
  height: 280rpx;
  border-radius: 4rpx;
  overflow: hidden;
  .image__close-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 32rpx;
    height: 32rpx;
    z-index: 10;
  }
}

.divider {
  margin: 0 28rpx;
  background-color: rgb(216, 216, 216);
  height: 2rpx;
}
</style>