jyz/pages/index/index.vue

<template>
	<view class="content">
		<view id="container">
			<map class="map-box" id="map" show-location :markers="marker" :scale='scale' :latitude="latitude" :longitude="longitude"
			 ref="map">
			</map>
			<image class="icon" @click="moveToLocation" src="/static/img/img015.png"></image>
		</view>
		<view class="swiper-box">
			<scroll-view class="cate-list" scroll-y @scrolltolower="loadData">
				<view class="nodata" v-if="list.length == 0">
					<image src="/static/img/img011.png"></image>
					<view class="text">很抱歉，附近没有救护人员！</view>
				</view>
				<view v-if="list.length > 0">
					<view v-for="(item, index) in list" :key="index" class="content-box flex">
						<view class="list flex_item">
							<view class="tip"></view>
							<view class="portrait">
								<image :src="item.avatar"></image>
							</view>
							<view class="info">
								<view class="name flex_item">
									<view class="info-name clamp">救援者{{ item.id }}</view>
								</view>
								<view class="address flex_item">
									<view class="juli">{{ item.distance }}m</view>
									<image src="../../static/img/img009.png"></image>
								</view>
							</view>
							<view class="btn submit" v-if="item.helped == null" @click="goLogin(item)">
								<image src="/static/img/img008.png"></image>
							</view>
							<view class="btn submit" v-if="item.helped == 0" @click="Sos(item)">
								<image src="/static/img/img008.png"></image>
							</view>
							<view v-if="item.helped == 1" class="sos-type">已呼叫</view>
						</view>
					</view>
					<uni-load-more :status="loadingType"></uni-load-more>
				</view>
			</scroll-view>
		</view>
		<!-- <view class="Mask" v-show="MaskShow">
			<view class="Mask-box">
				<view class="title">求救信息</view>
				<textarea auto-height class="text" v-model="help_info" placeholder="请输入求救信息" />
				<textarea class="text"auto-height  v-model="address" placeholder="请输入您的具体地址" />
				<view class="sos" @click="help">发送求救</view>
			</view>
			<view class="iconimage" @click="showCancel"><image src="../../static/img/delete.png"></image></view>
		</view> -->
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	import empty from '@/components/empty';
	import {
		getAroundHelper,
		sendSos,
		newSos
	} from '@/api/record.js';
	import {
		openMap
	} from '@/utils/rocessor.js';
	import {
		getUserInfo
	} from '@/api/login.js';
	export default {
		data() {
			return {
				userInfo: '', //用户信息
				latitude: "",
				address: '', //请选择您的具体地址
				longitude: '',
				MaskShow: false,
				help_info: "", //求救信息
				scale: '16', //地图缩放程度
				marker: [],
				list: [],
				limit: 100, //每次加载数据条数
				page: 1, //当前页数
				loadingType: 'more', //加载更多状态
				loading: 0, //判断是否为点击搜索按钮跳转加载
				newSosList: '', //最新救援记录
			};
		},
		onLoad() {},
		computed: {
			...mapState(['hasLogin'])
		},
		onShow() {
			if (this.hasLogin == false) {
				// 保存地址
				saveUrl();
				// 登录拦截
				// interceptor();
			} else {
				this.getAddressLocation();
			}
			this.loadBaseData()
			this.getAddressLocation();
			this.loadData();
			this.newSos();
		},
		//下拉刷新
		// onPullDownRefresh() {
		// 	this.page = 1
		// 	this.loadData('refresh');
		// },
		methods: {
			...mapMutations(['setUserInfo', 'logout']),
			goLogin(item) {
				if(!this.hasLogin) {
					interceptor()
				}else {
					this.Sos(item)
				}
			},
			// 加载初始数据
			loadBaseData() {
				let obj = this;
				getUserInfo({}).then(({
					data
				}) => {
					obj.setUserInfo(data.user);
				}).catch((e) => {
					this.logout()
					console.log(e)
				});

			},
			//关闭弹窗
			showCancel() {
				this.MaskShow = false;
			},
			moveToLocation() {
				this.map = uni.createMapContext('map', this)
				this.map.moveToLocation({
					longitude: this.longitude,
					latitude: this.latitude,
					success: function() {
						console.log("成功将地图中心移到定位点")
					}
				})
			},
			loadData(type) {
				//这里是将订单挂载到tab列表下
				let obj = this;
				if (type != 'refresh') {
					console.log(obj.loadingType, '456')
					//没有更多数据直接跳出方法
					if (obj.loadingType === 'nomore') {
						return;
					} else {
						// 设置当前为数据载入中
						obj.loadingType = 'loading';
					}
				} else {
					//当重新加载数据时更新状态为可继续添加数据
					obj.loadingType = 'more';
				}
				getAroundHelper({
						page: obj.page,
						limit: obj.limit
					})
					.then(({
						data
					}) => {
						if (type === 'refresh') {
							obj.list = [];
						}
						let arr = data.map(e => {
							e.distance = e.distance.toFixed(2);
							return e;
						});
						obj.marker = data;
						let key = 'latitude';
						let ind = 'longitude';
						obj.marker.forEach((value, index) => {
							value['iconPath'] = '/static/img/img014.png';
							value['width'] = '35';
							value['height'] = '35';
							value[key] = value['lat'];
							value[ind] = value['lng'];
						});
						obj.list = obj.list.concat(arr);
						//判断是否还有下一页，有是more  没有是nomore
						if (obj.limit == obj.list.length) {
							obj.page++;
							obj.loadingType = 'more';
						} else {
							obj.loadingType = 'nomore';
						}
						// 判断是否为刷新数据
						if (type === 'refresh') {
							console.log('refresh')
							// 判断是否为点击搜索按钮跳转加载
							if (obj.loading == 1) {
								uni.hideLoading();
							} else {
								uni.stopPullDownRefresh();
							}
						}
					})
					.catch(e => {
						obj.loadingType = 'nomore';
						// obj.$api.msg(e.message);
						uni.hideLoading();
					});
			},
			newSos() {
				let obj = this;
				newSos({}).then((data) => {
					obj.newSosList = data.data;
					if (obj.newSosList == null) {
						console.log("暂无救援记录")
					} else {
						uni.showModal({
							title: '提示',
							content: '您有一条救援信息，点击查看',
							success: function(res) {
								if (res.confirm) {
									uni.switchTab({
										url: '/pages/record/rescue'
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				}).catch((e) => {
					console.log(e.message)
				});
			},
			//发送求救信号
			Sos(item) {
				let obj = this;
				sendSos({
					id: item.id,
				}).then((data) => {
					obj.$api.msg(data.msg);
					obj.page = 1
					obj.loadData('refresh');
				}).catch((e) => {
					obj.$api.msg(e.message);
					obj.page = 1
					obj.loadData('refresh');
				});
			},
			// 获取地址
			getAddressLocation() {
				let obj = this;
				uni.getLocation({
					type: 'gcj02',
					success(e) {
						obj.latitude = e.latitude;
						obj.longitude = e.longitude;
						uni.setStorageSync('Lat', e.latitude);
						uni.setStorageSync('Lng', e.longitude);
						obj.loadData('refresh');
					},
					fail(e) {
						obj.getLocation();
					}
				});

			},
			// 获取当前位置
			getLocation() {
				let obj = this;
				openMap().then(() => {
						obj.getAddressLocation();
					})
					.catch(e => {
						console.log('到这里')
						obj.latitude = Math.abs(28.372975)
						obj.longitude = Math.abs(121.385322)
						// obj.latitude = e.latitude;
						// obj.longitude = e.longitude;
						uni.setStorageSync('Lat', 28.372975);
						uni.setStorageSync('Lng', 121.385322);
						obj.loadData('refresh');
						// uni.showModal({
						// 	title: '提示',
						// 	content: '您未授权无法调用地图定位功能！',
						// 	showCancel: false,
						// 	success() {
						// 		obj.getLocation()
						// 	}
						// });
						
					});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #ffffff;
		height: 100%;
	}

	.Mask {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(51, 51, 51, 0.7);

		.Mask-box {
			text-align: center;
			margin: auto;
			margin-top: 200rpx;
			padding: 50rpx 50rpx;
			width: 80%;
			height: auto;
			left: 10%;
			background-color: #ffffff;
			border-radius: 15rpx;
			z-index: 999;

			.title {
				font-size: 35rpx;
				font-weight: 700;
			}

			.text {
				min-height: 120rpx;
				font-size: 30rpx;
				color: #848484;
				padding-top: 50rpx;
				border: 2rpx solid #F3F3F3;
				text-align: left !important;
				padding: 25rpx 25rpx;
				border-radius: 10rpx;
				margin: 50rpx 0rpx;
				width: 100%;
			}

			.sos {
				background: linear-gradient(90deg, rgba(255, 102, 102, 1), rgba(255, 79, 79, 1));
				width: 65%;
				margin: 0rpx auto;
				font-size: 30rpx;
				padding: 25rpx 25rpx;
				color: #ffffff;
				border-radius: 50rpx;
				border: none;
			}
		}

		.iconimage {
			text-align: center;
			margin-top: 60rpx;

			image {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}

	.content {
		height: 100%;
	}

	.icon {
		position: fixed;
		top: 390rpx;
		right: 35rpx;
		width: 100rpx;
		height: 100rpx;
	}

	.map-box {
		width: 100%;
		height: 700rpx;
	}

	.nodata {
		width: 430rpx;
		margin: 0rpx auto;
		padding-top: 80rpx;

		image {
			width: 430rpx;
			height: 337rpx;
		}

		.text {
			text-align: center;
			color: #999999;
			font-size: 26rpx;
		}
	}

	.swiper-box {
		position: fixed;
		bottom: 0rpx;
		height: 50%;
		width: 100%;
		background-color: #ffffff;
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;
		box-shadow: 0px -11px 42px 4px rgba(83, 87, 120, 0.2);

		.cate-list {
			height: 100%;
		}
	}

	.content-box {
		padding: 0rpx 30rpx;
		font-size: 24rpx;
		color: #666666;
		width: 100%;

		.list {
			padding: 25rpx 0rpx;
			margin-top: 25rpx;
			border-bottom: 2rpx solid #e7e8ea;
			width: 100%;
			position: relative;

			.tip {
				background-color: #ff4f4f;
				border-radius: 100rpx;
				width: 10rpx;
				height: 35rpx;
				position: absolute;
				top: 0;
			}

			.portrait {
				margin-left: 20rpx;
				width: 117rpx;
				height: 117rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 15rpx;
				}
			}

			.sos-type {
				color: #FF4F4F;
				font-weight: bold;
				font-size: 28rpx;
			}

			.info {
				margin-left: 20rpx;
				width: 60%;

				.name {
					color: #333333;
					font-weight: bold;
					font-size: 32rpx;

					.info-name {
						margin-right: 35rpx;
						width: 90%;
					}
				}

				.address {
					margin-top: 15rpx;

					.juli {
						font-weight: normal;
						font-size: 28rpx;
					}

					image {
						margin-left: 15rpx;
						width: 25rpx;
						height: 30rpx;
					}
				}

				.adr {
					color: #333333;
					margin-top: 15rpx;
				}
			}

			.btn {
				width: 130rpx;
				height: 130rpx;

				image {
					width: 127rpx;
					height: 135rpx;
				}
			}
		}
	}
</style>