四、接口请求数据交互 更新录入信息

<template>
	<view class="content">
		<view class="top_cont">
				<button @click="toRegister" class="input_btn">点击跳转页面</button>
                <!-- 用@click方法触发点击事件 进行页面跳转 -->
		</view>
		<view>
			<view style="margin: 20rpx 0; margin-left: 50rpx; font-size: 28rpx;">
				<view style="display: flex; align-items: center;">
					<view style="width: 15rpx;height: 40rpx;background: #0CC1BC;border-radius: 8rpx;"></view>
					<view style="margin-left: 16rpx; font-size: 30rpx;">录入历史</view>
				</view>
			</view>
			<view class="history">
				<view v-for="item in antList" :key='item.data' class="model">
                <!-- v-for循环后台接口获取的列表   对应下面的 {
    
    {
    
     字段 }} -->
					<view class="title titleMax">编码：{
    
    {
    
     item.reagentId }}</view>
					<view class="title title1">
						检测人员：{
    
    {
    
     item.name }}
					</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>
	const {
    
     baseurl } = require('../../utils/config');
    // 这里引入了一个接口地址（可忽略不计）
	export default {
    
    
		data() {
    
    
			return {
    
    
				reagentId: '',
				idCode: '',
				name: '',
				testingTime: '',
				status: '',
				userInfo: {
    
    },
				antList:[],
				Flag: true,
				iphone: '',
				district: '',
				town: '',
				village: '',
				residenceCommunity: ''
			}
		},
		onLoad:function() {
    
    
			uni.request({
    
    
				url: baseurl+'/epkg/testhistorytest/list',
				method: 'POST',
				data: {
    
    
					addName: uni.getStorageSync('username'),
                    // 这里的 getStorageSync 方法是获取缓存的值 由上一个页面传过来的 用户名username
				},
				header: {
    
    
					'content-type': 'application/json'
				},
				success: res => {
    
    
					this.antList= res.data
				},
			});
		},
        // 读取缓存的值
		onShow:function() {
    
    
			uni.request({
    
    
				url: baseurl+'/epkg/testhistorytest/list',
				method: 'POST',
				data: {
    
    
					addName: uni.getStorageSync('username'),
                    // 这里的 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 #eeeeee;
	}
	.input_btn{
    
    
		width: 400rpx;
		height: 100rpx;
		background: #0CC1BC;
		border-radius: 100rpx;
		color: white;
		line-height: 100rpx;
		border: 1rpx #a9a9a9 solid;
	}
	.history{
    
    
		overflow: auto;
		height: 1000rpx;
		width: 86%;
		margin-left: 50rpx;
		font-size: 28rpx;
	}
	.model{
    
    
		border-bottom: #e0e0e0 .5rpx solid;
	}
	
	.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: deepskyblue;
	}
</style>