小程序 上传身份证 拍摄身份证

 

<template>
	<view class="idcardBody">
		<view class="fdd-custom-text17 bold blackText">
			拍摄身份证
		</view>

		<view class="fdd-custom-text14 grayText">
			请上传您的中国第二代居民身份证原件照片
		</view>
		<view class="" @click="upload('front')">
			<image style="width: 190px;height: 115px;" :src="frontUrl" mode="aspectFit"></image>
		</view>
		<view class="fdd-custom-text16 blackText">
			身份证人像面
		</view>
		<view class="" @click="upload('back')">
			<image style="width: 190px;height: 115px;" :src="backUrl" mode="aspectFit"></image>
		</view>
		<view class="fdd-custom-text16 blackText">
			身份证国徽面
		</view>
		<view class="" style="padding: 10px; display: flex;align-items: center;">
			<button @click="detailLoan" class="submitBtn" type="primary" size="mini">下一步</button>

		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="btn-box">
				<button class="btn" @click="getPictur">相册</button>
				<button class="btn" @click="gocamera">拍照</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				frontUrl: '../../static/fdd/idcard-front.png',
				backUrl: '../../static/fdd/idcard-back.png',
				finishFront: false,
				finishBack: false,
				side: '',
			}
		},
		onLoad(option) {
			let that = this
			/*
			 *监听回调
			 */
			uni.$on('updateIdcard', function(data) {
				const idcardInfo = that.$store.state.idcardInfo
				that.$store.state.idcardInfo = {
					...idcardInfo,
					...data.result
				}
				if (data.ageGroup != 'other') {
					that.$store.state.idcardInfo.ageGroup = ''
					that.$store.state.idcardInfo.ageHintMsg = ''
				}
				if (idcardInfo.name != null && idcardInfo.name != '') {
					const userinfo = that.$store.state.userinfo
					userinfo.name = idcardInfo.name
					userinfo.idNo = idcardInfo.idNo
					userinfo.sex = idcardInfo.sex
					userinfo.birth = idcardInfo.birth
					that.$store.state.userinfo = {
						...userinfo
					}
				}
				if (data.side == 'front') {
					that.frontUrl = data.url
					that.finishFront = true
				} else {
					that.backUrl = data.url
					that.finishBack = true
				}
			})
		},
		onShow() {

		},
		methods: {
			gocamera() {
				this.$refs.popup.close()
				uni.navigateTo({
					url: "/pages/idcardUpload/idcardUpload?" + "side=" + this.side
				})
			},
			getPictur() {
				var _this = this
				this.$refs.popup.close()
				uni.chooseImage({
					count: 1,
					sourceType: ['album'],
					success: function(file) {
						var src = file.tempFilePaths[0];
						console.log(src);
						_this.uoloadIdcard(src)
						// _this.compileImg(src);
					},
					fail: function() {

					}
				})
			},
			uoloadIdcard(src) {
				var that = this
				var side = 0
				if (this.side == 'front') {
					side = 1
				} else {
					side = 2
				}
				that.$uploadAction(that.$api.idOcr, src, '', {
					file: src,
					side
				}).then(res => {
					if (res.success) {
						if (res.result.validPeriod && res.result.validPeriod.indexOf("长期") !== -1) {
							res.result.validPeriod.replace("长期", "2099.12.31")
						}
						var data = {
							url: src,
							side: that.side,
							result: res.result
						}
						/*
						 判断是否是申请人信息
						 */
						const idcardInfo = that.$store.state.idcardInfo
						that.$store.state.idcardInfo = {
							...idcardInfo,
							...data.result
						}
						if (data.ageGroup == 'other') {
							this.ageHintMsg = data.ageHintMsg
						}
						if (data.side == 'front') {
							that.frontUrl = data.url
							that.finishFront = true
						} else {
							that.backUrl = data.url
							that.finishBack = true
						}
					}

				}).catch(err => {
					console.log(err, 'err')
				})
			},
			detailLoan() {

				if (this.finishBack && this.finishFront) {
					uni.navigateTo({
						url: "/pages/detaiIdinfo/detaiIdinfo"
					})
				} else {
					uni.showToast({
						title: "请上传身份证正反面",
						icon: "none"
					})
					return
				}
			},
			upload(side) {
				this.side = side
				this.$refs.popup.open('bottom')
			},
		}
	}
</script>

<style lang="scss">
	.btn-box {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 15px;
	}

	.btn {
		width: 40%;
	}

	.btn:last-child {
		margin-left: 10px;
	}

	.idcardBody {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30px;

		view {
			margin: 10px;
		}

	}

	.title18 {
		font-size: 18px;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #000000;
		line-height: 18px;
	}

	.title14 {
		font-size: 14px;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #9E9E9E;
		line-height: 18px;
	}

	page {
		background: #F3F5F9;
		border-radius: 0px 0px 0px 0px
	}
</style>

 

<template>
	<view>
		<camera class="bg"  device-position="back" flash="off" @error="error">
				
		</camera>
		<cover-image v-if="side=='front'" class="bg" style="z-index: 3;" src="/static/fdd/idcardFront.png"></cover-image>
		<!-- <cover-view style="background-color: black;width: 100vw;height: 100vh;">
		
		 -->
		
		<cover-image v-else class="bg" src="/static/fdd/idcardBg.png"></cover-image>
		

	<!-- 	</cover-view>	 -->
		
		<view style="position: absolute;bottom: 100px;display: flex;flex-direction: row;align-items: center;justify-content: center;width: 100%;">
		<button @click="uoloadIdcard" class="submitBtn" type="primary" size="mini">确认</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				side:"front",
				src:''
			}
		},
		
		onLoad(option) {
			console.log(option,'option')
			this.side =option.side
		},
		methods: {
			uoloadIdcard() {
				let that = this;
				const ctx = uni.createCameraContext();
				            ctx.takePhoto({
				                quality: 'high',
				                success: (res) => {
									var side=0
									if (this.side=='front') {
										side = 1
									} else{
										side = 2
									}
									that.src = res.tempImagePath
									that.$uploadAction(that.$api.idOcr,res.tempImagePath,'',{file:res.tempImagePath,side}).then(res=>{
										console.log(res,'res')
										// that.finishFirst = true;
										// that.firstUrl = filePath
										// that.houseInfo=res.result
										if(res.success) {
											// const  idcardInfo = that.$store.state.idcardInfo
											// that.$store.state.idcardInfo = {...idcardInfo,...res.result}
											if(res.result.validPeriod&&res.result.validPeriod.indexOf("长期")!==-1) {
												res.result.validPeriod.replace("长期","2099.12.31")
											}
											uni.$emit('updateIdcard', 
											{
												url:that.src,
												side:that.side,
												result:res.result
											}
											);
												uni.navigateBack({
													delta: 1
												})
										}
										
									}).catch(err=>{
										console.log(err,'err')
									})
				                }
				            });
			}
		}
	}
</script>

<style>
	page{
		background: black;
	}
.bg{
  position: absolute;
  top: 100px;
  left: 20px;
  width: calc(100vw - 40px);
  height: 240px; 
  /* margin: 0px 20px; */
/*  width:100%;
  height:100%; */
  z-index: 2;
}
</style>