patrol-gamble-mobile/point/index.vue

<template>
	<div style="position: relative;">
		<maps ref="maps" @getPoint="getPoint"></maps>
		<div class="get">
			<view class="getwrap" @click="storePoint">
				<view :class="isPoint?'getcircle':'gray'">
					{{isPoint?"确认打卡":"不可打卡"}}
				</view>
			</view>
		</div>
		<u-toast ref="uToast" />
	</div>

	
</template>

<script>
import maps from '@/components/maps/maps'
components:{
	maps
}
export default{
	data(){
		return{
			latitude: "",
			longitude: "",
			address: "",
			isPoint:false,
			pointArr:[],
			pointObj:{}
		}
	},
	
	onReady() {
		let that = this
		// this.$refs.maps.mapHeight = "100px"
		that.util.initAddress(function(res) {
			console.log(res)
			that.latitude = res.latitude
			that.longitude = res.longitude
			that.address = res.address
			that.getNearPoint()
			that.$refs.maps.moveto(res.longitude,res.latitude)
		})
	
	},
	onLoad(){
		
	},
	watch:{

	},
	methods:{
		getNearPoint(){
			var that = this
			that.util.request({
				api: '/api/mobile/point-sign/index',
				method: "get",
				data: {
					latitude:that.latitude,
					longitude:that.longitude
				},
				utilSuccess: function(res) {
					if (res.length == 0) {
						// that.isPoint = false
						that.$refs.uToast.show({
							title: "附近暂无点位信息"
						})
					} else {
						that.pointArr.push({
							id:4,
							name:"ceshi1",
							address:"苏州澹台湖大酒店澹台楼",
							longitude:"120.63212",
							latitude:"31.26249"
						})
						that.$refs.maps.pointArr = that.pointArr
					}
				},
				utilFail: function(res) {
					that.util.alert(res);
				}
			});
		},
		getPoint(val){
			if(val){
				this.isPoint = true
				this.pointObj = val
			}
		},
		storePoint(){
			var that = this
			if(this.isPoint){
				that.util.request({
					api: '/api/mobile/point-sign/store',
					method: "post",
					data: {
						point_id:that.pointObj.id,
						address:that.pointObj.address,
						lat:that.pointObj.latitude,
						lng:that.pointObj.longitude
					},
					utilSuccess: function(res) {
						that.$refs.uToast.show({
							title: res.msg,
							callback:function(res){
								that.isPoint = false
								that.$refs.maps.shopPopup = false
							}
						})
					},
					utilFail: function(res) {
						that.util.alert(res);
					}
				});
			}else{
				console.log("不可以打卡")
				return
			}
		}
	}
}
</script>

<style scoped>
	.get {
		margin: 20rpx;
		text-align: center;
		position: absolute;
		/* top:50%; */
		bottom:20rpx;
		left:50%;
		transform: translate(-50%,0);
		
	}
	
	.getwrap {
		padding: 60rpx;
		padding-bottom: 0rpx;
		height: 400rpx
	}
	.getwrap view{
		width: 200rpx;
		height: 200rpx;
		border-radius: 200rpx;
		line-height: 200rpx;
		color: #fff;
		font-size: 36rpx;
		margin: 30rpx auto;
	}
	.getwrap .getcircle {
		background-color: deepskyblue;
		box-shadow: 0 0 0px 4px lightskyblue;
	}
	.gray{
		background-color: gray;
		box-shadow: 0 0 0px 4px gray;
	}
	.getwrap img {
		width: 36rpx;
		vertical-align: sub;
		margin-right: 10rpx;
	}
</style>