caimei-applets-mcare/pages/user/order/components/cm-invice-popup.vue

<template name="cm-parameter">
	<view class="invoice-template">
		<!-- 发票信息 -->
		<view class="invoice-title" @tap.stop="handleShowPopup">
			<text class="text">发票信息:</text> <text class="invoice-text">{{ invoiceText }}</text>
			<text class="iconfont icon-xiangyou"></text>
		</view>
		<tui-bottom-popup :radius="true" :show="popupShow" @close="hidePopup">
			<view class="tui-popup-box clearfix">
				<view class="title">发票信息</view>
				<view class="tui-popup-close" @click="hidePopup">
					<text class="iconfont icon-iconfontguanbi"></text>
				</view>
				<view class="tui-popup-main">
					<view class="popup-form">
						<text
							class="radio"
							v-for="(invoice, index) in invoiceType"
							:key="index"
							@click="handleTnvoiceType(invoice.type, index)"
							:class="invoiceTypeIndex === index ? 'active' : ''"
						>
							{{ invoice.name }}
						</text>
					</view>
					<view class="popup-form" v-if="invoiceTypeIndex === 1">
						<view class="label">抬头类型：</view>
						<text
							class="radio"
							v-for="(title, index) in titleType"
							:key="index"
							@click="handleTitleType(title.type, index)"
							:class="titleIndex === index ? 'active' : ''"
						>
							{{ title.name }}
						</text>
					</view>
					<view class="popup-form" v-if="invoiceTypeIndex > 0">
						<view class="label">发票抬头：</view>
						<input
							class="input"
							type="text"
							v-model="invoiceData.invoiceTitle"
							placeholder="请输入发票抬头"
							maxlength="50"
							cursor-spacing="40"
						/>
					</view>
					<template v-if="invoiceTypeIndex === 2 || titleIndex === 1">
						<view class="popup-form">
							<view class="label">单位税号：</view>
							<input
								class="input"
								type="text"
								v-model="invoiceData.corporationTaxNum"
								placeholder="请输入单位税号"
								maxlength="30"
								cursor-spacing="40"
							/>
						</view>
						<view class="popup-form">
							<view class="label">注册地址：</view>
							<input
								type="text"
								class="input"
								v-model="invoiceData.registeredAddress"
								:placeholder="invoiceTypeIndex === 2 ? '请输入注册地址' : '选填'"
								maxlength="50"
								cursor-spacing="40"
							/>
						</view>
						<view class="popup-form">
							<view class="label">注册电话：</view>
							<input
								type="number"
								class="input"
								v-model="invoiceData.registeredPhone"
								:placeholder="invoiceTypeIndex === 2 ? '请输入注册电话' : '选填'"
								maxlength="11"
								cursor-spacing="40"
							/>
						</view>
						<view class="popup-form">
							<view class="label">开户银行：</view>
							<input
								type="text"
								class="input"
								v-model="invoiceData.openBank"
								:placeholder="invoiceTypeIndex === 2 ? '请输入开户银行' : '选填'"
								maxlength="50"
								cursor-spacing="40"
							/>
						</view>
						<view class="popup-form">
							<view class="label">银行账号：</view>
							<input
								type="number"
								class="input"
								v-model="invoiceData.bankAccountNo"
								:placeholder="invoiceTypeIndex === 2 ? '请输入银行账号' : '选填'"
								maxlength="30"
								cursor-spacing="40"
							/>
						</view>
					</template>
				</view>
				<view class="tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
					<view class="tui-modal-flex">
						<button
							class="tui-modal-button"
							:disabled="disabled"
							@click="handleConfirm"
						>
							确定
						</button>
					</view>
				</view>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
export default {
	name: 'cm-prams-popup',
	props: {},
	data() {
		return {
			popupShow: false,
			isIphoneX: this.$store.state.isIphoneX,
			userId:0,
			invoiceTypeIndex: 0,
			titleIndex: 0,
			invoiceType: [
				{
					name: '不开发票',
					type: 0
				},
				{
					name: '普通发票',
					type: 1
				},
				{
					name: '增值税专用发票',
					type: 2
				}
			],
			titleType: [
				{
					name: '个人',
					type: 0
				},
				{
					name: '单位',
					type: 1
				}
			],
			invoiceText: '不开发票',
			invoiceData: {
				type: 0, 		//发票类型 0 不开发票 1 普通发票 2 增值税发票
				headingType: 0, 		//抬头类型 0 个人 1 单位
				invoiceTitle: '', 		//发票抬头
				corporationTaxNum: '',  //单位税号
				registeredAddress: '',  //单位地址
				registeredPhone: '',    //注册电话
				openBank: '', 		    //开户银行
				bankAccountNo: ''       //银行账号
			}
		}
	},
	created() {
		
	},
	computed: {
		
	},
	methods: {
		// 切换发票类型
		handleTnvoiceType(type, index) {
			this.invoiceTypeIndex = index
			this.invoiceData.type = type
			if(this.invoiceTypeIndex === 1){
				this.titleIndex = 0
				this.invoiceData.headingType = 0
			}
		},
		// 切换抬头类型
		handleTitleType(type, index) {
			this.titleIndex = index
			this.invoiceData.headingType = type
		},
		// 显示发票弹窗 查询发票信息
		handleShowPopup(){
			this.getUseFindInvoice()
		},
		// 确认保存发票
		handleConfirm(){
			if(this.invoiceTypeIndex === 0){
				this.invoiceData = {...this.invoiceData , ...{ type : 0 }}
				this.invoiceText = this.setInvoiceText(this.invoiceData)
				this.hidePopup()
			}else{
				this.checkedInput()
			}
		},
		// 校验必填项
		checkedInput(){
			/**
			 *  普通发票 个人 仅校验发票抬头
			 * 	普通发票 单位 校验发票抬头 校验单位税号
			 *  增值税发票 校验全部
			 * */ 
			if(this.invoiceTypeIndex === 1 && this.titleIndex === 0){
				if (!this.invoiceData.invoiceTitle) {
					this.$util.msg('请输入发票抬头', 2000)
					return
				}
			}
			if(this.invoiceTypeIndex === 1 && this.titleIndex === 1){
				if (!this.invoiceData.invoiceTitle) {
					this.$util.msg('请输入发票抬头', 2000)
					return
				}
				if (!this.invoiceData.corporationTaxNum) {
					this.$util.msg('请输入单位税号', 2000)
					return
				}
			}
			if(this.invoiceTypeIndex === 2){
				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()
		},
		//获取发票信息
		async getUseFindInvoice() {
			try {
				this.popupShow = true
				const resolve = await this.$api.getStorage()
				this.userId = resolve.userId
				const res = await this.OrderService.GetFindInvoice({ userId: resolve.userId })
				this.invoiceData = {...this.invoiceData, ...res.data}
				console.log('invoiceData',this.invoiceData)
			} catch (error) {
				console.log('error',error)
			}
		},
		//保存发票信息
		async updateInvoiceFn() {
			try {
				const res = await this.OrderService.updateOrganize({ ...this.invoiceData,...{userId: this.userId }})
				this.invoiceText = this.setInvoiceText(this.invoiceData)
				this.$emit('handleChoiceaInvoice', this.invoiceData)
				this.popupShow = false
			} catch (error) {
				console.log('error',error)
			}
		},
		// 设置发票文案
		setInvoiceText(data){
			const map = {
				0:'个人',
				1:'单位'
			}
			switch (data.type){
				case 0:
					return `不开发票`
					break;
				case 1:
					return `普票-${map[data.headingType]}(${this.nameFilters(data.invoiceTitle)})`
					break;
				case 2:
					return `专票(${this.nameFilters(data.invoiceTitle)})`
					break;
			}
		},
		nameFilters(value) {
			if(value && value.length>10){
				return value.substring(0,10)+"..." 
			}else{
				return value
			}
		},
		hidePopup() {
			this.popupShow = false
		}
	}
}
</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;
		}
		.invoice-text {
			font-size: $font-size-28;
			color: #F85050;
			line-height: 90rpx;
			display: inline-block;
			float: right;
			box-sizing: border-box;
			padding-right: 30rpx;
		}
		.iconfont {
			width: 50rpx;
			height: 88rpx;
			line-height: 88rpx;
			color: #999999;
			display: block;
			position: absolute;
			right: 0;
			top: 0;
		}
	}
}
.tui-popup-box {
	position: relative;
	box-sizing: border-box;
	min-height: 220rpx;
	padding: 24rpx 24rpx 0 24rpx;
	.title {
		font-size: $font-size-34;
		color: $text-color;
		line-height: 88rpx;
		text-align: center;
		float: left;
		width: 100%;
		height: 88rpx;
		font-weight: bold;
	}
	.tui-popup-close {
		width: 90rpx;
		height: 90rpx;
		position: absolute;
		right: 0;
		top: 24rpx;
		line-height: 90rpx;
		text-align: center;
		color: #b2b2b2;
		.icon-iconfontguanbi {
			font-size: $font-size-40;
		}
	}
	.tui-popup-main {
		width: 100%;
		float: left;
		min-height: 400rpx;
		.popup-form {
			width: 100%;
			height: 112rpx;
			box-sizing: border-box;
			padding: 23rpx 0;
			border-bottom: 1px solid #e1e1e1;
			&.none{
				border-bottom: none;
			}
			.label {
				width: 140rpx;
				float: left;
				font-size: $font-size-28;
				line-height: 64rpx;
				color: #666666;
			}
			.radio {
				height: 64rpx;
				padding: 0 28rpx;
				line-height: 64rpx;
				color: #666666;
				text-align: center;
				border-radius: 32rpx;
				margin: 0 8rpx;
				display: inline-block;
				background: #f5f5f5;
				font-size: $font-size-28;
				&.active {
					background: #fff4e6;
					color: #f3b574;
				}
			}
			.input {
				line-height: 64rpx;
				height: 64rpx;
				color: #333333;
				font-size: $font-size-28;
			}
		}
	}
	.tui-popup-btn {
		width: 100%;
		height: auto;
		float: left;
	}
	.tui-modal-flex {
		width: 100%;
		height: 84rpx;
		margin-top: 40rpx;
		display: flex;
		.tui-modal-button {
			flex: 1;
			line-height: 84rpx;
			font-size: $font-size-28;
			text-align: center;
			border-radius: 42rpx;
			padding: 0;
			margin: 0 15rpx;
			box-sizing: border-box;
			background: $btn-confirm;
			color: #ffffff;
			&.disabled {
				background: #e1e1e1;
				border-radius: 42rpx;
			}
		}
	}
}
</style>