pages/sub_medical/appointment.vue

<template>
	<view class="appointment">
		<view class="appointment-header" @click="getLocal">
			<u-image src="./images/app_bannar.png" width="100%" mode="widthFix"></u-image>
			<u-icon name="map" color="#52B6E6" size="36" :label="local" class="appointment-header-icon"></u-icon>
		</view>
		<view class="appointment-search">
			<u-search placeholder="搜索医院名称" v-model="hospial" :show-action="false" bg-color="#ffffff" @focus="toPath('/pages/sub_medical/hospital')"></u-search>
		</view>
		<view class="appointment-record">
			<u-cell-group>
				<u-cell-item title="我的挂号记录" value="查看更多" @click="toPath('/pages/sub_medical/record')"></u-cell-item>
			</u-cell-group>
			<view class="appointment-record-msg" v-if="record_list.length != 0">
				<view class="appointment-record-msg-left">
					<u-image src="/static/images/active/mrlfl.png" width="100" mode="widthFix"></u-image>
				</view>
				<view class="appointment-record-msg-center">
					<view class="appointment-record-msg-center-item">
						<text class="appointment-record-msg-center-item-title">就诊人员：</text>
						<text class="appointment-record-msg-center-item-value">李小萌</text>
					</view>
					<view class="appointment-record-msg-center-item">
						<text class="appointment-record-msg-center-item-title">就诊医院：</text>
						<text class="appointment-record-msg-center-item-value">大理市第二人民医院</text>
					</view>
					<view class="appointment-record-msg-center-item">
						<text class="appointment-record-msg-center-item-title">就诊科室：</text>
						<text class="appointment-record-msg-center-item-value">普外科</text>
					</view>
					<view class="appointment-record-msg-center-item">
						<text class="appointment-record-msg-center-item-title">就诊时间：</text>
						<text class="appointment-record-msg-center-item-value">2020-10-27【上午】</text>
					</view>
				</view>
				<view class="appointment-record-msg-right">
					<text class="appointment-record-msg-status">挂号成功</text>
				</view>
			</view>
			<view class="appointment-record-nomsg" v-else>
				<text>暂无挂号记录</text>
			</view>
			<!-- <view class="appointment-record-btn">
				<u-button :plain="true" size="mini" type="primary" shape="circle">取消预约</u-button>
			</view> -->
		</view>
		<view class="appointment-hospital">
			<u-cell-group>
				<u-cell-item title="本地医院" value="查看更多" @click="toPath('/pages/sub_medical/hospital')"></u-cell-item>
			</u-cell-group>
			<view class="appointment-hospital-msg" v-if="hospital_list.length != 0">
				<view class="appointment-hospital-msg-box" @click="toPath('/pages/sub_medical/outpatient')" v-for="(v,i) in hospital_list" :key="i">
					<view class="appointment-hospital-msg-left">
						<u-image :src="v.src" width="100" mode="widthFix"></u-image>
					</view>
					<view class="appointment-hospital-msg-right">
						<view class="appointment-hospital-msg-right-item">
							<text class="appointment-hospital-msg-right-item-logo">{{v.level}}</text>
							<text class="appointment-hospital-msg-right-item-value" style="color: #333333;font-size: 32rpx;">{{v.name}}</text>
						</view>
						<view class="appointment-hospital-msg-right-item">
							<text class="appointment-hospital-msg-right-item-title">地理位置：</text>
							<text class="appointment-hospital-msg-right-item-value">{{v.address}}</text>
						</view>
						<view class="appointment-hospital-msg-right-item">
							<text class="appointment-hospital-msg-right-item-title">门诊时间：</text>
							<text class="appointment-hospital-msg-right-item-value">{{v.time}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="appointment-hospital-nomsg" v-else>
				<text>暂无医院数据</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				local: '大理',
				hospial: '',
				hospital_list:[],
				record_list:[]
			}
		},
		onLoad() {
			this.get_hospital_list()
			this.getLocal()
		},
		methods: {
			getLocal() {
				let that = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success(res) {
						console.log(res)
						// #ifdef APP-PLUS
						that.local = res.address.city
						// #endif
					},
					fail(ret){
						that.local = '获取位置失败'
						console.log(ret)
					}
				})
			},
			get_hospital_list(){
				let that = this
				let params = {
					pageno:1,
					pagesize:3,
					name:''
				}
				that.$u.get('/medicineapi/hospital/list',params).then(res=>{
					that.hospital_list = res.data.list
					console.log(res.data.list)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-btn--primary--plain {
		background-color: #FFFFFF !important;
	}

	.u-cell {
		padding: 30rpx 20rpx;
	}

	/deep/.u-cell__right-icon-wrap {
		height: 54rpx;
	}

	uni-button {
		margin-left: 0;
		margin-right: 0;
	}

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

		&-header {
			position: relative;

			&-icon {
				position: absolute;
				top: 20rpx;
				left: 20rpx;
			}
		}

		&-search {
			padding: 30rpx;
		}

		&-record {
			background-color: #FFFFFF;
			&-nomsg{
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 50rpx 30rpx;
			}

			&-msg {
				padding: 30rpx 10rpx;
				display: flex;
				justify-content: space-between;

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

				&-center {
					flex: 3;

					&-item {
						padding: 0 0 10rpx;

						&-title {
							color: #909399;
						}
					}
				}

				&-right {
					display: flex;
					justify-content: center;
					flex: 1;
					color: #3DC64F;

					&-item {}
				}
			}

			&-btn {
				padding: 0rpx 30rpx 30rpx;
				display: flex;
				justify-content: flex-end;
			}
		}

		&-hospital {
			background-color: #FFFFFF;
			margin: 30rpx 0;
			
			&-nomsg{
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 50rpx 30rpx;
			}

			&-msg {
				&-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>