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

<template>
	<view class="container">
		<view class="banner-box">
			<u-swiper :list="swiperList" @change="change" @click="toLinkPage" 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">
					<image :src="item.logoUrl" mode="aspectFill" />
					<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>
	</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,
			};
		},
		onLoad() {
			//获取当前定位信息
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					this.coordinates = res.longitude + ',' + res.latitude;
					this.getList();
				}
			});
		},
		onShow() {
			this.getBannerList();
		},
		methods: {
			getList() {
				let that = this;
				uni.showLoading({
					title: '加载中',
					mask: true,
				});
				let param = {
					// pageNo: that.pageNo,
					// pageSize: that.pageSize,
					coordinates: that.coordinates
				};
				getHospitalList(param).then(res => {
					let data = res.data;
					if (data) {
						this.hospitalList.push(...data); //在列表后面新增新获取的数据
						// this.total = data.total; //获取数据总页数
						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.hospitalList = [];
				this.getList();
				this.getBannerList();
				uni.stopPullDownRefresh();
			},
			//上拉加载
			// onReachBottom() {
			// 	this.pageNo++;
			// 	this.getList();
			// },
			change(index) {
				this.currents = index;
			},


		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.banner-box {
			width: 100%;
			height: 340rpx;

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

		.hospital-box {
			background-color: #fff;

			.hospital-list {
				padding: 0 30rpx;

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

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

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

					.hospital-info {
						flex: 1;

						.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;
							}
						}
					}
				}
			}
		}
	}
</style>