hainan_2024_zhenghe/h5/common/Top.vue

<template>
	<view>
		<view class="header_wrapper11" v-if="info">
			<view v-if="1" class="hospital_wrapper">
				<view class="hospital_icon_wrapper">
					<image src="@/static/assets/dingwei@2x.png"></image>
				</view>
				<view class="hospital_name_wrapper">{{info.hospital.name}}</view> 
				<view class="hospital_juli_wrapper" v-if="hospital_long">距您{{hospital_long}}km</view> 
				<!-- <view class="hospital_select_wrapper">
					<image src="@/static/assets/gengduo@2x.png"></image>
				</view> -->
			</view>
			<view v-if="1" class="user_wrapper" @click="tabPatients()">
				<view class="user_title_wrapper">体检人：</view>
				<view class="user_name_wrapper">{{info.person.name}}</view>
				<view v-if="info.person.count>1" class="user_choose_wrapper">
					<image src="@/static/assets/qiehuan@2x.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
 import {
 	ref,
 	computed,
 	nextTick
 } from "vue";
 import {
 	$image,
 	$api,
 	$response
 } from "@/api";
 import {
 	onShow,
 	onLoad
 } from "@dcloudio/uni-app";
 import {
 	useStore
 } from '@/store'
 const $store = useStore()
 let info=ref(null);
 const getBaseInfo = async () => {
 	uni.showLoading()
 	const response = await $api('BaseInfo',{
			hospital_id:1
		})
 	uni.hideLoading()
 	$response(response, () => {
 		 info.value=response.data
 		 getLong()
 	})
 }
 const tabPatients = () => {
 	uni.navigateTo({
 		url: "/pages/user/choose/choose",
 	});
 };
 let lola=ref(null)
 let hospital_long=ref('');
 const getLong = (time = 0) => {
 	uni.getLocation({
 		type: 'wgs84',
 		success: (res) => {
 			console.log(res)
 			lola.value = {
 				longitude: res.longitude,
 				latitude: res.latitude
 			} 
			let long = calculateDistance(
				lola.value.latitude,
				lola.value.longitude,
				
				$store.config.hospital[0].latitude,
				$store.config.hospital[0].longitude)
			if (long === 'NaN') {
				 hospital_long.value=0
			} else {
				  hospital_long.value=long
			}
 		},
 		fail: (e) => {
 			lola.value = {
 				longitude: 0,
 				latitude: 0
 			}
 			 
 		}
 	});
 }
 const calculateDistance = (lat1, lon1, lat2, lon2, radius = 6371) => {
 	const toRadians = (degrees) => degrees * Math.PI / 180;
 	const lat1Rad = toRadians(lat1);
 	const lon1Rad = toRadians(lon1);
 	const lat2Rad = toRadians(lat2);
 	const lon2Rad = toRadians(lon2);
 	const dLat = lat2Rad - lat1Rad;
 	const dLon = lon2Rad - lon1Rad;
 	const a = Math.sin(dLat / 2) ** 2 + Math.sin(dLon / 2) ** 2 * Math.cos(lat1Rad) * Math.cos(lat2Rad);
 	const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
 	return (radius * c).toFixed(2);
 }
 onShow(() => {  
 		 getBaseInfo()
 
 });
</script>

<style scoped>
 
.user_choose_wrapper {
		width: 50rpx;
		height: 50rpx;
		margin-left: 10rpx;
	}
	
	.user_choose_wrapper image {
		width: 50rpx;
		height: 50rpx;
		display: block;
		object-fit: contain;
	}
	
	.user_title_wrapper {
		font-weight: 400;
		font-size: 24rpx;
		color: #fff;
		line-height: 1;
		 white-space:nowrap;
	}
	
	.user_name_wrapper {
		font-weight: 400;
		font-size: 24rpx;
		color: #fff;
		line-height: 1;
	   white-space:nowrap;
		 
	}
	
	.user_wrapper {
		height: 60rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		margin-right: 20rpx;
		background: #009ea7;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.header_wrapper11 {
		display: flex;
		align-items: center;
		justify-content: space-between;
 
		height: 90rpx;
		background: #d8edf2;
		margin: 0 auto;
		position: relative;
		background-color: #fff;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 20rpx;
	}
	
	.hospital_wrapper {
		display: flex;
		align-items: center;
		width: 60%;
	}
	
	.hospital_icon_wrapper {
		width: 40rpx;
		height: 40rpx;
		margin-left: 16rpx;
	}
	
	.hospital_icon_wrapper image {
		width: 36rpx;
		height: 36rpx;
		display: block;
		object-fit: contain;
	}
	
	.hospital_name_wrapper {
		font-weight: 400;
		font-size: 28rpx;
		color: #484747;
		margin-left: 9rpx;
		line-height: 1;
	}
	
	.hospital_select_wrapper {
		width: 24rpx;
		height: 14rpx;
		margin-left: 19rpx;
	}
	
	.hospital_select_wrapper image {
		width: 24rpx;
		height: 14rpx;
		display: block;
		object-fit: contain;
	}
	.hospital_juli_wrapper{
		font-size: 20rpx;
		padding: 4rpx 8rpx;
		color:#ccc;
		margin-left: 20rpx;
		background-color: #EFF5F8;
	}
</style>