数据回显比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>