menber-center/pages/InvoiceApplication/InvoiceApplication.vue

<template>
	<view class="container">
		<view v-show="menuCurrent === 0">
			<view class="header-box">
				<view class="search-box">
					<u-search
						v-model="searchForm.keyword"
						:clearabled="true"
						bg-color="#E5E5E5"
						:input-style="searchInputStyle"
						placeholder="搜索您想要的内容"
					></u-search>
				</view>
				<view class="tab-box">
					<u-tabs 
						name="label"
						:list="searchType"
						:is-scroll="true"
						v-model="searchForm.type"
						@change="onSearchTypeChange"
						font-size="24"
						:bold="false"
						inactive-color="#000000"
						active-color="#000000"
						:bar-style="{'background-color': '#2979ff'}"
						:gutter="25"
						height="45"
					></u-tabs>
				</view>
			</view>
			<view class="list-box">
				<u-checkbox-group>
					<view class="list-item-box" v-for="(item, index) in list" :key="item.id">
						<view class="checkbox-box">
							<u-checkbox 
								@change="onCheckboxChange(item)" 
								v-model="item.checked" 
								:name="item.id"
								shape="circle"
							></u-checkbox>
						</view>
						<view class="main-box" @click="onListItemClick(item, index)">
							<view class="title-box">
								{{item.title}}
							</view>
							<view class="main-box">
								<view class="info-box">
									<view class="info-item-box">
										<view class="label">
											订单编号:
										</view>
										<view class="text">
											{{item.number}}
										</view>
									</view>
									<view class="info-item-box">
										<view class="label">
											订单时间:
										</view>
										<view class="text">
											{{item.time}}
										</view>
									</view>
								</view>
								<view class="price-box">
									<view class="text" v-if="item.status === 1">
										实付款:&nbsp;￥{{item.price}}元
									</view>
									<view class="button" v-if="item.status === 0">
										已关闭
									</view>
								</view>
							</view>
						</view>
					</view>
				</u-checkbox-group>
			</view>
		</view>
		<view v-show="menuCurrent === 1">
			<view class="header-box">
				<view class="search-box">
					<u-search
						v-model="searchForm2.keyword"
						:clearabled="true"
						bg-color="#E5E5E5"
						:input-style="searchInputStyle"
						placeholder="搜索您想要的内容"
					></u-search>
				</view>
			</view>
			<view class="list-box">
				<view class="list-card-box" v-for="item in list2" :key="item.id">
					<view class="main-box">
						<view class="info-box">
							<view class="title">
								{{item.name}}
							</view>
							<view class="type">
								{{item.type}}
							</view>
							<view class="info">
								<view class="info-item">
									<view class="label">
										发票号码:
									</view>
									<view class="text">
										{{item.number}}
									</view>
								</view>
								<view class="info-item">
									<view class="label">
										申请时间:
									</view>
									<view class="text">
										{{item.time}}
									</view>
								</view>
							</view>
						</view>
						<view class="price-box">
							<view class="text">
								发票金额:&nbsp;￥{{item.price}}元
							</view>
						</view>
					</view>
					<view class="status-box">
						<view class="status-item error">
							{{ item.status ? '已开票' : '开票中' }}
						</view>
						<view :class="['status-item', item.status ? 'primary' : 'info']">
							发送至邮箱
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="function-block" v-if="menuCurrent === 0"></view>
		<view class="menu-block"></view>
		<view class="bottom-box">
			<view class="function-box" v-if="menuCurrent === 0">
				<view class="checkbox-box">
					<u-checkbox
						@change="onAllCheckboxChange" 
						v-model="isAllChecked" 
						name="all"
						shape="circle"
					>
						<text class="text">全选</text>
					</u-checkbox>
				</view>
				<view class="price-box">
					<view class="desc-box" v-if="priceInfo.count > 0">
						已选择{{priceInfo.count}}单
					</view>
					<view class="info-box">
						<view class="label">
							总金额:
						</view>
						<view class="text">
							￥{{priceInfo.price}}元
						</view>
					</view>
				</view>
				<view class="button-box">
					<u-button :disabled="priceInfo.count === 0" class="button" type="error" shape="circle" size="mini" :custom-style="customButtonStyle">申请开票</u-button>
				</view>
			</view>
			<view class="menu-box">
				<view class="menu-item-box" :class="{'is-active': menuCurrent === 0}" @click="onMenuClick(0)">
					<view class="iconfont icon-kaipiao"></view>
					<view class="text">开票</view>
				</view>
				<view class="menu-item-box" :class="{'is-active': menuCurrent === 1}" @click="onMenuClick(1)">
					<view class="iconfont icon-kaipiaojilu"></view>
					<view class="text">开票记录</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	
	const customButtonStyle = {
		height: '40rpx',
		lineHeight: '40rpx',
		padding: '0 30rpx'
	}
	
	const searchInputStyle = {
		backgroundColor: '#E5E5E5'
	}
	const searchType = [
		{
			label: '全部',
			value: 0
		},
		{
			label: '市场研究',
			value: 1
		},
		{
			label: '继续教育',
			value: 2
		},
		{
			label: '会费',
			value: 3
		},
		{
			label: '业务水平认证考试',
			value: 4
		},
	]
	const searchForm = ref({
		keyword: '',
		type: 0
	})
	// 点击选中
	function onListItemClick(val, index) {
		list.value[index].checked = !list.value[index].checked
	}
	// 单独选中
	function onCheckboxChange(val) {
	}
	// 全选变更
	function onAllCheckboxChange(val) {
		list.value.forEach(item => {
			item.checked = val.value
		})
	}
	const priceInfo = computed(() => {
		const selectList = list.value.filter(item => item.checked)
		const sum = selectList.reduce((total, currentValue) => {
			return total + Number(currentValue.price);
		}, 0)
		return {
			count: selectList.length,
			price: sum.toFixed(2)
		}
	})
	
	const list = ref([
		{
			id: '01',
			title: '【市场研究】2024年11月广州市中介促成二手住宅市场交易简报',
			number: '123456789987654321',
			time: '2023年8月8日',
			price: '9.9',
			status: 1,
			checked: false
		},
		{
			id: '02',
			title: '【市场研究】2024年11月广州市中介促成二手住宅市场交易简报',
			number: '123456789987654321',
			time: '2023年8月8日',
			price: '9.9',
			status: 1,
			checked: false
		},
		{
			id: '03',
			title: '【市场研究】2024年11月广州市中介促成二手住宅市场交易简报',
			number: '123456789987654321',
			time: '2023年8月8日',
			price: '9.9',
			status: 1,
			checked: false
		},
		{
			id: '04',
			title: '【市场研究】2024年11月广州市中介促成二手住宅市场交易简报',
			number: '123456789987654321',
			time: '2023年8月8日',
			price: '9.9',
			status: 1,
			checked: false
		},
		{
			id: '05',
			title: '【市场研究】2024年11月广州市中介促成二手住宅市场交易简报',
			number: '123456789987654321',
			time: '2023年8月8日',
			price: '9.9',
			status: 1,
			checked: false
		},
		{
			id: '06',
			title: '【市场研究】2024年11月广州市中介促成二手住宅市场交易简报',
			number: '123456789987654321',
			time: '2023年8月8日',
			price: '9.9',
			status: 1,
			checked: false
		},
		{
			id: '07',
			title: '【市场研究】2024年11月广州市中介促成二手住宅市场交易简报',
			number: '123456789987654321',
			time: '2023年8月8日',
			price: '9.9',
			status: 1,
			checked: false
		},
		{
			id: '08',
			title: '【市场研究】2024年11月广州市中介促成二手住宅市场交易简报',
			number: '123456789987654321',
			time: '2023年8月8日',
			price: '9.9',
			status: 1,
			checked: false
		},
		{
			id: '09',
			title: '【市场研究】2024年10月广州市中介促成二手住宅市场交易简报',
			number: '123456789987654321',
			time: '2023年8月8日',
			price: '9.9',
			status: 1,
			checked: false
		},
	])
	const isAllChecked = ref(false)
	
	const searchForm2 = ref({
		keyword: ''
	})
	const list2 = ref([
		{
			id: '01',
			name: '广州市XXXXXXXXXXX公司',
			type: '全电普票',
			number: '123456789',
			time: '2024年12月1日',
			price: '9.9',
			status: 1,
		},
		{
			id: '02',
			name: '广州市XXXXXXXXXXX公司',
			type: '全电普票',
			number: '123456789',
			time: '2024年12月1日',
			price: '9.9',
			status: 0,
		},
	])
	
	const menuCurrent = ref(0)
	function onMenuClick(index) {
		menuCurrent.value = index
		uni.setNavigationBarTitle({
			title: index ? '开票记录' : '发票申请'
		})
	}
	
	onLoad(() => {
		console.log('onLoad')
	})
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		width: 100vw;
		background-color: $uni-text-color-inverse;
		
		.header-box {
			padding: 0 20rpx;
			background-color: $uni-text-color-inverse;
			@include topMagnet();
		}
		
		.search-box {
			margin-bottom: 20rpx;
			::v-deep(.u-search) {
				background-color: #e5e5e5;
				border-radius: 50rpx;
				
				.u-action {
					width: 18%;
					background-color: $uni-color-primary;
					border-radius: 50rpx;
					color: $uni-text-color-inverse;
					margin-right: 8rpx;
					font-size: 28rpx;
					line-height: 50rpx;
					letter-spacing: 3rpx;
					text-align: center;
				}
			}
		}
		
		.list-box {
			padding: 0 20rpx;
			.list-item-box {
				padding: 20rpx;
				border-bottom: 5rpx solid #E6E6E6;
				display: flex;
				&:active {
					background-color: $uni-bg-color-hover;
				}
				.checkbox-box {
					width: 5%;
				}
				.main-box {
					width: 95%;
					.title-box {
						font-size: $uni-title-font-size-3;
						font-weight: bold;
						margin-bottom: 20rpx;
						@include text-overflow()
					}
					.main-box {
						display: flex;
						justify-content: space-between;
						padding-left: 20rpx;
						.info-box {
							width: 50%;
							.info-item-box {
								display: flex;
								font-size: $uni-font-size-3;
								color: $uni-text-color-grey;
								line-height: 30rpx;
								.label {
									width: 80rpx;
								}
							}
						}
						.price-box {
							display: flex;
							align-items: flex-end;
							text-align: right;
							color: $uni-color-error;
							font-size: $uni-title-font-size-3;
							font-weight: bold;
							.button {
								background-color: #CCCCCC;
								color: $uni-text-color-inverse;
								padding: 6rpx 25rpx;
								border-radius: $uni-card-border-radius;
							}
						}
					}
				}
			}
		
			.list-card-box {
				padding: 20rpx;
				background-color: #F2F2F2;
				border-radius: $uni-card-border-radius;
				margin-bottom: 50rpx;
				.main-box {
					display: flex;
					.info-box {
						width: 60%;
						.title {
							font-size: $uni-title-font-size-2;
							font-weight: bold;
							line-height: 50rpx;
						}
						.type {
							font-size: $uni-font-size-2;
							font-weight: bold;
							margin-bottom: 15rpx;
						}
						.info {
							.info-item {
								display: flex;
								font-size: $uni-font-size-3;
								color: $uni-text-color-grey;
								line-height: 30rpx;
								.label {
									width: 80rpx;
								}
							}
						}
					}
					.price-box {
						width: 40%;
						font-size: $uni-title-font-size-3;
						font-weight: bold;
						color: $uni-color-error;
						text-align: right;
						line-height: 50rpx;
					}
				}
				.status-box {
					display: flex;
					justify-content: flex-end;
					gap: 10rpx;
					.status-item {
						padding: 5rpx 15rpx;
						border-radius: $uni-card-border-radius;
						text-align: center;
						font-size: $uni-font-size-4;
						color: $uni-text-color-inverse;
					}
					.primary {
						background-color: $uni-color-primary;
					}
					.error {
						background-color: $uni-color-error;
					}
					.info {
						background-color: #999999;
					}
				}
			}
		}
	
		.function-block {
			height: 70rpx;
		}
		.menu-block {
			height: 112rpx;
		}
		.bottom-box {
			padding: 5rpx 20rpx;
			padding-left: 40rpx;
			background-color: $uni-bg-color-grey;
			border: 1rpx solid #E9E9E9;
			
			position: fixed;
			bottom: 0;
			width: 100%;
			.function-box {
				display: flex;
				align-items: center;
				height: 70rpx;
				.checkbox-box {
					width: 18%;
					.text {
						font-size: $uni-font-size-1;
						font-weight: bold;
					}
				}
				.price-box {
					width: 60%;
					.desc-box {
						color: $uni-text-color-grey;
						font-size: $uni-font-size-3;
					}
					.info-box {
						display: flex;
						font-size: $uni-font-size-1;
						font-weight: bold;
						gap: 5rpx;
						.text {
							color: $uni-color-error;
						}
					}
				}
				.buttom-box {
					width: 18%;
					display: flex;
					align-items: center;
				}
			}
			.menu-box {
				height: 100rpx;
				display: flex;
				align-items: center;
				.menu-item-box {
					width: 50%;
					text-align: center;
					.iconfont {
						font-size: 55rpx;
					}
					.text {
						font-size: $uni-font-size-2;
					}
				}
				.is-active {
					color: $uni-color-primary;
				}
			}
		}
	}
</style>