jp-housekeep-electric/pages/businessHall/invoiceManagement/invoiceManagement.vue

<template>
	<view>
		<u-navbar title="发票管理"  title-color="#101010" >
			<view class="slot" slot="right" @click="gotoUrl('/pages/businessHall/invoiceManagement/InvoiceTitleManagement')">
				抬头管理
			</view>
		</u-navbar>
		<!-- 标签 -->
		<view class="tabs">
			<u-tabs :list="list" :is-scroll="false" bar-width="100" :current="current" @change="change"></u-tabs>
		</view>
		<!-- 未开发票 -->
		<view class="not-invoiced" v-if="current==0">
			<view class="invoice-item" v-for="item in 2" >
				<view class="radio">
					<label class="radio">
						<radio value="" /><text></text>
					</label>
				</view>
				<view class="infos">
					<view class="title">
						<view class="text">
							2024年1月扣费发票
						</view>
						<view class="money">
							1000.00元
						</view>
					</view>
					<view class="item">
						<view class="name">
							发票抬头
						</view>
						<view class="value">
							联通公司
						</view>
					</view>
					<view class="item">
						<view class="name">
							申请时间
						</view>
						<view class="value">
							2024-02-07 16:00:00
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 已开发票 -->
		<view class="invoiced" v-if="current==1">
			<view class="invoice-item"  >
				
				<view class="infos">
					<view class="title">
						<view class="text">
							2024年1月扣费发票
						</view>
						<view class="state">
							开票中
						</view>
					</view>
					<view class="item">
						<view class="name">
							发票金额
						</view>
						<view class="value">
							1000.00元
							
						

						</view>
					</view>
					<view class="item">
						<view class="name">
							发票抬头
						</view>
						<view class="value">
							联通公司
							
							
						</view>
					</view>
					<view class="item">
						<view class="name">
							申请时间
						</view>
						<view class="value">
							2024-02-07 16:00:00			
						</view>
					</view>
				</view>
			</view>
			<view class="invoice-item"  >
				
				<view class="infos">
					<view class="title">
						<view class="text">
							2024年1月扣费发票
						</view>
						<view class="state2">
							已开票
						</view>
					</view>
					<view class="item">
						<view class="name">
							发票金额
						</view>
						<view class="value">
							1000.00元
							
						
			
						</view>
					</view>
					<view class="item">
						<view class="name">
							发票抬头
						</view>
						<view class="value">
							联通公司
							
							
						</view>
					</view>
					<view class="item">
						<view class="name">
							申请时间
						</view>
						<view class="value">
							2024-02-07 16:00:00			
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="bottom" v-if="current==0">
			<view class="all">
				<label class="radio">
					<radio value="" /><text></text>
				</label>
			</view>
			<view class="total">
				<view class="money">
					共1000元
				</view>
				<view class="amount">
					1张发票
				</view>
			</view>
			<view class="btn-box">
				<button class="btn">去开票</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '未开发票'
				}, {
					name: '已开发票'
				}],
				current: 0
			}
		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.slot{
		color: rgba(16,16,16,1);
		font-size: 32rpx;
		margin-right: 32rpx;
	}
	// 标签
	.tabs{
		background-color: #fff;
		position: fixed;
		left: 0;
		right: 0;
		top: 88rpx;
		/deep/.u-tabs{
			width: 400rpx;
			margin: 0 auto;
		}
	}
	// 发票
	.not-invoiced,.invoiced{
		margin-top: 96rpx;
	}
	.invoice-item{
		margin: 24rpx;
		padding: 32rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		.infos{
			margin-left: 32rpx;
			flex: 1;
			.title{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 36rpx;
				font-weight: 600;
				.text{
					color: rgba(51,51,51,1);
					
				}
				.money{
					color: rgba(255,61,0,1);
					
				}
				.state{
					color: rgba(255,61,0,1);
					font-size: 36rpx;
				}
				.state2{
					color: rgba(0,185,98,1);
					font-size: 36rpx;
				}
			}
			.item{
				display: flex;
				align-items: center;
				margin-top: 24rpx;
				.name{
					color: rgba(119,119,119,1);
				}
				.value{
					color: rgba(51,51,51,1);
					margin-left: 24rpx;
				}
			}
		}
	}
    // 底部
	.bottom{
		background-color: #fff;
		padding: 28rpx 32rpx;
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		.total{
			margin-left: 110rpx;
			.money{
				color: rgba(22,119,255,1);
				font-size: 36rpx;
			}
			.amount{
				color: #111111;
				text-align: right;
			}
		}
		.btn-box{
			margin-left: auto;
			.btn{
				width: 260rpx;
				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;
				line-height: 80rpx;
			}
		}
	}
   
</style>