pika_shangjia/invoice/apply/apply.vue

<template>
	<view>
		<view class="form">
			<view class="li ddflex">
				<label class="label">发票类型</label>
				<view class="item fflex">
					电子发票
				</view>
			</view>
			<view class="li ddflex">
				<label class="label">发票金额</label>
				<view class="item fflex">
					￥{{options.money}}
				</view>
			</view>
			<view class="li ddflex">
				<label class="label">开票方式</label>
				<view class="item fflex ddflex">
					<view class="lis ddflex" v-for="(item,index) in mode" :key="index" @click="modeClick(index)"><image :src="'../static/images/' + (modeIndex == index ? 'radio_h' : 'radio') +'.png'" class="radio"></image>{{item.label}}</view>
				</view>
			</view>
			<view class="li ddflex">
				<label class="label">发票抬头</label>
				<view class="item fflex ddflex">
					<view class="lis ddflex" v-for="(item,index) in headerType" :key="index" @click="headerTypeClick(index)"><image :src="'../static/images/' + (headerTypeIndex == index ? 'radio_h' : 'radio') +'.png'" class="radio"></image>{{item.label}}</view>
				</view>
			</view>
			<view class="li ddflex" v-if="headerTypeIndex == 0">
				<label class="label">电子邮箱</label>
				<view class="item fflex">
					<input v-model="options.email" placeholder="（必填）" placeholder-class="placeholder" class="ipt" />
				</view>
			</view>
			<block v-else>
			<view class="daoru ddflex" @click="daoru()"><image src="../static/images/dao.png"></image>一键导入微信发票助手抬头</view>
			<view class="li ddflex">
				<label class="label">公司抬头</label>
				<view class="item fflex">
					<input v-model="options.title" placeholder="请输入抬头名称" placeholder-class="placeholder" class="ipt" />
				</view>
			</view>
			<view class="li ddflex">
				<label class="label">税号</label>
				<view class="item fflex">
					<input v-model="options.duty" placeholder="请输入纳税人识别号" placeholder-class="placeholder" class="ipt" />
				</view>
			</view>
			<view class="li ddflex">
				<label class="label">邮箱地址</label>
				<view class="item fflex">
					<input v-model="options.email" placeholder="请输入" placeholder-class="placeholder" class="ipt" />
				</view>
			</view>
			<block v-if="isOther">
			<view class="li ddflex">
				<label class="label">注册地址</label>
				<view class="item fflex">
					<input v-model="options.address" placeholder="（选填）" placeholder-class="placeholder" class="ipt" />
				</view>
			</view>
			<view class="li ddflex">
				<label class="label">注册电话</label>
				<view class="item fflex">
					<input v-model="options.phone" placeholder="（选填）" placeholder-class="placeholder" class="ipt" />
				</view>
			</view>
			<view class="li ddflex">
				<label class="label">开户银行</label>
				<view class="item fflex">
					<input v-model="options.bank" placeholder="（选填）" placeholder-class="placeholder" class="ipt" />
				</view>
			</view>
			<view class="li ddflex">
				<label class="label">银行账户</label>
				<view class="item fflex">
					<input v-model="options.bankNo" placeholder="（选填）" placeholder-class="placeholder" class="ipt" />
				</view>
			</view>
			</block>
			<view class="more ddflex" @click="other()">其他发票信息<image :src="'../static/images/' + (isOther ? 'bico_h':'bico') +'.png'"></image></view>
			</block>
		</view>
		<view class="tip">
			<view class="tits">温馨提示：</view>
			<view>应国家税务总局要求，您若开具增值税普通发票，须同时提供企业抬头及纳税人识别号，否则发票将无法用于企业报销</view>
		</view>
		<view class="btn" @click="apply()">申请开票</view>
	</view>
</template>

<script>
	const req = require('../../utils/request.js');
	
	export default {
		data() {
			return{
				options: {},
				title: '',
				mode:[
					{
						label: '商品类别',
						value: 1
					},
					{
						label: '商品明细',
						value: 2
					}
				],
				modeIndex: 0,
				headerType:[
					{
						label: '个人',
						value: 1
					},
					{
						label: '单位',
						value: 2
					}
				],
				headerTypeIndex: 0,
				isOther: false
			}
		},
		onLoad(options) {
			this.options = options
		},
		methods:{
			modeClick(index){
				this.modeIndex = index;
			},
			headerTypeClick(index){
				this.headerTypeIndex = index;
			},
			other(){
				if(this.isOther){
					this.isOther = false;
				}else{
					this.isOther = true;
				}
			},
			daoru(){
				let that = this;
				uni.chooseInvoiceTitle({
					success(res){
						console.log(res)
						that.title = res.title;
						that.options.title = res.title;
						that.options.duty = res.taxNumber;
						that.options.address = res.companyAddress;
						that.options.phone = res.telephone;
						that.options.bank = res.bankName;
						that.options.bankNo = res.bankAccount;
					}
				})
			},
			apply(){
				let params = this.options;
				if(this.headerTypeIndex == 1){
					if(!params.title) return req.msg('请输入公司抬头');
					if(!params.duty) return req.msg('请输入纳税人识别号');
				}
				if(!params.email) return req.msg('请输入邮箱地址');
				if(params.email){
					var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
					if(!re.test(params.email)) return req.msg('请输入正确的邮箱地址');
				}
				params.mode = this.mode[this.modeIndex].value;
				params.headerType = this.headerType[this.headerTypeIndex].value;
				req.postRequest('/api/invoice/insert',params,res=>{
					uni.redirectTo({
						url: '/invoice/detail/detail?id=' + res
					})
				})
			}
		}
	}
</script>

<style>
	@import "./apply.css";
</style>