NurseStationApp/pages/site/site.vue

<template>
	<view class="app">
		<view>
			<view class="nursetation" @tap='detailed()'>
				<text class="what">什么是护理站？</text>
				<u-icon class="icon" name="arrow-right"></u-icon>
			</view>
			<view class="map">
				<map style="width:100%; height:40vh;" scale="17" :latitude="latitude" :longitude="longitude"
					:markers="markers"></map>
			</view>
		</view>
		<view class="conNew">
			<view class="addressContent">
				<view class="lists" v-for="(item,index) in nearbylist" :key="index">
					<view class="nurse">{{item.nurseStationName}}</view>
					<view class="distance">距离您800米</view>
					<view class="background">
						<image src="/static/logo.png" mode=""></image>
					</view>
					<view class="understand" @tap='godetails()'>
						点击了解
					</view>
				</view>
			</view>
		</view>

		<view class="masks" style="" v-if="locationmask">
			<view class="mask">
				<view class="picture2">
					<image src="../../static/locatinsmall.png"></image>
				</view>
				<view class="title">
					请打开系统定位
				</view>

				<view class="btns">
					<view class="btn1" @tap='cancel()'>取消</view>
					<view class="btn2" @tap='getsite()'>去打开</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		nearbyList
	} from '@/api/site/site.js';
	import baseurl from '@/api/baseurl.js'
	export default {
		data() {
			return {
				nearbylist: [],
				locationmask: false,
				pageNum: 1,
				pageSize: 10,
				//map地图所需
				id: 0, // 使用 marker点击事件 需要填写id
				latitude: 39.909,
				longitude: 116.39742,
				markers: [],
				covers: []
			}
		},
		onReachBottom() {
			this.pageNum++;
			if (this.nurseTypeCode != undefined) {
				nearbyList(this.pageSize, this.pageNum, this.longitude, this.latitude, this.nurseTypeCode, this.iptVal)
					.then(res => {
						if (res.total == this.nearbylist.length) {

						} else {
							res.rows.forEach(e => {
								this.nearbylist.push(e)
							})
						}
					})
			} else {
				uni.request({
					url: baseurl +
						`/nurseApplet/nearbyNursingStation/nearbyList?pageSize=${this.pageSize}&pageNum=${this.pageNum}&homeLongitude=${this.longitude}&homeLatitude=${this.latitude}&nurseStationName=${this.iptVal}`, //仅为示例，并非真实接口地址。
					success: (res) => {
						if (res.data.total == this.nearbylist.length) {} else {
							res.data.rows.forEach(e => {
								this.nearbylist.push(e)
							})
						}
						console.log(this.nearbylist)
					}
				});
			}
		},
		watch: {
			iptVal() {
				// this.requestinfo()
			},
		},
		onShow() {},
		onLoad() {
			var that = this
			this.requestinfo()
		},
		methods: {
			requestinfo() {
				if (this.nurseTypeCode != undefined) {
					nearbyList()
						.then(res => {
							this.nearbylist = res.rows
							console.log(this.nearbylist)
						})
				} else {
					uni.request({
						url: baseurl +
							`/nurseApplet/nearbyNursingStation/nearbyList`,
						success: (res) => {
							this.nearbylist = res.data.rows
							console.log(this.nearbylist)
						}
					});
				}
			},
			godetails() {
				uni.navigateTo({
					url: `/pages/nursestation/nursestation`
				})
			},
			detailed() {
				uni.navigateTo({
					url: `/pages/detail/detail`
				})
			},
			cancel() {
				this.mask = false
			},
		},
	}
</script>

<style lang="scss">
	//护理站列表
	.conNew {
		width: 96%;
		background-color: #F4F5F7;
		z-index: 999;
		position: absolute;
		top: 400rpx;
		left: 2%;

		.addressContent {
			width: 100%;
		}

		.lists {
			background-color: #ffffff;
			width: 100%;
			height: 240rpx;
			margin-bottom: 14rpx;
			border-radius: 20rpx;
			position: relative;

			.nurse {
				font-size: 30rpx;
				position: absolute;
				top: 15%;
				left: 35%;
			}

			.distance {
				position: absolute;
				top: 40%;
				font-size: 14rpx;
				margin-left: 35%;
				color: #666666;
			}

			.background {
				width: 180rpx;
				height: 180rpx;
				background-color: #4C7BC9;
				position: absolute;
				top: 12%;
				left: 7%;
				border-radius: 30rpx;
			}

			.background image {
				width: 99rpx;
				height: 99rpx;
				// margin: 0 auto;
				text-align: center;
				margin-top: 5%;
				margin-left: 20%;
			}

			.understand {
				color: #ffffff;
				width: 170rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				background-color: #4C7BC9;
				position: absolute;
				bottom: 10%;
				right: 5%;
				border-radius: 35rpx;
			}
		}
	}

	//什么是护理站
	.nursetation {
		width: 80%;
		position: absolute;
		top: 20px;
		left: 10%;
		float: left;
		border: 1px solid #f0f0f0;
		border-radius: 20rpx;
		background-color: #ffffff;
		z-index: 100;
		height: 85rpx;
		line-height: 85rpx;
		box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);

		.what {
			margin-left: 10%;
			display: inline-block;
		}

		.icon {
			display: inline-block;
			height: 85rpx;
			line-height: 85rpx;
			margin-left: 45%;
		}
	}
</style>