NurseStationApp/pages/site/site.vue

<template>
	<view class="concent">
		<view class="page-body" style="margin-top: -80rpx;">
			<view class="nursetation" @tap='detailed()'>
				<text class="what">什么是护理站？</text>
				<u-icon class="icon" name="arrow-right"></u-icon>
				<!-- <image src="../../static/jiantou.png" mode=""></image> -->
			</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">
					<text class="nurse">{{item.nurseStationName}}</text>
					<text class="distance">距离您800米</text>
					<view class="background">

						<view class="picture">
							<image src="/static/logo.png" mode=""></image>
						</view>

						<text class="qyttext">泉医通</text>
						<text class="lianmeng">济卫护理联盟NO.1</text>


					</view>
					<view class="click" @tap='godetails()'>
						点击了解
					</view>
				</view>
			</view>
		</view>

		<view class="masks" style="" v-if="mask">
			<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/index.js';
	import baseurl from '@/api/baseurl.js'
	export default {
		data() {
			return {
				nearbylist: [],
				mask: true,
				pageNum: 1,
				pageSize: 10,
				latitude: 36.661634,
				longitude: 117.025323,

			}
		},
		// 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) => {
							console.log(res)
							this.nearbylist = res.data.rows
							console.log(this.nearbylist)
						}
					});
				}
			},
			godetails() {
				// console.log("111");
				uni.navigateTo({
					url: `/pages/nursestation/nursestation`
				})
			},
			detailed() {
				uni.navigateTo({
					url: `/pages/detail/detail`
				})
			},
			// nurse() {
			// 	uni.navigateTo({
			// 		url: `/pages/nursestation/nursestation`
			// 	})
			// },
			cancel() {
				this.mask = false
				// uni.reLaunch({
				// 	url: `/pages/site/site`
				// })
			},
		},
	}
</script>

<style lang="scss">
	.concent {
		width: 100%;
		height: 1000px;
		background-color: #F4F5F7;
		// box-sizing: border-box;
		position: relative;
	}
	.conNew{
		width: 100%;
		height: 1000000px;
		background-color: #F4F5F7;
		// box-sizing: border-box;
		position: relative;
		// box-sizing: border-box;
		// padding: 24px;
	}

	.addressContent {
		position: absolute;
		top: -91px;
		// margin: 0 auto;
		width: 100%;
		// height: 100%;
		// background: #F4F5F7;
		// box-sizing: border-box;
		padding: 24px;
	}

	.map {
		width: 750rpx;
		height: 544rpx;
		background-color: red;
	}

	.picture2 image {
		// position: absolute;
		display: block;
		margin: 0 auto;
		width: 86rpx;
		height: 102rpx;
		// margin-top: 20%;
		// text-align: center;
	}

	.masks {

		border-radius: 30px;
		height: 100%;
		width: 100%;
		position: absolute;
		opacity: 0.9;
		top: 0;
		z-index: 999;
	}

	.mask {
		// margin-top: 50%;
		position: relative;
		width: 520rpx;
		height: 348rpx;
		background-color: #ffffff;
		margin: 47% auto;
		position: relative;
		border-radius: 30rpx;
	}

	.title {
		width: 254rpx;
		height: 35rpx;
		font-size: 37rpx;
		// margin: 0 auto;
		text-align: center;
		margin-top: 10%;
		margin-left: 30%;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #000000;
		// line-height: rpx;
		// height: 100rpx;
		// line-height: 100rpx;
		// border-bottom: 1px solid #eeeeee;
		// /* background-color: red; */
		// font-size: 36rpx;
		// margin: 0px auto;
		// width: 100%;
		// text-align: center;
		// /* line-height: 80rpx; */
	}

	.text {
		margin-top: 30rpx;
		font-size: 30rpx;
		width: 100%;
		text-align: left;
		/* padding-top: 40rpx; */
		text-align: center;

	}

	.btn1 {

		height: 62rpx;
		line-height: 62rpx;
		text-align: center;
		// border-top: 1px solid #eeeeee;
		// border-right: 1px solid #eeeeee;
		// position: inherit;

		margin-top: 10%;
		margin-left: 10%;
		background: #C5BFBF;
		color: #ffffff;
		width: 198rpx;
		border-radius: 23rpx;

	}

	.btn2 {
		height: 62rpx;
		line-height: 62rpx;
		text-align: center;
		color: #ffffff;
		// display: inline-block;
		// position: absolute;
		// bottom: 0;
		position: absolute;
		margin-top: -12%;
		margin-left: 58%;
		width: 198rpx;
		background-color: #4486e8;
		border-radius: 23rpx;
	}

	.lists {
		// bottom: 5%;
		// display: block;
		// position: absolute;
		// top: -191px;
		// margin: 0 auto;
		background-color: #ffffff;
		// width: 698.8rpx;
		width: 100%;
		height: 227.8rpx;
		margin-bottom: 3%;
		border-radius: 20rpx;
		z-index: 99999;
	}

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

	.background image {

		width: 99rpx;
		height: 99rpx;
		// margin: 0 auto;
		text-align: center;
		margin-top: 5%;
		margin-left: 20%;

	}

	.qyttext {
		// text-align: center;
		// margin-top: 10%;
		margin-left: 28%;
		display: block;

		// width: 30px;
		// height: 10px;
		font-size: 25rpx;
		// font-family: Adobe Heiti Std;
		// font-weight: normal;
		color: #FFFFFF;

	}

	.lianmeng {
		display: block;
		margin-left: 5%;
		font-size: 14rpx;
		// font-family: Adobe Heiti Std;
		// font-weight: normal;
		color: #FFFFFF;
	}

	.click {
		// position: absolute;
		color: #ffffff;
		float: right;
		width: 167.3rpx;
		height: 34px;
		line-height: 34px;
		// height: 58.5rpx;
		// line-height: 58.5rpx;
		// margin: 0 auto;
		text-align: center;
		background-color: #4C7BC9;
		margin-top: 20%;
		margin-right: 5%;
		border-radius: 17px;
		// margin-top: 6%;
		// margin-left: 40%;
		// border-radius: 10rpx;
	}

	.wenzi {
		color: #ffffff;
		text-align: center;
	}

	.nurse {
		position: absolute;
		float: right;
		margin-top: 5%;
		font-size: 30rpx;
		margin-left: 40%;
	}

	.icon {
		height: 60rpx;
		width: 80%;
		line-height: 60rpx;
		position: absolute;
		// float: right;
		margin-left: 85%;
		margin-top: -9%;
	}

	.distance {
		position: absolute;
		float: right;
		margin-top: 12%;
		font-size: 14rpx;
		margin-left: 40%;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #666666;


	}

	.nursestation image {
		position: relative;
		width: 16rpx;
		height: 24rpx;
	}

	.nursetation {
		position: relative;
		// display: block;
		// margin:0 auto;
		top: 50px;
		left: 0px;
		float: left;
		// background-color: white;
		border: 1px solid #f0f0f0;
		width: 80%;
		height: 60rpx;
		margin: 10rpx 0 10rpx 50%;
		transform: translateX(-50%);
		border-radius: 20rpx;
		background-color: red;
		z-index: 100;

	}

	.what {
		display: block;
		// 	margin: 0 auto;
		position: absolute;
		height: 50rpx;
		top: 5%;
		left: 12%;
		// background-color: #4486e8;
		position: relative;
		height: 60rpx;
		width: 80%;
		line-height: 60rpx;
		margin-left: 5%;



	}
</style>