ryx/pages/invoice/invoiceEndit.vue

<template>
	<view class="">
		<!-- <view class="top" v-if="index==0">
			<view class="" style="width: 40%;">
				开票金额共
			</view>
			<view class="">
				￥2538
			</view>
		</view> -->
		<view class="form">
			<u--form labelPosition="left" :model="model1" ref="form1" :rules="rules">
				<view class="">
					抬头类型
				</view>
				<view class="btn">
					<view :class="model1.userInfo.type==2?'btn-item-active':'btn-item'" @click="model1.userInfo.type=2">
						企业</view>
					<view :class="model1.userInfo.type==1?'btn-item-active':'btn-item'" @click="model1.userInfo.type=1">
						个人</view>
				</view>

				<u-form-item label="发票抬头" prop="personalname" borderBottom ref="item1" labelWidth="160rpx" :required="true"  v-if="model1.userInfo.type==1">
					<u--input v-model="personalname" disabledColor="#ffffff"
						placeholder="请输入个人姓名" border="none"
						placeholderStyle="color: #555555" ></u--input>
				</u-form-item>

				<view class="" v-if="model1.userInfo.type==2">
					<u-form-item label="发票抬头" prop="userInfo.name" borderBottom ref="item1" labelWidth="160rpx" :required="true">
						<u--input v-model="model1.userInfo.name" disabledColor="#ffffff"
							placeholder="请输入公司名称" border="none"
							placeholderStyle="color: #555555" ></u--input>
					</u-form-item>
					<u-form-item label="纳税税号" prop="userInfo.tax_no" borderBottom ref="item1" labelWidth="160rpx" :required="true">
						<u--input v-model="model1.userInfo.tax_no" disabledColor="#ffffff" placeholder="请输入税号"
							border="none" placeholderStyle="color: #555555" ></u--input>
					</u-form-item>
					<u-form-item label="注册地址" prop="userInfo.address" borderBottom ref="item1" labelWidth="160rpx">
						<u--input v-model="model1.userInfo.address" disabledColor="#ffffff" placeholder="请输入注册地址"
							border="none" placeholderStyle="color: #555555"></u--input>
					</u-form-item>
					<u-form-item label="电话" prop="userInfo.phone" borderBottom ref="item1" labelWidth="160rpx">
						<u--input v-model="model1.userInfo.phone" disabledColor="#ffffff" placeholder="请输入电话"
							border="none" placeholderStyle="color: #555555" type="number"></u--input>
					</u-form-item>
					<u-form-item label="开户银行" prop="userInfo.bank_name" borderBottom ref="item1" labelWidth="160rpx">
						<u--input v-model="model1.userInfo.bank_name" disabledColor="#ffffff" placeholder="请输入开户银行"
							border="none" placeholderStyle="color: #555555" ></u--input>
					</u-form-item>
					<u-form-item label="银行账号" prop="userInfo.bank_no" borderBottom ref="item1" labelWidth="160rpx">
						<u--input v-model="model1.userInfo.bank_no" disabledColor="#ffffff" placeholder="请输入银行账号"
							border="none" placeholderStyle="color: #555555" type="number"></u--input>
					</u-form-item>
				</view>

				<!-- <u-form-item  v-if="index==0" label="发送邮箱" prop="userInfo.idcard" borderBottom  ref="item1" labelWidth="160rpx">
						<u--input v-model="model1.userInfo.idcard"  disabledColor="#ffffff" placeholder="输入接收邮箱" placeholderStyle="color: #555555" border="none" ></u--input>
					</u-form-item> -->


				<view class="" style="margin: 30rpx 0;">
					备注信息（选填）
				</view>
				<u--textarea v-model="model1.userInfo.memo" placeholder="输入备注信息"
					:customStyle="{'background':'#F4F4F4','border-radius': '0px 32rpx 8rpx 32rpx'}"
					placeholderStyle="color: #555555" height=120 border="none"></u--textarea>
			</u--form>
		</view>
		<view class="tips">
			<u-icon name="error-circle" color="##999999 " size="28"></u-icon>
			<view class="" style="margin-left:18rpx;">
				如果购买方为企业，有税号XXX
			</view>
		</view>
		<view class="" style="margin-bottom: 164rpx;"></view>
		<view v-if="state==0" class="navbar" @click="editsubmit">
			保存
		</view>
		<view v-if="state==1" class="navbar" @click="submit">
			添加抬头
		</view>
		<view class="paddingsafe"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 编辑与添加状态 0保存 1添加
				state: 0,
				showSex: false,
				personalname:'',
				model1: {
					userInfo: {
						name: '',
						tax_no: '',
						address: '',
						phone: '',
						bank_name: "",
						bank_no: '',
						type: 2,
						memo: "",
					},
				},
				rules:{
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写公司名称',
						trigger: ['blur', 'change']
					},
					'personalname': {
						type: 'string',
						required: true,
						message: '请填写个人姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.tax_no': {
						type: 'string',
						required: true,
						message: '请填写税号',
						trigger: ['blur', 'change']
					},
				},
				index: 1
			}
		},
		onLoad(options) {

			this.state = options.state
			if (options.info) {
				let info = JSON.parse(options.info)
				if (info.type == "个人") {
					info.type = 1
				} else if (info.type == "企业") {
					info.type = 2
				}
				this.model1.userInfo = info
			}


			// id=0 申请发票跳转 index=0   
			// id=1 抬头管理跳转 index=1
			// if(options.id==0){
			// 	this.index=0
			// }else if(options.id==1){
			// 	this.index=1
			// }
		},
		methods: {
			// 修改
			editsubmit() {
				let form = this.model1.userInfo

				console.log(form, "<=================修改")
				uni.$u.http.post('/api/invoice/edit', form, {
					custom: {
						auth: true
					}
				}).then((res) => {
					console.log(res)
					uni.showToast({
						icon: "success",
						title: "修改成功",
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)

				}).catch((err) => {
					console.log(err)
				})
			},
			// 添加抬头
			submit() {
				uni.showLoading()
				let form = this.model1.userInfo
				if(form.type==1){
					form.name=this.personalname
				}
				uni.$u.http.post('/api/invoice/add', form, {
					custom: {
						auth: true
					}
				}).then((res) => {
					uni.hideLoading()
					uni.showToast({
						icon: "success",
						title: "添加成功",
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)

				}).catch((err) => {
					uni.hideLoading()
					this.$toast(err.message)
				})
			}
		},
	}
</script>

<style lang="less">
	// .u-form-item__body.data-v-5e7216f1{
	// 	padding: 30rpx 0 !important;
	// }
	// .u-textarea.data-v-81cd9d32{
	// 	background-color:#F4F4F4 !important; 
	// 	border-radius: 0px 32rpx 8rpx 32rpx !important;
	// }
	page {
		background-color: #F4F4F4;
		font-size: 30rpx;
	}

	.top {
		background: #FFFFFF;
		border-radius: 8rpx 32rpx 8rpx 8rpx;
		margin: 30rpx;
		padding: 40rpx;
		display: flex;
	}

	.form {
		background-color: #fff;
		padding: 30rpx;
		margin: 30rpx;
		border-radius: 8rpx 32rpx 8rpx 32rpx;

	}

	.btn {
		display: flex;
		border-bottom: 1rpx solid #E3E3E3;
		padding: 30rpx 0;

		.btn-item {
			text-align: center;
			line-height: 60rpx;
			width: 176rpx;
			height: 60rpx;
			background: #F4F4F4;
			border-radius: 30rpx;
			margin: 0 10rpx;
		}

		.btn-item-active {
			text-align: center;
			line-height: 58rpx;
			width: 174rpx;
			height: 58rpx;
			background: rgba(30, 159, 106, 0.1);
			border-radius: 30rpx;
			border: 1px solid #1E9F6A;
			color: #1E9F6A;
			margin: 0 10rpx;
		}
	}

	.email {
		background-color: #fff;
		margin: 20rpx 0;
		padding: 20rpx;
	}

	.tips {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		color: #999999;
		font-size: 26rpx;

	}

	.navbar {
		padding: 30rpx 0;
		text-align: center;
		background: #1E9F6A;
		color: #fff;
		bottom: 0;
		margin: 0 auto;
		left: 0;
		position: fixed;
		width: 100%;
		border-radius: 16rpx 16rpx 0px 0px;
	}
</style>