menber-center/pages/invoiceDetail/invoiceDetail.vue

<template>
	<view class="container">
		<view class="info-card-box">
			<view class="title-box">
				<view class="title">
					{{info.name}}
				</view>
				<view class="status">
					<view class="text">
						{{info.status === 1 ? '已开票' : '开票中'}}
					</view>
				</view>
			</view>
			<view class="type-box">
				{{info.type}}
			</view>
			<view class="info-box">
				<view class="info-item-box">
					<view class="label">
						抬头类型:
					</view>
					<view class="text">
						{{info.titleType}}
					</view>
				</view>
				<view class="info-item-box">
					<view class="label">
						抬头名称:
					</view>
					<view class="text">
						{{info.name}}
					</view>
				</view>
				<view class="info-item-box">
					<view class="label">
						纳税人识别号:
					</view>
					<view class="text">
						{{info.number}}
					</view>
				</view>
				<view class="info-item-box">
					<view class="label">
						收票人邮箱:
					</view>
					<view class="text">
						{{info.email}}
					</view>
				</view>
				<view class="info-item-box">
					<view class="label">
						手机号码:
					</view>
					<view class="text">
						{{info.tel}}
					</view>
				</view>
				<view class="info-item-box">
					<view class="label">
						发票内容:
					</view>
					<view class="text">
						{{info.content}}
					</view>
				</view>
				<view class="info-item-box">
					<view class="label">
						申请时间:
					</view>
					<view class="text">
						{{info.time}}
					</view>
				</view>
			</view>
			<view class="price-box">
				<view class="text">
					发票金额:&nbsp;￥{{info.price}}元
				</view>
			</view>
		</view>
		<view class="list-card-box">
			<view class="hide-box" v-if="!showMore" @click="showMore = !showMore">
				<view class="label">
					1张发票，含{{info.orderList.length}}个订单
				</view>
				<view class="suffix-box">
					<view class="text">
						查看&nbsp;<span class="iconfont icon-chevron-up" :class="{'reversal': !showMore}"></span>
					</view>
				</view>
			</view>
			<view class="show-box" v-else>
				<u-checkbox-group>
					<view class="list-item-box" v-for="(item, index) in info.orderList" :key="item.id">
						<view class="checkbox-box">
							<u-checkbox 
								@change="onCheckboxChange(item)" 
								v-model="item.checked" 
								:name="item.id"
								shape="circle"
								icon-size="16"
								label-size="16"
							></u-checkbox>
						</view>
						<view class="main-box" @click="onListItemClick(item, index)">
							<view class="title-box">
								{{item.title}}
							</view>
							<view class="content-box">
								<view class="info-box">
									<view class="info-item-box">
										<view class="label">
											订单编号:
										</view>
										<view class="text">
											{{item.number}}
										</view>
									</view>
								</view>
								<view class="price-box">
									<view class="text">
										发票金额:&nbsp;￥{{item.price}}元
									</view>
								</view>
							</view>
						</view>
					</view>
				</u-checkbox-group>
				<view class="list-item-box func" @click="showMore = !showMore">
					<view class="text">
						{{ showMore ? '收起' : '展开'}}&nbsp;<span class="iconfont icon-chevron-up" :class="{'reversal': !showMore}"></span>
					</view>
				</view>
			</view>
		</view>
		<view class="buttom-block"></view>
		<view class="bottom-box">
			<view class="button">
				发送至邮箱
			</view>
			<view class="button">
				申请重开发票
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	
	const id = ref()
	const info = ref({
		name: '广州市XXXXXXXXXXXXXXX公司', // 抬头名称
		type: '全电发票', // 发票类型
		titleType: '企业单位', // 抬头类型
		number: '', // 纳税人识别号
		email: '', // 收票人邮箱
		tel: '', // 手机号码
		content: '', // 发票内容
		time: '', // 申请时间
		price: '29.7', // 发票金额
		status: 1, // 状态
		orderList: [
			{
				id: '01',
				title: '【市场研究】2024年11月广州市中介促成二手住宅市场交易简报',
				number: '123456789987654321',
				time: '2023年11月8日',
				price: '9.9',
				checked: false
			},
			{
				id: '02',
				title: '【市场研究】2024年10月广州市中介促成二手住宅市场交易简报',
				number: '123456789987654321',
				time: '2023年10月8日',
				price: '9.9',
				checked: false
			},
			{
				id: '03',
				title: '【市场研究】2024年9月广州市中介促成二手住宅市场交易简报',
				number: '123456789987654321',
				time: '2023年9月8日',
				price: '9.9',
				checked: false
			},
		]
	})
	const showMore = ref(false)
	
	function onCheckboxChange(val) {}
	// 点击选中
	function onListItemClick(val, index) {
		info.value.orderList[index].checked = !info.value.orderList[index].checked
	}
	
	onLoad((load) => {
		id.value = load.id
	})
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		width: 100vw;
		background-color: $uni-bg-color;
		
		.info-card-box {
			margin: 0 20rpx;
			padding: 20rpx;
			background-color: #F2F2F2;
			border-radius: $uni-card-border-radius;
			margin-bottom: 30rpx;
			.title-box {
				display: flex;
				align-items: center;
				.title {
					width: 80%;
					font-size: $uni-title-font-size-2;
					font-weight: bold;
				}
				.status {
					width: 20%;
					display: flex;
					justify-content: flex-end;
					.text {
						font-size: $uni-font-size-1;
						border-radius: $uni-card-border-radius;
						padding: 3rpx 20rpx;
						background-color: $uni-color-error;
						text-align: center;
						color: $uni-text-color-inverse;
					}
				}
			}
			.type-box {
				line-height: 50rpx;
				font-size: $uni-font-size-2;
				font-weight: bold;
				margin-bottom: 5rpx;
			}
			.info-box {
				.info-item-box {
					display: flex;
					align-items: center;
					font-size: $uni-font-size-2;
					color: $uni-text-color-grey;
					margin-bottom: 10rpx;
					.label {
						width: 20%;
					}
				}
			}
			.price-box {
				font-size: $uni-font-size-1;
				font-weight: bold;
				text-align: right;
				color: $uni-color-error;
			}
		}
		
		.list-card-box {
			margin: 0 20rpx;
			padding: 20rpx;
			background-color: #F2F2F2;
			border-radius: $uni-card-border-radius;
			
			.hide-box {
				width: 100%;
				display: flex;
				font-size: $uni-font-size-1;
				.label {
					width: 70%;
					font-weight: bold;
				}
				.suffix-box {
					width: 30%;
					color: $uni-text-color-grey;
					display: flex;
					justify-content: flex-end;
					.text {
					}
				}
			}
			
			.show-box {
				.list-item-box {
					padding: 10rpx 0;
					border-top: 5rpx solid #E6E6E6;
					display: flex;
					&:first-child {
						border-top: 0rpx;
					}
					.checkbox-box {
						width: 5%;
					}
					.main-box {
						width: 95%;
						.title-box {
							font-size: $uni-title-font-size-3;
							font-weight: bold;
							margin-bottom: 10rpx;
							@include text-overflow()
						}
						.content-box {
							display: flex;
							justify-content: space-between;
							padding-left: 20rpx;
							.info-box {
								width: 60%;
								.info-item-box {
									display: flex;
									font-size: $uni-font-size-3;
									color: $uni-text-color-grey;
									line-height: 30rpx;
									.label {
										width: 80rpx;
									}
								}
							}
							.price-box {
								font-size: $uni-font-size-1;
								font-weight: bold;
								text-align: right;
								color: $uni-color-error;
							}
						}
					}
				}
				.func {
					border-top: 0rpx;
					display: flex;
					justify-content: center;
					align-items: flex-end;
					border-bottom: none;
					color: $uni-text-color-grey;
				}
			}
			
			.reversal {
				display: inline-block;
				transform: rotate(180deg);
			}
		}
	
		.buttom-block {
			height: 100rpx;
			padding-bottom: env(5rpx + safe-area-inset-bottom, 0);
		}
		.bottom-box {
			text-align: center;
			font-size: $uni-title-font-size-2;
			background-color: $uni-bg-color-grey;
			position: fixed;
			bottom: 0;
			width: 100%;
			display: flex;
			.button {
				width: 50%;
				height: 100rpx;
				line-height: 100rpx;
				color: $uni-color-primary;
				letter-spacing: 2rpx;
				border: 1rpx solid #E9E9E9;
				&:active {
					background-color: $uni-bg-color-hover;
				}
				&:last-child {
					color: $uni-color-error;
				}
			}
		}
	}
</style>