pages/sub_medical/hospital.vue

<template>
	<view class="hospital">
		<view class="hospital-search">
			<u-search placeholder="搜索医院名称" v-model="hospial" :show-action="false" bg-color="#ffffff" :focus="isFocus" @search="get_hospital_list"></u-search>
		</view>
		<view class="hospital-drop">
			<view class="hospital-drop-item">
				<u-dropdown border-bottom class="drop">
					<u-dropdown-item v-model="value1" title="医院排序" :options="options1"></u-dropdown-item>
				</u-dropdown>
			</view>
		</view>
		<view class="hospital-ul">
			<view class="hospital-ul-noitem" v-if="hospital_list.length == 0">
				<text>{{notice}}</text>
			</view>
			<view class="hospital-ul-item" v-else >
				<view class="hospital-ul-item-box" v-for="(v,i) in hospital_list" :key="i">
					<view class="hospital-ul-item-left">
						<u-image :src="v.src" width="100" mode="widthFix"></u-image>
					</view>
					<view class="hospital-ul-item-right">
						<view class="hospital-ul-item-right-item">
							<text class="hospital-ul-item-right-item-logo">{{v.level}}</text>
							<text class="hospital-ul-item-right-item-value" style="color: #333333;font-size: 32rpx;">{{v.name}}</text>
						</view>
						<view class="hospital-ul-item-right-item">
							<text class="hospital-ul-item-right-item-title">地理位置：</text>
							<text class="hospital-ul-item-right-item-value">{{v.address}}</text>
						</view>
						<view class="hospital-ul-item-right-item">
							<text class="hospital-ul-item-right-item-title">门诊时间：</text>
							<text class="hospital-ul-item-right-item-value">{{v.time}}</text>
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isFocus: true,
				hospial: '',
				value1: 1,
				options1: [{
					label: '默认排序',
					value: 1,
				}],
				hospital_list: [],
				notice:'暂无数据'
			}
		},
		onLoad() {

		},
		methods: {
			get_hospital_list() {
				let that = this
				let name = that.hospial
				let params = {
					pageno: 1,
					pagesize: 10,
					name: name
				}
				that.$u.get('/medicalapi/hospital/list', params).then(res => {
					that.hospital_list = res.data.list
					that.notice = '没有搜索到此关键词'
					console.log(res.data.list)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.drop {
		/deep/.u-dropdown__menu__item {
			padding: 0 30rpx;
			justify-content: flex-start;
		}
	}

	.hospital {
		font-family: "PingFang-SC-Medium";

		&-search {
			padding: 30rpx;
		}

		&-drop {
			background-color: #FFFFFF;

			&-item {}
		}

		&-ul {
			background-color: #FFFFFF;

			&-noitem {
				display: flex;
				justify-content: center;
				padding: 50rpx 30rpx;
				align-items: center;
			}

			&-item {
				&-box {
					display: flex;
					justify-content: space-between;
					padding: 30rpx 10rpx;
				}

				&-left {
					flex: 1;
					display: flex;
					justify-content: center;
				}

				&-right {
					display: flex;
					flex: 4;
					flex-direction: column;

					&-item {
						padding: 0 0 10rpx;
						display: flex;
						align-items: center;

						&-logo {
							display: inline-block;
							background-color: #17C46F;
							padding: 4rpx;
							color: #FFFFFF;
							font-size: 20rpx;
							border-radius: 5rpx;
							margin-right: 10rpx;
						}

						&-title {
							display: inline-block;
							// flex: 1;
							width: 140rpx;
							color: #B5B5B5;
							font-size: 26rpx;
						}

						&-value {
							display: inline-block;
							// flex: 4;
							color: #B5B5B5;
							width: 400rpx;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}
</style>