productDev/parkBike.git

			@@ -2,9 +2,11 @@
			<view class="ditu">
			<map
			id="mapId"
			:scale="16"
			class="ditu_map"
			:markers="markers"
			:show-location="true"
			:polygons="eleBusinessArea"
			:latitude="latitude"
			:longitude="longitude"
			@markertap="markertap"
			@@ -27,32 +29,66 @@
			<text>距离{{rice > 1000 ? (rice / 1000).toFixed(1) + '千米' : rice + '米'}}</text>
			</view>
			<view class="ditu_box_b">
			{{info.addr}}
			{{info.addr \|\| ''}}
			</view>
			<view class="ditu_box_c" @click="toNavigation">导航前往</view>
			</view>
			</u-popup>
			<image class="dw" @click="clickcontrol" src="@/static/icon/map_relocation@2x.png" mode="widthFix"></image>

			<view class="search">
			<view class="search_left"></view>
			<image class="dw" @click="clickcontrol" src="@/static/icon/map_relocation@2x.png" mode="widthFix"></image>
			</view>

			<view class="index_scancode" v-if="!userInfo.mobile \|\| isShow">
			<button class="index_scancode_bottom" open-type="getPhoneNumber" @getphonenumber="getPhone"
			v-if="!userInfo.mobile">扫码租车</button>
			<view class="index_scancode_bottom" v-else-if="isShow" @click="saoma">扫码租车</view>
			<view class="index_scancode_zw"></view>
			</view>
			</view>
			</template>

			<script>
			import { distance } from '@/utils/utils.js'
			import { mapState } from 'vuex'
			export default {
			data() {
			return {
			type: null,
			show: false,
			latitude: '',
			longitude: '',
			markers: [],
			info: {},
			rice: ''
			rice: '',
			infoData: {},
			eleBusinessArea: [],
			isShow: false
			};
			},
			onLoad() {
			computed: {
			...mapState(['userInfo'])
			},
			onLoad(options) {
			this.type = options.type
			this.getAddress()
			this.refresh()
			},
			methods: {
			saoma() {
			uni.$emit('update', { msg:'页面更新' })
			uni.navigateBack({ delta: 1 });
			},
			// 刷新首页信息
			refresh() {
			this.$u.api.home()
			.then(res => {
			if (res.code === 200) {
			this.isShow = res.data.memberRidesResponse ? false : true
			}
			})
			},
			// 获取经纬度
			getAddress() {
			let that = this;
			@@ -114,6 +150,29 @@
			},
			});
			},
			async getEleBikeList() {
			let res = await this.$u.api.eleBikeList({})
			if (res.code === 200) {
			res.data.forEach((item, index) => {
			let num = distance(this.latitude, this.longitude, item.latitude, item.longitude)
			this.markers.push({
			id: index,
			width: 40,
			height: 40,
			distance: this.latitude && this.longitude ? num : '未知距离',
			latitude: item.latitude,
			longitude: item.longitude,
			title: item.code,
			iconPath: '/static/icon/ic_bike@2x.png',
			customCallout: {
			anchorY: 0,
			anchorX: 0,
			display: 'BYCLICK'
			}
			})
			})
			}
			},
			// 定位获取
			fnGetlocation() {
			let that = this;
			@@ -124,7 +183,14 @@
			success: function(res) {
			that.latitude = res.latitude
			that.longitude = res.longitude
			that.getSite()
			if (that.type == 1) {
			console.log('自行车')
			that.getSite()
			} else {
			console.log('电动车')
			that.getEleBikeList()
			that.getEleSiteList()
			}
			},
			fail(err) {
			if (err.errMsg === "getLocation:fail 频繁调用会增加电量损耗，可考虑使用 wx.onLocationChange 监听地理位置变化") {
			@@ -162,6 +228,84 @@
			}
			})
			},
			// 获取范围
			async getEleSiteList() {
			let array = []
			let quan = await this.$u.api.getEleBusinessArea({})
			if (quan.code === 200) {
			let arrs = JSON.parse(quan.data)
			array.push({
			points: arrs.map(item => {
			return {
			latitude: item.lat,
			longitude: item.lng
			}
			}),
			fillColor: "#0077FF12",
			strokeColor: "#0077FF",
			strokeWidth: 3,
			zIndex: 7
			})
			}
			let res = await this.$u.api.eleSiteList({})
			if (res.code === 200) {
			res.data.forEach(item => {
			let arr = JSON.parse(item.electronicFence)
			item.electronicFence = arr.map(data => {
			return {
			latitude: data.lat,
			longitude: data.lng
			}
			})
			})
			this.eleBusinessArea = res.data.map(item => {
			return {
			points: item.electronicFence,
			title: item.name,
			fillColor: "#0077FF4D",
			strokeColor: "#0077FF",
			strokeWidth: 3,
			zIndex: 7
			}
			})
			this.eleBusinessArea.forEach(item => {
			let { latitude, longitude } = this.calculatePolygonCenter(item.points)
			let num = distance(this.latitude, this.longitude, latitude, longitude)
			this.markers.push({
			id: Math.floor(Math.random() * 900) + 100,
			width: 30,
			height: 40,
			isShow: false,
			title: item.title,
			distance: this.latitude && this.longitude ? num : '未知距离',
			latitude: latitude,
			longitude: longitude,
			iconPath: '/static/icon/ic_park@2x.png',
			customCallout: {
			anchorY: 0,
			anchorX: 0,
			display: 'BYCLICK'
			}
			})
			})
			}
			this.eleBusinessArea = [...array, ...this.eleBusinessArea]
			},
			// 计算多边形中心点
			calculatePolygonCenter(polygonPoints) {
			let x = 0, y = 0;
			const numPoints = polygonPoints.length;

			for (let i = 0; i < numPoints; i++) {
			x += polygonPoints[i].latitude;
			y += polygonPoints[i].longitude;
			}

			return {
			latitude: x / numPoints,
			longitude: y / numPoints
			};
			},
			getSite() {
			this.$u.api.rentSiteList()
			.then(res => {
			@@ -173,6 +317,7 @@
			id: index,
			width: 40,
			height: 40,
			isShow: true,
			distance: this.latitude && this.longitude ? num : '未知距离',
			latitude: item.latitude,
			longitude: item.longitude,
			@@ -195,15 +340,25 @@
			if (item.id === e.markerId) {
			this.rice = item.distance
			item.customCallout.display = 'ALWAYS'
			item.width = 50
			item.height = 50
			if (item.isShow) {
			item.width = 50
			item.height = 50
			} else {
			item.width = 40
			item.height = 50
			}
			setTimeout(() => {
			this.info = item
			this.show = true
			}, 300)
			} else {
			item.width = 40
			item.height = 40
			if (item.isShow) {
			item.width = 40
			item.height = 40
			} else {
			item.width = 30
			item.height = 40
			}
			item.customCallout.display = 'BYCLICK'
			}
			})
			@@ -230,6 +385,32 @@
			.ditu {
			width: 100vw;
			height: 100vh;
			.index_scancode {
			width: 100%;
			background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 58%, #D0FFFD 100%);
			box-shadow: 0rpx -6rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			z-index: 9999;

			.index_scancode_bottom {
			width: 100%;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			background: #01B6AD;
			box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(1, 182, 173, 0.24);
			border-radius: 46rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			}
			}
			.ditu_map {
			width: 100%;
			height: 100%;
			@@ -323,12 +504,57 @@
			margin-top: 40rpx;
			}
			}
			.dw {
			width: 80rpx;
			height: 80rpx;
			.search {
			width: 100%;
			position: absolute;
			right: 18rpx;
			bottom: calc(env(safe-area-inset-bottom) + 300rpx);
			padding: 0 30rpx;
			box-sizing: border-box;
			bottom: calc(env(safe-area-inset-bottom) + 100rpx);
			display: flex;
			align-items: center;
			justify-content: space-between;
			z-index: 9999;
			.search_left {
			width: 400rpx;
			height: 60rpx;
			// background: #FFFFFF;
			// box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0,0,0,0.08);
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			box-sizing: border-box;
			image {
			width: 28rpx;
			height: 28rpx;
			flex-shrink: 0;
			}
			text {
			font-weight: 400;
			font-size: 26rpx;
			color: #222222;
			margin-left: 10rpx;
			flex-shrink: 0;
			}
			.search_left_x {
			width: 2rpx;
			height: 24rpx;
			margin: 0 10rpx;
			background-color: #E5E5E5;
			flex-shrink: 0;
			}
			input {
			flex: 1;
			height: 100%;
			font-weight: 400;
			font-size: 26rpx;
			color: #000000;
			}
			}
			.dw {
			width: 80rpx;
			height: 80rpx;
			}
			}
			}
			</style>