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

<template>
	<view class="bank-box">
		<en-input label="银行卡" v-model="number" type="number" placeholder="请输入银行卡号" @addRight="showUploadingImg(true)"
			right-img="/static/img/new-add/add-bank.png">
			<uni-icons class="m-l10" type="camera" size="30" color="#999"></uni-icons>
		</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>