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

<template>
	<view>
		<u-navbar title="发票抬头管理"  title-color="#101010" ></u-navbar>
		<!-- 企业单位 -->
		
		<view class="enterprise"  v-for="(item,i) in companyTypes" :key="i" >
			<view class="title">
				企业单位
				
					<image class="img" src="@/assets/img/riFill-building-fill.svg" mode=""></image>
				
			</view>
			<view class="infos">
				<view class="name">
					联通公司
				</view>
				<view class="number">
					91421000706966173Y
				</view>
			</view>
		</view>
		<!-- 非企业 -->
		<view class="nonbusiness" v-for="(item,i) in personTypes" :key="i">
			<view class="title">
				企业单位
				
					<image class="img" src="@/assets/img/riFill-user-2-fill.svg" mode=""></image>
				
			</view>
			<view class="infos">
				<view class="name">
					李广宵 <view class="default">默认</view>
				</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="gotoUrl('/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: {
			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();
					
				})
			},
		}
	}
</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;
			.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>