完成会费缴交页面设计

pages/huiFeiJiaoJiao/huiFeiJiaoJiao.vue

@@ -1,6 +1,69 @@
 <template>
 	<view class="container">
-		会费缴交
+		<view class="info-box">
+			<view class="info-item">
+				用&nbsp;&nbsp;户&nbsp;名：{{user.username}}
+			</view>
+			<view class="info-item">
+				任职机构：{{user.employment}}
+			</view>
+			<view class="info-item">
+				业务水平认证证书编号：{{user.recordCertificateNumber}}
+			</view>
+		</view>
+		<view class="list-box">
+			<view class="list-item-box">
+				<view class="list-item">
+					学习年度
+				</view>
+				<view class="list-item">
+					会员网络教育<br/>完成学分情况
+				</view>
+				<view class="list-item">
+					年检情况
+				</view>
+				<view class="list-item">
+					会籍情况
+				</view>
+			</view>
+			<view class="list-item-box" v-for="item in list" :key="item.id">
+				<view class="list-item">
+					{{item.date}}
+				</view>
+				<view class="list-item">
+					{{item.score}}/{{item.targetScore}}
+				</view>
+				<view class="list-item" v-html="item.status ? '完成学分' : '学分未达标,<br/>不能申请年检'"></view>
+				<view class="list-item">
+					<view class="button" :class="[item.isPay ? 'primary' : 'error']">
+						{{item.isPay ? '已缴费' : '未缴，点击缴费'}}
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="desc-box">
+			<view class="title">
+				会员网络教育年检规则：
+			</view>
+			<view class="text">
+				持证人员每年需完成24个分学分，年检时间为每年1月1日至4月30日。
+			</view>
+			<view class="text">
+				持证人员会籍有效（注：已缴交当年个人会费）时，系统方可记录学分。
+			</view>
+			<view class="text">
+				持证人员在年检期内完成年检的，方可享受学分减免。
+			</view>
+		</view>
+		<view class="buttom-block"></view>
+		<view class="bottom-box">
+			<view class="button">
+				代缴个人会费
+			</view>
+			<view class="button">
+				代缴单位会费
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -8,6 +71,56 @@
 	import { ref } from 'vue'
 	import { onLoad } from '@dcloudio/uni-app'
 	
+	// 用户信息
+	const user = ref({
+		username: '某某某',
+		employment: '广州市xx地产有限公司',
+		recordCertificateNumber: '123xxxx',
+	})
+	
+	const list = ref([
+		{
+			id: '01',
+			date: '2024（2024.5-2024.30）',
+			score: '24',
+			targetScore: '24',
+			status: 1,
+			isPay: 1
+		},
+		{
+			id: '02',
+			date: '2023（2023.5-2023.30）',
+			score: '0',
+			targetScore: '24',
+			status: 0,
+			isPay: 0
+		},
+		{
+			id: '03',
+			date: '2022（2022.5-2022.30）',
+			score: '0',
+			targetScore: '24',
+			status: 0,
+			isPay: 0
+		},
+		{
+			id: '04',
+			date: '2021（2021.5-2021.30）',
+			score: '0',
+			targetScore: '24',
+			status: 0,
+			isPay: 0
+		},
+		{
+			id: '02',
+			date: '2020（2020.5-2020.30）',
+			score: '0',
+			targetScore: '24',
+			status: 0,
+			isPay: 0
+		},
+	])
+	
 	onLoad(() => {
 		console.log('onLoad')
 	})
@@ -17,12 +130,123 @@
 	.container {
 		height: 100vh;
 		width: 100vw;
-		padding: 0 20rpx;
 		background: rgb(141, 204, 255);
 		background: -moz-linear-gradient(   90deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);
 		background: -webkit-linear-gradient(90deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);
 		background: -o-linear-gradient(     90deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);
 		background: -ms-linear-gradient(    90deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);
 		background: linear-gradient(       180deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);
+		
+		.info-box {
+			margin: 0 20rpx;
+			padding: 0 40rpx;
+			padding-top: 50rpx;
+			margin-bottom: 30rpx;
+			.info-item {
+				margin-bottom: 10rpx;
+				font-size: $uni-title-font-size-2;
+				font-weight: bold;
+				letter-spacing: 3rpx;
+			}
+		}
+		
+		.list-box {
+			margin: 0 20rpx;
+			background-color: $uni-bg-color-grey;
+			border-radius: $uni-card-border-radius;
+			padding: 20rpx 15rpx;
+			margin-bottom: 30rpx;
+			.list-item-box {
+				&:first-child {
+					border-bottom: 5rpx solid #E6E6E6;
+					font-size: $uni-font-size-1;
+					font-weight: bold;
+					.list-item {
+						width: 25%;
+						text-align: center;
+						&:last-child {
+							color: #303133;
+							font-weight: bold;
+						}
+					}
+				}
+				padding: 15rpx 0;
+				text-align: center;
+				font-size: $uni-font-size-3;
+				font-weight: bold;
+				display: flex;
+				align-items: center;
+				.list-item {
+					width: 25%;
+					text-align: center;
+					&:last-child {
+						color: $uni-text-color-inverse;
+						font-weight: normal;
+					}
+				}
+				
+				.button {
+					width: fit-content;
+					border-radius: $uni-card-border-radius;
+					margin: 0 auto;
+				}
+				.primary {
+					padding: 5rpx 25rpx;
+					background-color: $uni-color-primary;
+				}
+				.error {
+					padding: 5rpx 15rpx;
+					background-color: $uni-color-error;
+				}
+			}
+		}
+	
+		.desc-box {
+			margin: 0 20rpx;
+			font-weight: bold;
+			.title {
+				font-size: $uni-title-font-size-2;
+				line-height: 50rpx;
+			}
+			.text {
+				display: flex;
+				align-items: center;
+				font-size: $uni-font-size-2;
+				line-height: 50rpx;
+				&:before {
+					content: '•';
+					font-size: 50rpx;
+					margin-right: 8rpx;
+				}
+			}
+		}
+		
+		
+		.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>