hospital-accompaniment-wechat/pages/tabBar/index.vue

<template>
	<view class="container">
		<template v-if="swiperList.length == 0">
			<u-skeleton rows="1" class="skeleton-full" loading :rowsHeight="170" :title="false"></u-skeleton>
			<view style="margin: 30rpx 0">
				<u-skeleton rows="2" title loading avatar avatarSize="120" avatarShape="square" :rowsHeight="28"
					:titleHeight="32"></u-skeleton>
			</view>
		</template>
		<template v-else>
			<view class="banner-box">
				<u--image v-if="swiperList.length == 1" :src="swiperList[0]" mode="aspectFill" :fade="true"
					duration="450" :lazy-load="true" width="100%" height="340rpx"></u--image>
				<u-swiper v-else :list="swiperList" @change="change" @click="toLinkPage" :autoplay="false" radius="0"
					height="340rpx"></u-swiper>
			</view>
			<view class="hospital-box">
				<view class="hospital-list">
					<view class="hospital-item" v-for="item,index in hospitalList" :key="index">
						<u--image :src="item.logoUrl" mode="aspectFill" :fade="true" duration="450" :lazy-load="true"
							width="262rpx" height="200rpx"></u--image>
						<view class="hospital-info">
							<view class="info-top">
								<view class="hospital-name">{{item.name || '-'}}</view>
								<view class="hospital-distance">{{item.relativeDistance || 0}}{{item.distanceUnit}}
								</view>
							</view>
							<view class="info-bottom">
								<view class="info-bottom-l">
									<span class="hospital-address">
										<u-icon name="map-fill" color="#999999" size="14"></u-icon>
										<span class="address">{{item.address || '-'}}</span>
									</span>
									<!-- <view class="hospital-area">所在区:{{item.areaName || '-'}}</view> -->
								</view>
							</view>
							<view class="btn-box">
								<view class="hospital-btn" @click="toPlaceOrder(item)">去下单</view>
							</view>
						</view>
					</view>
				</view>
				<view class="footer-box">
					<image src="/static/icon-home.png" mode="aspectFill"></image>
					<span class="tip">润康优护为你提供服务</span>
				</view>
			</view>

		</template>
	</view>
</template>

<script>
	import {
		linkList,
		getHospitalList
	} from "@/api/home.js"
	export default {
		data() {
			return {
				swiperList: [],
				userInfo: {},
				currents: 0,

				hospitalList: [],
				coordinates: '',

				pageSize: 10,
				pageNo: 1,
				botLoadingShow: 0, //0不显示  1显示 3.显示没有更多了
				loadingShow: false,
				status: 'loadmore',
				loadingText: '努力加载中',
				loadmoreText: '上拉或点击加载更多',
				nomoreText: '实在没有了',
				total: 0,
			};
		},
		async onLoad() {
			//获取当前定位信息
			// uni.getLocation({
			// 	type: 'gcj02',
			// 	success: (res) => {
			// 		console.log('当前位置的经度：' + res.longitude);
			// 		console.log('当前位置的纬度：' + res.latitude);
			// 		this.coordinates = res.longitude + ',' + res.latitude;
			// 		this.getList();
			// 	}
			// });

			this.realoadData();
		},
		onShow() {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});

		},
		methods: {
			async realoadData() {
				this.getBannerList();
				//定位缓存
				let locationInfo = uni.getStorageSync('locationInfo');
				if (locationInfo) {
					this.coordinates = locationInfo.longitude + ',' + locationInfo.latitude;
					this.getList();
					//再去判断是否有最新的定位信息
					let data = await this.$utils.getLocation();
					if (data.long != locationInfo.longitude || data.lat != locationInfo.latitude) {
						// 如果有新的定位,刷新列表
						uni.setStorageSync('locationInfo', {
							longitude: data.long,
							latitude: data.lat
						})
						this.getList();
					}
				} else {
					// 无缓存信息
					let data = await this.$utils.getLocation();
					if (data) {
						//有授权定位
						console.log('当前位置的经度：' + data.long);
						console.log('当前位置的纬度：' + data.lat);
						this.coordinates = data.long + ',' + data.lat;
						uni.setStorageSync('locationInfo', {
							longitude: data.long,
							latitude: data.lat
						})
						this.getList();
					} else {
						// 无授权定位
						this.coordinates = undefined;
						this.getList();
					}
				}


			},
			getList() {
				let that = this;
				uni.showLoading({
					title: '加载中',
					mask: true,
				});
				let param = {
					coordinates: that.coordinates
				};
				getHospitalList(param).then(res => {
					let data = res.data;
					if (data) {
						this.hospitalList = data; //在列表后面新增新获取的数据
						// if (this.hospitalList.length >= this.total) {
						// 	this.status = 'nomore';
						// 	return;
						// }
					} else {
						that.status = 'nomore';
					}
				}).finally(() => {

					uni.hideLoading();
				})


			},
			toPlaceOrder(obj) {
				// let item = {
				// 	id: obj.id,
				// 	name: obj.name,
				// 	address: obj.address,
				// 	logoUrl: obj.logoUrl,
				// 	areaName: obj.areaName,
				// }
				uni.navigateTo({
					url: '/pages/order/placeAnOrder?id=' + obj.id
				})
			},
			getBannerList() {
				let that = this;
				linkList('home_top_banner').then(res => {
					res.data.forEach(item => {
						that.swiperList.push(item.image)
					})
				}).finally(() => {})
			},

			toLinkPage() {

			},

			//下拉刷新
			onPullDownRefresh() {
				this.pageNo = 1;
				this.swiperList = [];
				this.hospitalList = [];
				this.realoadData();
				uni.stopPullDownRefresh();
			},
			//上拉加载
			// onReachBottom() {
			// 	this.pageNo++;
			// 	this.getList();
			// },
			change(index) {
				this.currents = index;
			},

			/**
			 * 用户点击右上角分享
			 */
			onShareAppMessage: function() {
				const nickName = '您的好友'
				const title = '润护通为您提供服务',
					path = `/pages/tabBar/index`
				// imageUrl = 'https://www.baidu.com.cn/img/20211108/activity.png'
				return {
					title,
					path
					// imageUrl
				};
			}


		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #fff;
		min-height: 100vh;

		.banner-box {
			width: 100%;
			height: 340rpx;

			image {
				width: 100%;
				height: 340rpx !important;
			}

			.u--image {
				width: 100%;
				height: 340rpx !important;
			}
		}

		.hospital-box {
			display: flex;
			flex-direction: column;
			min-height: calc(100vh - 340rpx);
			background-color: #fff;

			.hospital-list {
				padding: 0 30rpx 40rpx;
				flex: 1;

				.hospital-item {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 30rpx 0;
					border-bottom: 1rpx solid #f0f0f0;

					// &:last-child {
					// 	border-bottom: none;
					// }

					// image {
					// 	width: 262rpx;
					// 	height: 200rpx;
					// 	border-radius: 20rpx;
					// 	margin-right: 17rpx;
					// }

					.hospital-info {
						flex: 1;
						margin-left: 17rpx;

						.info-top {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.hospital-name {
								width: 300rpx;
								font-size: 30rpx;
								font-weight: bold;
								// word-break: break-all;
								display: -webkit-box;
								-webkit-line-clamp: 1;
								/* 设置显示的行数 */
								-webkit-box-orient: vertical;
								overflow: hidden;
								text-overflow: ellipsis;
								max-width: 300px;
								/* 设置最大宽度，根据需要调整 */
								//超过一行使用省略号 

							}

							.hospital-distance {
								text-align: right;
								margin: 15rpx 0;
								font-size: 28rpx;
								color: #999;
							}
						}

						.info-bottom {
							display: flex;
							flex-direction: column;
							// justify-content: space-between;
							// align-items: center;

							.info-bottom-l {
								flex: 1;

								.hospital-address {
									display: flex;
									justify-content: flex-start;
									align-items: flex-start;
									width: 100%;
									margin-top: 10rpx;
									font-weight: 500;
									line-height: 40rpx;
									overflow: hidden; //超出的文本隐藏
									text-overflow: ellipsis; //溢出用省略号显示
									white-space: normal; //处理元素中的 空白
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									display: -moz-box;
									-moz-line-clamp: 2;
									-moz-box-orient: vertical;
									overflow-wrap: break-word;
									word-break: break-all;

									::v-deep .u-icon {
										display: inline-block;
									}

									// u-icon和span在同一行,换行时文字在icon下面


									.address {
										font-size: 28rpx;
										margin-left: 5rpx;
										color: #999999;
									}
								}

								.hospital-area {
									font-size: 28rpx;
									color: #999;
								}
							}


						}

						.btn-box {
							display: flex;
							justify-content: flex-end;
							align-items: center;
							margin-top: 20rpx;

							.hospital-btn {
								width: 165rpx;
								height: 60rpx;
								margin-left: 10rpx;
								line-height: 60rpx;
								text-align: center;
								background: #4B91D1;
								color: #fff;
								font-size: 24rpx;
								border-radius: 30rpx;
								justify-content: flex-end;
							}
						}
					}
				}
			}
		}

		.footer-box {
			display: flex;
			justify-content: center;
			align-items: center;
			// position: fixed;
			// bottom: 0;
			// left: 0;
			width: 100%;
			padding: 32rpx 0;
			background-color: #fff;

			image {
				width: 25rpx;
				height: 25rpx;
			}

			.tip {
				margin-left: 7rpx;
				color: #B3B3B3;
				font-size: 26rpx;
				line-height: 26rpx;
			}
		}
	}


	/* 骨架屏容器样式 */
	.skeleton-full {
		width: 100%;
		height: 100%;
	}

	/* 关键：使用深度选择器修改骨架屏内部样式 */
	::v-deep .u-skeleton__wrapper__content__rows {
		width: 100% !important;
	}
</style>