yanzong_qianduan/pages/invoice/editset.vue

<template>
	<view class="invoice">
		<!-- <view class="invoice-goods" v-if="sourcePage==0 && orderDetail">
			<view class="b" v-if="orderDetail">
				<view class="r">订单编号：{{orderDetail.order_no}}<text @click="handleCopy(orderDetail.order_no)">复制</text>
				</view>
				<view class="r">开票金额：{{orderDetail.pay_price}}</view>
			</view>
		</view> -->
		<view class="invoice-info">
			<view class="b">
				<view class="item">
					<view class="l">发票类型：</view>
					<view class="r">
						<picker :value="index" :range="array" @change="bindPickerChange">
							<view class="lx" style="color: #888;" v-if="index == null">请选择发票类型</view>
							<view class="lx" v-else>{{ array[index] }}</view>
						</picker>
					</view>
				</view>
				<view class="item">
					<view class="l">发票类型：</view>
					<view class="r">
						<view class="li" :class="tabIndex == 1 ? 'li-on' : ''" @click="tabItem(1)">个人</view>
						<view class="li" :class="tabIndex == 2 ? 'li-on' : ''" @click="tabItem(2)">单位</view>
					</view>
				</view>
				<view class="item">
					<view class="l">发票抬头：</view>
					<view class="r">
						<input type="text" v-model="obj.header" :placeholder="tabIndex == 2 ? '请输入单位名称' : '请输入个人姓名'" />
					</view>
				</view>
				<view class="item" v-if="tabIndex == 2">
					<view class="l">单位税号：</view>
					<view class="r">
						<input type="text" v-model="obj.duty_no" placeholder="请输入纳税人识别号" />
					</view>
				</view>
			</view>
		</view>
		<view class="invoice-company" v-if="tabIndex == 2">
			<view class="a">选填内容（开户银行、银行账号等）
				<text :class="toggleIndex ? 'on' : ''" @click="toggleItem()">{{ toggleIndex ? "收起" : "展开" }}</text>
			</view>
			<view class="b" v-if="toggleIndex">
				<view class="item">
					<view class="l">开户银行：</view>
					<view class="r">
						<input type="text" v-model="obj.bank_name" placeholder="请输入开户银行名称" />
					</view>
				</view>
				<view class="item">
					<view class="l">银行账号：</view>
					<view class="r">
						<input type="number" v-model="obj.bank_no" placeholder="请输入银行账号" />
					</view>
				</view>
				<view class="item">
					<view class="l">单位地址：</view>
					<view class="r">
						<input type="text" v-model="obj.address" placeholder="请输入单位地址" />
					</view>
				</view>
				<view class="item">
					<view class="l">单位电话：</view>
					<view class="r">
						<input type="number" v-model="obj.phone" placeholder="请输入单位电话" />
					</view>
				</view>
			</view>
		</view>
		<view class="invoice-btn">
			<view class="invoice-fd" @click="onSubmit()">
				提交
			</view>
		</view>

		<!-- <u-modal v-model="show" :content="content" :show-cancel-button="true" :show-title="false"
			confirm-color="#F55349"></u-modal> -->
	</view>
</template>

<script>
import * as InvoiceApi from '@/api/invoice'
export default {
	data() {
		return {
			id: '',
			content: "确认您的发票信息无误后再提交",
			show: true,
			toggleIndex: true,
			index: null,
			array: ['普通增值税发票'],
			tabIndex: null,
			sourcePage: 0,
			orderDetail: '',
			orderId: '',
			obj: {
				header: '',
				duty_no: '',
				bank_name: '',
				bank_no: '',
				address: '',
				phone: '',
				type: 1,
				source: ''
			}

		};
	},
	onLoad(op) { 
		if (op.detailObj && op.detailObj != 'null') { 
			let end = JSON.parse(op.detailObj)
			this.index = 0
			if (end.source == 1) {
				this.tabIndex = 1
			} else {
				this.tabIndex = 2
			}
			this.obj = end
		}
		// let app = this;
		// app.orderId = op.orderId
		// app.sourcePage = op.source == 1 ? op.source : 0
		// if (op.source == 0) {
		// 	app.orderDetail = op.order ? JSON.parse(op.order) : '';
		// }
		// if (op.source == 2 || op.source == 1) {
		// 	let detail = op.detail ? JSON.parse(op.detail) : '';
		// 	app.index = detail.type == 1 ? 0 : 1;
		// 	app.tabIndex = detail.source
		// 	app.obj = detail
		// }

	},
	methods: {
		//添加发票  
		onSubmit() {
			if (this.obj.id) {
				this.editeInvoice()
			} else {
				this.addInvoice()
			}
		},
		async addInvoice(canReset = false) {
			const app = this 
			if (app.index == null || !app.obj.source) {
				uni.showToast({
					title: '请选择发票类型',
					icon: 'none',
					duration: 2000
				})
				return
			}
			if (!app.obj.header) {
				uni.showToast({
					title: '请输入抬头',
					icon: 'none',
					duration: 2000
				})
				return
			}
			if (app.tabIndex == 2 && !app.obj.duty_no) {
				uni.showToast({
					title: '请输入纳税人识别号',
					icon: 'none',
					duration: 2000
				})
				return
			}
			let {
				status,
				data
			} = await InvoiceApi.addInvoicing(app.obj);
			if (status == 200) {
				uni.showToast({
					title: '新增成功！',
					icon: 'none',
					duration: 2000
				})
				app.index = null
				app.tabIndex =null
				app.obj = app.$options.data().obj
			}
		},
		async editeInvoice() {
			const app = this
			if (app.index == null || !app.obj.source) {
				uni.showToast({
					title: '请选择发票类型',
					icon: 'none',
					duration: 2000
				})
				return
			}
			if (!app.obj.header) {
				uni.showToast({
					title: '请输入抬头',
					icon: 'none',
					duration: 2000
				})
				return
			}
			if (app.tabIndex == 2 && !app.obj.duty_no) {
				uni.showToast({
					title: '请输入抬头',
					icon: 'none',
					duration: 2000
				})
				return
			}
			let {
				status,
				data
			} = await InvoiceApi.editInvoicing(app.obj);
			if (status == 200) {
				uni.showToast({
					title: '编辑成功！',
					icon: 'none',
					duration: 2000
				})
				app.index = null
				app.tabIndex =null
				app.obj = app.$options.data().obj
			}
		},

		// 复制指定内容
		handleCopy(value) {
			const app = this
			uni.setClipboardData({
				data: value,
				success: () => app.$toast('复制成功'),
				fail: ({
					errMsg
				}) => app.$toast('复制失败 ' + errMsg)
			})
		},
		// 提交信息
		handleInvoice() {
			const app = this
		},
		onClose() { },
		tabItem(i) {
			this.tabIndex = i; 
			this.obj.source = i
		},
		toggleItem(i) {
			this.toggleIndex = !this.toggleIndex; 
		},
		bindPickerChange(e) {
			this.index = e.detail.value;
		},
		bindPickerChange1() {
			uni.navigateTo({
				url: "/pages/invoice/index?orderId=" + this.orderId + '&order=' + (app.orderDetail ? JSON.stringify(app.orderDetail) : '')
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.invoice-btn {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 30rpx 44rpx;
	z-index: 8;
	background: #fafafa;
}

.invoice-company {
	margin-bottom: 170rpx;
}

.invoice {
	padding-bottom: 1rpx;

	&-goods {
		padding: 0 20rpx 0 40rpx;
		overflow: hidden;
		background-color: #fff;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;

		.a {
			width: 145rpx;
			height: 135rpx;
			margin-right: 20rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}

		.b {
			flex: 1;
			overflow: hidden;

			.l {
				white-space: nowrap;
				text-overflow: ellipsis;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #262626;
				overflow: hidden;
			}

			.r {
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #838383;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;

				text {
					display: block;
					width: 104rpx;
					line-height: 60rpx;
					background: #FFFFFF;
					border-radius: 4rpx;
					text-align: center;
					border: 1px solid #CACACA;
					font-size: 28rpx;
					color: #555;
				}
			}
		}
	}

	&-info {
		margin-top: 20rpx;
		background-color: #fff;
		overflow: hidden;

		.a {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 30rpx 20rpx 60rpx;
			box-sizing: border-box;
			border-bottom: 1px solid #F3F3F3;
			font-size: 32rpx;
			font-weight: 500;
			color: #262626;

			text {
				color: #006AFF;
				padding-right: 40rpx;
				position: relative;

				&::after {
					content: "";
					width: 16rpx;
					height: 16rpx;
					border-top: 1px solid #006AFF;
					border-left: 1px solid #006AFF;
					position: absolute;
					right: 0;
					top: 14rpx;
					z-index: 1;
					transform: rotate(135deg);
				}
			}
		}

		.b {
			padding: 0 30rpx 0 45rpx;
			box-sizing: border-box;
			overflow: hidden;

			.item {
				padding: 30rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				border-top: 1px solid #F3F3F3;
				font-size: 32rpx;
				font-weight: 500;
				color: #262626;
				overflow: hidden;

				&:first-child {
					border-top-color: #fff;
				}

				.l {
					width: 180rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: #656565;
				}

				.r {
					flex: 1;
					display: flex;
					align-items: center;
					font-size: 32rpx;
					font-weight: 400;
					color: #262626;

					.li {
						width: 150rpx;
						height: 78rpx;
						background: #F3F3F3;
						border-radius: 8rpx;
						text-align: center;
						line-height: 78rpx;
						font-size: 32rpx;
						font-weight: 400;
						color: #262626;
						margin-right: 12rpx;

						&-on {
							background: #FDF4F4;
							background: url(/static/invoice/select-active.png) center top no-repeat;
							background-size: contain;
						}
					}

					input {
						flex: 1;
					}

					picker {
						flex: 1;

						.tt {
							width: 180rpx;
							position: relative;
							color: #4894FF;
							text-align: right;

							&::after {
								content: "";
								width: 16rpx;
								height: 16rpx;
								border-top: 1px solid #4894FF;
								border-left: 1px solid #4894FF;
								position: absolute;
								right: -50rpx;
								top: 14rpx;
								z-index: 1;
								transform: rotate(135deg);
							}
						}

						.lx {
							width: 100%;
							position: relative;

							&::after {
								content: "";
								width: 16rpx;
								height: 16rpx;
								border-top: 1px solid #B8B8B8;
								border-left: 1px solid #B8B8B8;
								position: absolute;
								right: 20rpx;
								top: 14rpx;
								z-index: 1;
								transform: rotate(135deg);
							}
						}
					}
				}
			}

		}
	}

	&-fd {
		height: 104rpx;
		background: #F55349;
		border-radius: 8rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	&-company {
		overflow: hidden;

		.a {
			padding: 35rpx 50rpx;
			font-size: 32rpx;
			font-weight: 400;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #262626;

			text {
				width: 70rpx;
				color: #888888;
				margin-right: 30rpx;
				position: relative;

				&::after {
					content: "";
					width: 16rpx;
					height: 16rpx;
					border-top: 1px solid #888888;
					border-left: 1px solid #888888;
					position: absolute;
					right: -30rpx;
					top: 10rpx;
					z-index: 1;
					transform: rotate(225deg);
				}

				&.on {
					&::after {
						content: "";
						width: 16rpx;
						height: 16rpx;
						border-top: 1px solid #888888;
						border-left: 1px solid #888888;
						position: absolute;
						right: -30rpx;
						top: 20rpx;
						z-index: 1;
						transform: rotate(45deg);
					}
				}
			}
		}

		.b {
			padding: 0 30rpx 0 45rpx;
			box-sizing: border-box;
			background-color: #fff;
			overflow: hidden;

			.item {
				padding: 30rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				border-top: 1px solid #F3F3F3;
				font-size: 32rpx;
				font-weight: 500;
				color: #262626;
				overflow: hidden;

				&:first-child {
					border-top-color: #fff;
				}

				.l {
					width: 180rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: #656565;
				}

				.r {
					flex: 1;
					display: flex;
					align-items: center;
					font-size: 32rpx;
					font-weight: 400;
					color: #262626;

					input {
						flex: 1;
					}
				}
			}

		}
	}
}
</style>