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.getInvoiceInfo()
				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.saveInvoiceInfo();
			},
			getInvoiceInfo(){
				this.$api.getStorage().then((resolve) =>{
					this.ProductService.GetPersonalCenterFindInvoice({userId:resolve.userID}).then(response =>{
						let resData = response.data
						this.invoiceData.companyName = resData.invoiceTitle;
						this.invoiceData.taxId = resData.corporationTaxNum;
						this.invoiceData.bankName = resData.openBank;
						this.invoiceData.phoneNum = resData.registeredPhone;
						this.invoiceData.address = resData.registeredAddress;
						this.inputBankNum(resData.bankAccountNo);
					}).catch(error =>{
						this.$util.msg(error.msg,2000);
					})
				})
			},
			saveInvoiceInfo() {
				let invoiceData = this.invoiceData
				const {companyName:invoiceTitle, taxId:corporationTaxNum, bankName: openBank,
						bankNum: bankAccountNo, phoneNum:registeredPhone, address:registeredAddress} = invoiceData;
				let params = {userId: this.userId, invoiceTitle, corporationTaxNum, openBank,
							bankAccountNo: bankAccountNo.replace(/\s*/g,""), registeredPhone, registeredAddress};
				this.ProductService.GetPersonalCenterInvoice(params).then(response =>{
					this.$util.msg('保存成功',2000);
					setTimeout(()=>{
						uni.navigateBack({
							delta: 1
						})
					},1100)
				}).catch(error =>{
					this.$util.msg(error.msg,2000);
				})	
			}
		}
	}
</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>