ec.uniapp-master/pages/store/invoice/invoice.vue

<template>
	<view id="invoice">
		<view class="header_box">
			<view class="item">
				<view class="name">
					发票类型
				</view>
				<view class="name">
					纸质发票
				</view>
			</view>
			<view class="item">
				<view class="name">
					抬头类型
				</view>
				<view class="type">
					<radio-group @change="change($event)" style="display: flex;">
						<view class="type-item">
							<label class="checkbox" style="margin-right:10px;">
								<radio checked="true" value="personal" color="#FB5054" style="transform: scale(0.7)"/>
								<text>个人</text>
							</label>
						</view>
						<view class="type-item">
							<label class="checkbox">
								<radio value="enterprise" color="#FB5054" style="transform: scale(0.7)"/>
								<text>单位</text>
							</label>
						</view>
					</radio-group>
				</view>
			</view>
			<view class="item">
				<view class="name">发票抬头</view>
				<view class="input-box">
					<input type="text" placeholder="抬头名称" placeholder-class="input-placeholder" v-model="name" />
				</view>
				<view class="iconfont icon-jiantou">
					
				</view>
			</view>
			<view class="item">
				<view class="name">
					是否设置默认抬头
				</view>
				<view class="switch-box">
					 <switch checked  color="#FF2741" style="transform: scale(0.7,0.7)" />
				</view>
			</view>
			<!-- 企业的选择 -->
			<view class="conpany" v-if="type == 'enterprise'">
				<view class="item">
					<view class="name">税号</view>
					<view class="input-box">
						<input type="text" placeholder="纳税人识别号" placeholder-class="input-placeholder" v-model="number" />
					</view>
				</view>
				<view class="item">
					<view class="name">开户银行</view>
					<view class="input-box">
						<input type="text" placeholder="选填" placeholder-class="input-placeholder" v-model="bank" />
					</view>
				</view>
				<view class="item">
					<view class="name">银行账号</view>
					<view class="input-box">
						<input type="text" placeholder="选填" placeholder-class="input-placeholder" v-model="bank_number" />
					</view>
				</view>
				<view class="item">
					<view class="name">企业地址</view>
					<view class="input-box">
						<input type="text" placeholder="选填" placeholder-class="input-placeholder" v-model="address" />
					</view>
				</view>
				<view class="item">
					<view class="name">企业电话</view>
					<view class="input-box">
						<input type="text" placeholder="选填" placeholder-class="input-placeholder" v-model="phone" />
					</view>
				</view>
			</view>

		</view>

		<view class="content">
			<view class="detail">
				<view class="name">发票明细:</view>
			</view>
			<view class="tips">
				开票金额为用户实际支付金额（不含礼品卡、优惠券、积分抵扣）
			</view>
			
		</view>
		<view class="content" @click="jumpback">
			<view class="detail">
				<view class="name">本次不开具发票，继续下单</view>
				<view class="iconfont icon--xiangyoujiantou"></view>
			</view>
			
		</view>
		<!-- 完成按钮 -->
		<view class="btn-box" @click="submit">完成</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'personal', //发票；类型
				name: '', //发票抬头
				number: '', //税号
				bank: '', //开户银行
				bank_number: '', //银行账号，
				phone: '', //企业电话
				address: '', //企业地址

			}
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {
			change(e) {
				this.type = e.detail.value;
			},
			// 点击完成时候所完成的动作
			submit() {
				var message = '';
				if (this.type == 'personal') {
					if (this.name) {
						var data = {
							type: 'personal',
							name: this.name
						}
						this.addInvoiceInfo(data);
					} else {
						message = "请输入抬头名称"
						wx.showModal({
							content: message,
							showCancel: false
						})
						return
					}
				}
				if (this.type == 'enterprise') {
					if(!this.name){
						message = "请输入抬头名称"
						wx.showModal({
							content: message,
							showCancel: false
						})
						return
					}
					var regExp = /^([1-9]{1})(\d{15}|\d{18})$/;
					if (!this.number) {
						message = "请输入纳税人识别号"
						wx.showModal({
							content: message,
							showCancel: false
						})
						return
					}
					if (this.bank_number) {
						if (!regExp.test(this.bank_number)) {
							message = "请输入正确的银行卡号",
								wx.showModal({
									content: message,
									showCancel: false
								})
							return
						}
					}
					var data = {
						type: 'enterprise',
						name:this.name,
						number: this.number,
						bank: this.bank,
						bank_number: this.bank_number,
						phone: this.phone,
						address: this.address
					}
					this.addInvoiceInfo(data);

				}
			},
			// 向后端发送发票信息
			addInvoiceInfo(info) {
				var data = this.$cookieStorage.get('order_form');
				
					data.invoice = info;
					this.$cookieStorage.set('order_form', data);
					wx.navigateBack();
		
			},
			// 返回
			jumpback(){
				var data = this.$cookieStorage.get('order_form');
				data.invoice = "";
				this.$cookieStorage.set('order_form', data);
				wx.navigateBack();
			}
				

		}
	}
</script>

<style rel="stylesheet/less" lang="less">
	@import "invoice";
</style>