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

<template>
	<view class="content">
		<view class="header">
			<view class="left-text">
				<rudon-rowMenuDotDotDot style="color: #000;" :localdata="leftDropList" @change="leftDropAction($event)">
					<text class="mall-filter-text">{{ leftDropName }}</text>
					<u-icon name="arrow-down" color="#101010" size="12"></u-icon>
				</rudon-rowMenuDotDotDot>
			</view>
			<view class="right-text">

				<rudon-rowMenuDotDotDot style="color: #000;" :localdata="rightDropList"
					@change="rightDropAction($event)">
					<text class="mall-filter-text">{{rightDropName}}</text>
					<u-icon name="arrow-down" color="#101010" size="12"></u-icon>
				</rudon-rowMenuDotDotDot>
			</view>
		</view>

		<view class="card-list" v-if="recordlist.length > 0">
			<view
				:class="{'card-item':true,'card-item-green':index%3==0,'card-item-yellow':index%3==1,'card-item-purple':index%3==2}"
				v-for="(item,index) in recordlist" :key="index">
				<view class="card-item-left">
					<view class="card-item-left-title">{{item.tableName}}</view>
					<view class="card-item-left-name">姓名：{{item.username}}</view>
					<view class="card-item-left-age">年龄：{{item.age}}岁</view>
					<view class="card-item-left-date">测评日期：{{item.createTime.replace('T',' ').replace('.000+08:00','')}}
					</view>
				</view>
				<view class="card-item-right">
					<view class="answer" @click="recordDetail(item.recordId)">
						作答详情
					</view>
					<view class="report" @click="viewTest(item.recordId)">
						查看报告
					</view>
				</view>
			</view>


		</view>
		<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-else></u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recordlist: [],
				leftDropName: "全部",
				// 左边菜单内容
				leftDropList: [{
					value: '全部',
					text: '全部'
				}],
				rightDropName: "全部",
				// 左边菜单内容
				rightDropList: [{
					value: '全部',
					text: '全部'
				}],
				queryParams: {
					pageNum: 1,
					pageSize: 5,
					tableType: '',
					username: ''
				},

				loading: '',
			}
		},

		onLoad() {
			this.getRecordList();
			this.getDropList()
		},
		onReachBottom() {
			if (this.loading == 'more') {
				this.pageNum++;
				this.getRecordList();
			}

		},
		methods: {
			viewTest(recordId) {
				uni.navigateTo({
					url: `/tablePackage/pages/testRecord?recordId=${recordId}`
				})
			},
			recordDetail(recordId) {
				uni.navigateTo({
					url: `/minePackage/pages/recordDetail?recordId=${recordId}`
				})
			},
			async getRecordList() {
				const res = await this.$myRequest({
					url: '/system/record/recordList',
					data: this.queryParams
				})
				for (let i = 0; i < res.data.rows.length; i++) {
					res.data.rows[i].age = this.getCurrentAgeByBirthDate(res.data.rows[i].birthday)
					res.data.rows[i].tableName = JSON.parse(uni.getStorageSync(res.data.rows[i].tableType))
						.tableInfo
						.tableName;
				}

				if (res.data.rows.length >= this.pageSize) {
					this.loading = 'more';
				} else {
					this.loading = 'noMore';
				}
				this.recordlist = this.recordlist.concat(res.data.rows);

			},

			async getDropList() {
				const left = await this.$myRequest({
					url: '/system/children/userChildrenslist'
				})

				for (let i = 0; i < left.data.rows.length; i++) {
					this.leftDropList.push({
						value: left.data.rows[i].username,
						text: left.data.rows[i].username
					})
				}
				const right = await this.$myRequest({
					url: '/system/table/list'
				})

				for (let i = 0; i < right.data.rows.length; i++) {
					this.rightDropList.push({
						value: right.data.rows[i].tableAlias,
						text: right.data.rows[i].tableName
					})
				}
			},

			leftDropAction(e) {
				this.pageNum = 1
				if (e === '') {
					return
				} else if (e == '全部') {
					this.queryParams.username = ''
				} else {
					this.queryParams.username = e
				}
				this.recordlist = []
				this.getRecordList()
				this.leftDropName = e
			},
			rightDropAction(e) {
				this.pageNum = 1
				if (e === '') {
					return
				} else if (e == '全部') {
					this.queryParams.tableType = ''
				} else {
					this.queryParams.tableType = e
				}
				this.recordlist = []
				this.getRecordList()
				// this.rightDropName = e

				let rightRow = this.rightDropList.find(item => {
					return item.value == e
				})
				console.log(rightRow);
				this.rightDropName = rightRow.text

			},
			viewReport() {
				uni.navigateTo({
					url: "/homePackage/pages/testRecord"
				})
			},
			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">
	u-icon {
		margin-top: 4rpx;
		margin-left: 6rpx;
	}

	.content {
		width: 100%;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			font-size: 16px;
			color: #101010;

			.left-text,
			.right-text {
				display: flex;
				align-items: center;
				margin-left: 60rpx;
				margin-right: 60rpx;
			}
		}

		.card-list {
			width: 100%;

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

				.card-item-left {
					margin-left: 50rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.card-item-left-title {
						font-size: 38rpx;
						font-weight: bold;
						margin-bottom: 10rpx;
					}

					.card-item-left-name,
					.card-item-left-age,
					.card-item-left-date {
						font-size: 24rpx;
						margin-top: 5rpx;
					}
				}

				.card-item-right {
					margin-right: 50rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.answer,
					.report {
						color: #fff;
						background-color: #FFA521;
						border-radius: 10rpx;
						padding: 10rpx 20rpx;
						font-size: 26rpx;
					}

					.report {
						background-color: #287CCE;
						margin-top: 20rpx;
					}
				}
			}

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

			.card-item-green::after {
				background-color: #0EBD8D;
			}

			.card-item-yellow::after {
				background-color: #FFA521;
			}

			.card-item-purple::after {
				background-color: #6E67EA;
			}
		}
	}
</style>