4、 Interface requests data to update input information interactively

<template>
	<view class="content">
		<view class="top_cont">
				<button @click="toRegister" class="input_btn"> Click to jump to the page </button>
                <!--  use @click Method triggers a click event   Page Jump  -->
		</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;"> Enter history </view>
				</view>
			</view>
			<view class="history">
				<view v-for="item in antList" :key='item.data' class="model">
                <!-- v-for Loop the list obtained by the background interface     Corresponding to the following  {
    {
      Field  }} -->
					<view class="title titleMax"> code ：{
    {
     item.reagentId }}</view>
					<view class="title title1">
						 Testing personnel ：{
    {
     item.name }}
					</view>
					<view class="title title1">
						 Test time ：{
    {
     item.testingTime }}
					</view>
					<view class="title title1">
						 detection result ：
						<text class="callout" v-if="item.status==1"> negative </text>
						<text class="callout" v-if="item.status==2"> positive </text>
						<text class="callout" v-if="item.status==3"> Invalid result </text>
					</view>
					<view class="title title1">
						 Input time ：{
    {
     item.nucleicTime }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const {
     baseurl } = require('../../utils/config');
    //  An interface address is introduced here （ Negligible ）
	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'),
                    //  there  getStorageSync  The method is to get the cached value   From the previous page   user name username
				},
				header: {
    
					'content-type': 'application/json'
				},
				success: res => {
    
					this.antList= res.data
				},
			});
		},
        //  Read cached values 
		onShow:function() {
    
			uni.request({
    
				url: baseurl+'/epkg/testhistorytest/list',
				method: 'POST',
				data: {
    
					addName: uni.getStorageSync('username'),
                    //  there  getStorageSync  The method is to get the cached value   From the previous page   user name username
				},
				header: {
    
					'content-type': 'application/json'
				},
				success: res => {
    
					console.log(res);
					this.antList= res.data
				},
			});
		},
		methods: {
    
			//  Update personal entry information 
			toRegister(){
    
				uni.navigateTo({
    
					url:`../index/index`
                    //  Get the information input of the page to which the click event jumps 
				});
			},
		}
	}
</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>