JP-ChargeTeam51/pages/MyInvoice/issueInvoice.vue

<template>
	<view>
		<ujp-navbar title="开具发票">
			<text class="explain" @click="gotoUrl('pages/article/details?code=KPSM')">开票说明</text>
		</ujp-navbar>
		<view class="invioice-info">
			<p class="title">发票信息</p>
			<u-cell-group>
				<u-cell-item title="发票金额" :arrow="false"> <text style="color:#ff3d00;">{{obj.totalPrice.toFixed(2)}}元</text></u-cell-item>
				<u-cell-item title="抬头类型" :arrow="false">
					<view v-if="!selectObj.title">请选择发票</view>
					<view v-else-if="selectObj.headerType==1">企业单位</view>
					<view v-else-if="selectObj.headerType==2">个人/非企业单位</view>
				</u-cell-item>
				<u-cell-item title="发票抬头" @click="gotoUrl('pages/MyInvoice/invoiceTitleManagement?invoice=1&uuid='+uuid)" :value="selectObj.title?selectObj.title:'请选择发票抬头'"></u-cell-item>
				<u-cell-item title="公司税号" :value="selectObj.title?(selectObj.companyTaxNo?selectObj.companyTaxNo:'--'):'自动读取对应抬头的公司税号'"  :arrow="false"></u-cell-item>
			</u-cell-group>
		</view>
		<!-- 弹窗 -->
		<view class="modal">

			<u-modal v-model="show"  :show-title="false"  @confirm="confirm"
				:show-cancel-button="true" confirm-text="确认开具" cancel-text="返回修改">
				<view class="title">
					发票开具成功后不可撤销
					请您仔细核对开票信息
				</view>
				<view class="infos">
					<view class="item">
						<view class="name">
							发票项目
						</view>
						<view class="content">
							充电费发票
						</view>
					</view>
					<view class="item">
						<view class="name">
							发票抬头
						</view>
						<view class="content">
							{{selectObj.title}}
						</view>
					</view>
					<view class="item">
						<view class="name">
							公司税号
						</view>
						<view class="content">
							{{selectObj.companyTaxNo}}
						</view>
					</view>
					<view class="item">
						<view class="name">
							发票抬头
						</view>
						<view class="content">
							{{obj.totalPrice.toFixed(2)}}元
						</view>
					</view>
					<view class="hint">
						发票开具后，可开票额度将按照实际开票金额相应扣减
					</view>
				</view>


			</u-modal>
		
		</view>

		<u-button class="submit" type="success" @click="open" shape="circle">提交</u-button>
	</view>
</template>

<script>
	import * as API from '@/apis/invoiceApi.js'
	
	export default {
		data() {
			return {
				ids:"",
				uuid:"",
				list: [{
						name: '企业单位',
						disabled: false
					},
					{
						name: '个人/非企业单位',
						disabled: false
					},

				],
				value: '企业单位',
				show: false,
				selectObj:{},
				obj:{},
				
			};
		},
		onShow() {
			this.getInfo()
			
		},
		onLoad(op) {
			
			if(op.ids){
				this.ids=op.ids;
				//this.getInfo()
			}
		},
		
		methods: {
			confirm(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.saveInvoice({
					recordIds:this.ids,
					invoiceTypeId:this.selectObj.id
				}).then((res) => {
					
					
				
					uni.hideLoading()
					uni.redirectTo({
						url:"/pages/MyInvoice/invioceResult"
					})
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getInfo(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.invoiceTypeDefalut({
					recordIds:this.ids
				}).then((res) => {
					uni.hideLoading()
					this.selectObj=res.data.invoiceType
					if(!res.data.invoiceType){
						this.selectObj={}
						this.uuid=new Date().getTime();
					}else{
						
						var obj=this.carhelp.get("issueInvoice");
						if(obj){
							if(obj.uuid==this.uuid){
								if(obj.selectObj.id){
									this.selectObj=obj.selectObj;
								}
								
							}
						}
					}
					this.selectObj.totalPrice=res.data.totalPrice;
					this.obj=res.data
					
					
					this.uuid=new Date().getTime();
					this.carhelp.set("issueInvoice",{
						uuid:this.uuid,
						selectObj:this.selectObj
					})
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},
			open() {
				// uni.previewImage({
				// 	indicator:"number",
				// 	urls:[
				// 		 "http://oss.xiaoxinda.com/smart/mobileBanner/2022/5/28/8ecb861b-e701-446c-b813-9452c2cfc771/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20220528094050.png"
				// 	,"http://oss.xiaoxinda.com/smart/mobileBanner/2022/5/28/de95e339-b72a-4753-b2da-13f0ab233322/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20220528094058.png"

				// 	],
				// 	longPressActions:true
				// })
				if(this.selectObj.id){
					this.show = true;
				}
				else{
					uni.showToast({
						title:"请选择发票"
					})
				}
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.explain {
		position: absolute;
		right: 16px;
		color: rgba(51, 51, 51, 100);
font-size: 12px
	}

	.invioice-info {

		padding: 20px 16px;

		.title {
			font-size: 16px;
			color: #101010;
			margin-bottom: 16px;
		}
	}

	/deep/.u-cell__value {
		text-align: left;
		margin-left: 41px;
		font-size: 16px
	}

	/deep/.u-cell {
		padding: 16px 0;
	}

	.submit {
		width: 91.4%;
		margin: 12px auto;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	// 弹窗
	.modal {
		background-color: #101010;

		.title {

			line-height: 20px;
			padding: 18px 52px;
			background-image: linear-gradient(rgb(0, 217, 115), #00A457);
			color: #fff;
			text-align: center;

		}

		.infos {
			padding: 20px 14px;

			.item {
				line-height: 28px;
				display: flex;
				justify-content: space-between;
				color: #666666;
				font-size: 16px
			}

			.hint {
				color: rgba(238, 49, 56, 100);
				margin-top: 16px;

				font-size: 14px
			}
		}

	}
</style>