bolinscreening-miniapp/pages/index/index.vue

<template>
	<div class="container" v-if="imgUrl">
		<div class="null-box" v-if="!userList.length">
			<div class="center-box" @click="onEnterPage('addPatient')">
				<i class="font_family icon-shoucang"></i>
				还没有学生，去添加
			</div>
		</div>
		<scroll-view scroll-y @scroll="bindScrollPage" :style="{ height: winHeight }" v-else>
			<div class="bl-user-con">
				<div class="user-bg"><i class="font_family icon-maotouying"></i></div>
				<div class="user-info">
					<img class="user-avatar" v-if="currentPatient.avatar" :src="currentPatient.avatar" />
					<img class="user-avatar" v-else :src="imgUrl + (currentPatient.sex == '男' ? 'man.png' : 'woman.png')" />
					<div class="user-name">
						<span>
							<i class="name">{{ currentPatient.name }}</i>
							<i class="font_family" :class="[currentPatient.sex == '男' ? 'icon-boy' : 'icon-girl']"></i>
							<i class="age" v-if="currentPatient.age">{{ currentPatient.age }}岁</i>
						</span>
						<!-- <span>病历号：{{ currentPatient.code || '***' }}</span> -->
					</div>
					<!-- <div class="chart-btn" @click="onEnterPage('chart')">
						<img src="@/static/images/chart_img.png" />
						<span class="btn">健康分析</span>
					</div> -->
				</div>
				<div class="change-user" @click="bindOpenUserPopup">
					<i class="font_family icon-qiehuan"></i>
					切换学生
				</div>
			</div>
			<div class="school-box">
				<div class="title">就读学校</div>
				<div class="center">
					<span>{{ currentPatient.school }}</span>
					<span>{{ currentPatient.grade }}{{ currentPatient.class }}</span>
				</div>
			</div>
			<div class="date-box">
				<scroll-view scroll-x="true" show-scrollbar="false" :scroll-into-view="scrollView" class="date-bar">
					<div
						:id="'bl' + item.code"
						:class="['date-item', { checked: dateIndex == index }]"
						v-for="(item, index) in data"
						:key="index"
						@click="bindChangeDate(item, index)"
					>
						<span>
							<i>{{ item.date.split('-')[1] }}-{{ item.date.split('-')[2] }}</i>
							<i>{{ item.date.split('-')[0] }}</i>
						</span>
					</div>
				</scroll-view>
				<div class="result-memo">
					视力筛查结果：
					<span>{{ currentPatient.initial_exam }}</span>
				</div>
			</div>
			<!-- 报告内容 -->
			<div class="report-box" v-if="currentPatient.result">
				<div class="cell-item" v-if="currentPatient.result.visual.r_naked && currentPatient.result.visual.l_naked">
					<div class="title">裸眼数据</div>
					<div class="eye-grid">
						<div>
							<span>右眼</span>
							<span>{{ currentPatient.result.visual.r_naked || '-' }}</span>
							<block v-if="Number(currentPatient.result.visual.r_naked) < 5">
								<span>视力小于＜5.0</span>
								<span class="line red"></span>
								<span>视力异常</span>
							</block>
							<block v-else>
								<span>视力大于＞5.0</span>
								<span class="line green"></span>
								<span>视力良好</span>
							</block>
						</div>
						<div>
							<span>左眼</span>
							<span>{{ currentPatient.result.visual.l_naked || '-' }}</span>
							<block v-if="Number(currentPatient.result.visual.l_naked) < 5">
								<span>视力小于＜5.0</span>
								<span class="line red"></span>
								<span>视力异常</span>
							</block>
							<block v-else>
								<span>视力大于＞5.0</span>
								<span class="line green"></span>
								<span>视力良好</span>
							</block>
						</div>
					</div>
				</div>
				<div class="cell-item" v-if="currentPatient.result.visual.r_mirror && currentPatient.result.visual.l_mirror">
					<div class="title">戴镜数据</div>
					<div class="eye-grid">
						<div>
							<span>右眼</span>
							<span>{{ currentPatient.result.visual.r_mirror || '-' }}</span>
							<block v-if="Number(currentPatient.result.visual.r_mirror) < 5">
								<span>视力小于＜5.0</span>
								<span class="line red"></span>
								<span>视力异常</span>
							</block>
							<block v-else>
								<span>视力大于＞5.0</span>
								<span class="line green"></span>
								<span>视力良好</span>
							</block>
						</div>
						<div>
							<span>左眼</span>
							<span>{{ currentPatient.result.visual.l_mirror || '-' }}</span>
							<block v-if="Number(currentPatient.result.visual.l_mirror) < 5">
								<span>视力小于＜5.0</span>
								<span class="line red"></span>
								<span>视力异常</span>
							</block>
							<block v-else>
								<span>视力大于＞5.0</span>
								<span class="line green"></span>
								<span>视力良好</span>
							</block>
						</div>
					</div>
				</div>
				<div class="cell-item">
					<div class="title">屈光数据</div>
					<div class="eye-table">
						<div class="th">
							<span></span>
							<span>右眼</span>
							<span>左眼</span>
						</div>
						<div class="tr">
							<span class="td"><span class="td-label" @click="bindLookMemo('球镜')">球镜</span></span>
							<span class="td">{{ currentPatient.result.optometry.r_sph }}</span>
							<span class="td">{{ currentPatient.result.optometry.l_sph }}</span>
						</div>
						<div class="tr">
							<span class="td"><span class="td-label" @click="bindLookMemo('柱镜')">柱镜</span></span>
							<span class="td">{{ currentPatient.result.optometry.r_cyl }}</span>
							<span class="td">{{ currentPatient.result.optometry.l_cyl }}</span>
						</div>
						<div class="tr">
							<span class="td"><span class="td-label" @click="bindLookMemo('轴位')">轴位</span></span>
							<span class="td">{{ currentPatient.result.optometry.r_axis }}</span>
							<span class="td">{{ currentPatient.result.optometry.l_axis }}</span>
						</div>
					</div>
				</div>
				<div class="result-tips">温馨提示：该视力检查结果不作为诊断依据，请到正规的眼科医疗机构进行详细的检查。</div>
			</div>
		</scroll-view>

		<!-- <button open-type="contact" :session-from="sessionFrom" :plain="true" hover-class="none" class="contact-btn">
			<i class="font_family icon-rexianicon"></i>
		</button> -->
		<!-- <movable-area class="custom-movable-area">
			<movable-view class="custom-movable-view" :style="{ right: scrollBottom ? '-32px' : '5px' }" direction="vertical" inertia @change="onMovableChange">
				<div class="contact-box">
					<div class="contact-btn" @click="bindContact"><i class="font_family icon-rexianicon"></i></div>
				</div>
			</movable-view>
		</movable-area> -->

		<!-- 切换学生 -->
		<uni-popup :duration="100" ref="userPopup" type="bottom">
			<div class="popup-btn">
				<span @click="$refs.userPopup.close()">取消</span>
				<span @click="bindConfirmUser">确定</span>
			</div>
			<picker-view
				v-if="userList.length"
				:value="userValue"
				indicator-class="indicator-class"
				@change="bindChangeUser"
				@pickstart="bindPickStartUser"
				@pickend="bindPickEndUser"
				class="picker-view"
			>
				<picker-view-column>
					<view class="item" v-for="(item, index) in userList" :key="index">{{ item.name }}</view>
				</picker-view-column>
			</picker-view>
		</uni-popup>

		<!-- 名词解释弹窗 -->
		<uni-popup ref="popupShow" type="center">
			<div class="popup-content">
				<span class="close-btn" @click="$refs.popupShow.close()"><i class="font_family icon-quxiaoguanbi"></i></span>
				<div class="bl-describe-con">
					<div class="describe-title">{{ popupData.img ? '服务说明' : '名词解释' }}</div>
					<div class="describe-box">
						<div class="describe-tag">
							<span>
								<i>{{ popupData.title }}</i>
							</span>
						</div>
						<img v-if="popupData.img" class="describe-img" :src="baseUrl + '/device/' + popupData.img" />
						<div class="describe-text">{{ popupData.content }}</div>
					</div>
				</div>
			</div>
		</uni-popup>
	</div>
</template>

<script>
import methods from './methods.js';
import uniPopup from '@/components/uni-popup/uni-popup';
export default {
	components: {
		uniPopup
	},
	data() {
		return {
			imgUrl: '',
			userInfo: '',
			sessionFrom: '',
			winHeight: '',
			scrollBottom: false,
			userList: [],
			data: '',
			currentPatient: '',
			dateIndex: 0,
			scrollView: '',
			userValue: [0],
			popupData: {
				title: '',
				img: '',
				content: ''
			}
		};
	},
	onLoad(options) {
		let app = getApp();
		this.imgUrl = app.globalData.imgUrl;
		this.winHeight = uni.getSystemInfoSync().windowHeight + 'px';
	},
	onShow() {
		this.userInfo = uni.getStorageSync('userInfo');
		if (this.userInfo) {
			this.initData()
		}
	},
	methods: {
		...methods
	}
};
</script>

<style scoped lang="scss">
@import './style.scss';
</style>