【学习打卡】第11天 多端全栈项目实战

课程名称：多端全栈项目实战，大型商业级代驾业务全流程落地

课程章节：第三章

主讲老师：神思者

课程学习：

    1.ocr 开通后编写前端

    2.保存数据及校验

课程收获： 

    开通ocr 以后 进行前端代码得编写

<ocr-navigator @onSuccess="scanIdcardFront" certificateType="idCard" :opposite="false">
	<button class="camera"></button>
</ocr-navigator>

   

获取身份证正面

scanIdcardFront: function(resp) {
	let that = this;
	let detail = resp.detail;
	that.idcard.pid = detail.id.text;
	that.idcard.name = detail.name.text;
	that.idcard.sex = detail.gender.text;
	that.idcard.address = detail.address.text;
	that.idcard.shortAddress = detail.address.text.substr(0, 15) + '...';
	that.idcard.birthday = detail.birth.text;
	//OCR插件拍摄到的身份证正面照片存储地址
	that.idcard.idcardFront = detail.image_path;
	//让身份证View标签加载身份证正面照片
	that.cardBackground[0] = detail.image_path;
	that.uploadCos(that.url.uploadCosPrivateFile, detail.image_path, 'driverAuth', function(resp) {	
		let data = JSON.parse(resp.data);
		let path = data.path;
		that.currentImg['idcardFront'] = path;
		that.cosImg.push(path);
	})			
}

获取身份证 背面信息

<ocr-navigator @onSuccess="scanIdcardBack" certificateType="idCard" :opposite="true">
		<button class="camera"></button>
</ocr-navigator>

scanIdcardBack: function(resp) {
	let that = this;
	let detail = resp.detail;
	//OCR插件拍摄到的身份证背面照片存储地址
	that.idcard.idcardBack = detail.image_path;
	//View标签加载身份证背面照片
	that.cardBackground[1] = detail.image_path;
	let validDate = detail.valid_date.text.split('-')[1];
	that.idcard.expiration = dayjs(validDate, 'YYYYMMDD').format('YYYY-MM-DD');
	that.uploadCos(that.url.uploadCosPrivateFile, detail.image_path, 'driverAuth', function(resp) {
		let data = JSON.parse(resp.data);
		let path = data.path;					
		that.currentImg['idcardBack'] = path;					
		that.cosImg.push(path);				
	});			
}

ocr 获取数据后 将字段实别 填入 下方个人信息中

<ocr-navigator @onSuccess="scanDrcardFront" certificateType="driverslicense">
		<button class="camera"></button>
</ocr-navigator>

scanDrcardFront: function(resp) {
	let that = this;
	let detail = resp.detail;
	that.drcard.issueDate = detail.issue_date.text; //初次领证日期
	that.drcard.carClass = detail.car_class.text; //准驾车型
	that.drcard.validFrom = detail.valid_from.text; //驾驶证起始有效期
	that.drcard.validTo = detail.valid_to.text; //驾驶证截止有效期
	that.drcard.drcardFront = detail.image_path;
	that.cardBackground[3] = detail.image_path;
	that.uploadCos(that.url.uploadCosPrivateFile, detail.image_path, 'driverAuth', function(resp) {
		let data = JSON.parse(resp.data);
		let path = data.path;
		that.currentImg['drcardFront'] = path;
		that.cosImg.push(path);
	});
},

将获取到的数据 填入 驾驶证信息内 

到此 前端通过ocr实别得 功能已基本实现

2.数据校验

that.checkValidTel(that.contact.tel, '手机号码') &&
that.checkValidEmail(that.contact.email, '电子信箱') &&
that.checkValidAddress(that.contact.mailAddress, '收信地址') &&
that.checkValidName(that.contact.contactName, '联系人') &&
that.checkValidTel(that.contact.contactTel, '联系人电话')

通过传值校验 判断这些必填内容 是否为空 或者 格式不正确 

如果有错误 通过 

this.$refs.uToast.show 方法 进行弹出 报错

that.ajax(that.url.deleteCosPrivateFile, 'POST', JSON.stringify({
	pathes: temp
}), function() {
	console.log('文件删除成功');	
});

删除 腾讯云端存储得图片

let data = {
    pid: that.idcard.pid,
    name: that.idcard.name,
    sex: that.idcard.sex,
    birthday: that.idcard.birthday,
    tel: that.contact.tel,
    email: that.contact.email,
    mailAddress: that.contact.mailAddress,
    contactName: that.contact.contactName,
    contactTel: that.contact.contactTel,
    idcardAddress: that.idcard.address,
    idcardFront: that.currentImg.idcardFront,
    idcardBack: that.currentImg.idcardBack,
    idcardHolding: that.currentImg.idcardHolding,
    idcardExpiration: that.idcard.expiration,
    drcardType: that.drcard.carClass,
    drcardExpiration: that.drcard.validTo,
    drcardIssueDate: that.drcard.issueDate,
    drcardFront: that.currentImg.drcardFront,
    drcardBack: that.currentImg.drcardBack,
    drcardHolding: that.currentImg.drcardHolding
   };

将数据存入json

传入后端接口 进行添加