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/credit.png" mode="aspectFit"></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: 28rpx;
			padding: 16px 0 0 0;
			color: #232A35;
		}

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

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

				.credentials-imgs {
          width: 110rpx;
          height: 110rpx;
					display: block;
				}
			}
		}
	}
</style>