yanzong_qianduan/pages/invoice/indexset.vue

<template>
	<view class="invoice-box">
		<view class="bill-top">
			<view class="top-name" :class="tabIndex == 0 ? 'active' : ''" @click="onTabClick(0)">发票记录
				<view v-if="tabIndex == 0" class="active-border"></view>
			</view>
			<view class="top-name" :class="tabIndex == 1 ? 'active' : ''" @click="onTabClick(1)">发票抬头
				<view v-if="tabIndex == 1" class="active-border"></view>
			</view>
		</view>
		<view v-if="tabIndex == 0">
			<view class="empty" v-if="recordList.length == 0">
				<u-empty text="暂无信息" mode="list"></u-empty>
			</view>
			<view class="bill-record" v-else>
				<view class="bill-item" v-for="(item, index) in recordList" :key="index">
					<view class="bill-item-left">
						<view class="commpany-name">飞科网络科技有限公司</view>
						<view class="bill-price">
							<text>¥</text>150
						</view>
					</view>
					<text class="bill-time">2023-12-31</text>
				</view>
			</view>

		</view>
		<!-- 发票抬头 -->
		<view v-if="tabIndex == 1">
			<view class="invoice-header">
				<view class="bill-header-item" @click="onAddInvoice" v-for="(item, index) in recordList" :key="index">
					<view class="bill-header-left">
						<view class="header-type">普通发票抬头-个人</view>
						<view class="bill-header">
							王大幅
						</view>
					</view>
					<u-icon name="edit-pen" size="30" color="#838383"></u-icon>
				</view>
			</view>
			<view class="invoice-btn-box">
				<view class="invoice-btn" @click="onAddInvoice">
					<text>+</text>添加发票抬头
				</view>
			</view>
		</view>


	</view>
</template>

<script>
import Empty from '@/components/empty'
import * as InvoiceApi from '@/api/invoice'
export default {
	data() {
		return {
			tabIndex: 0,
			invoicList: [],
			recordList: [1, 2]
		};
	},
	onLoad() {
	},
	methods: {
		onTabClick(index) {
			this.tabIndex = index
		},
		onEdit(item) {
			uni.navigateTo({
				url: "/pages/invoice/editset?detail=" + JSON.stringify(item) + '&source=' + 4
			})
		},
		onAddInvoice() {
			uni.navigateTo({
				url: "/pages/invoice/editset?source=" + 3
			})
		},
	}
}
</script> 
<style lang="scss" scoped>
.invoice-btn-box {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 30rpx 44rpx;
	z-index: 8;
	background: #F5F5F5;

	.invoice-btn {
		height: 104rpx; 
		background: #F55349;
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 8rpx;

		text {
			font-size: 50rpx;
			margin-right: 10rpx;
		}
	}
}

.invoice-header {
	background: #fff;

	.bill-header-item {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		padding: 54rpx 46rpx 120rpx 64rpx;
	}

	.header-type {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 18rpx;
	}

	.bill-header {
		font-size: 32rpx;
		color: #AEAEAE;
	}

}

.bill-top {
	margin-top: 6rpx;
	margin-bottom: 4rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	padding: 0 138rpx;

	.top-name {
		width: 128rpx;
		font-size: 32rpx;
		height: 126rpx;
		font-weight: bold;
		color: #6F6F6F;
		display: flex;
		align-items: center;
		position: relative;

		.active-border {
			width: 72rpx;
			height: 8rpx;
			background: #FF2525;
			border-radius: 34rpx;
			position: absolute;
			bottom: 0;
			left: 26rpx;
		}

	}

	.active {
		color: #262626;
	}
}

.bill-item {
	background: #fff;
	margin-bottom: 10rpx;
	display: flex;
	padding: 44rpx 34rpx 40rpx 64rpx;
	justify-content: space-between;
	align-items: flex-end;

	.commpany-name {
		font-size: 32rpx;
		color: #454545;
		margin-bottom: 34rpx;
	}

	.bill-price {
		font-size: 40rpx;
		color: #F21A1C;
		font-weight: bold;

		text {
			font-size: 24rpx;
		}
	}

	.bill-time {
		display: inline-block;
		width: 180rpx;
		font-size: 32rpx;
		color: #AEAEAE;
	}
}

.empty {
	width: 100%;
	display: flex;
	padding-top: 180rpx;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	// height: calc(100vh - 152rpx); 
}
</style>