caimei-applets-caimei/pages/user/invoice/invoice.vue

<template>
	<view class="invoice-form-wrapper">
		<image class="invoice-pic" :src="invoiceUrl" mode="widthFix"></image>
		<view class="invoice-form">
			<view class="form-item">
				<view class="form-title"><text class="asterisk">*</text>单位名称：</view>
				<input class="form-input" maxlength="30" v-model="invoiceData.companyName" name="input" placeholder="请输入单位名称..." placeholder-class="placeholder"/>
			</view>
			<view class="form-item">
				<view class="form-title"><text class="asterisk">*</text>纳税人识别号：</view>
				<input class="form-input" v-model="invoiceData.taxId" name="input" placeholder="请输入纳税人识别号..." placeholder-class="placeholder"/>
			</view>
			<view class="form-item">
				<view class="form-title"><text class="asterisk">*</text>开户银行：</view>
				<input class="form-input" v-model="invoiceData.bankName" name="input" placeholder="请输入开户银行..." placeholder-class="placeholder"/>
			</view>
			<view class="form-item">
				<view class="form-title"><text class="asterisk">*</text>银行账号：</view>
				<input class="form-input" maxlength="23" v-model="invoiceData.bankNum" @input="inputBankNum(invoiceData.bankNum)" name="input" placeholder="请输入银行账号..." placeholder-class="placeholder"/>
			</view>
			<view class="form-item">
				<view class="form-title"><text class="asterisk">*</text>注册电话：</view>
				<input class="form-input" maxlength="11" v-model="invoiceData.phoneNum" name="input" placeholder="请输入注册电话..." placeholder-class="placeholder"/>
			</view>
			<view class="form-item">
				<view class="form-title"><text class="asterisk">*</text>注册地址：</view>
				<textarea :class="{iostextarea: isIos}" cols="20" rows="4" class="form-input form-textarea" v-model="invoiceData.address" name="input" placeholder="请输入注册地址..." placeholder-class="placeholder"/>
			</view>
		</view>
		<view class="submit-btn" @click="submitNow">确认</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: '',
				invoiceUrl: 'https://img.caimei365.com/group1/M00/03/81/Cmis214BwaCAPYJ3AAYlpcwPaVo973.png',
				invoiceData:{
					companyName:'',
					taxId:'',
					bankName: '',
					bankNum:'',
					address:'',
					phoneNum: ''
				},
				isIos: false
			}
		},
		onLoad() {
			this.$api.getStorage().then((resolve) =>{
				this.userId = resolve.userID
				this.sendData('init');
				let phone = wx.getSystemInfoSync();  //调用方法获取机型
			    if (phone.platform == 'ios') {
			        this.isIos = true;
			    } else if (phone.platform == 'android') {
					this.isIos = false;
			    }
			})
		},
		methods: {
			inputBankNum(val) {
				if (/\S{5}/.test(val)) {
					this.invoiceData.bankNum = val.replace(/\s/g, '').replace(/(.{4})/g, "$1 ");
				}
			},
			showMsg(text) {
				this.$util.msg(text,1000);
			},
			checkTaxId(taxId) {
			    var regArr = [/^[\da-z]{10,15}$/i, /^\d{6}[\da-z]{10,12}$/i, /^[a-z]\d{6}[\da-z]{9,11}$/i, /^[a-z]{2}\d{6}[\da-z]{8,10}$/i, /^\d{14}[\dx][\da-z]{4,5}$/i, /^\d{17}[\dx][\da-z]{1,2}$/i, /^[a-z]\d{14}[\dx][\da-z]{3,4}$/i, /^[a-z]\d{17}[\dx][\da-z]{0,1}$/i, /^[\d]{6}[\da-z]{13,14}$/i],
			        i, j = regArr.length;
			    for (let i = 0; i < j; i++) {
			        if (regArr[i].test(taxId)) {
			            return true;
			        }
			    }
			    //纳税人识别号格式错误
			    return false;
			},
			submitNow() {
				let {companyName,taxId,
					bankName,bankNum,phoneNum,address} = this.invoiceData,
					commonRegex = this.$api.regexSets();
				if(companyName.trim() == '') {
					this.showMsg('请填写单位名称');
					return false;
				}
				if(!commonRegex.companyName.test(companyName.trim())) {
					this.showMsg('单位名称格式不正确');
					return false;
				}
				if(taxId.trim() == '') {
					this.showMsg('请填写纳税人识别号');
					return false;
				}
				if(!this.checkTaxId(taxId)) {
					this.showMsg('纳税人识别号格式不正确');
					return false;
				}
				if(bankName.trim() == '') {
					this.showMsg('请填写开户银行');
					return false;
				}
				if(!commonRegex.invalidChar.test(bankName)) {
					this.showMsg('开户银行格式不正确');
					return false;
				}
				if(bankNum.trim() == '') {
					this.showMsg('请填写银行账号');
					return false;
				}
				if(!commonRegex.bankNum.test(bankNum.replace(/\s*/g,""))) {
					this.showMsg('银行账号格式不正确');
					return false;
				}
				if(phoneNum.trim() == '') {
					this.showMsg('请填写注册电话');
					return false;
				}
				if(!commonRegex.phoneAndTelephone.test(phoneNum)) {
					this.showMsg('注册电话格式不正确');
					return false;
				}
				if(address.trim() == '') {
					this.showMsg('请填写注册地址');
					return false;
				}
				this.sendData();
			},
			sendData(type) {
				let self = this,
					invoiceData = self.invoiceData,
					data = '';
				if(type === 'init') {
					data = {userId: self.userId};
				} else {
					const {companyName:invoiceTitle, taxId:corporationTaxNum, bankName: openBank,
							bankNum: bankAccountNo, phoneNum:registeredPhone, address:registeredAddress} = invoiceData;
					data = {userId: self.userId, invoiceTitle, corporationTaxNum, openBank,
							bankAccountNo: bankAccountNo.replace(/\s*/g,""), registeredPhone, registeredAddress};
				}
				self.$api.post('/personal/invoice', data,
					response => {
						const code = response.code;
						const resData = response.data;
						if(code == 1) {
							if(type === 'init') {
								if(resData) {
									invoiceData.companyName = resData.invoiceTitle;
									invoiceData.taxId = resData.corporationTaxNum;
									invoiceData.bankName = resData.openBank;
									invoiceData.phoneNum = resData.registeredPhone;
									invoiceData.address = resData.registeredAddress;
									self.inputBankNum(resData.bankAccountNo);
								}
							} else {
								self.showMsg('保存成功');
								setTimeout(()=>{
									uni.navigateBack({
										delta: 1
									})
								},1100)
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: '网络错误，请稍后重试。',
								duration: 3000
							})
						}
					}
				)
			}
		}
	}
</script>

<style lang="scss">
	page {
		.invoice-form-wrapper {
			display: flex;
			flex-direction: column;
		}
		.invoice-pic {
			width: 100%;
		}
		.form-item {
			align-items: flex-start;
		}
		.form-item:first-child {
			margin-top: 0rpx;
		}
		.invoice-form {
			background: #fff;
			padding: 50rpx 48rpx 38rpx 50rpx;
		}
		.form-input {
			height: 45rpx;
			line-height: 45rpx;
			flex-grow: 1;
		}
		.form-title {
			height: 45rpx;
			line-height: 45rpx;
			white-space: nowrap;
		}
		.form-textarea {
			width: 100%;
			height: 130rpx;
		}
		.place-holder {
			color: #999;
		}
		.iostextarea {
			margin-top: -10rpx;
		}
	}
</style>