H5_module/promote/withdrawal/bindCard/bindCard.vue

<template>
	<view>
		<view class="step ddflex">
			<view :class="'li' + (stepOne ? ' ing' : '') + (stepOneComplete ? ' end' : '')">
				<view class="num">1</view>
				<image src="../../static/promote/images/gou_h.png" class="s-gou"></image>
				<text>验证身份信息</text>
			</view>
			<view :class="'li' + (stepTwo ? ' ing' : '') + (stepTwoComplete ? ' end' : '')">
				<view class="num">2</view>
				<image src="../../static/promote/images/gou_h.png" class="s-gou"></image>
				<text>验证银行卡信息</text>
			</view>
		</view>
		<block v-if="stepOne">
			<view class="form">
				<view class="li cards">
					<label class="label">身份证信息</label>
					<view class="card ddflex">
						<view class="linsence" @click="uploadImgs(1)">
							<image :src="fileInfo.legalPersonidPositivePic ? fileInfo.legalPersonidPositivePic : '../../static/promote/images/card_front.png'"></image>
							<view>身份证人像面</view>
						</view>
						<view class="linsence" @click="uploadImgs(2)">
							<image :src="fileInfo.egalPersonidOppositePic ? fileInfo.egalPersonidOppositePic : '../../static/promote/images/card_back.png'"></image>
							<view>身份证国徽面</view>
						</view>
					</view>
				</view>
				<view class="li ddflex">
					<label class="label">姓名</label>
					<view class="item fflex"><input v-model="rName" placeholder="上传身份证人像面自动获取" placeholder-class="placeholder" class="ipt" /></view>
				</view>
				<view class="li ddflex">
					<label class="label">身份证号</label>
					<view class="item fflex"><input v-model="rCode" placeholder="上传身份证人像面自动获取" placeholder-class="placeholder" class="ipt" /></view>
				</view>
				<view class="li ddflex">
					<label class="label">有效期限</label>
					<view class="item ddflex fflex">
						<input v-model="rValidDate" placeholder="上传身份证国徽面自动获取" placeholder-class="placeholder" class="ipt fflex" />
						<!-- <view class="chang ddflex">
							<image src="../../static/promote/images/gou1.png"></image>
							长期
						</view> -->
					</view>
				</view>
				<view class="li dflex">
					<label class="label">所在城市</label>
					<view class="item dflex flex">
						<input :disabled="true" v-model="address" placeholder="点击右侧图标获取" placeholder-class="placeholder" class="ipt flex" />
						<image src="../../static/promote/images/dzico.png" class="location" @click="chooseLocation()"></image>
					</view>
				</view>
			</view>
			<view class="next" @click="toStepTwo">下一步</view>
		</block>
		<block v-if="stepTwo">
			<view class="form">
				<view class="li cards">
					<label class="label">银行卡</label>
					<view class="linsence" @click="uploadImgs(3)">
						<image :src="bankUrl ? bankUrl : '../../static/promote/images/card.png'"></image>
						<view>上传储蓄银行卡正面照</view>
					</view>
				</view>
				<view class="li dflex">
					<label class="label">户名</label>
					<view class="item flex"><input :disabled="true" v-model="rName" placeholder="请输入户主名称" placeholder-class="placeholder" class="ipt" /></view>
				</view>
				<view class="li ddflex">
					<label class="label">开户银行</label>
					<view class="item fflex">
						<picker :class="'pickers ' + (bankName ? 'active' : '')" @change="bindPickerBank" range-key="name" :range="bankList">
							<view v-if="bankName" class="ipt">{{ bankName }}</view>
							<view v-else class="ipt_g">请选择开户银行</view>
							<image src="../../../static/pages/images/crico1.png" class="rico"></image>
						</picker>
					</view>
				</view>
				<view class="li ddflex">
					<label class="label">银行卡号</label>
					<view class="item fflex"><input v-model="bankNo" placeholder="上传后自动获取" placeholder-class="placeholder" class="ipt" /></view>
				</view>

				<view class="li flexs dflex">
					<label class="label">预留手机</label>
					<view class="item flex">
						<input type="number" v-model="bankAcctPhone" maxlength="11" placeholder="请输入银行预留手机号" placeholder-class="placeholder" class="ipt" />
					</view>
				</view>
			</view>
			<view class="next" @click="submit()">确定绑卡</view>
		</block>
	</view>
</template>

<script>
const app = getApp();
// const util = require('../../../utils/util.js');
const req = require('../../../utils/request.js');
const hfParams = require('../../../utils/hfParams.js');
var QQMapWX = require('../../../utils/qqmap.js');
export default {
	data() {
		return {
			isEdit: false,
			stepOne: true,
			stepOneComplete: false,
			stepTwo: false,
			stepTwoComplete: false,
			fileInfo: {
				legalPersonidPositivePic: '', //正面
				egalPersonidOppositePic: '' //反面
			},
			//身份信息
			rName: '',
			rCode: '',
			rValidDate: '',

			location: '',
			addIds: '',
			address: '', //区域
			addressDetails: '',

			cityList: [],
			bankList: [],

			bankUrl: '', //银行卡图片
			bankPosition: -1, //下标
			bankName: '', //银行名字
			bankAcctName: '', //户名
			bankNo: '', //卡号
			bankAcctPhone: '',

			settlementInfo: '',
			isEnd: false //是否为查看编辑
		};
	},
	onLoad(opt) {
		this.cityList = hfParams.mArea();
		this.bankList = hfParams.bank();
		if (opt.isEnd) {
			this.isEnd = opt.isEnd;
			//默认选中上面的标签
			let pages = getCurrentPages(); //获取所有页面栈实例列表
			let prevPage = pages[pages.length - 2]; //上一页页面实例
			this.settlementInfo = prevPage.$vm.settlementInfo;
			if (this.settlementInfo) {
				this.addIds = this.settlementInfo.provCode + ',' + this.settlementInfo.areaCode;
				this.address = this.settlementInfo.address;
				this.rName = this.settlementInfo.cardName;
				this.bankName = this.getBankName(this.settlementInfo.bankCode);
				this.bankAcctName = this.settlementInfo.cardName;
				this.bankUrl = this.settlementInfo.bankUrl;
				this.bankNo = this.settlementInfo.cardNo.replace(/[\t\r\f\n\s]*/g,'');
				this.fileInfo = JSON.parse(this.settlementInfo.fileJson);
				this.rCode = this.settlementInfo.legalCertId;
				this.rValidDate = this.settlementInfo.legalCertIdExpires;
				this.bankAcctPhone = this.settlementInfo.legalMp;
			}
		}
	},
	methods: {
		getBankName(code) {
			for (var i = 0; i < this.bankList.length; i++) {
				var bankObj = this.bankList[i];
				if (bankObj.code == code) {
					this.bankPosition = i;
					return bankObj.name;
				}
			}
		},

		toStepTwo() {
			if (!this.fileInfo.legalPersonidPositivePic) {
				req.msg('请上传身份证人像面');
				return;
			}
			if (!this.fileInfo.egalPersonidOppositePic) {
				req.msg('请上传身份证国徽面');
				return;
			}
			if (!this.rName) {
				req.msg('姓名不能为空');
				return;
			}
			if (!this.rCode) {
				req.msg('身份证号不能为空');
				return;
			}
			if (!this.rValidDate) {
				req.msg('身份证有效期不能为空');
				return;
			}

			if (!this.addIds) {
				req.msg('请选择所在地区');
				return;
			}
			this.stepOne = false;
			this.stepOneComplete = true;
			this.stepTwo = true;
		},

		uploadImgs(type) {
			// if (!this.isEdit) {
			// 	return;
			// }
			let that = this;
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success(res) {
					uni.showLoading({
						title: '上传中'
					});
					req.uploadFile('/api/upload', res.tempFilePaths[0], res => {
						uni.hideLoading();
						if (type == 1) {
							//正面
							that.fileInfo.legalPersonidPositivePic = res.src;
							that.ocrCard(res.src, 1);
						} else if (type == 2) {
							//反面
							that.fileInfo.egalPersonidOppositePic = res.src;
							that.ocrCard(res.src, 2);
						} else if (type == 3) {
							that.bankUrl = res.src;
							uni.showLoading({
								title: '识别中'
							});
							req.getRequest('/baiduAI/bank', { imgUrl: res.src }, json => {
								uni.hideLoading();
								if (json.result) {
									that.bankNo = json.result.bank_card_number;
									that.initCheckBank(json.result.bank_name);
								}
							});
						}
					});
				}
			});
		},

		ocrCard(imgUrl, type) {
			uni.showLoading({
				title: '识别中'
			});
			//front back
			var idCardDide = type == 1 ? 'front' : 'back';
			req.getRequest('/baiduAI/ocrIdcard', { imgUrl: imgUrl, idCardDide: idCardDide }, json => {
				uni.hideLoading();
				if (type == 1) {
					this.rName = json.words_result.姓名.words;
					this.rCode = json.words_result.公民身份号码.words;
				} else if (type == 2) {
					var dataStr = json.words_result.失效日期.words;
					if (dataStr === '长期') {
						this.rValidDate = '2099-12-31';
					} else {
						var y = dataStr.slice(0, 4);
						var m = dataStr.slice(4, 6);
						var d = dataStr.slice(6, 8);
						this.rValidDate = y + '-' + m + '-' + d;
					}
				}
			});
		},

		initCheckBank(name) {
			for (var i = 0; i < this.bankList.length; i++) {
				var bankObj = this.bankList[i];
				if (bankObj.name == name) {
					this.bankPosition = i;
					this.bankName = name;
				}
			}
		},

		chooseLocation() {
			var tha = this;
			uni.chooseLocation({
				success: res => {
					if (res.name) {
						tha.location = res;
						tha.addressDetails = res.address;
						tha.reverseGeocoder(res);
					}
				},
				fail: () => {
					uni.getSetting({
						success: function(res) {
							var statu = res.authSetting;
							console.log(statu);
							if (!statu['scope.userLocation']) {
								console.log(123);
								uni.showModal({
									title: '是否授权当前位置',
									content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
									success(tip) {
										if (tip.confirm) {
											uni.openSetting({
												success: function(data) {
													if (data.authSetting['scope.userLocation'] === true) {
														//授权成功之后，再调用chooseLocation选择地方
														setTimeout(function() {
															uni.chooseLocation({
																success: res => {
																	if (res.name) {
																		tha.location = res;
																		tha.addressDetails = res.address;
																		console.log('地址数据addressDetail》》》：', tha.addressDetails);
																		tha.reverseGeocoder(res);
																	}
																}
															});
														}, 1000);
													}
												}
											});
										}
									}
								});
							}
						}
					});
				}
			});
		},
		reverseGeocoder(location) {
			QQMapWX.initMap(req.public.mapLBSKEY);
			QQMapWX.reverseGeocoder(location, data => {
				this.address = data.ad_info.province + ' ' + data.ad_info.city; //+ ' ' + data.ad_info.district

				for (var i = 0; i < this.cityList.length; i++) {
					var cityObj = this.cityList[i];
					if (data.ad_info.province.indexOf(cityObj.label) != -1) {
						for (var k = 0; k < cityObj.children.length; k++) {
							var areaObj = cityObj.children[k];
							if (data.ad_info.city.indexOf(areaObj.label) != -1) {
								this.addIds = cityObj.value + ',' + areaObj.value;
							}
						}
					}
				}
				console.log('解析后的地址地址数据：', this.address + '》》》' + this.addIds);
			});
		},

		bindPickerBank(event) {
			this.bankPosition = event.detail.value;
			this.bankName = this.bankList[this.bankPosition].name;
		},

		submit() {
			if (!this.bankUrl) {
				req.msg('请上传银行卡正面照');
				return;
			}
			if (!this.bankName) {
				req.msg('请选择开户银行');
				return;
			}
			if (!this.bankNo) {
				req.msg('请输入银行卡号');
				return;
			}
			if (!this.bankAcctPhone) {
				req.msg('请输入银行预留手机号');
				return;
			}
			var addIds = this.addIds.split(',');
			var params = {
				provCode: addIds[0],
				areaCode: addIds[1], //商户所在地区
				address: this.address,
				bankAcctType: 2,
				cardName: this.rName,
				bankCode: this.bankList[this.bankPosition].code,
				bankUrl: this.bankUrl,
				cardNo: this.bankNo.replace(/[\t\r\f\n\s]*/g,''),
				fileJson: JSON.stringify(this.fileInfo),
				haveLicenseNo: 2,
				legalCertName: this.rName,
				legalCertId: this.rCode,
				legalCertIdExpires: this.rValidDate,
				isOpen: 0,
				legalMp: this.bankAcctPhone
			};
			req.postRequest('/api/v3/settlement/create', params, json => {
				req.msg('添加成功');
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			});
		}
	}
};
</script>

<style>
@import './bindCard.css';
</style>