caimei-applets-caimei/components/module/creatOrder/invoiceTent.vue

<template name="invoice">
	<view class="invoice-template">
		 <!-- 发票信息 -->
		<view class="invoice-title" @tap.stop="hanldOperationConfim">
			<text class="text">发票信息:</text>
			<text class="iconfont icon-xiayibu"></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="#E15616"/>
								<view class="row-text">{{item.name}}</view>
							</label>
						</radio-group>
					</view>
					<view class="invoice-main from" v-if="invoiceType == '1'">
						<view class="invoice-from">
							<view class="label">单位名称:</view>
							<input class="form-input" type="text" v-model="invoiceData.invoiceTitle" placeholder="请填写单位信息(必填)" maxlength="20">
						</view>
						<view class="invoice-from">
							<view class="label">纳税人识别号:</view>
							<input class="form-input" type="text" v-model="invoiceData.corporationTaxNum" placeholder="请填写纳税人识别号(必填)" maxlength="20">
						</view>
						<view class="invoice-from">
							<view class="label">注册地址:</view>
							<input class="form-input" type="text" v-model="invoiceData.registeredAddress" placeholder="请填写单位注册地址(必填)" maxlength="30">
						</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="10">
						</view>
						<view class="invoice-from">
							<view class="label">银行账号:</view>
							<input class="form-input" 
								   type="text" 
								   v-model="invoiceData.bankAccountNo" 
								   placeholder="请填写银行账号(必填)" 
								   maxlength="25">
						</view>
					</view>
					<view class="invoice-main" v-if="invoiceType == '2'">
						<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 ? true : false" color="#E15616"></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="#E15616"/>
									<view class="row-text">{{item.name}}</view>
								</label>
							</radio-group>
						</view>
						<view class="invoice-group from">
							<view class="group-from" v-if="invoiceData.invoiceTitleType == '0'">
								<input class="form-input" type="text" v-model="invoiceData.invoiceTitle"   placeholder="请填写个人抬头" maxlength="20">
							</view>
							<view class="group-from" v-if="invoiceData.invoiceTitleType == '1'">
								<input class="form-input" type="text" v-model="invoiceData.invoiceTitle"   placeholder="请填写公司抬头" maxlength="20">
							</view>
							<view class="group-from" v-if="invoiceData.invoiceTitleType == '1'">
								<input class="form-input" type="text" v-model="invoiceData.corporationTaxNum"   placeholder="请填写纳税人识别号" maxlength="20">
							</view>
						</view>
					</view>
					<view class="invoice-main" v-if="invoiceType == '3'">
						<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",
		props:{
			invoiceDatas:{
				type:Object
			}
		},
		data() {
			return{
				invoiceText:'',
				specClass: '',//规格弹窗css类，控制开关动画
				invoiceType:'1',//发票类型
				current:0,
				titleCurrent:0,
				inventoryChecked:false,
				invoiceTypeList:[
					{value:'1',name:'增值税发票'},
					{value:'2',name:'普通发票'},
					{value:'3',name:'不开发票'},
				],
				invoiceTitleList:[
					{value:'0',name:'个人'},
					{value:'1',name:'公司'},
				],
				invoiceData:{
					invoiceContent:'',	 //商品明细
					invoiceTitle:'',	 //单位名称
					corporationTaxNum:'',//纳税人识别号
					registeredAddress: '',//单位地址
					registeredPhone:'',	 //注册电话
					openBank:'',		//开户银行
					bankAccountNo: ''  ,//银行账号
					invoiceTitleType:'0',//发票抬头类型 1企业 0个人
				},
			}
		},
		created(){
			this.initData(this.invoiceDatas)
		},
		computed: {

		},
		methods:{
			initData(res) {
				if(res){
					this.invoiceText = '无发票信息'
				}else{
					this.invoiceData = res
					this.invoiceText = res.invoiceTitle
					this.invoiceData.bankAccountNo = this.$reg.bankRegex(res.bankAccountNo)
				}
			},
			choiceaInvoiceConfim(){
				switch(this.invoiceType){
					case '1':
						this.choiceaInvoiceFirst()
						this.invoiceText = this.invoiceData.invoiceTitle
						break;
					case '2':
						this.choiceaInvoiceTwo()
						this.invoiceText = this.invoiceData.invoiceTitle
						break;
					case '3':
						this.choiceaInvoiceThree()
						this.invoiceText = '不开发票'
						break;	
				}
			},
			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.$emit('handleChoiceaInvoice',Object.assign(this.invoiceData,'',{type:2}))
				this.hideSpec()
			},
			choiceaInvoiceTwo(){//普通发票
				if(this.invoiceData.invoiceContent == ''){
					this.$util.msg('请选择商品明细',2000)
					return
				}
				switch(this.invoiceData.invoiceTitleType){
					case '0':
						if(this.invoiceData.invoiceTitle == ""){
							this.$util.msg('请输入个人抬头',2000)
							return
						}
						break;
					case '1':
						if(this.invoiceData.invoiceTitle == ""){
							this.$util.msg('请输入公司抬头',2000)
							return
						}
						if(this.invoiceData.corporationTaxNum == ""){
							this.$util.msg('请输入纳税人识别号',2000)
							return
						}
						break;
				}
				this.$emit('handleChoiceaInvoice',Object.assign(this.invoiceData,'',{type:1}))
				this.hideSpec()
			},
			choiceaInvoiceThree(){//不开发票
				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;
					}
				}
			},
			radioChangeTitle(e) {
				this.invoiceData.invoiceTitleType = e.target.value;
				for (let i = 0; i < this.invoiceTitleList.length; i++) {
					if (this.invoiceTitleList[i].value === this.invoiceData.invoiceTitleType) {
						this.titleCurrent = i;
						break;
					}
				}
			},
			checkboxChange(e){
				this.invoiceData.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: 40rpx 40rpx 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: 14rpx;
					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 20rpx;
						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>