完成发票详情页面设计

pages.json

@@ -208,6 +208,17 @@
 					"titleNView": false
 				}
 			}
+		},
+		{
+			"path" : "pages/invoiceDetail/invoiceDetail",
+			"style" : 
+			{
+				"navigationBarTitleText" : "发票详情",
+				"enablePullDownRefresh": false,
+				"app-plus": {
+					"titleNView": false
+				}
+			}
 		}
 	],
 	"globalStyle": {

pages/InvoiceApplication/InvoiceApplication.vue

@@ -89,7 +89,7 @@
 				</view>
 			</view>
 			<view class="list-box">
-				<view class="list-card-box" v-for="item in list2" :key="item.id">
+				<view class="list-card-box" v-for="item in list2" :key="item.id" @click="onToInvoiceDetail(item)">
 					<view class="main-box">
 						<view class="info-box">
 							<view class="title">
@@ -359,6 +359,11 @@
 			status: 0,
 		},
 	])
+	function onToInvoiceDetail(detail) {
+		uni.navigateTo({
+			url: `/pages/invoiceDetail/invoiceDetail?id=${detail.id}`
+		})
+	}
 	
 	const menuCurrent = ref(0)
 	function onMenuClick(index) {

pages/applyForBilling/applyForBilling.vue

@@ -61,8 +61,8 @@
 						抬头名称
 					</view>
 					<view class="text">
-						<u-form-item prop="titleName">
-							<u-input v-model="formData.form.titleName" type="text" :border="false" placeholder=""/>
+						<u-form-item prop="name">
+							<u-input v-model="formData.form.name" type="text" :border="false" placeholder=""/>
 						</u-form-item>
 					</view>
 				</view>
@@ -145,7 +145,7 @@
 				</view>
 				<view class="card-item-box func" @click="showMore = !showMore">
 					<view class="text">
-						{{ showMore ? '收起' : '展开' }}选项信息 <span class="iconfont icon-chevron-up" :class="{'reversal': !showMore}"></span>
+						{{ showMore ? '收起' : '展开' }}选项信息&nbsp;<span class="iconfont icon-chevron-up" :class="{'reversal': !showMore}"></span>
 					</view>
 				</view>
 			</view>
@@ -169,7 +169,7 @@
 			price: '0.00', // 开票金额
 			type: '全电专票', // 发票类型
 			titleType: '企业单位', // 抬头类型
-			titleName: null, // 抬头名称
+			name: null, // 抬头名称
 			number: null, // 纳税人识别号
 			email: null, // 收票人邮箱
 			tel: null, // 手机号码
@@ -195,7 +195,7 @@
 					trigger: ['change','blur'],
 				}
 			],
-			titleName: [
+			name: [
 				{ 
 					required: true, 
 					message: '请输入抬头名称', 

pages/invoiceDetail/invoiceDetail.vue

@@ -0,0 +1,375 @@
+<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;
+		}
+		.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>

pages/order/order.vue

@@ -284,19 +284,19 @@
 		}
 	
 		.buttom-block {
-			height: 80rpx;
+			height: 100rpx;
 		}
 		.bottom-box {
 			text-align: center;
-			font-size: $uni-font-size-1;
+			font-size: $uni-title-font-size-2;
 			background-color: $uni-bg-color-grey;
 			position: fixed;
 			bottom: 0;
 			width: 100%;
 			.button {
 				width: 100%;
-				height: 80rpx;
-				line-height: 80rpx;
+				height: 100rpx;
+				line-height: 100rpx;
 				color: $uni-color-primary;
 				letter-spacing: 2rpx;
 				border: 1rpx solid #E9E9E9;