assess-app/page_task/apply/components/add-license.vue

<template>
  <view class="license-box">
    <view class="account-name">
      上传营业执照图片
    </view>
    <view class="credentials-box" @click="showUploadingImg(true)">
      <view class="credentials-img" v-if="identity_one">
        <image class="credentials-imgs" :src="identity_one" mode="aspectFill"></image>
      </view>
      <view class="credentials-img" v-else>
        <image class="credentials-imgs" src="/page_task/static/img/scmb.png" mode=""></image>
      </view>
    </view>
    <uni-popup ref="popup" :safeArea="false" type="bottom" @change="closePopup">
      <view class="popup-block">
        <view class="popup-row" @click="uploadingImg(1)">拍照</view>
        <view class="popup-row" @click="uploadingImg(2)">从手机里面选择</view>
        <view class="popup-row" @click="showUploadingImg(false,0)">取消</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {getBaiDuImgRecognition} from "@/api/common";
import txUploadFile from "@/service/txOssSts";
import tools from "@/service/tools";

export default {
  name: "add-license",
  components: {},
  props: {
    'value': {
      default: '',
    },
    'userName': {
      default: '',
    },
    'idNumber': {
      default: '',
    }
  },
  data() {
    return {
      'identity_one': '',
      'name': '',
      'id_number': '',
    }
  },
  watch: {
    'identity_one': function () {
      this.$emit("input", this.identity_one);
    },
    'value': function () {
      this.setValue()
    },
  },
  mounted() {
    this.setValue()
  },
  methods: {
    setValue() {
      console.log(this.value)
      this.identity_one = this.value
    },
    uploadingImg(sourceType) {
      uni.chooseMedia({
        mediaType: 'image',
        count: 1, //默认9
        sizeType: "compressed",
        sourceType: [sourceType === 1 ? 'camera' : 'album'],
        success: (res) => {
          if (res.tempFiles.length > 0) {
            res.tempFiles.forEach((tempFile) => {
              txUploadFile(tempFile.tempFilePath).then((data) => {
                if (!data) {
                  tools.error('图片上传失败')
                  tools.hideLoading()
                } else {
                  tools.showLoading()
                  getBaiDuImgRecognition({
                    'imgUrl': data.Location,
                    'imgType': '3'
                  }).then((res) => {
                    tools.hideLoading()
                    if (res.code === 1) {
                      this.identity_one = data.Location;
                      this.name = res.data.name;
                      this.id_number = res.data.id_number;
                      this.$emit('update:userName',this.name)
                      this.$emit('update:idNumber',this.id_number)
                    } else {
                      tools.error(res.msg)
                    }
                  })
                }
              })
            })
            this.showUploadingImg(false, 0);
          } else {
            tools.error("请选择上传的图片")
          }
        },
      });
    },
    showUploadingImg(showImg) {
      if (showImg) {
        if (this.isUploading) {
          return
        }
        this.isUploading = true
        this.$refs.popup.open("bottom");
      } else {
        this.$refs.popup.close();
        this.isUploading = false
      }
    },
    closePopup(e) {
      if (e.show === false) {
        this.isUploading = false
      }
    },
  }
}
</script>

<style scoped lang="scss">
@import "@/static/css/wh-common";

.license-box {
  .account-name {
    font-size: 32rpx;
    padding: 16px 0 0 0;
    color: #232A35;
  }

  .credentials-box {
    padding: 24rpx 0 0 0;
    border-bottom: 1px solid #F0F0F0;

    .credentials-img {
      width: 160rpx;
      height: 160rpx;
      margin: 0 16rpx 30rpx 0;

      .credentials-imgs {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
}

</style>