medical/pages/details/index.vue

<template>
	<view>
		<view class="text-block">
			<text class="text-title">姓名</text>
			<text>{{detailsData.name}}</text>
		</view>
		
		<view class="text-block">
			<text class="text-title">性别</text>
			<text>{{detailsData.sex == 1 ? '男' : '女'}}</text>
		</view>
		
		<view class="text-block">
			<text class="text-title">班级</text>
			<text>{{detailsData.className}}</text>
		</view>
		
		<view class="text-block">
			<text class="text-title">症状体征</text>
			<text style="float: right; width: 447rpx; word-wrap: break-word;">{{detailsData.symptom}}</text>
		</view>
		
		<view class="text-block">
			<text class="text-title">症状体征照片</text>
			<text class="text-img" v-for="item in detailsData.symptomImgs">
				<image :src="item"></image>
			</text>
		</view>
		
		<view class="text-block">
			<text class="text-title">处置后照片</text>
			<text class="text-img" v-for="item in detailsData.emergencyImgs">
				<image :src="item"></image>
			</text>
		</view>
		
		<view class="text-block">
			<text class="text-title">处理措施</text>
			<text style="float: right; width: 447rpx;  word-wrap: break-word;">{{detailsData.disposeRecords[0].text}}</text>
		</view>
		
		<view v-for="(item, id) in detailsData.disposeRecords">
				<view class="text-block" v-if="id != 0">
					<text class="text-title">后续处理</text>
					<text style="float: right; width: 447rpx;  word-wrap: break-word;">{{item.text}}</text>
				</view>
				
				<view class="handle-time">
					处理时间：{{item.createTime}}
				</view>
		</view>
		
		<view class="text-block">
			<text class="text-title">备注</text>
			<text style="float: right; width: 447rpx;  word-wrap: break-word;">{{detailsData.remark}}</text>
		</view>
		
		<view class="text-block" style="border-bottom: 20rpx solid #f5f6f7;">
			<text class="text-title">状态</text>
			<text>{{detailsData.isWatch ? '跟踪观察' : '取消观察'}}</text>
		</view>
		
		<view class="edit" @click="toEdit">
			编辑
		</view>
		
		<!-- <view style="height: 200rpx;"></view> -->
		
	</view>

</template>

<script>
	export default {
		data() {
			return {
				id: '',
				detailsData: '',
			}
		},
		
		onLoad(options){
			console.log(options.id)
			this.id = options.id
			this.getData()
		},
		
		methods: {
			getData(){
				this.$request({
					url: this.$api.index.emergencyDetail,
					data: {
						id: this.id,
					},
				}).then(res => {
					for(let item of res.data.detail.disposeRecords){
						item.createTime = item.createTime.replace('T', ' ')
						item.createTime = item.createTime.slice(0, item.createTime.length - 3)
						
					}
					res.data.detail.symptomImgs = res.data.detail.symptomImgs.split(',')
					res.data.detail.emergencyImgs = res.data.detail.emergencyImgs.split(',')
					this.detailsData = res.data.detail
					console.log(this.detailsData)
				})
			},
			
			// 跳转编辑页面
			toEdit(){
				uni.navigateTo({
					url: `/pages/addHandle/index?id=${this.id}&type=2`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		/* background-color: #D9D9D9; */
		// background-color: #F5F5F5 !important;
		padding-top: 40rpx;
		box-sizing: border-box;
		font-size: 32rpx;
	}
	
	.text-block{
		padding: 18rpx 32rpx;
		box-sizing: border-box;
		overflow: hidden;
	}
	
	.text-title{
		width: 240rpx;
		display: inline-block;
		color: rgba(0,0,0,0.60);
		vertical-align: top;
	}
	
	.text-div{
		width: 450rpx;
		display: inline-block;
		overflow:hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
	}
	
	.text-img{
		width: 160rpx;
		height: 160rpx;
		border-radius: 13px;
		background-color: #ccc;
		display: inline-block;
		overflow: hidden;
		margin-right: 20rpx;
		
		image{
			width: 100%;
			height: 100%;
		}
	}
	
	.handle-time{
		height: 80rpx;
		line-height: 80rpx;
		background: #f5f6f7;
		box-sizing: border-box;
		padding-left: 32rpx;
		color: rgba(0,0,0,0.60);
		font-size: 23rpx;
	}
	
	.edit{
		height: 112rpx;
		line-height: 112rpx;
		text-align: center;
		color: #7B5DF0;
		font-size: 33rpx;
	}
	
</style>