BeiJingGuoKang/北京国康小程序/pages/hospital/choose_list/choose_list.vue

<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2023年4月12日 13:02:16
	 */
	import {
		ref
	} from 'vue'
	import {
		HospitalListAction,
		$image,
		$response
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'

	onShow(() => {
		GetGreySet()
		getFuzzyLocation()
	})

	const getFuzzyLocation = () => {
		wx.getFuzzyLocation({
			type: 'wgs84',
			success(res) {
				HospitalList(res.latitude, res.longitude)
			},
			fail() {
				HospitalList(26.536252, 101.715271)
			}
		})
	}
	const hospital_list = ref([])
	const HospitalList = async (latitude, longitude) => {
		const response = await HospitalListAction({
			latitude,
			longitude
		})
		$response(response, () => {
			hospital_list.value = response.data.list
		})
	}

	const chooseHospitalClick = (info) => {
		uni.setStorageSync('HOSPITAL_ID', info.id)
		uni.$lu.hospital(() => {
			uni.navigateBack({
				delta: 1
			})
		})
	}
	//设置灰度
	const SysGreyType=ref(0)
	const GetGreySet=()=>{
		uni.getStorage({
			key: 'SysGreytype',
			success: function (res) {
				console.log(res.data);
				if(res.data==1){
					SysGreyType.value=1
				}
			}
		});
	}
</script>
<template>
	<view :class="SysGreyType==1? 'grey' :''">
		<view class="top_line_wrapper"></view>
		<view class="hospital_wrapper">
			<template v-for="(i,k) in hospital_list" :key="k" >
				<view @click="chooseHospitalClick(i)" class="hospital_item_wrapper">
					<view class="hospital_item_logo_wrapper">
						<image mode="aspectFill" :src="$image(i.logo)"></image>
					</view>
					<view class="hospital_item_info_wrapper">
						<view class="hospital_item_info_name_wrapper">
							{{ i.name }}
						</view>
						<view class="hospital_item_info_address_wrapper">
							<view class="hospital_item_info_address_icon_wrapper">
								<image :src="$image('/storage/assets/mp/home/医院地址@2x.png')"></image>
							</view>
							<view class="hospital_item_info_address_text_wrapper">
								{{ i.address }}
							</view>
							<view v-if="k!==0" class="hospital_item_info_address_distance_wrapper">
								距离 {{ i.distance }}km
							</view>
							<view v-else class="hospital_item_info_address_lately_wrapper">
								距离最近
							</view>
						</view>
					</view>
					<view class="hospital_item_icon_wrapper">
						<image :src="$image('/storage/assets/mp/hospital/选择@2x.png')"></image>
					</view>
				</view>
				<view class="hospital_line_wrapper"></view>
			</template>
		</view>
		<view class="blank_wrapper"></view>
	</view>
</template>
<style>
	page {
		background: #ffffff;
	}
</style>
<style scoped>
	.hospital_item_info_address_lately_wrapper {
		width: 84rpx;
		height: 24rpx;
		background: #FF620115;
		border-radius: 3rpx;
		font-size: 17rpx;
		font-weight: 500;
		color: #FF6201;
		line-height: 24rpx;
		text-align: center;
		margin-left: 13rpx;
	}

	.hospital_item_info_address_distance_wrapper {
		height: 24rpx;
		background: #ECECEC;
		border-radius: 3rpx;
		padding: 0 10rpx;
		line-height: 24rpx;
		font-size: 17rpx;
		font-weight: 500;
		color: #7D7D7D;
		margin-left: 13rpx;
	}

	.hospital_item_info_address_text_wrapper {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-left: 11rpx;
		max-width: 330rpx;
	}

	.hospital_item_info_wrapper {
		margin-left: 25rpx;
		width: 540rpx;
	}

	.hospital_item_icon_wrapper image {
		width: 13rpx;
		height: 21rpx;
		display: block;
	}

	.hospital_item_icon_wrapper {
		width: 13rpx;
		height: 21rpx;
	}

	.hospital_item_info_address_icon_wrapper image {
		width: 20rpx;
		height: 24rpx;
		display: block;
	}

	.hospital_item_info_address_icon_wrapper {
		width: 20rpx;
		height: 24rpx;
	}

	.hospital_item_info_address_wrapper {
		font-size: 22rpx;
		font-weight: 500;
		color: #AFB0B1;
		line-height: 24rpx;
		display: flex;
		align-items: center;
		margin-top: 13rpx;
	}

	.hospital_item_info_name_wrapper {
		font-size: 28rpx;
		font-weight: 500;
		color: #2C2C2C;
		line-height: 1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.hospital_item_logo_wrapper image {
		width: 90rpx;
		height: 90rpx;
		display: block;
		border-radius: 6rpx;
	}

	.hospital_item_logo_wrapper {
		width: 90rpx;
		height: 90rpx;
		margin-left: 37rpx;
	}

	.hospital_line_wrapper {
		width: 670rpx;
		height: 1rpx;
		background: #EBEBEB;
		margin: 0 auto;
	}

	.hospital_item_wrapper {
		height: 130rpx;
		display: flex;
		align-items: center;
	}
	.grey{
			   filter: grayscale(100%);   
		}
</style>