menber-center/pages/huiFeiJiaoJiao/huiFeiJiaoJiao.vue

<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']" @click="onJiaoFei(item)">
						{{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" @click="onDaiJiaoGeRenHuiFei()">
				代缴个人会费
			</view>
			<view class="button" @click="onDaiJiaoDanWeiHuiFei()">
				代缴单位会费
			</view>
		</view>
	</view>
</template>

<script setup>
	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
		},
	])
	function onJiaoFei(val) {
		if (val.isPay) {
			return
		}
		uni.navigateTo({
			url: `/pages/geRenHuiFeiJiaoJiao/geRenHuiFeiJiaoJiao?id=${val.id}`
		})
	}
	function onDaiJiaoGeRenHuiFei() {
		uni.navigateTo({
			url: '/pages/daiJiaoGeRenHuiFei/daiJiaoGeRenHuiFei'
		})
	}
	function onDaiJiaoDanWeiHuiFei() {
		uni.navigateTo({
			url: '/pages/daiJiaoDanWeiHuiFei/daiJiaoDanWeiHuiFei'
		})
	}
	
	onLoad(() => {
		console.log('onLoad')
	})
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		width: 100vw;
		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;
				&: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>