h5/pages/eye_ground/eye_ground.vue

<template>
	<view class="mb-5">
		<view class="position-relative bghead">
			<image style="opacity: 0;" src="@/static/img/other/ydjc.png" mode="widthFix" class="w-100"></image>
			<view class="position-absolute text-white px-3 mx-3 positionY-50" style="">
				<view class="centerY">
					<view class="bw_line line-height1"></view>
					<view class="ml-1 fs-18 font-bold">
						眼底检查
					</view>
				</view>
				<view class="mt-2 fs-14">
					患者检查的眼底片和医生建议记录
				</view>
			</view>
		</view>
		<view class="px-3 pb-3 mt-n2" v-if="dataArray.length>0">
			<view class="bg-white px-3 py-2 mt-3" style="border-radius: 16rpx;" v-for="(item,index) in dataArray">
				<view class="centerY mb-2 text-gry">
					<text class="iconfont Clock fs-20"></text>
					<view class="">
						{{item.eyeData.createTime}}
					</view>
					<view class="">
						<span :class="{'text-green':item.eyeData.isRead==1}">
							({{item.eyeData.isRead==0?'未阅片':'已阅片'}})
						</span>
					</view>
				</view>
				<view class="">
					<view class="centerY">
						<view class="w-50 mx-1">
							<view class="centerY">
								<image class="w-15" src="@/static/img/other/zuo.png" mode="widthFix"></image>
								<view class="d-inline-block ml-1 fs-14 text-dark">
									左眼
								</view>
							</view>
							<view class="border mt-2"
								style="background: #F6F9FE;border-radius: 16rpx;padding: 14rpx;box-sizing: border-box;">
								<view class="picbox1"
									style="border: 1px dotted  #E3E3E3;border-radius: 16rpx;box-sizing: border-box;">
									<view style="background: #F6F9FE;" class="picimg1">
										<image @click="pic(	item.eyeData.leftImg || item.eyeData.localLeftImg
										  ? img_host +
										    (accessType == 1
										      ? item.eyeData.leftImg
										      : item.eyeData.localLeftImg)
										  : '@/static/img/other/you.png')" class="w-100" style="height: 100%;" :src="
										item.eyeData.leftImg || item.eyeData.localLeftImg
										  ? img_host +
										    (accessType == 1
										      ? item.eyeData.leftImg
										      : item.eyeData.localLeftImg)
										  : '@/static/img/other/you.png'
										" mode="scaleToFill"></image>
									</view>
								</view>
							</view>
						</view>
						<view class="w-50 mx-2">
							<view class="centerY">
								<image class="w-15" src="@/static/img/other/you.png" mode="widthFix"></image>
								<view class="d-inline-block ml-1 fs-14 text-dark">
									右眼
								</view>
							</view>
							<view class="border mt-2"
								style="background: #F6F9FE;border-radius: 16rpx;padding: 14rpx;box-sizing: border-box;">
								<view class="picbox1"
									style="border: 1px dotted  #E3E3E3;border-radius: 16rpx;box-sizing: border-box;">
									<view style="background: #F6F9FE;" class="picimg1">
										<image @click="pic(	item.eyeData.rightImg || item.eyeData.localRightImg
										  ? img_host +
										    (accessType == 1
										      ? item.eyeData.rightImg
										      : item.eyeData.localRightImg)
										  : '@/static/img/other/you.png')" class="w-100" style="height: 100%;" :src="
										item.eyeData.rightImg || item.eyeData.localRightImg
										  ? img_host +
										    (accessType == 1
										      ? item.eyeData.rightImg
										      : item.eyeData.localRightImg)
										  : '@/static/img/other/you.png'" mode="scaleToFill"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="mt-3 p-2"
						style="box-shadow: 0px 2px 13px 2px rgba(211,212,214,0.45);border-radius: 8px;">
						<view class="centerY mt-2">
							<image class="w-15" src="@/static/img/other/jcyy.png" mode="widthFix"></image>
							<view class="fs-14 font-bold ml-2 space-nowrap">
								检测医院
							</view>
							<view class=" ml-2 fs-12" style="color: #868687;">
								{{hospital.hospitalName||'暂无医院信息'}}
							</view>
						</view>
						<view class="centerY">
							<image class="w-15" src="@/static/img/other/zjjy.png" mode="widthFix"></image>
							<view class="fs-14 font-bold ml-2 space-nowrap">
								专家建议
							</view>
							<view v-if="item.eyeData.isRead==1" class="ml-2 fs-12" style="color: #868687;">
								<span>左眼:{{item.eyeData.leftNote||(item.aiEyeData&&item.aiEyeData.leftNote)||'无'}};</span>
								<span>右眼:{{item.eyeData.rightNote||(item.aiEyeData&&item.aiEyeData.rightNote)||'无'}}</span>
							</view>
							<view v-if="item.eyeData.isRead==0" class="ml-2 fs-12" style="color: #868687;">
								暂未阅片
							</view>
						</view>
					</view>
				</view>
				<view class="text-center text-gry2 fs-10 mt-2 mb-2">
					注：本报告内容只针对眼底照片可见范围
				</view>
			</view>
		</view>
		<view v-if="dataArray.length>0">
			<uni-load-more iconType="circle" :status="status" class="fs-12"></uni-load-more>
		</view>
		<view class="px-3 pb-3 mt-n2" v-if="dataArray.length==0">
			<Empty title="没有随眼底检查" class="py-5" />
		</view>
	</view>
</template>

<script>
	import Empty from '@/component/empty/empty.vue';
	export default {
		components: {
			Empty
		},
		data() {
			return {
				accessType: 1,
				dataArray: [],
				status: 'loading',
				hospital: {},
				filter: {
					size: 10,
					current: 1
				},
				img_host: ''
			};
		},
		onLoad() {
			this.getifoss();
			this.get_medicinal();
			this.find_hospital()
		},
		onReachBottom(a) {
			if (this.status !== "no-more") {
				this.status = 'loading';
				let page = JSON.parse(this.filter.page) + 1
				this.get_medicinal(page)
			}
		},
		methods: {
			async pic(url) {
				uni.previewImage({
					urls: [url],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			async find_hospital() {
				let idCard = uni.getStorageSync('idCard')
				let {
					data,
					code
				} = await this.$api.find_hospital({
					idCard
				})
				if (code == 0) {
					this.hospital = data
					uni.stopPullDownRefresh()
				} else {
					this.status = 'more';
					uni.hideLoading();
					uni.stopPullDownRefresh()
				}
			},
			async getifoss() {
				let idCard = uni.getStorageSync('idCard')
				let {
					data,
					code,
					count
				} = await this.$api.ifoss({
					idCard
				})
				if (code == 0) {
					this.accessType = data
					let configData = getApp().globalData.configData
					data == 1 ?
						this.img_host = configData.img_prod_host :
						this.img_host = configData.img_local_host
					uni.hideLoading();
					uni.stopPullDownRefresh()
				} else {
					this.status = 'more';
					uni.hideLoading();
					uni.stopPullDownRefresh()
				}
			},
			async get_medicinal(page) {
				page = page || 1
				this.filter = {
					...this.filter,
					page
				}
				uni.showLoading({
					title: '加载中'
				});
				let idCard = uni.getStorageSync('idCard')
				let {
					data,
					code,
					count
				} = await this.$api.find_eye_page({
					idCard,
					...this.filter
				})
				if (code == 0) {
					uni.setStorageSync('userData', data || {})
					this.dataArray = [...this.dataArray, ...data || []]
					uni.hideLoading();
					console.log(count / this.filter.size > this.filter.current)
					if (count / this.filter.size > this.filter.current) {
						this.status = 'more';
					} else {
						this.status = 'no-more';
					}
					uni.stopPullDownRefresh()
				} else {
					this.status = 'more';
					uni.hideLoading();
					uni.stopPullDownRefresh()
				}
			},
		},
		onPullDownRefresh() {
			this.dataArray = []
			this.get_medicinal(1)
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F9FF;
	}

	.picbox1 {
		width: 100% !important;
		height: 0;
		padding-bottom: 70%;
		margin: 0;
		position: relative;
		overflow: hidden;
	}

	.picbox1 .picimg1 {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.bw_line {
		width: 10rpx;
		height: 30rpx;
		background-color: #fff;
		border-radius: 6rpx;

	}

	.bghead {
		background-image: url('@/static/img/other/ydjc.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;

	}
</style>