jp-housekeep-hall/pages/invoiceManagement/addInvoiceTitle.vue

<template>
	<view>
		<u-navbar :title="title"  title-color="#101010" >
			<view class="slot" style=" color: #ee3138;" v-if="id"
			 
			 slot="right" @click="show=true">
				删除
			</view>
		</u-navbar>
		<!-- 删除弹出框 -->
		<u-popup v-model="show"  mode="bottom" border-radius="12" >
			<view class="popup">
				<view class="headline">
					确认删除
				</view>
				<view class="hint">
					是否删除此发票抬头？
				</view>
				<view class="btn-box">
					<view class="think" @click="show=false" >
						我再想想
					</view>
					<view class="confirm" @click="deleteBtn" >
						确认删除
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 类型 -->
		<view class="main">
			<u-cell-group>
				<u-cell-item  title="抬头类型" required :arrow="false" >
					<u-radio-group v-model="form.headerType" @change="radioGroupChange">
								<u-radio 
									@change="radioChange" 
									v-for="(item, index) in list" :key="index" 
									:name="item.id"
									:disabled="item.disabled"
								>
									{{item.name}}
								</u-radio>
							</u-radio-group>
					
				</u-cell-item>
				<u-cell-item  title="发票类型" required :arrow="false" v-show="setparameter('type')" >
					<u-radio-group v-model="form.type" @change="radioGroupChange">
								<u-radio 
									@change="radioChange" 
									v-for="(item, index) in list2" :key="index" 
									:name="item.id"
									:disabled="item.disabled"
								>
									{{item.name}}
								</u-radio>
							</u-radio-group>
				</u-cell-item>
			</u-cell-group>
		</view>
		<!-- 其他信息 -->
		<view class="main">
			<u-cell-group>
				<u-cell-item  title="发票抬头"  required :arrow="false"   v-show="setparameter('title')" >
					<u-input placeholder="请填写发票抬头" v-model="form.title" ></u-input>
				</u-cell-item>
				<u-cell-item  title="公司税号" required :arrow="false"   v-show="setparameter('companyTaxNo')" >
					<u-input placeholder="请填写纳税人税号"  v-model="form.companyTaxNo" ></u-input>
				</u-cell-item>
				<u-cell-item  title="开户银行"  :required="setparameter('bankName')==2" :arrow="false" v-show="setparameter('bankName')" >
					<u-input placeholder="请填写开户银行全称" v-model="form.bankName" ></u-input>
				</u-cell-item>
				<u-cell-item  title="银行账户"   :required="setparameter('accountNo')==2" :arrow="false" v-show="setparameter('accountNo')" >
					<u-input placeholder="请填写银行账户" v-model="form.accountNo" ></u-input>
				</u-cell-item>
				<u-cell-item  title="公司地址" :required="setparameter('companyAddress')==2" :arrow="false" v-show="setparameter('companyAddress')" >
					<u-input placeholder="请填写公司详细地址"  v-model="form.companyAddress"  ></u-input>
				</u-cell-item>
				
				<u-cell-item  title="身份证号" required :arrow="false" v-show="setparameter('idCard')" >
					<u-input placeholder="请填写身份证号"  v-model="form.idCard"  ></u-input>
				</u-cell-item>
			</u-cell-group>
		</view>
		
		<view class="main">
			<u-cell-item  title="联系电话" required :arrow="false"  v-show="setparameter('companyTelephone')"  >
				<u-input placeholder="请填写联系电话" v-model="form.companyTelephone"   ></u-input>
			</u-cell-item>
		</view>
		<!-- 默认 -->
		<view class="main ">
			<u-cell-item title="设为默认"  :arrow="false" >
				<u-switch  size="40" v-model="defaultHeader" 
				
				active-color="#00e266"></u-switch>
			</u-cell-item>
		</view>
		
		<button class="save" @click="submit">保存</button>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/invoiceApi.js'
	
	import {
		checkPhone
	} from '@/apis/utils'
export default {
	
	data() {
		return {
			show:false,
			checked:true,
			list: [
				{
					id:1,
					name: '企业单位',
					disabled: false
				},
				{
					id:2,
					name: '个人/非企业单位',
					disabled: false
				}
			],
			list2: [
				{
					id:1,
					name: '增值税专票',
					disabled: false
				},
				{
					id:2,
					name: '增值税普票',
					disabled: false
				}
			],
			defaultHeader:true,
			value: 'orange',
			id:"",
			detail:{},
			form:{
				headerType:'',//专票必填
				type:"",//专票必填
				//companyName:"",//专票必填
				companyTaxNo:"",//专票必填
				bankName:"",
				accountNo:"",
				companyAddress:"",
				companyTelephone:"",
				defaultHeader:1,
				title:"",//个人
				idCard:"",//个人
			},
			formKey:{
				headerType:'抬头类型',//专票必填
				type:"发票类型",//专票必填
				//companyName:"",//专票必填
				companyTaxNo:"公司税号",//专票必填
				bankName:"开户银行",
				accountNo:"银行账户",
				companyAddress:"公司地址",
				companyTelephone:"联系电话",
				defaultHeader:1,
				title:"发票抬头",//个人
				idCard:"身份证号",//个人
			},
			title:"新增发票抬头"
		};
	},
	computed:{
		
		
		ruleReqlist(){
			if(this.form.headerType==2){
				return ["headerType","title","idCard","companyTelephone"]
			}else if(this.form.headerType==1&&this.form.type==2){
				return ["headerType","type","title","companyTaxNo",
			"companyTelephone"]
			}else{
				return ["headerType","type","title","companyTaxNo",
			"bankName","accountNo","companyAddress",
			"companyTelephone"]
			}
		},
		rulelist(){
			if(this.form.headerType==1&&this.form.type==2){
				return ["bankName","accountNo","companyAddress"]
			}else {
				return []
			}
		}
	
	},
	onLoad(op) {
			if(op.id){
				this.id=op.id;
				this.title="修改发票抬头"
				this.getInvoiceTypeDetail();
			}
	},
	methods: {
		deleteBtn(){
			this.show=false;
			uni.showLoading({
				title: "加载中",
				mask: true,
			})
			
			API.deleteInvoiceType({
				id: this.id,	
			}).then((response) => {
				
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('refreshData');
				
				uni.showModal({
					title:"提示",
					content:"操作成功！",
					showCancel:false,
					success() {
						uni.navigateBack()
					}
				})
			}).catch(error => {
				uni.showToast({
					title: error,
					icon: "none"
				})
			})
		},
		getInvoiceTypeDetail(){
			uni.showLoading({
				title: "加载中",
				mask: true,
			})
			
			API.invoiceTypeDetail({
				
				id: this.id,
				
			}).then((response) => {
					uni.hideLoading();
				this.form=response.data.invoiceType;
				this.defaultHeader=this.form.defaultHeader
			
			}).catch(error => {
				uni.showToast({
					title: error,
					icon: "none"
				})
			})
		},
		submit(){
			
			
			console.log(this.form)
			var obj={}
			if(this.id){
				obj.id=this.id
			}
			obj.defaultHeader=(this.defaultHeader?1:0)
			
			var bl=false
			
			for(var i in this.form){
				
				var set=this.setparameter(i);
				console.log(set,i)
				if(set){
					if(set==2){
						if(this.form[i]==""){
							var k=this.formKey[i]
							uni.showToast({
								icon: "none",
								title: "请填写"+k,
								
							})
							bl=true;
							break
						}
					}
					obj[i]=this.form[i]
				}
			}
			if(bl){
				return
			}
			var checkPhoneResult = checkPhone(this.form.companyTelephone);
				
			if (checkPhoneResult !== true) {
				uni.showToast({
					icon: "none",
					title: checkPhoneResult,
					
				})
				return;
			}
			
			uni.showLoading({
				title: "加载中",
				mask: true,
			})
			API.saveInvoiceType(obj).then((response) => {
				uni.hideLoading();
				
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('refreshData');
				
				uni.showModal({
					title:"提示",
					content:"操作成功！",
					showCancel:false,
					success() {
						uni.navigateBack()
					}
				})
				
			
			}).catch(error => {
				uni.hideLoading();
				uni.showToast({
					title: error,
					icon: "none"
				})
			})
			
		},
		setparameter(key){
			
			if(this.ruleReqlist.indexOf(key)!=-1){
				//console.log(2,key,this.ruleReqlist)
				return 2
			}
			if(this.rulelist.indexOf(key)!=-1){
				//console.log(1,key,this.rulelist)
				return 1
			}
			//console.log(0,key)
			return 0
		},
		// 选中某个单选框时，由radio时触发
		radioChange(e) {
			// console.log(e);
		},
		// 选中任一radio时，由radio-group触发
		radioGroupChange(e) {
			
			
		}
	}
};
</script>

<style lang="scss" scoped>
	.main{
		background-color: #fff;
		margin-bottom: 24rpx;
	}
	
	/deep/.u-cell{
		height: 96rpx;
	}
	/deep/.u-cell__value{
		text-align: left;
		margin-left: 8%;
		font-size: 32rpx;
		
	}
	/deep/.u-switch{
		margin: auto 0;
		float: left;;
	}
		
	
	.save{
		
		margin: 24rpx 32rpx;
		line-height: 88rpx;
		border-radius: 50px;
		background: linear-gradient(-88.46deg, rgba(34,109,198,1) 2.59%,rgba(9,158,237,1) 97.02%);
		color: rgba(255,255,255,1);
		font-size: 36rpx;
		
	}
	
	.popup{
		padding: 32rpx;
		text-align: center;
		.headline{
			color: rgba(16,16,16,1);
			font-size: 36rpx;
			font-weight: bold;
		}
		.hint{
			color: rgba(16,16,16,1);
			font-size: 32rpx;
			margin-top: 40rpx;
		}
		.btn-box{
			margin-top: 82rpx;
			display: flex;
			justify-content: space-between;
			.think{
				width: 328rpx;
				line-height: 80rpx;
				border-radius: 4px;
				background-color: rgba(222,225,228,1);
				color: rgba(51,51,51,1);
				font-size: 32rpx;
			}
			.confirm{
				width: 328rpx;
				line-height: 80rpx;
				border-radius: 4px;
				background-color: rgba(255,68,68,1);
				color: rgba(255,255,255,1);
				font-size: 32rpx;
			}
		}
	}

</style>