captain-ui
Version:
有赞vue wap业务组件库
363 lines (333 loc) • 10.7 kB
JavaScript
import "vant/es/toast/style";
import _Toast from "vant/es/toast";
import _extends from "@babel/runtime/helpers/esm/extends";
import "vant/es/button/style";
import _Button from "vant/es/button";
import ImageUploader from './image-uploader';
import VerifyInfos from './verify-infos';
import Notice from './notice';
import { submitOCR, queryOCR, queryIdentity, checkidentity, submitIdentity } from './api';
import { IMAGE_MAX_SIZE, OCR_STATUS } from './constants';
var DEFAULT_APIS = {
submitOCR: submitOCR,
queryOCR: queryOCR,
queryIdentity: queryIdentity,
checkidentity: checkidentity,
submitIdentity: submitIdentity
};
var SIDES = ['front', 'back'];
var TIME = 10;
var DEFAULT_INFOS = {
idCardName: '',
// 姓名
idCardNo: '',
// 身份证号
idCardNoBak: '',
// 从后端拿到的身份证
issuingAuthority: '',
// 签发机关
validStart: '',
// 有效期开始
validEnd: '' // 有效期截止
};
export default {
render: function render() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('main', {
staticClass: "verification__wrapper"
}, [_c('section', {
staticClass: "verification__upload-wrapper"
}, [_c('header', {
staticClass: "verification__upload-header"
}, [_vm._v("请拍摄或上传身份证")]), _c('div', {
staticClass: "verification__upload-uploaders"
}, [_c('image-uploader', {
attrs: {
"token-url": _vm.tokenUrl,
"max-size": _vm.imageMaxSize,
"value": _vm.front,
"label": "人像面",
"extra-cls": "verification__upload-uploader",
"sample": "//b.yzcdn.cn/h5/payment-account/front@2x.png"
},
on: {
"change": function change($event) {
_vm.submitOCR('front', $event);
}
}
}), _c('image-uploader', {
attrs: {
"token-url": _vm.tokenUrl,
"max-size": _vm.imageMaxSize,
"value": _vm.back,
"label": "国徽面",
"extra-cls": "verification__upload-uploader",
"sample": "//b.yzcdn.cn/h5/payment-account/back@2x.png"
},
on: {
"change": function change($event) {
_vm.submitOCR('back', $event);
}
}
})], 1), _c('transition', {
attrs: {
"name": "slide"
}
}, [_vm.shouldShowInfos ? _c('verify-infos', _vm._b({
on: {
"input": _vm.onInfosChange
}
}, 'verify-infos', {
idCardName: _vm.idCardName,
idCardNo: _vm.idCardNo,
issuingAuthority: _vm.issuingAuthority,
validStart: _vm.validStart,
validEnd: _vm.validEnd
}, false)) : _vm._e()], 1)], 1), _c('notice', {
attrs: {
"notices": ['//b.yzcdn.cn/h5/payment-account/notice-1.png', '//b.yzcdn.cn/h5/payment-account/notice-2.png', '//b.yzcdn.cn/h5/payment-account/notice-3.png', '//b.yzcdn.cn/h5/payment-account/notice-4.png'],
"tips": "为保障你的资金安全，请上传居民身份证照片。照片避免缺边缺角，避免拍摄模糊不清，避免照片曝光过度。"
}
})], 1);
},
name: 'cert-id-ocr',
components: {
'van-button': _Button,
ImageUploader: ImageUploader,
VerifyInfos: VerifyInfos,
Notice: Notice
},
props: {
apis: {
type: Object,
default: function _default() {
return {
submitOCR: submitOCR,
queryOCR: queryOCR,
queryIdentity: queryIdentity,
checkidentity: checkidentity,
submitIdentity: submitIdentity
};
}
},
tokenUrl: {
type: String,
default: '//h5.youzan.com/wscassets/api/payment/account/common/uploadtoken'
},
onSuccess: {
type: Function
}
},
data: function data() {
return _extends({
hasPaymentAccount: false,
imageMaxSize: IMAGE_MAX_SIZE,
front: '',
back: '',
time: {
front: TIME,
back: TIME
},
timer: {
front: null,
back: null
},
// 是否请求后端校验成功
checked: false
}, DEFAULT_INFOS);
},
computed: {
Api: function Api() {
return _extends({}, DEFAULT_APIS, this.apis);
},
shouldShowInfos: function shouldShowInfos() {
// 第二张上传完成之后自动展开识别信息核对
var front = this.front,
back = this.back;
return !!front && !!back;
},
nextEnabled: function nextEnabled() {
var front = this.front,
back = this.back,
idCardName = this.idCardName,
idCardNo = this.idCardNo,
issuingAuthority = this.issuingAuthority,
validStart = this.validStart,
validEnd = this.validEnd,
checked = this.checked;
var valid = [front, back, idCardName, idCardNo, issuingAuthority, validStart, validEnd].every(function (prop) {
return String(prop).trim() !== '';
});
return valid && checked;
}
},
created: function created() {
var _this = this;
this.Api.queryIdentity().then(function (resp) {
if (resp.idCardNo) {
var frontPhoto = resp.frontPhoto,
reversePhoto = resp.reversePhoto,
idCardName = resp.idCardName,
idCardNo = resp.idCardNo,
issuingAuthority = resp.issuingAuthority,
validStart = resp.validStart,
validEnd = resp.validEnd;
_this.hasPaymentAccount = true;
_this.checked = true;
_this.front = frontPhoto;
_this.back = reversePhoto;
_this.idCardName = idCardName;
_this.idCardNo = idCardNo;
_this.idCardNoBak = idCardNo;
_this.issuingAuthority = issuingAuthority;
_this.validStart = validStart;
_this.validEnd = validEnd;
}
});
this.$on('submit', function () {
_this.submitIdentity();
});
},
updated: function updated() {
this.$emit('toggle-clickable', this.nextEnabled);
},
methods: {
setOCRInfo: function setOCRInfo(side, info) {
if (info === void 0) {
info = DEFAULT_INFOS;
}
var _info = info,
idCardName = _info.idCardName,
idCardNo = _info.idCardNo,
issuingAuthority = _info.issuingAuthority,
validStart = _info.validStart,
validEnd = _info.validEnd;
if (side === 'front') {
this.idCardName = idCardName;
this.idCardNo = idCardNo;
} else {
this.issuingAuthority = issuingAuthority;
this.validStart = validStart;
this.validEnd = validEnd;
}
},
onInfosChange: function onInfosChange(_ref) {
var name = _ref.name,
value = _ref.value;
this[name] = value;
},
submitOCR: function submitOCR(side, photoUrl) {
var _this2 = this;
this.checked = false;
this[side] = photoUrl; // 上传完两张照片后给出OCR识别的loading indicator
if (SIDES.every(function (s) {
return !!_this2[s];
})) {
_Toast.loading('信息识别中...');
}
return this.Api.submitOCR({
photoUrl: photoUrl,
side: side
}).then(function (_ref2) {
var bizNo = _ref2.bizNo;
var time = _this2.time,
timer = _this2.timer;
timer[side] = setInterval(function () {
if (time[side] >= 0) {
time[side]--;
_this2.queryOCR(bizNo, side);
} else {
_this2.clearTimeAndTimer(side);
}
}, 1000);
}).catch(function (e) {
_Toast(String(e));
});
},
queryOCR: function queryOCR(bizNo, side) {
var _this3 = this;
this.Api.queryOCR({
bizNo: bizNo
}).then(function (data) {
if (data.status === OCR_STATUS.SUCCESS) {
_Toast.clear(); // 已提交过不允许上传不匹配的身份证
var hasPaymentAccount = _this3.hasPaymentAccount,
idCardNoBak = _this3.idCardNoBak;
if (hasPaymentAccount && data.idCardNo && data.idCardNo !== idCardNoBak) {
_this3[side] = ''; // eslint-disable-next-line prefer-promise-reject-errors
return Promise.reject('身份证号与现有信息不一致');
}
_this3.checked = true;
_this3.setOCRInfo(side, data);
_this3.clearTimeAndTimer(side);
}
}).catch(function (e) {
_Toast(String(e));
_this3.checked = false;
_this3.setOCRInfo(side, DEFAULT_INFOS);
_this3[side] = '';
_this3.clearTimeAndTimer(side);
});
},
clearTimeAndTimer: function clearTimeAndTimer(side) {
clearInterval(this.timer[side]);
this.timer[side] = null;
this.time[side] = TIME;
},
checkValid: function checkValid() {
var hasPaymentAccount = this.hasPaymentAccount;
if (!hasPaymentAccount) return Promise.resolve();
var idCardName = this.idCardName,
idCardNo = this.idCardNo; // eslint-disable-next-line prefer-promise-reject-errors
return this.Api.checkidentity({
idCardName: idCardName,
idCardNo: idCardNo
}).then(function (_ref3) {
var success = _ref3.success;
return success || Promise.reject('身份信息与现有信息不一致');
});
},
submitIdentity: function submitIdentity() {
var _this4 = this;
var nextEnabled = this.nextEnabled,
frontPhoto = this.front,
reversePhoto = this.back,
idCardName = this.idCardName,
idCardNo = this.idCardNo,
issuingAuthority = this.issuingAuthority,
validStart = this.validStart,
validEnd = this.validEnd;
if (!nextEnabled) return;
var expires = new Date(validEnd).getTime();
if (expires < Date.now()) {
return _Toast('证件有效期存在问题');
}
this.$emit('toggle-loading', true);
this.checkValid().then(function () {
return _this4.Api.submitIdentity({
frontPhoto: frontPhoto,
reversePhoto: reversePhoto,
idCardName: idCardName,
idCardNo: idCardNo,
issuingAuthority: issuingAuthority,
validStart: validStart,
validEnd: validEnd
});
}).then(function (_ref4) {
var success = _ref4.success;
if (success) {
_Toast('身份验证成功');
_this4.onSuccess();
} else {
// eslint-disable-next-line prefer-promise-reject-errors
return Promise.reject('身份信息校验失败');
}
}).catch(function (e) {
_Toast(String(e));
_this4.$emit('toggle-loading', false);
});
}
}
};