shuju_ui/test/add/pages/addvacfrom/vaccdetail.vue

<template>
	<view v-if="show">
		
		<view class="dnlist" >
			<view class="dnlist_tit">人员基本信息</view>
			<view class="dnlist_box">
				
				<!-- 阴性 -->
				<image :src="nuysimg" class="dnlist_yimg" v-if="nucStatus=='Yi'"></image>
				<!-- 阳性 -->
				<image :src="nuyimg" class="dnlist_yimg" v-else></image>
				<view class="dnlist_flex">
					<view class="dnlist_fa">姓名</view>
					<view class="dnlist_fb">{{formData.userName}}</view>
				</view>
				<view class="dnlist_flex">
					<view class="dnlist_fa">性别</view>
					<view class="dnlist_fb">{{formData.gender}}</view>
				</view>
				<view class="dnlist_flex">
					<view class="dnlist_fa">年龄</view>
					<view class="dnlist_fb">{{formData.age}}</view>
				</view>
				<view class="dnlist_flex">
					<view class="dnlist_fa">身份证号</view>
					<view class="dnlist_fb">{{formData.idCard}}</view>
				</view>
				<view class="dnlist_flex">
					<view class="dnlist_fa">联系方式</view>
					<view class="dnlist_fb">{{formData.phoneNum}}</view>
				</view>
				<view class="dnlist_flex">
					<view class="dnlist_fa">户籍地址</view>
					<view class="dnlist_fb">{{formData.domicileSelect}}</view>
				</view>
				<view class="dnlist_flex">
					<view class="dnlist_fa">详细地址</view>
					<view class="dnlist_fb">{{formData.nowIn}}</view>
				</view>
				<view class="dnlist_flex">
					<view class="dnlist_fa">居住地址</view>
					<view class="dnlist_fb">{{formData.residentialAddress}}</view>
				</view>
				<view class="dnlist_flex">
					<view class="dnlist_fa">详细地址</view>
					<view class="dnlist_fb">{{formData.nowXjd}}</view>
				</view>
			</view>
		</view>
		<view class="dnlist">
			<view class="dnlist_tit">人员核酸信息</view>
			<view class="dnlist_box">
				<view class="dnlist_flex">
					<view class="dnlist_fa">核酸次数</view>
					<view class="dnlist_fb">{{formData.hsjlCount||0}}次</view>
				</view>
			</view>
		</view>
		<view class="dnlist" v-for="(ite,idx) in formData.hsjlRecordList"  :key='idx'>
			<view class="dnlist_tit"></view>
			<view class="dnlist_box">
				<view class="dnlist_flex">
					<view class="dnlist_fa">核酸地址</view>
					<view class="dnlist_fb">{{ite.address}}</view>
				</view>
				<view class="dnlist_flex">
					<view class="dnlist_fa">核酸时间</view>
					<view class="dnlist_fb">{{ite.samplingTime}}</view>
				</view>
				<view class="dnlist_flex">
					<view class="dnlist_fa">核酸状态</view>
					<view class="dnlist_fb" :class="ite.nucleicAcidStatus=='Yi'?'col0':'colf'">{{nucstatusFn(ite.nucleicAcidStatus)}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				nuyimg:require("@/static/image/nuy.png"),
				nuysimg:require("@/static/image/nuyi.png"),
				show:false,
				formData:{
					id:'',
					hsjlRecordList:[],
				},
				nucStatus:'Yi',
				nucleicAcidStatus:'',
				nucstatuslist:[],
			}
		},
		onLoad(option) {
			this.formData.id = option.id;
			this.getDetail();
			this.init();
		},
		methods:{
			nucstatusFn(ite){
				 return this.selectDictLabel(this.nucstatuslist,ite)	
			},
			// 回显数据字典
			selectDictLabel(datas, value) {
				var actions = [];
				Object.keys(datas).some((key) => {
					if (datas[key].dictValue == ('' + value)) {
						actions.push(datas[key].dictLabel);
						return true;
					}
				})
				return actions.join('');
			},
			init(){
				this.nucleicAcidStatusFn()
				// this.frequencyFn()
			},
			getDetail(){
				this.$http.get('boman-web-core/core/hsjl//getById/' + this.formData.id).then(res => {
					if(res.code==200){
						this.formData=res.data;
						if(res.data.hsjlRecordList.length){
							this.nucStatus=res.data.hsjlRecordList[0].nucleicAcidStatus
						}
						
					}
				})
			},
			// 核酸状态的字典值
			nucleicAcidStatusFn(){
				var that = this;
				this.$http.get('system/dict/data/type/sys_hsjl_nucleicAcidStatus').then(res => {
					if (res.code == 200) {
						that.nucstatuslist = res.data;
						// this.nucstatusclass = res.data.map(v => {
						// 	return {
						// 		label: v.dictLabel,
						// 		value: v.dictValue
						// 	}
						// })
					}
				})
			},
			//次数字典值
			// frequencyFn(){
			// 	var that = this;
			// 	this.$http.get('system/dict/data/type/sys_hsjl_frequency').then(res => {
			// 		if (res.code == 200) {
			// 			if (that.formData.hsjlCount) {
			// 				that.hsjlCount = that.selectDictLabel(res.data, that.formData.hsjlCount)
			// 			}
			// 			that.hsjlCountlist = res.data;
			// 			this.hsjlCountclass = res.data.map(v => {
			// 				return {
			// 					label: v.dictLabel,
			// 					value: v.dictValue
			// 				}
			// 			})
			// 		}
			// 	})
			// },
			
		}
	}
</script>

<style scoped>
.dnlist_tit{width: 100%;background: #F2F2F2;padding: 14rpx 32rpx;box-sizing: border-box;font-size: 24rpx;font-weight: 500;color: #666666;line-height: 40rpx;}
.dnlist_box{background: #FFFFFF;padding:2rpx 32rpx;position: relative;}	
.dnlist_flex{display: flex;align-items: flex-start;line-height: 40rpx;padding: 24rpx 0;}
.dnlist_fa{flex: 0 0 auto;font-size: 28rpx;font-weight: 500;color: #343434;min-width:160rpx ;}
.dnlist_fb{flex: 1;font-size: 28rpx;color: #343434;margin-left: 16rpx;}
.dnlist_fb.col0{color:#00B034;}
.dnlist_fb.colf{color:#FF0000;}
.dnlist_yimg{width: 136rpx;height: 118rpx;position: absolute;right: 74rpx;top: 46rpx;}
</style>