caimei-applets-mcare/pages/user/order/components/invoiceTent.vue

<template name="invoice">
	<view class="invoice-template">
		<!-- 发票信息 -->
		<view class="invoice-title" @tap.stop="hanldOperationConfim">
			<text class="text">发票信息:</text> <text class="iconfont icon-xiangyou"></text>
		</view>
		<view class="invoice-text">
			<text>{{ invoiceText }}</text>
		</view>
		<!--底部选择模态层弹窗组件 -->
		<view class="popup spec" :class="specClass" @touchmove.stop.prevent="discard" @tap="choiceaInvoiceConfim">
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer" @tap.stop="discard">
				<view class="content clearfix">
					<view class="invoice-ltitle">发票类型</view>
					<view class="invoice-radio">
						<radio-group class="row-group" @change="radioChange">
							<label class="row-input" v-for="(item, index) in invoiceTypeList" :key="item.value">
								<radio
									class="row-radio"
									:value="item.value"
									:checked="index === current"
									color="#F3B574"
								/>
								<view class="row-text">{{ item.name }}</view>
							</label>
						</radio-group>
					</view>
					<view class="invoice-main from" v-if="invoiceType == '2'">
						<view class="invoice-from">
							<view class="label">单位名称:</view>
							<input
								class="form-input"
								type="text"
								v-model="invoiceData.invoiceTitle"
								placeholder="请填写单位信息(必填)"
								maxlength="24"
							/>
						</view>
						<view class="invoice-from">
							<view class="label">纳税人识别号:</view>
							<input
								class="form-input"
								type="text"
								v-model="invoiceData.corporationTaxNum"
								placeholder="请填写纳税人识别号(必填)"
								maxlength="24"
							/>
						</view>
						<view class="invoice-from">
							<view class="label">注册地址:</view>
							<input
								class="form-input"
								type="text"
								v-model="invoiceData.registeredAddress"
								placeholder="请填写单位注册地址(必填)"
								maxlength="100"
							/>
						</view>
						<view class="invoice-from">
							<view class="label">注册电话:</view>
							<input
								class="form-input"
								type="text"
								v-model="invoiceData.registeredPhone"
								placeholder="请填写注册电话(必填)"
								maxlength="15"
							/>
						</view>
						<view class="invoice-from">
							<view class="label">开户银行:</view>
							<input
								class="form-input"
								type="text"
								v-model="invoiceData.openBank"
								placeholder="请填写开户银行(必填)"
								maxlength="30"
							/>
						</view>
						<view class="invoice-from">
							<view class="label">银行账号:</view>
							<input
								class="form-input"
								type="text"
								v-model="invoiceData.bankAccountNo"
								placeholder="请填写银行账号(必填)"
								maxlength="30"
							/>
						</view>
					</view>
					<view class="invoice-main" v-if="invoiceType == '3'">
						<view class="invoice-ltitle">发票内容</view>
						<view class="invoice-group tit">
							<checkbox-group class="row-group" @change="checkboxChange">
								<view class="text">商品明细</view>
								<checkbox
									class="row-radio"
									value="明细"
									:checked="inventoryChecked"
									color="#F3B574"
								></checkbox>
							</checkbox-group>
						</view>
						<view class="invoice-ltitle">发票抬头</view>
						<view class="invoice-group tit">
							<radio-group class="row-group radio" @change="radioChangeTitle">
								<label class="row-input" v-for="(item, index) in invoiceTitleList" :key="item.value">
									<radio
										class="row-radio"
										:value="item.value"
										:checked="index === titleCurrent"
										color="#F3B574"
									/>
									<view class="row-text">{{ item.name }}</view>
								</label>
							</radio-group>
						</view>
						<view class="invoice-group from">
							<view class="group-from" v-if="peopleInvoiceData.invoiceTitleType == '0'">
								<input
									class="form-input"
									type="text"
									v-model="peopleInvoiceData.invoiceTitle"
									placeholder="请填写个人抬头"
									maxlength="20"
								/>
							</view>
							<view class="group-from" v-if="peopleInvoiceData.invoiceTitleType == '1'">
								<input
									class="form-input"
									type="text"
									v-model="peopleInvoiceData.invoiceTitle"
									placeholder="请填写公司抬头"
									maxlength="20"
								/>
							</view>
							<view class="group-from" v-if="peopleInvoiceData.invoiceTitleType == '1'">
								<input
									class="form-input"
									type="text"
									v-model="peopleInvoiceData.corporationTaxNum"
									placeholder="请填写纳税人识别号"
									maxlength="20"
								/>
							</view>
						</view>
					</view>
					<view class="invoice-main" v-if="invoiceType == '1'">
						<view class="invoice-none">不开具发票信息</view>
					</view>
				</view>
				<view class="btn"> <view class="button add" @click="choiceaInvoiceConfim">完成</view> </view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'invoice',
	data() {
		return {
			invoiceText: '不要发票',
			specClass: '', //规格弹窗css类，控制开关动画
			invoiceType: '1', //发票类型
			current: 0,
			titleCurrent: 0,
			inventoryChecked: false,
			invoiceTypeList: [{ value: '1', name: '不要发票' }, { value: '2', name: '要发票' }],
			invoiceTitleList: [{ value: '0', name: '个人' }, { value: '1', name: '公司' }],
			peopleInvoiceData: {
				invoiceTitle: '', //单位名称
				invoiceContent: '', //商品明细
				corporationTaxNum: '', //纳税人识别号
				invoiceTitleType: '0' //发票抬头类型 1企业 0个人
			},
			invoiceData: {
				invoiceTitle: '', //单位名称
				corporationTaxNum: '', //纳税人识别号
				registeredAddress: '', //单位地址
				registeredPhone: '', //注册电话
				openBank: '', //开户银行
				bankAccountNo: '' //银行账号
			}
		}
	},
	created() {
		// this.initData(this.invoiceDatas)
	},
	computed: {},
	methods: {
		getUseFindInvoice() {
			//获取发票信息
			this.$api.getStorage().then(resolve => {
				this.OrderService.GetFindInvoice({ userId: resolve.userId }).then(response => {
					if (response.data == null) {
						this.invoiceData = Object.assign(this.invoiceData, '', { type: 0 })
					} else {
						this.invoiceData = response.data
					}
				})
			})
		},
		updateInvoiceFn() {
			//保存发票信息
			this.$api.getStorage().then(resolve => {
				console.log(resolve.userId)
				this.OrderService.UpdateInvoice(Object.assign({ userId: resolve.userId }, this.invoiceData)).then(
					response => {}
				)
			})
		},
		choiceaInvoiceConfim() {
			switch (this.invoiceType) {
				case '1':
					this.choiceaInvoiceThree()
					this.invoiceText = '不要发票'
					break
				// case '2':
				// 	this.choiceaInvoiceTwo()
				// 	this.invoiceText = this.peopleInvoiceData.invoiceTitle
				// 	break;
				case '2':
					this.choiceaInvoiceFirst()
					this.invoiceText = this.invoiceData.invoiceTitle
					break
				default:
					this.choiceaInvoiceThree()
					this.invoiceText = '不要发票'
			}
		},
		choiceaInvoiceFirst() {
			//增值税发票
			if (this.invoiceData.invoiceTitle == '') {
				this.$util.msg('请输入单位名称', 2000)
				return
			}
			if (this.invoiceData.corporationTaxNum == '') {
				this.$util.msg('请输入纳税人识别号', 2000)
				return
			}
			if (this.invoiceData.registeredAddress == '') {
				this.$util.msg('请输入单位地址', 2000)
				return
			}
			if (this.invoiceData.registeredPhone == '') {
				this.$util.msg('请输入注册电话', 2000)
				return
			}
			if (this.invoiceData.openBank == '') {
				this.$util.msg('请输入开户银行', 2000)
				return
			}
			if (this.invoiceData.bankAccountNo == '') {
				this.$util.msg('请输入银行账号', 2000)
				return
			}
			this.updateInvoiceFn()
			this.$emit('handleChoiceaInvoice', Object.assign(this.invoiceData, '', { type: 2 }))
			this.hideSpec()
		},
		choiceaInvoiceTwo() {
			//取消普通发票.(可删除)
			switch (this.peopleInvoiceData.invoiceTitleType) {
				case '0':
					if (this.peopleInvoiceData.invoiceContent == '') {
						this.$util.msg('请选择商品明细', 2000)
						return
					}
					if (this.peopleInvoiceData.invoiceTitle == '') {
						this.$util.msg('请输入个人抬头', 2000)
						return
					}
					break
				case '1':
					if (this.peopleInvoiceData.invoiceContent == '') {
						this.$util.msg('请选择商品明细', 2000)
						return
					}
					if (this.peopleInvoiceData.invoiceTitle == '') {
						this.$util.msg('请输入公司抬头', 2000)
						return
					}
					if (this.peopleInvoiceData.corporationTaxNum == '') {
						this.$util.msg('请输入纳税人识别号', 2000)
						return
					}
					break
			}
			this.$emit('handleChoiceaInvoice', Object.assign(this.peopleInvoiceData, '', { type: 1 }))
			this.hideSpec()
		},
		choiceaInvoiceThree() {
			//不要发票
			this.invoiceData = {}
			this.$emit('handleChoiceaInvoice', Object.assign(this.invoiceData, '', { type: 0 }))
			this.hideSpec()
		},
		hideSpec() {
			//关闭弹窗
			this.specClass = 'hide'
			setTimeout(() => {
				this.specClass = 'none'
			}, 200)
		},
		hanldOperationConfim() {
			//显示发票弹窗
			this.specClass = 'show'
		},
		radioChange(e) {
			this.invoiceType = e.target.value
			for (let i = 0; i < this.invoiceTypeList.length; i++) {
				if (this.invoiceTypeList[i].value === this.invoiceType) {
					this.current = i
					break
				}
			}
			switch (this.invoiceType) {
				case '2':
					this.getUseFindInvoice()
					break
				//取消普通发票.(可删除)
				// case '3':
				// 	this.peopleInvoiceData.invoiceTitleType = "0"
				// 	this.titleCurrent = 0
				// 	break;
			}
		},
		radioChangeTitle(e) {
			this.peopleInvoiceData.invoiceTitleType = e.target.value
			for (let i = 0; i < this.invoiceTitleList.length; i++) {
				if (this.invoiceTitleList[i].value === this.peopleInvoiceData.invoiceTitleType) {
					this.titleCurrent = i
					break
				}
			}
			switch (this.peopleInvoiceData.invoiceTitleType) {
				case '1':
					this.inventoryChecked = false
					this.peopleInvoiceData.invoiceTitle = ''
					this.peopleInvoiceData.invoiceContent = ''
					break
			}
		},
		checkboxChange(e) {
			this.inventoryChecked = !this.inventoryChecked
			this.peopleInvoiceData.invoiceContent = e.detail.value[0]
		},
		inputBankNum(val) {
			if (/\S{5}/.test(val)) {
				this.invoiceData.bankAccountNo = val.replace(/\s/g, '').replace(/(.{4})/g, '$1 ')
			}
		},
		discard() {
			//丢弃
		}
	}
}
</script>

<style lang="scss">
.invoice-template {
	width: 100%;
	height: auto;
	background: #ffffff;
	float: left;
	margin-top: 24rpx;
	.invoice-title {
		width: 702rpx;
		padding: 0 24rpx;
		height: 88rpx;
		line-height: 88rpx;
		position: relative;
		border-bottom: 1px solid #ebebeb;
		.text {
			font-size: $font-size-28;
			color: $text-color;
		}
		.iconfont {
			width: 50rpx;
			height: 88rpx;
			line-height: 88rpx;
			color: #999999;
			display: block;
			position: absolute;
			right: 0;
			top: 0;
		}
	}
	.invoice-text {
		width: 702rpx;
		padding: 0 24rpx;
		font-size: $font-size-24;
		color: #666666;
		line-height: 60rpx;
	}
	.invoice-ltitle {
		width: 100%;
		line-height: 60rpx;
		height: 60rpx;
		font-size: $font-size-28;
		color: #333333;
	}
	.invoice-radio {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		display: flex;
		border-bottom: 1px solid #ebebeb;
		.row-group {
			flex: 1;
			display: flex;
		}
		.row-input {
			flex: 1;
			height: 88rpx;
			line-height: 88rpx;
		}
		.row-radio {
			float: left;
			transform: scale(0.6);
		}
		.row-text {
			font-size: $font-size-24;
			color: $text-color;
		}
	}
	.invoice-main {
		width: 100%;
		height: auto;
		margin-top: 30rpx;
		&.from {
			padding-bottom: 40rpx;
		}
		.invoice-none {
			line-height: 60rpx;
			height: 60rpx;
			font-size: $font-size-24;
			color: #666666;
			text-align: center;
		}
		.invoice-from {
			width: 662rpx;
			height: 40rpx;
			padding: 20rpx;
			line-height: 40rpx;
			align-items: flex-start;
			font-size: $font-size-28;
			color: $text-color;
			background: #f7f7f7;
			border-radius: 14rpx;
			margin-bottom: 20rpx;
			.label {
				height: 40rpx;
				line-height: 40rpx;
				float: left;
			}
			.form-input {
				height: 40rpx;
				line-height: 40rpx;
				flex-grow: 1;
				padding-left: 20rpx;
			}
		}
		.invoice-group {
			width: 100%;
			height: 88rpx;
			display: flex;
			border-bottom: 1px solid #ebebeb;
			&.tit {
				margin-bottom: 30rpx;
			}
			&.from {
				margin-bottom: 30rpx;
				border-bottom: 1px solid #ffffff;
				flex-direction: row;
				display: block;
				.group-from {
					flex: 1;
					height: 40rpx;
					padding: 20rpx;
					line-height: 40rpx;
					align-items: flex-start;
					font-size: $font-size-24;
					color: $text-color;
					background: #f7f7f7;
					border-radius: 14rpx;
					margin-bottom: 20rpx;
					.form-input {
						height: 40rpx;
						line-height: 40rpx;
						flex-grow: 1;
					}
				}
			}
			.row-group {
				line-height: 88rpx;
				flex: 1;
				.text {
					font-size: $font-size-24;
					color: $text-color;
					line-height: 88rpx;
					float: left;
				}
				.row-radio {
					float: right;
					transform: scale(0.8);
					border-radius: 50%;
				}
				&.radio {
					display: flex;
					.row-input {
						flex: 1;
						height: 88rpx;
						line-height: 88rpx;
					}
					.row-radio {
						float: left;
						transform: scale(0.6);
					}
					.row-text {
						font-size: $font-size-24;
						color: $text-color;
					}
				}
			}
		}
	}
}
/* 加入购物模态层*/
@keyframes showPopup {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes hidePopup {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes showLayer {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-100%);
	}
}
@keyframes hideLayer {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes showAmnation {
	0% {
		top: -12rpx;
		opacity: 0;
	}
	50% {
		top: -60rpx;
		opacity: 1;
	}
	100% {
		top: -100rpx;
		opacity: 0;
	}
}
@keyframes hideAmnation {
	0% {
		top: -100rpx;
		opacity: 0;
	}
	100% {
		top: -12rpx;
		opacity: 0;
	}
}
.popup {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	display: none;
	.mask {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 21;
		background-color: rgba(0, 0, 0, 0.6);
	}
	.layer {
		position: absolute;
		z-index: 22;
		bottom: -1010rpx;
		width: 702rpx;
		padding: 24rpx 24rpx 65rpx 24rpx;
		height: 920rpx;
		border-radius: 20rpx 20rpx 0 0;
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
		.content {
			width: 100%;
		}
		.btn {
			width: 100%;
			height: 88rpx;
			display: flex;
			.button {
				width: 702rpx;
				height: 88rpx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: $font-size-28;
				border-radius: 44rpx;
				background: $btn-confirm;
			}
		}
	}

	&.show {
		display: block;
		.mask {
			animation: showPopup 0.2s linear both;
		}
		.layer {
			animation: showLayer 0.2s linear both;
		}
	}
	&.hide {
		display: block;
		.mask {
			animation: hidePopup 0.2s linear both;
		}

		.layer {
			animation: hideLayer 0.2s linear both;
		}
	}
	&.none {
		display: none;
	}
	&.service {
		.row {
			margin: 30upx 0;
			.title {
				font-size: 30upx;
				margin: 10upx 0;
			}
			.description {
				font-size: 28upx;
				color: #999;
			}
		}
	}
	.layer-smimg {
		width: 114rpx;
		height: 114rpx;
		float: left;
		border-radius: 10rpx;
		margin-right: 24rpx;
		image {
			width: 114rpx;
			height: 114rpx;
			border-radius: 10rpx;
		}
	}
	.layer-nunbox {
		justify-content: space-between;
		align-items: center;
		width: 536rpx;
		height: 88rpx;
		padding: 13rpx 0 0 0;
		float: left;
		.layer-nunbox-t {
			width: 100%;
			height: 44rpx;
			position: relative;
			display: flex;
			.layer-nunbox-text {
				line-height: 44rpx;
				font-size: $font-size-28;
			}
			.number-box {
				display: flex;
				justify-content: center;
				align-items: center;
				.iconfont {
					font-size: $font-size-32;
					padding: 0 18rpx;
					font-size: $text-color;
				}
				.btn-input {
					width: 62rpx;
					height: 48rpx;
					line-height: 48rpx;
					background: #f8f8f8;
					border-radius: 4rpx;
					text-align: center;
					font-size: $font-size-28;
				}
			}
			.product-step {
				position: absolute;
				left: 45rpx;
				bottom: 0;
				height: 44rpx;
				background: #ffffff;
			}
		}
		.layer-nunbox-b {
			width: 100%;
			height: 44rpx;
			margin-top: 13rpx;
		}
		.text {
			line-height: 44rpx;
			font-size: $font-size-28;
			.p {
				color: #ff2a2a;
			}
			.p:first-child {
				margin-left: 30rpx;
			}
			.p.sm {
				font-size: $font-size-24;
			}
		}
	}
}
</style>