web3-202226701039/项目/img_process_history.vue

<template>
	<view class="content">
		<view v-if="!img_process_history || Object.keys(img_process_history).length === 0" class="no_data"></view>
		<view v-else v-for="(value, key) in img_process_history" :key="key" class="img-history-item">
			<view @longpress="check_del_img_history(key)" @click="$util.navigateTo(`/pages/img_process/img_process?timestamp=${key}`)" class="flex justify-between">
				<view>
					<view class="flex justify-start margin-bottom-xs">
						<text class="title center">检测结果：</text>
						<text class="result center" v-for="(value, key) in value['disease']">{{value}}</text>
					</view>
					
					<view class="time align-center">{{value['time_string']}}</view>
				</view>
				
				<view @click.stop="openpopup(key)" class="center relationship">
					<text v-if="value['relationship']">{{family_list[value['relationship']]['name']}}</text>
					<text v-else style="text-decoration: underline; color: #666;">关联成员</text>
				</view>
			</view>
		</view>
		<uv-popup ref="popup" mode="right" bgColor="#f5f5f5" style="overflow-y: scroll;" >
			<scroll-view class="popup scroll-Y" scroll-y="true">
				<view v-if="!family_list" class="no-data center">暂无成员</view>
				<view v-else v-for="(value, key) in family_list" :key="key" class="family-item">
					<view @click="addrelationship(key)" class="flex justify-between">
						<view>
							<view class="flex justify-start margin-bottom-xs">
								<text class="name center">{{value['name']}}</text>
								<text v-if="value['relationship']" class="relationship center">{{value['relationship']}}</text>
							</view>
							
							<text class="gender">性别：{{ value['gender'] === 0 ? '男' : (value['gender'] === 1 ? '女' : '未知') }}</text>
							
							<text v-if="value['age']" class="age">年龄：{{value['age']}}岁</text>
						</view>
						<text class="cuIcon-right center"></text>
					</view>
				</view>
			</scroll-view>
		</uv-popup>
	</view>
</template>

<script>
	export default {
		onShow() {
			let img_process_history = uni.getStorageSync('img_process_history');
			this.img_process_history = this.$util.reversedObject(img_process_history);
			
			this.family_list = uni.getStorageSync('family_list');
		},
		onPullDownRefresh() {
			let img_process_history = uni.getStorageSync('img_process_history');
			this.img_process_history = this.$util.reversedObject(img_process_history);
			
			this.family_list = uni.getStorageSync('family_list');
		},
		data() {
			return {
				img_process_history: null,
				family_list: null,
				selectitem: null,
			}
		},
		methods: {
			addrelationship(key){
				let img_process_history = uni.getStorageSync('img_process_history');
				
				img_process_history[this.selectitem]['relationship'] = key;
				
				uni.setStorageSync('img_process_history', img_process_history);
				this.img_process_history = this.$util.reversedObject(img_process_history);
				
				this.$refs.popup.close();
			},
			openpopup(selectitem){
				this.selectitem = selectitem;
				this.$refs.popup.open();
			},
			check_del_img_history(key){
				uni.showModal({
					title: '删除记录',
					content: ' 是否要删除此记录？',
					success: (res) => { 
						if (res.confirm) this.del_img_history(key); 
					}  
				})	
			},
			del_img_history(key){
				let img_process_history = uni.getStorageSync('img_process_history');
				delete img_process_history[key];
				
				this.img_process_history = this.$util.reversedObject(img_process_history);
				uni.setStorageSync('img_process_history', img_process_history);
				
				this.$forceUpdate();
			},
		}
	}
</script>

<style lang="less" scoped>
	.popup{
		padding: 10px;
		width: 75vw;
		
		.family-item{
			background-color: #fff;
			border-radius: 20px;
			height: 80px;
			margin-bottom: 10px;
			padding: 10px 18px;
			
			color: #666;
			letter-spacing: 1px;
			
			.name{
				letter-spacing: 2px;
				font-size: 20px;
				font-weight: 550;
				color: #555;
			}
			
			.gender{
				margin-right: 20px;
			}
			
			.relationship{
				color: #555;
				font-size: 16px;
				height: 24px;
				width: 60px;
				border-radius: 10px;
				letter-spacing: 0px;
				margin-left: 20px;
				background-color: #ebf6ff;
			}
		}
	}
	.no-data{
		height: 30vw;
		font-size: 24px;
		color: #777;
		padding: 10px;
		background-color: #fff;
		border-radius: 20px;
	}
	.content{
		padding: 10px 20px;
		border: none;
		background-color: #f6f6f6;
		height: 100vh;
	}
	.scroll-Y {
		/* #ifndef MP */
		height: calc(100vh - 155px);
		/* #endif */
		
		/* #ifdef MP */
		height: calc(100vh - 65px);
		/* #endif */
	}
	.relationship{
		z-index: 100;
		color: #666;
		font-size: 16px;
		margin: 5px 0;
		width: 85px;
		border-radius: 10px;
		letter-spacing: 0px;
		background-color: #ebf6ff;
	}
	.img-history-item{
		background-color: #fff;
		border-radius: 20px;
		height: 80px;
		margin-bottom: 20px;
		padding: 15px;
		
		color: #666;
		letter-spacing: 1px;
		
		.title{
			letter-spacing: 2px;
			font-size: 18px;
			font-weight: 550;
			color: #555;
		}
		
		.result{
			font-size: 17px;
			font-weight: 550;
			color: #f56c6c;
			margin-right: 10px;
		}
		
		.time{
			margin-top: 8px;
		}
	}
</style>