十三、数据回显

数据回显比form表单更加常见，毕竟项目都是动态数据，回显的越多越高级也越有价值

比如数据可视化的回显动态参数就给人很高大上的感觉
但如果只是单个数据需要回显也可以 比如弹窗只弹出一项用户名的信息进行确认

<template>
	<view class="content">
		<view class="top_cont">
				<button @click="toRegister" class="input_btn">录入抗原检测结果</button>
		</view>
		<view>
			<view class="history">
				<view style="margin-top: 20rpx;">
					<view style="display: flex; align-items: center;">
						<view style="width: 15rpx;height: 40rpx;background: #93D7DB;border-radius: 8rpx;"></view>
						<view style="margin-left: 16rpx; font-size: 30rpx;">抗原检测结果录入历史</view>
					</view>
				</view>
				<view v-for="item in antList" :key='item.data'>
					<view class="title titleMax">抗原试剂编码：{
    {
     item.reagentId }}</view>
					<view class="title title1">
						检测人员：{
    {
     item.name }} ({
    {
     item.idCode }})
					</view>
					<view class="title title1">
						检测时间：{
    {
     item.testingTime }}
					</view>
					<view class="title title1">
						检测结果：
						<text class="callout" v-if="item.status==1">阴性</text>
						<text class="callout" v-if="item.status==2">阳性</text>
						<text class="callout" v-if="item.status==3">无效结果</text>
					</view>
					<view class="title title1">
						录入时间：{
    {
     item.nucleicTime }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
    
		data() {
    
			return {
    
				reagentId: '',
				idCode: '',
				name: '',
				testingTime: '',
				status: '',
				userInfo: {
    },
				antList:[],
				Flag: true
			}
		},
		onLoad:function() {
    
			uni.request({
    
				url: 'Where You Going, Baby?',
				method: 'POST',
				data: {
    
					addName: uni.getStorageSync('username'),
					// 缓存传参
				},
				header: {
    
					'content-type': 'application/json'
				},
				success: res => {
    
					
					this.antList= res.data
				},
			});
		},
		onShow:function() {
    
			uni.request({
    
				url: 'Where You Going, Baby?',
				method: 'POST',
				data: {
    
					addName: uni.getStorageSync('username'),
					// 缓存传参
				},
				header: {
    
					'content-type': 'application/json'
				},
				success: res => {
    
					console.log(res);
					this.antList= res.data
				},
			});
		},
		methods: {
    
			// 更新个人录入信息
			toRegister(){
    
				uni.navigateTo({
    
					url:`../index/index`
				});
			},
		}
	}
</script>

<style>
	.top_cont{
    
		flex: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 300rpx;
		width: 100%;
		border-bottom: 15rpx solid #F7F7F7;
	}
	.input_btn{
    
		width: 400rpx;
		height: 100rpx;
		background: #6CCACF;
		border-radius: 100rpx;
		color: white;
		line-height: 100rpx;
		border: 1rpx #DBDBDB solid;
	}
	.history{
    
		overflow: auto;
		height: 1000rpx;
		width: 86%;
		margin-left: 50rpx;
		font-size: 28rpx;
		border-bottom: gray 1px solid;
	}
	.txt_dot{
    
		width: 15rpx;
		height: 45rpx;
		border-radius: 15rpx;
		background: #6CCACF;
		float: left;
		margin-right: 20rpx;
	}
	.txt_words{
    
		font-size: 30rpx;
	}
	.title{
    
		color: gray;
		margin: 20rpx 0;
	}
	.titleMax{
    
		font-size: 32rpx;
		font-weight: 600;
		color: #000000;
	}
	.callout{
    
		font-size: 30rpx;
		color: #6CCACF;
	}
</style>