great_group/center/invoice.vue

<template>
	<view class="pages">
		<view class="" :style="{height: navHeight+'px' }"></view>
		<view class="navbar-box">
			<u-navbar title="开具发票" :safeAreaInsetTop="true" @leftClick="leftClick" :titleStyle="{color:'#fff'}" leftIconColor="#fff" bgColor="#EF1818"></u-navbar>
		</view>
		<view class="page-wrap">
			<u-tabs
			:list="tabsList" 
			lineColor="#EE0D0D" 
			:current="tabsCurrent"
			:activeStyle="{color:'#EE0D0D','font-weight': '600','font-size':'30rpx'}"
			:inactiveStyle="{color:'#7F7F7F'}"
			itemStyle="width:50%;box-sizing:border-box;padding:24rpx;"
			@click="tabsClick"></u-tabs>
			<view class="block-wrap" style="margin-top: 32rpx;">
				<view class="form-item select-invoice-line" v-if="tabsCurrent===0" @click="selectInvoiceLine">
					<view class="til">
						<text>*</text>申请类型 
					</view>
					<!-- <u--input placeholder="请选择申请类型" readonly border="surround" v-model="invoiceLineName" ></u--input> -->
					<view class="item-value">
						<text>{{invoiceLineName}}</text>
					</view>
				</view>
				 <u-picker :show="showInvoiceLine" :columns="invoiceLineList" keyName="label" :immediateChange="true" @cancel="cancelInvoiceLine" @confirm="confirmInvoiceLine" ></u-picker>
				<view class="form-item">
					<view class="til">
						<text>*</text>抬头名称 
					</view>
					<u--input placeholder="请输入名称" border="surround" v-model="formData.name" ></u--input>
				</view>
				<view class="form-item" v-if="tabsCurrent===0">
					<view class="til">
						<text>*</text>税号 
					</view>
					<u--input placeholder="请输入税号 " border="surround" v-model="formData.creditCode" ></u--input>
				</view>
			</view>
			<view class="block-wrap amount u-flex u-row-between">
				<view class="til">发票金额</view>
				<view class="con">¥{{invoiceInfo.invoiceAmount}}</view>
			</view>
			<view class="block-wrap">
				<view class="form-item">
					<view class="til">
						<text>*</text>电子邮箱  
					</view>
					<u--input placeholder="请输入电子邮箱" border="surround" v-model="formData.email" ></u--input>
				</view>
				<view class="form-item remake">
					<view class="til">
						发票备注  
					</view>
					<u--input placeholder="此内容会回显至电子发票的备注中，请谨慎填写" border="surround" v-model="formData.remark" ></u--input>
				</view>
			</view>
		</view>
		<view class="page-bottom">
			<view class="inner">
				<view class="btn active" v-if="cansubmit" @click="submitorder">提交</view>
				<view class="btn" @click="$u.toast('请完整填写表单')" v-else>提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { systemInfo } from "@/mixin.js";
	export default {
		mixins: [systemInfo], // 使用mixin
		data() {
			return {
				staticUrl:this.$commonConfig.staticUrl,
				orderId:'',
				tabsCurrent:0,
				tabsList:[
					{name:'企业',status:'0'},
					{name:'个人',status:'1'}
				],
				invoiceInfo:{},
				handlerList:[],
				formData:{
					name:'',
					creditCode :'',
					email:'',
					remark:''
				},
				invoiceLine:'',
				showInvoiceLine:false,
				invoiceLineName:'',
				invoiceLineList:[[{label:'数电专票',id:'bs'},{label:'数电普票',id:'pc'}]]
			}
		},
		onShow() {
		},
		onLoad(page) {
			this.orderId = page.id;
			this.invoiceLine = page.invoiceLine;
			this.getSystemInfo();
			this.getInvoiceInfo();

		},
		computed: {
		    // 是否全选
		    cansubmit() {
				if(this.tabsCurrent===0){
					return this.formData.name && this.formData.creditCode && uni.$u.test.email(this.formData.email)&& this.invoiceLineName;
				}else{
					return this.formData.name && uni.$u.test.email(this.formData.email);
				}
		    },
		},
		methods: {
			leftClick(e){
				let pages = getCurrentPages();
				if(pages.length==1){
					uni.$u.route('/pages/index/index')
				}else{
					uni.navigateBack()
				};
			},
			tabsClick(item){
				this.tabsCurrent = item.index;
				// console.log('item',item);
				this.setDefault();
			},
			selectInvoiceLine(){
				this.showInvoiceLine = true;
				console.log('showInvoiceLine');
			},
			getInvoiceInfo(){
				this.$u.api.getInvoiceInfo({orderId:this.orderId}).then(res=>{
					// console.log('res',res);
					this.invoiceInfo = res.data;
					this.handlerList = res.data.handlerList||[];
					this.setDefault();
				}).catch(err=>{
					console.log('getInvoiceInfo',err);
				})
			},
			setDefault(){
				if(this.handlerList.length>0){
					let handlerType1 = this.handlerList.find(handler => handler.handlerType === 1) || {};//个人
					let handlerType2 = this.handlerList.find(handler => handler.handlerType === 2) || {};//企业
					if(this.tabsCurrent===0){//企业
						this.formData.name = handlerType2.name||null;
						this.formData.creditCode = handlerType2.creditCode||null;
						this.formData.email = handlerType2.email||null;
						this.formData.invoiceLine = this.invoiceLine||null;
						this.formData.remark = handlerType2.invoiceRemark||null;
						if(this.formData.invoiceLine=='bs'){
							this.invoiceLineName = '数电专票'
						}else if(this.formData.invoiceLine=='pc'){
							this.invoiceLineName = '数电普票'
						}
					}else{
						this.formData.name = handlerType1.name||null;
						this.formData.email = handlerType1.email||null;
						this.formData.remark = handlerType1.invoiceRemark||null;
					}
				}
			},
			cancelInvoiceLine(){
				this.showInvoiceLine = false;
			},
			confirmInvoiceLine(e){
				this.showInvoiceLine = false;
				console.log('confirmInvoiceLine id',e.value[0].id);
				console.log('confirmInvoiceLine label',e.value[0].label);
				this.formData.invoiceLine = e.value[0].id;
				this.invoiceLineName = e.value[0].label;
			},
			submitorder(){
				let params = {
					orderId:this.orderId,
					invoiceAmount:this.invoiceInfo.invoiceAmount,
					remark:this.formData.remark,
					invoiceHandler:{
						handlerType:this.tabsCurrent===0?2:1,
						name:this.formData.name,
						email:this.formData.email,
						// mobile:this.formData.mobile
					},
					invoiceSource:1,//开票来源;0-小程序  1-团购H5 2-线下
				};
				if(this.tabsCurrent===0){//企业
					params.invoiceHandler.creditCode = this.formData.creditCode;
					params.invoiceLine = this.formData.invoiceLine;
				}
				this.$u.api.submitInvoice(params).then(res=>{
					uni.$u.toast(res.msg)
					// uni.navigateBack()
					setTimeout(()=>{
						uni.redirectTo({
							url: `/center/orderdetails?id=${this.orderId}`
						})
					},1500)
				}).catch(err=>{
					console.log('submitorder',err);
				})
			}

		}
	}
</script>
<style>
	page{background-color: #F7F7F9;}
</style>
<style lang="scss" scoped>
.block-wrap{
	background-color: #fff;
	border-radius: 16rpx;
	padding: 22rpx 32rpx 30rpx;
	margin-bottom: 24rpx;
	.form-item{
		margin-bottom: 22rpx;
		.til{
			font-size: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333;
			margin-bottom: 12rpx;
			text{
				color: #EF0E0E;
			}
		}
		::v-deep .input-placeholder{
			color: #EF0E0E!important;
			font-size: 24rpx;
		}
	}
	&.amount{
		padding: 26rpx 32rpx;
		.til{
			margin-bottom: 0;
		}
		.con{
			font-size: 28rpx;
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: bold;
			color: #EF0E0E;
		}
	}
}
.page-bottom{
	$height:98rpx;
	position: relative;
	z-index: 1001;
	height: $height;
	padding: 24rpx 20rpx;
	.inner{
		position: fixed;
		background-color: transparent;
		height: $height;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 24rpx 20rpx;
		// box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(215,215,215,0.5);
		.btn{
			font-size: 28rpx;
			height: 100%;
			line-height: $height;
			border-radius: 50rpx;
			padding: 0 50rpx;
			background-color: #eee;
			color: #333;
			text-align: center;
			&.active{
				background: linear-gradient(90deg, #FF7979 0%, #ED0000 100%);
				color: #fff;
			}
		}
	}
}
.item-value{
		border: 1px solid rgb(218, 219, 222);
		display: flex;
		align-items: center;
		border-radius: 8rpx;
		height: 38px;
		padding-left: 10px;
	}
</style>