JP-ChargeTeam51/pages/MyInvoice/invoiceTitleManagement.vue

<template>
	<view>
		<ujp-navbar title="发票抬头管理"></ujp-navbar>
		<view class="main">
    <view class="item">
    	<view class="title">
    		<img src="@/assets/static/img/riFill-building-fill@1x.png" alt="">企业单位
    	</view>
		<template v-if="companyTypes.length">
			<view class="content" v-for="(item, index) in companyTypes" :key="index"  >
				<view class="itemlist" @click="ckBtn(item)" >
					<p class="text">{{item.title}}<text v-if="item.defaultHeader=='1'" class="default">默认</text></p>
					
					<p class="num">{{item.companyTaxNo}}</p>
				</view>
				<view class="edit" @click="editBtn(item)" >
					<img src="@/assets/static/img/riFill-edit-2-fill@1x.png" alt="">
				</view>
			</view>
		</template>
		
    	<view class="content" v-else >
			<view class="">
				<p class="text">未添加</p>
				<p class="num"></p>
			</view>
			
    	</view>
    </view>
	<view class="item">
		<view class="title">
			<img src="@/assets/static/img/riFill-user-3-fill.svg" alt="">个人/非企业单位
		</view>
		<template v-if="personTypes.length">
			<view class="content name-content"  v-for="(item, index) in personTypes" :key="index"  >
				<view class="itemlist" @click="ckBtn(item)">
					<p class="name">{{item.title}}<text v-if="item.defaultHeader=='1'" class="default">默认</text></p>
				</view>
				<view class="edit"  @click="editBtn(item)" >
					<img src="@/assets/static/img/riFill-edit-2-fill@1x.png" alt="">
				</view>
			</view>
		</template>
		<view class="content " v-else >
			<view class="">
				<p class="text">未添加</p>
				<p class="num"></p>
			</view>
			
		</view>
	</view>
		</view>
		
		<u-button type="success" shape="circle" @click="gotoUrl('pages/MyInvoice/editInvoiceTitle')"  >新增发票抬头</u-button>
	</view>
</template>


<script>
	import * as API from '@/apis/invoiceApi.js'
	
	export default {
		data() {
			return {
				uuid:0,
				invoice: false,//true  开票界面 ，可以点击更换
				personTypes: [],
				companyTypes:[]
			}
		},
		onLoad(op) {
			if(op.uuid){		
				this.uuid=op.uuid
			}
			if(op.invoice){
					this.invoice=true;
			}
		
		},
		onShow() {
			this.getlist();
		},
		methods: {
			editBtn(item){
				var url='pages/MyInvoice/editInvoiceTitle?id='+item.id;
				if(this.invoice){
					url+="&invoice=1"
				}
				this.gotoUrl(url)
			},
			ckBtn(item){
				if(this.invoice){
					
					
						this.carhelp.set("issueInvoice",{
							uuid:this.uuid,
							selectObj:item
						})
						uni.navigateBack({
							
						})
					
					
				}else{
					
					this.gotoUrl('pages/MyInvoice/editInvoiceTitle?id='+item.id)
				}
			},
			getlist() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.invoiceTypes().then((res) => {
					uni.hideLoading()					
					this.companyTypes = res.data.companyTypes;
					this.personTypes= res.data.personTypes;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}	
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.flex{
		display: flex;
	}
	.main{
		.item{
			margin-bottom: 12px;
		}
		.title{
			line-height: 44px;
			color: #101010;
			padding: 0 16px;
			img{
				
				vertical-align: middle;
				margin-right: 8px;
			}
		}
		.content{
			display: flex;
			justify-content: space-between;
			padding:16px;
			border: 1px solid rgba(242, 242, 242, 100);
			
			.text{
				font-size: 18px;
				line-height: 18px;
				margin-bottom: 8px;
				color: #101010;
			}
			.num{
				line-height: 16px;
				font-size: 16px;
				color: #666666;
			}
			.itemlist{
				  width: 90%;
				 //  border: 1px #dbcece dashed;
			}
			.edit{
				//border: 1px #dbcece dashed;
				
				    width: 30%;
				    max-width: 35px;
				line-height: 42px;
				img{
					vertical-align: middle;
				}
			}
		}
		.name-content{
			line-height: 49px;
			padding: 0 16px;
		}
		.default{
			width: 48px;
			padding: 3px 10px;
			line-height: 24px;
			border-radius: 4px;
			background-color: rgba(0, 185, 98, 100);
			color: rgba(255, 255, 255, 100);
			font-size: 14px;
			text-align: center;
			margin: auto 8px;
		}
	}
	::v-deep.u-btn{
		width: 91.4%;
		margin: 12px auto;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
</style>