h5/pages/index/index.vue

<template>
	<view class="mb-5">
		<view class="" v-if="userData.id">
			<view class="header p-3">
				<view class="centerY">
					<span class="d-inline-block fs-18 text-white font-bold">个人档案</span>
					<span
						v-if="ipArr.find(item => item.ip == prodIp) && ipArr.find(item => item.ip == prodIp).name !== '兰溪'"
						class="d-inline-block py-1 d-inline-block ml-auto text-white1"
						@click="closet"
					>
						[ 退出 ]
					</span>
					<span
						v-if="ipArr.find(item => item.ip == prodIp) && ipArr.find(item => item.ip == prodIp).name == '兰溪'"
						class="d-inline-block py-1 d-inline-block ml-auto text-white1"
						@click="operation"
					>
						[ 切换 ]
					</span>
				</view>
				<view class="centerY mt-2" @click="$mf.clickNavto('/pages/userinfo/userinfo')">
					<view class="w-15 userhead">
						<view class="picbox">
							<image v-if="userData.sex == 1" src="@/static/img/defult/head1.png" mode="widthFix" class="picimg"></image>
							<image v-if="userData.sex == 2" src="@/static/img/defult/head2.png" mode="widthFix" class="picimg"></image>
						</view>
					</view>
					<view class="w-85 ml-3">
						<view class="text-white fs-16 font-bold">{{ userData.username || '' }}</view>
						<view class="centerY" style="margin-top:10rpx;">
							<view :class="{ 'iconfont text-white fs-16 font-bold': true, ' nv': userData.sex == 2, nanxing: userData.sex == 1 }"></view>
							<view class="py-1 pl-2 text-center centerY text-gry80 bg-white ml-auto" style="border-radius: 6rpx;">
								<view class="">基础资料</view>
								<view class="iconfont youla2 fs-12 font-bold"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content p-3 bg-white mx-3 my-3 box-border08">
				<view class="" style="display:flex;flex-wrap: wrap !important;">
					<view class="w-100 border-box">
						<view class="" style="background: linear-gradient(180deg, rgb(151,220,249) 0%, rgb(110,197,246) 100%);border-radius: 16rpx;">
							<view class="px-3 pt-2 pb-3 ">
								<view class="centerY ">
									<view class="bule_line"></view>
									<text class="fs-18 ml-2 font-bold" style="color: #1C90D7;">个人体征</text>
								</view>
								<view class="mt-2" style="color: #000;">
									<view class="font-bold" style="display:flex;flex-wrap: wrap !important;">
										<view class="w-50  border-box pr-1">
											<view class=" d-flex px-2 py-1" style="color: #55afdf;border-radius: 10rpx;background-color: rgba(255,255,255)">
												身高
												<span class="ml-auto ml-1">{{ physical.height || '-' }} cm</span>
											</view>
										</view>
										<view class="w-50 border-box  pl-1">
											<view class=" d-flex px-2 py-1" style="color: #55afdf;border-radius: 10rpx;background-color: rgba(255,255,255)">
												体重
												<span class="ml-auto ml-1">{{ physical.weight || '-' }} kg</span>
											</view>
										</view>
										<view class="w-50 border-box pr-1 mt-2">
											<view class=" d-flex px-2 py-1" style="color: #55afdf;border-radius: 10rpx;background-color: rgba(255,255,255)">
												BMI
												<span class="ml-auto ml-1">{{ physical.bmi || '-' }} kg/m^2</span>
											</view>
										</view>
										<view class="w-50 border-box pl-1 mt-2">
											<view class=" d-flex px-2 py-1" style="color: #55afdf;border-radius: 10rpx;background-color: rgba(255,255,255)">
												血压
												<span class="ml-auto ml-1">{{ physical.diastole || '-' }}/{{ physical.shrink || '-' }} mmHg</span>
											</view>
										</view>
										<view class="w-50 border-box pr-1 mt-2">
											<view class=" d-flex px-2 py-1" style="color: #55afdf;border-radius: 10rpx;background-color: rgba(255,255,255)">
												心率
												<span class="ml-auto ml-1">{{ physical.pulse || '-' }} bmp</span>
											</view>
										</view>
										<view class="w-50 border-box pl-1 mt-2">
											<view class=" d-flex px-2 py-1" style="color: #55afdf;border-radius: 10rpx;background-color: rgba(255,255,255)">
												腰围
												<span class="ml-auto ml-1">{{ physical.waist || '-' }} cm</span>
											</view>
										</view>
										<view class="w-50 border-box pr-1 mt-2">
											<view class=" d-flex px-2 py-1" style="color: #55afdf;border-radius: 10rpx;background-color: rgba(255,255,255)">
												血糖
												<span class="ml-auto ml-1">{{ physical.bloodGlucose || '-' }} mmol/L</span>
											</view>
										</view>
										<view class="w-50 border-box pl-1 mt-2">
											<view class=" d-flex px-2 py-1" style="color: #55afdf;border-radius: 10rpx;background-color: rgba(255,255,255)">
												血氧
												<span class="ml-auto ml-1">{{ physical.spo2 || '-' }} mmHg</span>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="w-50 pr-2 border-box mt-3">
						<image @click="$mf.clickNavto('/pages/medication/medication')" src="@/static/img/index/dqyy.png" mode="widthFix" class="w-100"></image>
					</view>
					<view class="w-50 pl-2 border-box mt-3">
						<image @click="$mf.clickNavto('/pages/health_report/health_report')" src="@/static/img/index/jkbg.png" mode="widthFix" class="w-100"></image>
					</view>
				</view>
				<view class="mt-2"><image @click="$mf.clickNavto('/pages/eye_ground/eye_ground')" src="@/static/img/index/ydjc.png" mode="widthFix" class="w-100"></image></view>
				<view class="mt-2"><image @click="$mf.clickNavto('/pages/home_monitoring/home_monitoring')" src="@/static/img/index/jjjc.png" mode="widthFix" class="w-100"></image></view>
			</view>
		</view>
		<view class="">
			<uni-popup ref="popup1" type="top" :mask-click="false">
				<view class=" w-80 mx-auto" style="margin-top: 30vh;">
					<view class="bg-white p-3 w-100 border-box" style="border-radius: 16rpx;">
						<view class="text-center mb-3 fs-14 font-bold py-2">查询</view>
						<view class=" centerY mb-3 w-100 border-box" style="overflow: hidden; ">
							<input
								type="text"
								v-model="valueId"
								class="px-2 m-0 fs-12 w-75  border-box"
								style="height: 70rpx;border: 2px solid #007aff;border-top-left-radius: 4rpx;border-bottom-left-radius: 4rpx;"
								placeholder="请输入身份证号码"
								placeholder-class="fs-12"
							/>
							<uni-button
								type="primary"
								class="my-button fs-12 ml-auto border-box w-25"
								style="height: 70rpx;line-height: 70rpx; padding: 0 ;border-top-right-radius: 12rpx;border-bottom-right-radius: 12rpx;"
								@click="search"
							>
								搜索
							</uni-button>
						</view>
					</view>
				</view>
			</uni-popup>

			<uni-popup ref="popup2" type="top" :mask-click="false">
				<view class=" w-80 mx-auto" style="margin-top: 30vh;">
					<view class="bg-white p-3 w-100 text-center border-box" style="border-radius: 16rpx;">
						<view class="text-center mb-3 fs-14 font-bold py-2">患者列表</view>
						<view class="text-left centerY mb-3" style="border-radius: 14rpx;border: 2px solid #007aff;">
							<uni-data-select v-model="userIndex" :localdata="userArr" @change="bindPickerChange" placeholder="请选择身份"></uni-data-select>
						</view>
						<view class="" v-if="userArr.length == 0"><empty title="还未绑定患者" /></view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
const ipArr = [
	{
		name: '开发',
		ip: 'http://192.168.1.103:10066'
	},
	{
		name: '测试',
		ip: 'http://testapi.xklr.net:8601'
	},
	{
		name: '正式',
		ip: 'http://apiv3.xklr.net'
	},
	{
		name: '兰溪',
		ip: 'https://lxh5api.xklr.net'
	},
	{
		name: '附海',
		ip: 'http://192.26.1.242:10066'
	}
];
let globalData = getApp().globalData;
import Empty from '@/component/empty/empty.vue';
export default {
	components: {
		Empty
	},
	data() {
		return {
			userData: {},
			physical: {},
			valueId: '',
			prodIp: '',
			ipArr,
			userArr: [],
			userIndex: null
		};
	},
	onLoad() {
		this.decrypt();
	},
	methods: {
		//正式
		async zhengshi() {
			let t = this;
			if (!uni.getStorageSync('idCard')) {
				t.$refs.popup1.open();
				uni.hideLoading();
			} else {
				t.getuserinfo(uni.getStorageSync('idCard'));
			}
		},
		//兰溪
		lanxi() {
			let t = this;
			uni.getStorage({
				key: 'token',
				async success(res) {
					if (!res.data) return;
					let res2 = await t.$api.decrypt({
						toKen: res.data
					});
					if (res2.code !== -1) {
						if (!res2.data.uuid) {
							uni.showModal({
								title: '提示',
								content: '您还未登录请先去登录！',
								showCancel: false,
								success: function(res3) {
									if (res3.confirm) {
										console.log('用户点击确定');
										uni.navigateBack({
											delta: 1 //返回层数，2则上上页
										});
									}
								}
							});
							return;
						}
						if (res2.data.users && res2.data.users.length > 0) {
							t.$refs.popup2.open();
							t.userArr = [];
							res2.data.users.map((item, index) => {
								t.userArr.push({
									value: index,
									text: item.idcard
								});
							});
							uni.hideLoading();
						} else {
							t.$refs.popup2.open();
							t.userArr = [];
							res2.data.users.map((item, index) => {
								t.userArr.push({
									value: index,
									text: item.idcard
								});
							});
							uni.hideLoading();
						}
					} else {
						//返回数据出错
						errordata();
					}
				},
				fail(error) {
					//未获取到token或者出错
					errordata();
				}
			});

			function errordata() {
				if (!uni.getStorageSync('idCard')) {
					t.$refs.popup1.open();
					uni.hideLoading();
				} else {
					t.getuserinfo(uni.getStorageSync('idCard'));
				}
			}
		},
		decrypt() {
			//token解码
			uni.showLoading({
				title: '加载中'
			});
			let t = this;
			let timer = setInterval(() => {
				//等待获取ip
				if (globalData.configData.prodIp) {
					t.prodIp = globalData.configData.prodIp;
					clearInterval(timer);
				}
				ipArr.map(async item => {
					if (item.ip == globalData.configData.prodIp && item.name == '兰溪') {
						t.lanxi();
						return;
					}
					if (item.ip == globalData.configData.prodIp && item.name == '附海') {
						t.zhengshi();
						return;
					}
					if (item.ip == globalData.configData.prodIp && item.name == '正式') {
						t.zhengshi();
						return;
					}
					if (item.ip == globalData.configData.prodIp && item.name == '测试') {
						t.zhengshi();
						return;
					}
					if (item.ip == globalData.configData.prodIp && item.name == '开发') {
						t.zhengshi();
						return;
					}
				});
			}, 300);
		},
		//切换
		operation() {
			uni.clearStorage('idCard');
			uni.clearStorage('userData');
			this.valueId = '';
			this.userData = {};
			this.physical = {};
			this.$refs.popup2.open();
		},
		bindPickerChange(e) {
			if (this.userArr[e] && this.userArr[e].text) {
				this.getuserinfo(this.userArr[e].text);
			}
		},
		closet() {
			uni.clearStorage('idCard');
			uni.clearStorage('userData');
			this.valueId = '';
			this.userData = {};
			this.physical = {};
			this.$refs.popup1.open();
		},
		search() {
			if (!this.$mf.isCardID(this.valueId)) {
				uni.showToast({
					title: '请输入正确的身份证号',
					icon: 'error',
					duration: 2000,
					mask: true
				});
				return;
			}
			this.userData = {};
			this.physical = {};
			this.getuserinfo(this.valueId);
		},
		async find_physical() {
			uni.showLoading({
				title: '加载中'
			});
			let idCard = uni.getStorageSync('idCard');
			let { data, code } = await this.$api.find_physical({
				idCard
			});
			if (code == 0) {
				this.physical = data || {};
				uni.hideLoading();
			} else {
				uni.hideLoading();
			}
			uni.stopPullDownRefresh();
		},
		async getuserinfo(idCard) {
			//330222194512283184
			idCard = idCard || uni.getStorageSync('idCard');
			uni.showLoading({
				title: '加载中'
			});
			let { data, code } = await this.$api.getUserInfo({
				idCard
			});
			if (code == 0) {
				this.valueId = '';
				uni.setStorageSync('userData', data || {});
				uni.setStorageSync('idCard', (data && data.idCard) || '');
				this.userData = data || {};
				if (data && data.id) {
					this.find_physical();
					this.$refs.popup1.close();
					this.$refs.popup2.close();
				} else {
					uni.showToast({
						title: '未查询到患者',
						icon: 'error'
					});
				}
				uni.hideLoading();
				uni.stopPullDownRefresh();
			} else {
				this.valueId = '';
				uni.hideLoading();
				uni.stopPullDownRefresh();
			}
		}
	},
	onPullDownRefresh() {
		if (this.userData && this.physical) {
			if (uni.getStorageSync('idCard')) {
				this.find_physical();
			} else {
				uni.stopPullDownRefresh();
			}
		} else {
			uni.stopPullDownRefresh();
		}
	}
};
</script>

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

.header {
	background: linear-gradient(180deg, #096dcb 0%, #6faae1 100%);
}

.userhead {
	border-radius: 50%;
	box-shadow: 1px 1px 10px 1px #096dcb;
}

.text-gry80 {
	color: #808080;
}

.box-border08 {
	border-radius: 16rpx;
}
</style>