NurseStationApp/pages/site/site.vue

<template>
	<view class="app">
		<view class="nursetation" @tap='detailed()'>
			<text class="what">什么是护理站？</text>
			<u-icon class="icon" name="arrow-right"></u-icon>
		</view>
		<view class="map" style="height:35vh;">
			<map style="width:100%; height:100%" scale="17" :latitude="latitude" :longitude="longitude"
				:markers="markers"></map>
		</view>
		<view class="conNew">
			<view class="addressContent" v-for="(item,index) in nursestationlist" :key="index">
				<view class="lists">
					<view class="nurse">{{item.nurseStationName}}</view>
					<view class="distance">距离您{{item.distance}}米</view>
					<image class="background" :src="item.stationPictureUrl" mode=""></image>
					<view class="understand" @tap='godetails(item)'>
						点击了解
					</view>
				</view>
			</view>
		</view>
		<view class="masks" style="" v-if="mask">
			<view class="mask">
				<view class="picture">
					<image src="../../static/locatinsmall.png"></image>
				</view>
				<view class="text">
					请打开系统定位
				</view>
				<view class="btns">
					<view class="bt" @tap='cancel()'>取消</view>
					<view class="btn" @tap='getlocation()'>确定</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		nearbyList
	} from '@/api/site/site.js';
	import baseurl from '@/api/baseurl.js'
	export default {
		data() {
			return {
				nursestationlist: [],
				mask: false,
				pageNum: 1,
				pageSize: 10,
				total: 0,
				//map地图所需
				id: 0, // 使用 marker点击事件 需要填写id
				// latitude: 39.909,
				// longitude: 116.39742,
				latitude: 36.649372,
				longitude: 116.977102,
				markers: [],
				covers: [],
			}
		},
		methods: {
			getlocation() {
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						console.log(res)
						this.latitude = res.latitude
						this.longitude = res.longitude
						this.requestinfo();
					},
					fail: error => {
						console.log("获取定位失败了", error)
						uni.showModal({
							title: '提示',
							content: '获取定位失败，是否授权打开定位',
							success: (res) => {
								if (res.confirm) {
									uni.getSystemInfo({
										success: (sys) => {
											if (sys.platform == 'ios') {
												plus.runtime.openURL(
													"app-settings://");
											} else {
												var main = plus.android
													.runtimeMainActivity();
												var Intent = plus.android.importClass(
													"android.content.Intent");
												//可能应该直接进入应用列表的权限设置？=> android.settings.APPLICATION_SETTINGS
												var mIntent = new Intent(
													'android.settings.LOCATION_SOURCE_SETTINGS'
												);
												main.startActivity(mIntent);
											}
										}
									})
								}
							}
						})
					}
				});
			},
			requestinfo() {
				nearbyList(this.pageSize, this.pageNum, this.longitude, this.latitude, this.nurseTypeCode, ).then(res => {
					res.rows.forEach(e => {
						e.stationPictureUrl = baseurl + e.stationPictureUrl
					})
					this.nursestationlist = res.rows
					this.mask = false
					this.total = res.total
					// console.log(this.nursestationlist)
				})
			},
			godetails(item) {
				console.log(item)
				uni.navigateTo({
					url: `/pages/nursestation/nursestation?nurseStationId=${item.nurseStationId}`
				})
			},
			detailed() {
				uni.navigateTo({
					url: `/pages/detail/detail`
				})
			},
			cancel() {
				this.mask = false
			},
		},
		onReachBottom() {
			if (this.nursestationlist.length >= this.total) {} else {
				this.pageNum++;
				nearbyList(this.pageSize, this.pageNum, this.longitude, this.latitude, this.nurseTypeCode, this.iptVal)
					.then(res => {
						res.rows.forEach(e => {
							e.stationPictureUrl = baseurl + e.stationPictureUrl
							this.nursestationlist.push(e)
						})
					})
			}
		},
		watch: {
			iptVal() {
				// this.requestinfo()
			},
		},
		onShow() {},
		onLoad() {
			this.requestinfo()
		},
	}
</script>
<style lang="scss">
	@import './site.scss'
</style>