asd/asd-pc/minePackage/pages/MineChild.vue

<template>
	<view class="content">
		<!-- <view class="bg-line" v-if="childrenslist.length > 0">

		</view> -->
		<view class="card-list" v-if="childrenslist.length > 0">
			<view class="card-item" v-for="(item,index) in childrenslist" :key="index">
				<view class="card-item-left">
					<view class="card-item-left-line1">{{item.username}}</view>
					<view class="card-item-left-line2">基本信息：{{item.sex+" "+item.age+"岁 "+item.birthday}}</view>
					<view class="card-item-left-line3">身份证号：{{item.idCard == null ? '未填' : item.idCard}}</view>
					<view class="card-item-left-line4">测试次数：{{item.recordCount+"次"}}</view>
					<view class="card-item-left-line5">当前结果：{{item.lastRecordResult ? item.lastRecordResult : '无'}}
					</view>
				</view>
				<view class="card-item-btn-del">
					<u-icon name="trash" size="20" color="#FA3534"
						@tap="userDelChildrenById(item.id,item.username)"></u-icon>
				</view>
				<view class="card-item-btn-edit">
					<u-icon name="edit-pen" size="20" color="#1BD191" @tap="goUserEditChildren(item.id)"></u-icon>
				</view>
				<view class="card-item-btn-view" @click="viewTest(item.lastRecordId,item.recordCount)">
					查看测试
				</view>
			</view>
		</view>
		<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-else></u-empty>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				childrenslist: []
			}
		},
		onLoad() {
			this.userChildrenslist();
		},
		methods: {
			viewTest(recordId, recordCount) {
				if (!recordCount) {
					return uni.showToast({
						icon: 'error',
						title: '尚未进行过测试'
					})
				}
				uni.navigateTo({
					url: `/tablePackage/pages/testRecord?recordId=${recordId}`
				})

			},
			async userChildrenslist() {
				const res = await this.$myRequest({
					url: '/system/children/userChildrenslist'
				})
				for (let i = 0; i < res.data.rows.length; i++) {

					res.data.rows[i].age = this.getCurrentAgeByBirthDate(res.data.rows[i].birthday)
				}
				this.childrenslist = res.data.rows
				console.log(res);
			},
			userDelChildrenById(id, username) {
				uni.showModal({
					title: '提示',
					content: '确认删除【' + username + '】？',
					success: (res) => {
						if (res.confirm) {
							const res = this.$myRequest({
								method: 'DELETE',
								url: '/system/children/userDelChildrenById/' + id
							})
							this.$refs.uToast.show({
								type: 'success',
								message: '删除成功',
								complete: () => {
									this.userChildrenslist()
								}
							})


							// console.log(res);
						}
					}
				})
			},
			goUserEditChildren(id) {
				uni.navigateTo({
					url: "/minePackage/pages/BindChild?id=" + id
				})
			},


			getCurrentAgeByBirthDate(strBirthday) {
				// 将出生日期的字符串通过"-"分割成数组
				const strBirthdayArr = strBirthday.split("-")
				// 拿到出生日期的年
				const birthYear = strBirthdayArr[0]
				// 拿到出生日期的月
				const birthMonth = strBirthdayArr[1]
				// 拿到出生日期的日
				const birthDay = strBirthdayArr[2]
				// 创建一个时间对象
				const d = new Date()
				// 拿到当前时间的年
				const nowYear = d.getFullYear()
				// 拿到当前时间的月
				const nowMonth = d.getMonth() + 1
				// 拿到当前时间的日
				const nowDay = d.getDate()
				// 如果出生日期的年等于当前时间的年
				if (nowYear === birthYear) return 0 // 返回周岁年龄 0,并终止函数执行
				// 如果如果出生日期的年不等于于当前时间的年,则拿到年之差
				const ageDiff = nowYear - birthYear; // 年之差
				// 如果年之差是个负数,则表示用户输入的出生日期错误,晚于今天,返回 -1,并终止函数执行
				if (ageDiff < 0) return -1 // 返回错误 -1,并终止函数执行
				// 如果年之差是个正整数,但出生日期的月与当前时间的月不相等
				if (nowMonth !== birthMonth) {
					// 拿到出生日期的日与当前时间的月之差
					const monthDiff = nowMonth - birthMonth; // 月之差
					// 如果月之差是个负数,则年之差 - 1后得到周岁年龄,否则直接得到周岁年龄
					return monthDiff < 0 ? ageDiff - 1 : ageDiff // 返回周岁年龄,并终止函数执行
				}
				// 如果出生日期的月与当前时间的月相等,则拿到出生日期的日与当前时间的日之差
				const dayDiff = nowDay - birthDay;
				// 如果日之差是个负数,则年之差 - 1得到周岁年龄,否则直接得到周岁年龄
				return dayDiff < 0 ? ageDiff - 1 : ageDiff // 返回周岁年龄,并终止函数执行
			}

		}

	}
</script>

<style scoped lang="less">
	.card-list {
		width: 100%;
		position: fixed;
		z-index: 2;
		top: 100rpx;
		bottom: 0;
		left: 0;
		right: 0;
		overflow-y: auto;

		.card-item {
			width: 90%;
			height: 280rpx;
			margin: 0 auto;
			margin-bottom: 20rpx;
			box-shadow: 0rpx 4rpx 12rpx 0rpx #E4E4E4;
			background-color: #fff;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;

			.card-item-left {
				width: 100%;
				height: 100%;
				margin-left: 80rpx;
				display: flex;
				flex-direction: column;
				// justify-content: center;

				.card-item-left-line1 {
					width: 80%;
					font-size: 38rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.card-item-left-line2,
				.card-item-left-line3,
				.card-item-left-line4,
				.card-item-left-line5 {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					margin-top: 8rpx;
				}
			}

			.card-item-btn-del {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				right: 50rpx;
				top: 10rpx;
				border: 2rpx #FA3534 solid;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.card-item-btn-edit {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				right: 50rpx;
				top: 100rpx;
				border: 2rpx #1BD191 solid;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.card-item-btn-view {
				position: absolute;
				right: 50rpx;
				bottom: 40rpx;
				background-color: #287BCE;
				color: #fff;
				border-radius: 10rpx;
				padding: 10rpx 20rpx;
				font-size: 26rpx;
			}
		}

		.card-item::after {
			content: "";
			display: inline-block;
			position: absolute;
			width: 20rpx;
			height: 20rpx;
			top: 15rpx;
			left: 15rpx;
			background-color: #287BCE;
			border-radius: 50%;
		}

		// .card-item::before {
		// 	content: "";
		// 	display: inline-block;
		// 	position: absolute;
		// 	width: 20rpx;
		// 	height: 20rpx;
		// 	bottom: 15rpx;
		// 	left: 15rpx;
		// 	background-color: #287BCE;
		// 	border-radius: 50%;
		// }

	}

	// .bg-line::before {
	// 	content: "";
	// 	position: absolute;
	// 	z-index: 1;
	// 	display: inline-block;
	// 	left: calc(5% + 20rpx);
	// 	top: 0rpx;
	// 	bottom: 0rpx;
	// 	width: 10rpx;
	// 	background-color: #287BCE;
	// }
</style>