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

<template>
  <view class="bank-box">
    <en-input label="银行卡" v-model="number" type="number" placeholder="请输入银行卡号" rightText="识别银行卡" @addRight="showUploadingImg(true)" right-img="/static/img/new-add/add-bank.png"></en-input>
    <en-input label="所属银行" v-model="name" type="text" placeholder="请输入银行名称" ></en-input>
    <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 EnInput from "@/components/en-from/en-input/en-input";
import {getBaiDuImgRecognition} from "@/api/common";
import txUploadFile from "@/service/txOssSts";
import tools from "@/service/tools";
export default {
  name: "add-bank",
  components: {EnInput},
  props: {
    bankName:{
      default:''
    },
    bankNum:{
      default:''
    }
  },
  data() {
    return {
      number:'',
      name:'',
      isUploading:false,
    }
  },
  watch: {
    'bankName':function (){
      console.log('bankName:'+this.bankName)
      if(this.bankName!==this.name){
        this.name=this.bankName
      }
    },
    'bankNum':function (){
      console.log('bankNum:'+this.bankNum)
      if(this.bankNum!==this.number){
        this.number=this.bankNum
      }
    },
    'name':function (){
      this.$emit('update:bankName',this.name)
    },
    'number':function (){
      this.$emit('update:bankNum',this.number)
    }
  },
  mounted() {
    this.name=this.bankName
    this.number=this.bankNum
  },
  methods: {
    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': '2'
                  }).then((res) => {
                    tools.hideLoading()
                    if (res.code === 1) {
                      this.name = res.data.bank_name;
                      this.number = res.data.bank_card_number;
                    } else {
                      tools.error('银行卡识别识别')
                    }
                  })
                }
              })
            })
            this.showUploadingImg(false, 0);
          } else {
            tools.error("请选择上传的图片")
          }
        },
      });
    },
    showUploadingImg(showImg, uploadingType) {
      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";

</style>