<map

longitude="{{_lon}}"

latitude="{{_lat}}"

id=“map”

scale="{{_scale}}"

markers="{{markers}}"

show-location

style=“width: 100%; height: 100%;”

bindcontroltap=“controltap”

bindmarkertap=“markertap”

bindregionchange = “regionchange”

bindtap=‘mapClick’

>

<!-- 入场面板  -->

<cover-view class=“parkDetail” hidden="{{inParkFlag}}">

<cover-view class=“title”>

<cover-view class=“place-txt”>

<cover-image src="…/…/images/place_icon.png" class=“place-icon”></cover-image>

<cover-view class=“parking-name”>{{park.parkName}}</cover-view>

</cover-view>

<cover-view class=“add-car”>

<cover-view class=“i-block” bindtap=‘addCar’ hidden=’{{!carFLag}}’>添加车辆</cover-view>

<cover-view class=“i-block” bindtap=‘changeCar’ hidden=’{{carFLag}}’>

{{defaultCarNo}}

<cover-image src=’…/…/images/u_arrow_dow.png’ class=‘add-car-img’>

</cover-image>

</cover-view>

</cover-view>

</cover-view>

<cover-view class=“title-bottom”></cover-view>

<cover-view class=“content”>

<cover-view class=“center”>

<cover-view class=“price fleft”>{{park.parkPrice}}</cover-view>

<cover-view class=“leftPlace”>

<cover-view class=“leftPlace-con”>{{park.leftPlace}}</cover-view>

<cover-view class=“leftPlace-con”>剩余车位</cover-view>

</cover-view>

<cover-view class=“cboth”></cover-view>

<cover-view>

<cover-view class=“view fleft” style=‘width:{{admissionWidth}}’ bindtap=‘goParkingDetails’>查看</cover-view>

<cover-view class=“admission fleft” hidden=’{{admissionFlag}}’ bindtap=“inPark”>入场</cover-view>

<cover-view class=“navigation fright” style=‘width:{{admissionWidth}}’  bindtap=“goDaohang”>导航</cover-view>

<cover-view class=“cboth”></cover-view>

</cover-view>

</cover-view>

</cover-view>

</cover-view>

<!--  -->

<!-- 出场面板  -->

<cover-view class=“parkDetail” hidden=’{{outParkFlag}}’>

<cover-view class=“title”>

<cover-view class=“place-txt”>

<cover-image src="…/…/images/place_icon.png" class=“place-icon”></cover-image>

<cover-view class=“parking-name”>{{parking.parkName}}</cover-view>

</cover-view>

<cover-view class=“add-car”>

<cover-view class=“i-block” bindtap=‘changeCar’>{{defaultCarNo}}

<cover-image src=’…/…/images/u_arrow_dow.png’ class=‘add-car-img’></cover-image>

</cover-view>

</cover-view>

</cover-view>

<cover-view class=“title-bottom”></cover-view>

<cover-view class=“parking-lot”>

<cover-image src=’…/…/images/u_parking.png’ class=“u-parking-img”></cover-image>

<cover-view class=‘inline-block gray park-ing’>停车中…</cover-view>

<cover-view class=‘inline-block orange park-people’>(入场时，请展示给车场管理人员)</cover-view>

</cover-view>

<cover-view class=‘parking-lot’> <!--  -->

<cover-view class=‘inline-block orange’>已分配车位：{{parking.carportNum}}</cover-view>

</cover-view>

<cover-view class=‘parking-lot’>

<cover-view class=‘inline-block’>停车时间：</cover-view>

<cover-view class=‘inline-block gray’ style=‘width:60%;’>{{timing}}</cover-view>

</cover-view>

<cover-view class=‘out-park’ bindtap=‘outPark’>出场</cover-view>

</cover-view>

<!-- location图片  -->

<cover-image src=’…/…/images/location.png’ hidden="{{user.hidden}}" class=“img-location”></cover-image>

<!-- 返回定位点  -->

<cover-view class=“back-situ” hidden="{{user.hidden}}" bindtap=‘moveToLocation’ style=‘bottom:{{park.backBottom}}’>

<cover-image src=’…/…/images/my_place.png’></cover-image>

</cover-view>

<!-- 个人中心头像  -->

<cover-view class=“user” hidden="{{user.hidden}}" bindtap=“goUserCenter” style=‘bottom:{{park.backBottom}}’>

<cover-image src="{{_userAverurl}}" class=‘user-center-img’></cover-image>

</cover-view>

<!-- <cover-view class=“scanInPark” hidden="{{scan.hidden}}" style=“top:{{scan.top}}px;” bindtap=“scanCode”>

       <i class=“fa fa-qrcode”></i> 扫码入场

   </cover-view>  -->

<!-- 未支付账单  -->

<cover-view class=‘bill-container’ hidden=’{{billFlag}}’>

<cover-view class=‘bill-text’>您有未支付账单</cover-view>

<cover-view class=“title-bottom”></cover-view>

<cover-view class=‘bill-btn’ bindtap=‘toPay’>去结算</cover-view>

</cover-view>

</map>

js:

const app = getApp()

const _ajax = require(’…/…/utils/service.js’);

Page({

data: {

_lon: 0,

_lat: 0,

_scale: 18,

_userAverurl: ‘’, // 用户头像

markers: [], // 地图map的markers

parkList: [], // 获取的车场数据

pickParkList: {}, // 入场数据

chooseParkList: {}, // 导航数据

viewParkList: {}, // 查看所需数据

park: { // 入场面板

backBottom: null

},

user: {

hidden: true

},

header: {}, // 请求header

tokenId: ‘’,

admissionFlag: true, // 入场按钮Flag

admissionWidth: null, // 查看、导航的宽度

inParkFlag: true, // 入场面板Flag

outParkFlag: true, // 出场面板Flag

cannotFLag: false, // 不准操作Flag

timing: ‘’, // 停车计时

parking: { // 停车中的数据

parkGateOid: null, // 停车场出口ID

parkName: ‘’, // 停车场名称

carNum: ‘’, // 车牌号

carportNum: ‘’, // 车位号

parkingInDttm: null, // 确认入场时间

sysDttm: null, // 系统当前时间

},

billFlag: true, // 未支付账单Flag

carList: [], // 车牌列表

carFLag: true, // 车牌FLag

defaultCarNo: ‘’, // ，默认车牌

clearInterVal: ‘’ // 清楚定时器

},

onLoad() {

wx.showLoading({

title: ‘定位中’

});

app.uparkingLogin()

},

onReady: function() {

this.mapCtx = wx.createMapContext(“map”);

this.initMap();

},

onShow: function() {

this.haveToken();

},

haveToken() {

if (app.globalData.haveToken === true) {

this.initParking()

} else {

setTimeout(() => {

this.haveToken();

}, 500);

}

},

initParking() {

this.setData({

_userAverurl: app.globalData.userInfo.headUrl,

})

clearInterval(this.data.clearInterVal)

// 检测是否有车牌

this.getCarList();

// 检测是否有未支付账单

this.getNoPayParkBill();

// 检测是否有停车中的状态

this.getMyNowParking();

},

initMap() {

wx.getLocation({

type: ‘gcj02’,

success: (res) => {

let longitude = res.longitude;

let latitude = res.latitude;

app.globalData.userLocation.lon = longitude;

app.globalData.userLocation.lat = latitude;

// 加载了用户位置信息之后，开始进行地图初始化操作

this.initApp();

// 请求周边停车场数据

this.getAroundParkData();

},

fail: res => {

wx.hideLoading();

wx.showModal({

title: ‘用户未授权’,

content: ‘如果需要正常使用定位功能，请点击确定并在授权管理中打开“位置”。最后再进入小程序即可正常使用’,

showCancel: false,

success: (res) => {

if (res.confirm) {

console.log(‘用户点击确定’)

wx.openSetting({

success: (res) => {

console.log(res)

}

})

} else if (res.cancel) {

console.log(‘用户点击取消’)

}

}

})

}

});

},

initApp() { // 初始化APP应用等。

// 初始化数据

this.setData({

_lon: app.globalData.userLocation.lon,

_lat: app.globalData.userLocation.lat,

user: {

hidden: false

}

});

wx.hideLoading();

},

// 定位到当前位置

moveToLocation() {

this.mapCtx.moveToLocation();

},

// 点击停车场标记P，显示停车场详情模态框

markertap(e) {

if (this.data.cannotFLag) {

return

}

let parkList = this.data.parkList;

let admissionFlag = null;

let admissionWidth = null;

for (let i = 0; i < parkList.length; i++) {

let park = parkList[i];

// 初始化停车场图标

if (park.entOid === ‘’) {

park.iconPath = ‘/images/blue_free.png’;

} else {

park.iconPath = ‘/images/red_free.png’;

}

// 停车场active状态

if (park.id === e.markerId) {

if (park.entOid === ‘’) {

park.iconPath = ‘/images/blue_full.png’;

} else {

park.iconPath = ‘/images/red_full.png’;

}

// 非红P车场不显示”入场“按钮

if (park.entOid === ‘’) {

admissionFlag = true,

admissionWidth = 50 + ‘%’

} else {

admissionFlag = false,

admissionWidth = 30 + ‘%’

}

// 显示面板并展示停车场详情

this.setData({

inParkFlag: false,

park: {

backBottom: 310 + ‘rpx’, // 回到原点图片位置

parkName: park.parkName, // 车场名称

parkPrice: park.parkFirstHour + “小时内” + park.parkFirstFee + “，后续每小时” + park.parkPerHourFee, // 停车场收费情况

leftPlace: park.leftPlace + ‘个’, // 车位

},

// 导航所需数据

chooseParkList: {

id: park.id,

longitude: park.longitude,

latitude: park.latitude,

name: park.parkGateName,

address: park.address

},

// 查看所需数据

viewParkList: {

parkHeadUrl: park.parkHeadUrl, // 车场图片

parkName: park.parkName, // 车场名称

leftPlace: park.leftPlace, // 空余车位

address: park.address, // 详细地址

parkPrice: park.parkFirstHour + “小时内” + park.parkFirstFee + “，后续每小时” + park.parkPerHourFee, // 停车场收费情况

},

admissionFlag: admissionFlag,

admissionWidth: admissionWidth,

});

}

this.setData({

markers: parkList

})

}

},

// 点击地图

mapClick() {

if (this.data.cannotFLag) {

return

}

let markerList = this.data.markers;

for (let i = 0; i < markerList.length; i++) {

let marker = markerList[i];

if (marker.entOid === ‘’) {

marker.iconPath = ‘/images/blue_free.png’;

} else {

marker.iconPath = ‘/images/red_free.png’;

}

this.setData({

markers: markerList,

park: {

backBottom: ‘10%’

},

inParkFlag: true

});

}

},

// 滑动地图，end事件

regionchange(e) {

if (e.type === ‘end’) {

if (this.data.inParkFlag) {

this.moveToNewLocation();

}

}

},

// 移动到新位置，并重新列出周边的停车场

moveToNewLocation() {

this.mapCtx.getCenterLocation({

success: (res) => {

this.data._lon = res.longitude;

this.data._lat = res.latitude;

this.getAroundParkData();

}

})

},

// 车场距离排序

sortParkList: function(list) {

for (var i = 0; i < list.length; i++) {

//var dis = CommonTools.getDistance(this.data._lat, this.data._lon, list[i].parkGateLat, list[i].parkGateLon);

//list[i].dis = dis;

}

//this.data.parkList = CommonTools.parkSortByDis(list);

},

// 入场

inPark() {

wx.showModal({

title: ‘入场提示’,

content: ‘确定后，即将开始计费’,

success: (res) => {

console.log(this.data.defaultCarNo)

if (res.confirm) {

if (this.data.defaultCarNo === ‘’) {

wx.navigateTo({

url: ‘…/addCar/addCar’,

})

} else {

_ajax.post(’/park/inPark’, {

parkId: this.data.chooseParkList.id,

carNum: this.data.defaultCarNo,

isScanBluetooth: ‘2’

}, (res) => {

this.getMyNowParking();

this.setData({

outParkFlag: false,

cannotFLag: true

})

})

}

}

}

})

},

// 出场

outPark() {

wx.showModal({

title: ‘出场提示’,

content: ‘确定后，请尽快离场！超过时段将产生额外费用！’,

success: (res) => {

if (res.confirm) {

_ajax.post(’/park/outPark’, {

parkId: this.data.parking.parkGateOid,

carNum: this.data.defaultCarNo,

isScanBluetooth: ‘2’

}, (res) => {

console.log(res);

this.setData({

inParkFlag: true,

outParkFlag: true,

cannotFLag: true,

billFlag: false,

park: {

backBottom: ‘10%’

}

})

})

} else if (res.cancel) {

console.log(‘用户点击取消’)

}

}

})

},

// 进入个人中心

goUserCenter: function() {

wx.navigateTo({

url: “…/userCenter/userCenter”

});

},

// 导航

goDaohang() {

wx.openLocation({

longitude: parseFloat(this.data.chooseParkList.longitude),

latitude: parseFloat(this.data.chooseParkList.latitude),

name: this.data.chooseParkList.parkGateName,

address: this.data.chooseParkList.address,

scale: 18

})

},

// 请求周边停车场数据

getAroundParkData() {

_ajax.post(’/park/getAroundParkingLotList’, {

longitude: this.data._lon + ‘’,

latitude: this.data._lat + ‘’

}, (res) => {

let markerList = res.data.context.list;

let parkList = [];

let iconPath = ‘’;

let width = ‘’;

let height = ‘’;

for (let item of markerList) {

if (item.entOid === ‘’) {

iconPath = ‘/images/blue_free.png’;

width = 22;

height = 32;

} else {

iconPath = ‘/images/red_free.png’;

width = 42;

height = 42;

}

parkList.push({

iconPath: iconPath, // 图标

id: +item.parkOid, // 车场id

entOid: item.entOid, // 是否为公司车场，空表示不是

longitude: +item.parkGateLon, // 车场经度

latitude: +item.parkGateLat, // 车场纬度

parkGateName: item.parkGateName, // 车场位置名

address: item.address, // 车场地址的详细说明

width: width, // 图标宽度

height: height, // 图标高度

parkName: item.parkName, // 停车场名称

parkFirstHour: item.parkFirstHour, // 首次费用时间（小时）

parkFirstFee: item.parkFirstFee, // 首次费用  

parkPerHourFee: item.parkPerHourFee, // 后续每小时费用  

leftPlace: item.leftPlace, // 剩余车位数

parkHeadUrl: item.parkHeadUrl, // 车场图片

anchor: { x: 0.5, y: 0.5 }

});

}

// this.sortParkList(res.data.context.list);

this.setData({

parkList: parkList,

markers: parkList

});

})

}

})