jp-housekeep-hall/pages/invoiceManagement/InvoiceTitleManagement.vue

<template>
	<view>
		<u-navbar title="发票抬头管理"  title-color="#101010" ></u-navbar>
		<!-- 企业单位 -->
		
		<view class="enterprise" v-show="companyTypes.length"  >
			<view class="title">
				企业单位
				
					<image class="img" src="@/assets/img/riFill-building-fill.svg" mode=""></image>
				
			</view>
			<view class="infos"  v-for="(item,i) in companyTypes" :key="i"   @click="addInfo('/pages/invoiceManagement/addInvoiceTitle?id='+item.id)" >
				<view>
					<view class="name">
						{{item.title}}<view class="default" v-if="item.defaultHeader" >默认</view>
					</view>
					<view class="number">
						{{item.companyTaxNo}}
					</view>
					<view class="number">
						{{item.type=='1'?'增值税专票':'增值税普票'}}
					</view>
				</view>
				<view>
					<u-icon name="edit-pen-fill"  ></u-icon>
					
				</view>
			</view>
		</view>
		<!-- 非企业 -->
		<view class="nonbusiness" v-show="personTypes.length" >
			<view class="title">
				个人/非企业单位
				
					<image class="img" src="@/assets/img/riFill-user-2-fill.svg" mode=""></image>
				
			</view>
			<view class="infos" v-for="(item,i) in personTypes" :key="i"   @click="addInfo('/pages/invoiceManagement/addInvoiceTitle?id='+item.id)" >
				<view>
					<view class="name">
						{{item.title}} <view class="default"  v-if="item.defaultHeader" >默认</view>
					</view>
				</view>
				<view>
					<u-icon name="edit-pen-fill"   ></u-icon>
				</view>
			</view>
		</view>
		
		<u-divider :isnone="companyTypes.length==0&&personTypes.length==0"   nonetext="没有找到相关内容"
			border-color="#CFD2D5">已经到底了</u-divider>
			
		<!-- 底部 -->
		<view class="bottom">
			<button class="add"  @click="addInfo('/pages/invoiceManagement/addInvoiceTitle')" >新增发票抬头</button>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/invoiceApi.js'
	
	export default {
		data() {
			return {
				companyTypes:[],
				personTypes:[],
			}
		},
		onLoad() {
			this.getInvoiceList()
		},
		methods: {
			addInfo(url) {
				var url = url;
				uni.navigateTo({
					url: url,
					events: {
						refreshData: () => {
							this.getInvoiceList()
						}
					}
				})
			},
			getInvoiceList(){
				uni.showLoading({
					mask:true,title:'加载中...'
				})
				API.invoiceTypes().then((response) => {
					uni.hideLoading();
					//this.list=response.data.data;
					this.companyTypes=response.data.companyTypes;
					this.personTypes=response.data.personTypes;
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.enterprise,.nonbusiness{
		border-radius: 8px;
		margin: 24rpx 32rpx;
		background-color: #fff;
		overflow: hidden;
		.title{
			padding: 32rpx;
			background: linear-gradient(90deg, rgba(49,110,207,1) 2%,rgba(20,73,159,1) 100%);
			color: rgba(255,255,255,1);
			font-size: 40rpx;
			position: relative;
			font-weight: 600;
			.img{
				width: 96rpx;
				height: 96rpx;
				position: absolute;
				top: 16rpx;
				right: 16rpx;
			}
		}
		.infos{
			padding: 24rpx 32rpx;
			display: flex;
			    align-items: center;
			    justify-content: space-between;
			.name{
				color: rgba(51,51,51,1);
				font-size: 36rpx;
				display: flex;
				align-items: center;
				.default{
					width: 96rpx;
					height: 48rpx;
					line-height: 48rpx;
					border-radius: 4px;
					background-color: rgba(22,119,255,1);
					color: rgba(255,255,255,1);
					margin-left: 16rpx;
					font-size: 28rpx;
					text-align: center;
				}
			}
			.number{
				color: rgba(119,119,119,1);
				margin-top: 2rpx;
			}
		}
	}
.nonbusiness{
	.title{
		background: linear-gradient(90deg, rgba(0,187,170,1) 2%,rgba(0,161,119,1) 100%);
	}
}
// 底部
.bottom{
	padding: 24rpx 32rpx;
	background-color: rgba(255,255,255,1);
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	.add{
		line-height: 88rpx;
		border-radius: 50px;
		background: linear-gradient(-88.46deg, rgba(34,109,198,1) 2.59%,rgba(9,158,237,1) 97.02%);
		color: rgba(255,255,255,1);
		font-size: 36rpx;
	}
}
</style>