gold-field/pages/index/index.vue

<template>
	<view class="main_content">
		<view class="header_info">
			<view class="info_container">
				<view class="name_wrap">
					<image src="/static/user.png" class="name_logo"></image>
					<text class="name">姓名 : {{username}}</text>
				</view>
				<view class="idcard_wrap">
					<image src="/static/card.png" class="card_logo"></image>
					<text class="card_number">身份证号 : {{idcard}}</text>
				</view>
			</view>
		</view>
		<view class="grid_layout content" v-if="activeTab == 0">
			<view class="grid_box background1">
				<text class="main_title">L-乳酸</text>
				<view class="capacity_btn">
					<text class="unit">{{resultList?.length > 0 ? resultList[0]?.c1 : '0'}}mmol / L</text>
				</view>
			</view>
			<view class="grid_box background2">
				<text class="main_title">肌酸</text>
				<view class="capacity_btn">
					<text class="unit">{{resultList?.length > 0 ? resultList[0]?.c2 : '0'}}mmol / L</text>
				</view>
			</view>
			<view class="grid_box background3">
				<text class="main_title">肌酐</text>
				<view class="capacity_btn">
					<text class="unit">{{resultList?.length > 0 ? resultList[0]?.c3 : '0'}}mmol / L</text>
				</view>
			</view>
			<view class="grid_box background4">
				<text class="main_title">尿素</text>
				<view class="capacity_btn">
					<text class="unit">{{resultList?.length > 0 ? resultList[0]?.c4 : '0'}}mmol / L</text>
				</view>
			</view>
			<view class="grid_box background5">
				<text class="main_title">β-羟丁酸</text>
				<view class="capacity_btn">
					<text class="unit">{{resultList?.length > 0 ? resultList[0]?.c5 : '0'}}mmol / L</text>
				</view>
			</view>
			<view class="grid_box background6">
				<text class="main_title">L-谷氨酸</text>
				<view class="capacity_btn">
					<text class="unit">{{resultList?.length > 0 ? resultList[0]?.c6 : '0'}}mmol / L</text>
				</view>
			</view>
		</view>
		<view class="content" v-if="activeTab == 1">
			<view class="card_wrap" v-for="item in resultList" :key="item.id">
				<view class="time_wrap">
					<image src="/static/time.png" class="time_logo"></image>
					<text class="date">{{ item.testDate?.split(' ')[0] }}</text>
					<text class="time">{{ item.testDate?.split(' ')[1] }}</text>
				</view>
				<view class="info_grid">
					<view class="info bg1">
						<text>L-乳酸  {{item.c1}}mmol/L</text>
					</view>
					<view class="info bg2">
						<text>肌酸  {{item.c2}}mmol/L</text>
					</view>
					<view class="info bg3">
						<text>肌酐  {{item.c3}}mmol/L</text>
					</view>
					<view class="info bg4">
						<text>尿素  {{item.c4}}mmol/L</text>
					</view>
					<view class="info bg5">
						<text>β-羟丁酸 {{item.c5}}mmol/L</text>
					</view>
					<view class="info bg6">
						<text>L-谷氨酸  {{item.c6}}mmol/L</text>
					</view>
				</view>
			</view>
		</view>
		<view class="footer_tab">
			<view :class="activeTab == 0 ? 'btn active' : 'btn'" @click="changeActiveTab(0)">
				<image src="/static/result.png" class="result_logo"></image>
				<text class="font_btn">当前结果</text>
			</view>
			<view :class="activeTab == 1 ? 'btn active' : 'btn'" @click="changeActiveTab(1)">
				<image src="/static/data.png" class="history_logo"></image>
				<text class="font_btn">历史数据</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			activeTab: 0,
			idcard: '',
			username: '',
			resultList: []
		}
	},
	onLoad() {
		const self = this
		// 就在加载的时候请求一次某人的数据 筛选最新一条放入第一个tab
		// 历史数据渲染到第二个tab
		// 数据中有username idcard 以及信息列表
		uni.request({
		    url: 'http://localhost:8080/zsjyadmin/detection/current',
				method:"GET",
		    success: (res) => {
					if (res?.data?.code == 0){
						const data = res?.data?.data
						const {idcard, username, resultList} = data	|| {}
						self.idcard = idcard
						self.username = username
						// 对resultList 根据id进行排序
						resultList.sort((a, b) => {
							return b.id - a.id
						})
						self.resultList = resultList
					}
		    }
		});
	},
	methods: {
		changeActiveTab(activeTab) {
			this.activeTab = activeTab
		}
	}
}
</script>

<style lang="less">
	.main_content{
		background: #f6f6f6;
		height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
		.header_info{
			padding: 20rpx;
			.info_container{
				width: 100%;
				background: #fff;
				padding: 22rpx 38rpx;
				box-sizing: border-box;
				border-radius: 40rpx;
				align-items: center;
				justify-content: space-between;
				display: flex;
				.name_wrap{
					display: flex;
					align-items: center;
					.name_logo{
						width: 30rpx;
						height: 35rpx;
					}
					.name{
						font-size: 24rpx;
						font-weight: 500;
						letter-spacing: 0.03em;
						color: #000000;
						margin-left: 16rpx;
					}
				}
				.idcard_wrap{
					display: flex;
					align-items: center;
					.card_logo{
						width: 38rpx;
						height: 29rpx;
					}
					.card_number{
						font-size: 24rpx;
						font-weight: 500;
						letter-spacing: 0.03em;
						margin-left: 13rpx;
						color: #BBBBBB;
					}
				}
			}
		}
		.content{
			flex: 1;
			padding: 20rpx;
			padding-top: 0;
			overflow: scroll;
			.card_wrap{
				padding: 20rpx;
				background: #fff;
				box-sizing: border-box;
				border-radius: 19rpx;
				margin-bottom: 20rpx;
				&:last-child{
					margin-bottom: 0;
				}
				.time_wrap{
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					.time_logo{
						width: 32rpx;
						height: 32rpx;
					}
					.date{
						font-size: 26rpx;
						font-weight: 500;
						letter-spacing: 0.06em;
						color: #BBBBBB;
						margin-left: 18rpx;
						margin-right: 24rpx;
					}
					.time{
						font-size: 26rpx;
						font-weight: 500;
						letter-spacing: 0.06em;
						color: #BBBBBB;
					}
				}
				.info_grid{
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					grid-template-rows: repeat(3, 1fr);
					column-gap: 20rpx;
					row-gap: 10rpx;
					.info{
						padding: 18rpx 0;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 26rpx;
						font-weight: 500;
						letter-spacing: 0.06em;
						color: #151515;
						border-radius: 8rpx;
					}
					.bg1{
						background: rgba(97, 43, 235, 0.06);
					}
					.bg2{
						background: rgba(97, 43, 235, 0.06);
					}
					.bg3{
						background: rgba(24, 164, 240, 0.06);
					}
					.bg4{
						background: rgba(24, 164, 240, 0.06);
					}
					.bg5{
						background: rgba(246, 170, 18, 0.06);
					}
					.bg6{
						background: rgba(246, 170, 18, 0.06);
					}
				}
			}
		}
		.grid_layout{
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: repeat(3, 1fr);
			column-gap: 20rpx;
			row-gap: 20rpx;
			.grid_box{
				border-radius: 19rpx;
				padding: 77rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				.main_title{
					font-size: 60rpx;
					font-weight: bold;
					letter-spacing: 0.1em;
					color: #FFFFFF;
					margin-bottom: 25rpx;
				}
				.capacity_btn{
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 10rpx 40rpx;
					border-radius: 60rpx;
					background: rgba(255, 255, 255, 0.1);
					.unit{
						white-space: nowrap;
						font-size: 40rpx;
						font-weight: normal;
						letter-spacing: 0em;
						color: #FFFFFF;
					}
				}
			}
			.background1{
				background: #612BEB;
			}
			.background2{
				background: #7540FD;
			}
			.background3{
				background: #18A4F0;
			}
			.background4{
				background: #1ACEEA;
			}
			.background5{
				background: #F6AA12;
			}
			.background6{
				background: #FDC030;
			}
		}
		.footer_tab{
			padding: 19rpx 59rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.btn{
				display: flex;
				align-items: center;
				padding: 22rpx 55rpx;
				justify-content: space-between;
				box-sizing: border-box;
				.result_logo{
					height: 28rpx;
					width: 25rpx;
				}
				.history_logo{
					width: 32rpx;
					height: 28rpx;
				}
				.font_btn{
					font-size: 26rpx;
					font-weight: 500;
					letter-spacing: 0em;
					color: #151515;
					margin-left: 16rpx;
				}
			}
			.active{
				background: #F6F6F6;
				border-radius: 42rpx;
			}
		}
	}
</style>