客户界面
<view class="page-body">
<view class="page-section page-section-gap">
<map
id="myMap"
style="width: 100%;height:{{winH}}px;display: {{map==true?'block':'none'}}"
latitude="{{latitude}}"
longitude="{{longitude}}"
markers="{{markers}}"
covers="{{covers}}"
polyline="{{polyline}}"
circles='{{circles}}'
enable-overlooking='{{true}}'
enable-rotate="{{true}}"
show-location="{{true}}"
show-compass="{{true}}"
scale="{{scale}}"
></map>
</view>
<cover-view class='controls'>
<cover-image src='../../images/xicheuser.png' bindtap="openUser" class='icon'></cover-image>
<cover-image src='../../images/qs_car.png' bindtap="openQS" class='icon'></cover-image>
<cover-image src='../../images/qrcode.png' bindtap="qrcode" class='icon'></cover-image>
<cover-image src='../../images/luxian.png' bindtap="mapLin" class='icon'></cover-image>
<cover-image src='../../images/quanpin.png' bindtap="getAllMap" class="icon"></cover-image>
<cover-image src='../../images/dibiao.png' bindtap="getTo" class="icon"></cover-image>
<cover-image src='../../images/dingwei.png' bindtap="moveToLocation" class="icon"></cover-image>
</cover-view>
<cover-view class='tabar'>
<cover-view class='tabar-item' bindtap='tbr'>菜单</cover-view>
<cover-view class='tabar-item' wx:if="{{distance}}">路程：{{distance}} 米</cover-view>
<cover-view class='tabar-item' wx:if="{{duration}}">时长：{{duration}} 分</cover-view>
</cover-view>
<cover-view class='map_sever_btn' style='left:{{btnLeftX}}px' bindtap='_severe_btn_'>
<cover-image class='map_sever_btn_img' src='../../images/xiche_btn.png'></cover-image>
</cover-view>
<!-- <cover-view class='sf'>
<cover-view data-sf='d' bindtap='sf' class='sf_d sf_btn'>+</cover-view>
<cover-view data-sf='x' bindtap='sf' class='sf_x sf_btn'>-</cover-view>
</cover-view> -->
<view class="modal-dialog" wx:if="{{showModal}}">
<view class="modal-title">提示</view>
<view class='qrcode_canvas'>
<!-- <canvas class='canvas' canvas-id='canvas'></canvas> -->
</view>
<view class="modal-content">
<view class='modal-canvas'>
<canvas class='canvas' canvas-id='canvas'></canvas>
</view>
<view>此二维码是用于汽车服务时，我司工作人员扫码确定</view>
<view>完成订单时使用，为保证服务的绿色和安全，请不要</view>
<view>透漏此二维码。</view>
</view>
<view class="modal-footer">
<view class="btn-confirm" bindtap="onConfirm" data-status="confirm">确定</view>
<view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view>
</view>
</view>
</view>var QQMapWX = require('../../utils/lbs/qqmap-wx-jssdk.js');
var config = require("../../utils/config.js");
var api = require('../../utils/api.js');
var QRCode = require('../../utils/weapp-qrcode.js');
var Code = require('../../utils/code.js');
var app=getApp();
var Config = config.Api;
var tbr=false;
var mapCtx;
var qqmapsdk;
var From,F_jd,F_wd,F_name;
var To,T_jd,T_wd,T_name;
var win_h,win_w;
var qrcode=null;
var intervalCode=null;
var fmmt = [null, null, null, null]
var positionType, position, linPatnPositionTime;
var radius;
Page({
/**
* 页面的初始数据
*/
data: {
canIUse: false,
load_btn: false,
overlooking:true,
map:true,
scale: 16,
// covers: [{
// latitude: 23.386000000000012,
// longitude: 104.23900000000003,
// iconPath: '/images/location.png'
// }]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
wx.getSetting({
success: function (res) {
console.log(res)
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称
// 实例化API核心类
loadData(that);
} else {
that.setData({ canIUse: true,map:false })
}
}
})
},
login: function () {
var that = this;
console.log('准备加载用户信息')
console.log('判断用户信息')
wx.getSetting({
success: function (res) {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称
if (app.globalData.userInfo) {
console.log('存在用户信息')
typeof cb == "function" && cb(this.globalData.userInfo)
} else {
console.log('不存在用户信息')
console.log('微信用户信息加载')
wx.login({
success: function (res) {
console.log('Login code获取')
if (res.code) {
console.log('Login code获取成功')
console.log('加载微信用户信息')
wx.getUserInfo({
success: function (data) {
that.setData({ canIUse: false,map:true })
console.log('加载微信用户信息成功')
console.log(data)
//that.globalData.userInfo = data.userInfo
typeof cb == "function" && cb(app.globalData.userInfo)
var params = {
code: res.code,
nickName: data.userInfo.nickName,
avatarUrl: data.userInfo.avatarUrl,
gender: data.userInfo.gender
};
console.log('加载商城用户信息')
api.wxLogin(params).then(function (r) {
console.log(r)
if (r.Status == 1) {
console.log('加载商城用户信息成功并登录')
console.log('保存商城用户信息')
//登陆成功
var userInfo = data.userInfo;
userInfo["fail"] = 0;
app.globalData.userInfo = userInfo;
wx.setStorageSync('MemberID', r.Data.MemberID);
wx.setStorageSync('MemberName', r.Data.MemberName);
wx.setStorageSync('Token', r.Data.Token);
wx.setStorageSync('MemberGender', r.Data.MemberGender);
wx.setStorageSync('MemberMobile', r.Data.MemberMobile);
wx.setStorageSync('MemberTelephone', r.Data.MemberTelephone);
wx.setStorageSync('MemberEmail', r.Data.MemberEmail);
wx.setStorageSync('MemberQQ', r.Data.MemberQQ);
app.globalData.userInfo = data.userInfo;
loadData(that);
} else {
//登陆失败
console.log('加载商城用户信息失败')
var userInfo = {
nickName: '登录失败',
avatarUrl: '../../images/login_fail.png',
fail: -1
}
app.globalData.userInfo = userInfo
wx.showToast({
title: '登录失败',
icon: 'success',
duration: 2000
})
}
});
}
});
} else { //获取code失败
console.log('Login code获取失败')
console.log('获取用户登录态失败！' + res.errMsg)
}
}
});
}
} else {
that.setData({ load_btn: true })
}
}
})
},
sf:function(e){
var that=this;
console.log(e.currentTarget.dataset.sf)
if (e.currentTarget.dataset.sf=="d"){
mapCtx.getScale({
success: function (t) {
e = t.scale;
if (e <= 18) {
that.setData({ scale: e });
e = e + 1;
} else {
wx.showToast({
title: '缩放太大了',
icon: 'success',
duration: 2000
})
}
}
});
}else{
mapCtx.getScale({
success: function (t) {
e = t.scale;
console.log(e)
if (e >= 5) {
that.setData({ scale: e });
e = e - 1;
} else {
wx.showToast({
title: '缩放太小了',
icon: 'success',
duration: 2000
})
}
}
});
}
},
// 跳转到目的地
getTo:function(e){
var that = this;
mapCtx.getCenterLocation({
success: function (res) {
//console.log(res)
that.setData({
covers: {
latitude: T_wd,
longitude: T_jd,
iconPath: '/images/location.png'
}
})
},
fail: function (err) {
}
})
},
// 显示所有经纬
getAllMap:function(){
var that=this;
mapCtx.includePoints({
points: [{
latitude: F_wd,
longitude: F_jd
}, {
latitude: T_wd,
longitude: T_jd
}],
padding:[50,50,50,50],
});
},
bindregionchange:function(e){
console.log(e)
},
bindcallouttap:function(e){
console.log(e)
},
bindmarkertap: function (e) {
console.log(e)
},
// 打开用户取送信息框
openQS: function (e) {
var that = this;
clearInterval(linPatnPositionTime);
api.getUserQRCode({
uid: wx.getStorageSync("MemberID"),
phone: wx.getStorageSync("userMobile") || wx.getStorageSync("MemberMobile")
}).then(function (e) {
//console.log(e.data)
if (e.data.length < 1) {
wx.showModal({
title: '提示',
content: '您未创建服务，请点击下方圆形“汽车”图样，选择“我要洗车/我要取车”，我们的工作人员将会在一个30分钟内为您服务。',
showCancel: false,
confirmText: '关闭'
})
} else {
var userList = e.data;
var userPositionListArray = [];
var userCarIdListArray = [];
for (var i = 0; i < userList.length; i++) {
//console.log(userList[i]);
userPositionListArray[i] = userList[i].pid;
userCarIdListArray[i] = userList[i].carId;
}
wx.showActionSheet({
itemList: userCarIdListArray,
success: function (res) {
position = userPositionListArray[res.tapIndex];
var positionTypeArray=["qu","song"]
wx.showActionSheet({
itemList: ["鸿瑞取车","鸿瑞送车"],
success: function (ress) {
positionType=positionTypeArray[ress.tapIndex];
linPatnPosition(that)
//console.log(ress.tapIndex+"---------------->"+position+"---------->"+positionType)
linPatnPositionTime = setInterval(function () { linPatnPosition(that)},10000);
}
})
}
})
}
})
},
// 打开用户二维码
qrcode:function(e){
var that=this;
api.getUserQRCode({
uid:wx.getStorageSync("MemberID"),
phone: wx.getStorageSync("userMobile") || wx.getStorageSync("MemberMobile")
}).then(function(e){
//console.log(e.data)
if (e.data.length<1){
wx.showModal({
title: '提示',
content: '您未创建服务，请点击下方圆形“汽车”图样，选择“我要洗车/我要取车”，我们的工作人员将会在一个30分钟内为您服务。',
showCancel: false,
confirmText: '关闭'
})
}else{
var userList = e.data;
var userPositionListArray = [];
var userCarIdListArray = [];
for (var i = 0; i < userList.length; i++) {
//console.log(userList[i]);
userPositionListArray[i] = userList[i].pid;
userCarIdListArray[i] = userList[i].carId;
}
wx.showActionSheet({
itemList: userCarIdListArray,
success: function (res) {
that.showDialogBtn();
qrcode = new QRCode('canvas', {
text: new Date().getTime().toString() + Code.encrypt(userPositionListArray[res.tapIndex]),
width: 150,
height: 150,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H,
});
var w = null, s = null, q = null, x = null;
intervalCode = setInterval(function () {
api.getPeisongData({
positionid: userPositionListArray[res.tapIndex],
msg: "iid"
}).then(function (e) {
if (iscf(w, e[0].iid)) {
showIID(that, e[0].adminId, e[0].pid, e[0].tid,"结单提示");
} else {
if (iscf(q, e[0].quCheIID)){
showIID(that, e[0].adminId, e[0].pid, e[0].tid,"取车提示");
}else{
if (iscf(s, e[0].songCheIID)){
showIID(that, e[0].adminId, e[0].pid, e[0].tid,"送车提示");
}else{
w = e[0].iid;
q = e[0].quCheIID;
s = e[0].songCheIID;
var cv = Code.encrypt(userPositionListArray[res.tapIndex]);
cv = new Date().getTime().toString() + cv;
qrcode.makeCode(cv);
var time = cv.substring(0, 8);
var code = cv.substring(13);
}
}
}
})
}, 5000);
}
})
}
})
},
// 进入用户汽车主页
openUser:function(e){
wx.navigateTo({
url: '../xicheuser/xicheuser',
})
},
/**
* 弹窗
*/
showDialogBtn: function () {
this.setData({
showModal: true,
map:false
})
},
hideModal: function () {
clearInterval(intervalCode)
this.setData({
showModal: false,
map: true
});
},
onCancel: function () {
this.hideModal();
},
onConfirm: function () {
this.hideModal();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function (e) {
var that = this;
wx.getSystemInfo({
success: function (res) {
win_h=res.screenHeight;
win_w=res.screenWidth;
that.setData({
winH: (res.windowHeight) ,
btnLeftX: ((res.windowWidth / 2)-30)
})
},
});
wx.getLocation({
type: 'gcj02',
success(res) {
F_wd = res.latitude;
F_jd = res.longitude;
From = F_wd + "," + F_jd;
}
})
},
// 下角中间大按钮事件（完成用户与客户的信息）
_severe_btn_:function(){
var that=this;
var item;
var able = wx.getStorageSync('MemberGroupID');
if (able == "3" || able == 3) {
item =["取车", "送车"];
}else{
item = ["我要洗车", "我要取车"];
}
wx.showActionSheet({
itemList: item,
success:function(res){
switch(res.tapIndex){
case 0:
if (item[0] =="取车"){
wx.navigateTo({
url: '../songche/songche?type=quche',
});
}else{
wx.navigateTo({
url: '../xicheFrom/xicheFrom',
});
}
break;
case 1:
if (item[1] == "送车") {
wx.navigateTo({
url: '../songche/songche?type=songche',
});
} else {
wx.showModal({
title: '取车提示',
content: '下一步将直接拨打电话，您确定要临时取车吗？',
showCancel: true,
cancelText: '取消',
confirmText: '拨打',
success: function(res) {
if(res.confirm){
wx.makePhoneCall({
phoneNumber: wx.getStorageSync("Mobile") //仅为示例，并非真实的电话号码
})
}
},
})
} break;
}
}
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
var that = this;
that.onLoad();
that.onReady();
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
clearInterval(linPatnPositionTime)
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
getCenterLocation: function () {
mapCtx.getCenterLocation({
success: function (res) {
//console.log(res.longitude)
//console.log(res.latitude)
}
})
},
// 移动到当前（定位）位置
moveToLocation: function () {
mapCtx.moveToLocation();
},
translateMarker: function () {
mapCtx.translateMarker({
markerId: 1,
autoRotate: true,
duration: 1000,
destination: {
latitude: 23.10229,
longitude: 113.3345211,
},
animationEnd() {
//console.log('animation end')
}
})
},
//事件回调函数
mapLin: function (e) {
var that=this;
wx.showActionSheet({
itemList: ["驾车", "公交", "骑行","步行"],
success(res) {
switch(res.tapIndex){
case 0: pathLin(that, "driving"); break;
case 1: pathLin(that, "transit"); break;
case 2: pathLin(that, "bicycling"); break;
case 3: pathLin(that, "walking"); break;
}
},
})
},
overlooking:function(){
var that=this;
that.setData({ overlooking:true})
},
// 显示/掩藏tbr
tbr:function(){
var that=this;
if(tbr){
wx.showTabBar();
wx.getSystemInfo({
success: function (res) {
that.setData({
winH: (res.windowHeight),
})
},
});
}else{
wx.hideTabBar();
wx.getSystemInfo({
success: function (res) {
that.setData({
winH: (res.windowHeight+50),
})
},
});
}
tbr = !tbr;
}
})
// 地图路径规划
function pathLin(_this,linType){
wx.getLocation({
type: 'gcj02',
success(res) {
F_wd = res.latitude;
F_jd = res.longitude;
From = F_wd + "," + F_jd;;
}
})
//网络请求设置
var opt = {
//WebService请求地址，from为起点坐标，to为终点坐标，开发key为必填
url: 'https://apis.map.qq.com/ws/direction/v1/'+linType+'/?from=' + From + '&to=' + To + '&key=' + Config.MapKey,
method: 'GET',
dataType: 'json',
//请求成功回调
success: function (res) {
//console.log(res)
var ret = res.data;
var steps = ret.result.routes[0].steps;//路标指示
var distance = ret.result.routes[0].distance; //总长度
var duration = ret.result.routes[0].duration;//总耗时
if (ret.message == "query ok") {
var result = ret.result;
if (ret.status != 0) return; //服务异常处理
var coors = ret.result.routes[0].polyline, pl = [];
//坐标解压（返回的点串坐标，通过前向差分进行压缩）
var kr = 1000000;
for (var i = 2; i < coors.length; i++) {
coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
}
//将解压后的坐标放入点串数组pl中
for (var i = 0; i < coors.length; i += 2) {
pl.push({ latitude: coors[i], longitude: coors[i + 1] })
}
//设置polyline属性，将路线显示出来
_this.setData({
polyline: [{
points: pl,
color: '#FF000088',
arrowLine:true,
width: 8
}],
distance: distance,
duration: duration
})
}
}
};
wx.request(opt);
}
// 显示未完成
function showIID(that, adminId, pid, tid, title){
clearInterval(intervalCode)
that.hideModal();
var content =
"感谢您对我司服务的支持，这是我司编号" + adminId + "为您服务，请记得为我司服务人员点赞，如果您对我司的服务存在问题，请与我们联系！";
wx.showModal({
title: title,
content: content,
cancelText: "关闭",
confirmText: "点赞",
success(res) {
if (res.confirm) {
wx.navigateTo({
url: "../xichefk/xichefk?positionId=" + pid + "&adminId=" + adminId + "&tpId=" + tid
})
} else if (res.cancel) {
//console.log('用户点击取消')
}
}
})
}
//判断字符是否为空的方法
function isEmpty(obj) {
if (typeof obj == "undefined" || obj == null || obj == "") {
return true;
} else {
return false;
}
}
// 路径地图位置渲染
function linPatnPosition(that){
var fmmtJWArray=[];
wx.getLocation({
type: "gcj02",
success: function (res) {
F_wd = res.latitude;
F_jd = res.longitude;
From = F_wd + "," + F_jd;
api.postUserTempPosition({
positionId: position,
positionType: "user",
positionData: JSON.stringify(res)
}).then(function (e) {
// //console.log();
//console.log(e[0])
var atp = null, utp = null;
if (!isEmpty(e[0].adminId_temp_position)) {
//console.log(e[0].adminId_temp_position)
atp = JSON.parse(e[0].adminId_temp_position);
fmmt[1] = {
id: e[0].pid + positionType + 2,
latitude: atp.latitude,
longitude: atp.longitude,
callout: {
content: "服务员：" + e[0].adminId + "号" + "\n 电话：" + e[0].userMobile + "\n",
color: "#ffffff",
fontSize: "12",
borderRadius: "8",
bgColor: "#336699",
padding: "6",
boxShadow: "",
display: "ALWAYS"
}
};
}
if (!isEmpty(e[0].userId_temp_position)) {
////console.log(e[0].userId_temp_position)
utp = JSON.parse(e[0].userId_temp_position);
fmmt[2] = {
id: e[0].pid + positionType + 2,
latitude: utp.latitude,
longitude: utp.longitude,
}
}
if (positionType == "song") {
//console.log(positionType);
fmmt[3] = {
id: e[0].pid + positionType + 3,
latitude: e[0].car_songchedi_latitude,
longitude: e[0].car_songchedi_longitude,
callout: {
content: "送达地：" + e[0].car_songchedi_name + "\n" + "信息：" + e[0].carId + "-" + e[0].carColor,
color: "#ffffff",
fontSize: "12",
borderRadius: "8",
bgColor: "#336699",
padding: "6",
boxShadow: "",
display: "ALWAYS"
}
};
that.setData({
markers: fmmt,
polyline: [{
points: JSON.parse(e[0].songChePathLin),
arrowLine: true,
color: '#FF0000DD',
width: 8
}],
distance: e[0].songChe_distance,
duration: e[0].songChe_duration
});
//console.log("ss1")
//console.log(fmmt)
} else {
//console.log(positionType)
fmmt[3] = {
id: e[0].pid + positionType + 3,
latitude: e[0].car_quchedi_latitude,
longitude: e[0].car_quchedi_longitude,
callout: {
content: "取车地：" + e[0].car_songchedi_name + "\n" + "信息：" + e[0].carId + "-" + e[0].carColor,
color: "#ffffff",
fontSize: "12",
borderRadius: "8",
bgColor: "#336699",
padding: "6",
boxShadow: "",
display: "ALWAYS"
}
};
that.setData({
markers: fmmt,
polyline: [{
points: JSON.parse(e[0].quChePathLin),
arrowLine: true,
color: '#FF0000DD',
width: 8
}],
distance: e[0].quChe_distance,
duration: e[0].quChe_duration
});
//console.log("ss2")
//console.log(fmmt)
}
})
},
});
}
function iscf(a,b){
if(a==null){
return false;
}else{
return a==b?false:true;
}
}
function loadData(that){
qqmapsdk = new QQMapWX({
key: Config.MapKey
});
mapCtx = wx.createMapContext('myMap')
api.getAdminMap({
jd: 1,
wd: 1
}).then(function (e) {
T_wd = e[0].wd;
T_jd = e[0].jd;
radius = e[0].radius * 1
To = T_wd + "," + T_jd;
var adminMK = {
id: 1,
title: '123',
latitude: T_wd,
longitude: T_jd,
alpha: 0.7,
callout: {
content: e[0].title,
color: "#ffffff",
fontSize: "12",
borderRadius: "8",
bgColor: "#ff3300",
padding: "10",
boxShadow: "10",
display: "ALWAYS"
}
};
that.setData({
latitude: T_wd,
longitude: T_jd,
markers: [adminMK],
circles: [{
latitude: T_wd,
longitude: T_jd,
color: '#FF000055',
fillColor: '#7cb5ec11',
radius: radius,
strokeWidth: 1
}]
});
fmmt[0] = adminMK;
});
}.login_windows{
position: fixed;
z-index: 50;
left: 0;
top: 0;
width: 750rpx;
height: 100%;
background-color: rgba(101, 101, 101, 0.52);
}
.login_main{
/* margin: 0 auto; */
top:25%;
left: 20%;
position: fixed;
display: flex;
flex-direction: column;
width: 400rpx;
/* height: 200px; */
padding: 20px;
border-radius: 5px;
background-color: #fff;
}
.login_context{
margin-top: 10px;
margin-bottom: 10px;
font-size: 0.8em;
text-align: center;
}
.login_btn{
margin-top: 10px;
/* margin-bottom: 10px; */
text-align: center;
}
.icon:active{
background-color: rgb(248, 245, 245);
}
.page-section-gap{
box-sizing: border-box;
padding: 0;
}
.page-body-button {
margin-bottom: 20rpx;
}
.controls {
position: absolute;
right: 5px;
bottom: 5px;
background-color: rgba(69, 69, 70, 0.548);
width: 100rpx;
display: flex;
flex-direction: column;
border-radius: 10px;
}
.tabar{
position: absolute;
top: 0px;
left: 0px;
display: flex;
flex-direction: row;
background-color: rgba(69, 69, 70, 0.548);
color: #fff;
padding: 0px;
}
.tabar-item{
padding: 8px;
}
.tabar-item:active{
background-color: rgba(194, 194, 197, 0.548);
}
.map_sever_btn{
width: 40px;
height: 40px;
background-color: rgba(69, 69, 70, 0.548);
position: absolute;
bottom: 100rpx;
border-radius: 40px;
font-size: 30px;
line-height: 60px;
text-align: center;
color: rgba(255, 255, 255, 0.7);
padding: 10px 10px 10px 10px;
}
.map_sever_btn:active{
background-color: rgba(69, 69, 70, 0.733);
box-shadow: 0px 0px 10px 5px #888888;
}
.map_sever_btn_img{
width: 30px;
height: 30px;
margin: 0 auto;
margin-top: 3px;
}
.qrcode{
position: absolute;
top:200px;
display: flex;
flex-direction: column;
margin: 0 auto;
}
.canvas{
width: 150px;
height: 150px;
}
/**弹框**/
.modal-dialog {
width: 600rpx;
/* height: 321rpx; */
overflow: hidden;
position: fixed;
top: 30%;
left: 0;
z-index: 9999;
background-color:rgba(0,0,0,0.8);
margin: -180rpx 75rpx;
border-radius: 6rpx;
}
.modal-title {
padding-left: 38rpx;
padding-top: 24rpx;
color: #ffffff;
text-align: left;
}
.modal-content{
padding-top: 30rpx;
font-size: 25rpx;
color: #ffffff;
text-align: center;
}
.modal-canvas{
width: 150px;
padding: 15px;
margin: 0 auto;
background-color: #fff;
}
.modal-footer {
padding-top: 60rpx;
padding-bottom: 40rpx;
display: flex;
flex-direction: row;
height: 86rpx;
border-top: 0px solid rgba(0,0,0,0.8);
font-size: 34rpx;
line-height: 86rpx;
}
.btn-confirm {
margin-left: 111rpx;
width: 134rpx;
height: 68rpx;
line-height: 68rpx;
color: #ffffff;
font-size: 32rpx;
text-align: center;
background-color: #146755;
border-radius: 33rpx;
}
.btn-cancel {
text-align: center;
margin-left: 111rpx;
width: 134rpx;
height: 68rpx;
line-height: 68rpx;
color: #333333;
font-size: 32rpx;
background-color: #cccccc;
border-radius: 33rpx;
}
.sf{
position: absolute;
left: 20px;
top: 45%;
display: flex;
flex-direction: column;
}
.sf_btn{
margin: 10px;
background-color: rgba(255, 255, 255, 0.836);
border-radius: 5px;
padding: 5px;
text-align: center;
}
.sf_btn:active{
background-color: rgb(216, 213, 213);
}
配送管理端
<view class="page-body">
<view class="page-section page-section-gap">
<map
id="myMap"
style="width: 100%;height:{{winH}}px;"
latitude="{{latitude}}"
longitude="{{longitude}}"
markers="{{markers}}"
covers="{{covers}}"
polyline="{{polyline}}"
enable-overlooking='{{true}}'
enable-rotate="{{true}}"
show-location="{{true}}"
show-compass="{{true}}"
bindmarkertap="bindmarkertap"
bindregionchange="bindregionchange"
bindcallouttap="bindcallouttap"
bindpoitap="bindpoitap" ></map>
</view>
<cover-view class='controls'>
<cover-image src='../../images/quanpin.png' bindtap="getAllMap" class="icon"></cover-image>
<cover-image src='../../images/dibiao.png' bindtap="getTo" class="icon"></cover-image>
<cover-image src='../../images/dingwei.png' bindtap="moveToLocation" class="icon"></cover-image>
</cover-view>
<cover-view class='tabar'>
<cover-view class='tabar-item' wx:if="{{distance}}">路程：{{distance}} 米</cover-view>
<cover-view class='tabar-item' wx:if="{{duration}}">时长：{{duration}} 分</cover-view>
</cover-view>
<cover-view class='map_sever_btn' style='left:{{btnLeftX}}px' bindtap='_severe_btn_'>
<cover-image class='map_sever_btn_img' src='../../images/scanCode.png'></cover-image>
</cover-view>
<cover-view class='context'>
<cover-view class='context_title'>
客户信息
<cover-view class='context_close' wx:if="{{dogg}}" bindtap='dogg'>☒</cover-view>
<cover-view class='context_close' wx:if="{{!dogg}}" bindtap='dogg'>▼</cover-view>
</cover-view>
<cover-view class='context_list' wx:if="{{dogg}}">
<cover-view bindtap='open' class='context_list_item' wx:for="{{userList}}" wx:for-item="k">
<cover-view class='context_list_item_item context_list_item_border'>
<cover-view class='context_list_item_view carid'>{{k.carId}}</cover-view>
<cover-view class='context_list_item_view uname'>{{k.userName}}</cover-view>
</cover-view>
<cover-view class='context_list_item_item'>
<cover-image src='../../images/id.png' bindtap='openUser' data-id='{{k._id}}' class="icon_list"></cover-image>
<cover-image
src='../../images/luxian.png'
bindtap="mapLin"
wx:if="{{pathLinType=='songche'}}"
data-id='{{k._id}}'
data-userId="{{k.userId}}"
data-carId="{{k.carId}}"
data-jd='{{k.car_songchedi_longitude}}'
data-wd='{{k.car_songchedi_latitude}}'
class='icon_list'></cover-image>
<cover-image
src='../../images/luxian.png'
bindtap="mapLin"
wx:if="{{pathLinType=='quche'}}"
data-id='{{k._id}}'
data-userId="{{k.userId}}"
data-carId="{{k.carId}}"
data-jd='{{k.car_quchedi_longitude}}'
data-wd='{{k.car_quchedi_latitude}}'
class='icon_list'></cover-image>
<cover-image src='../../images/call.png' data-phoneNuber='{{k.userMobile}}' bindtap='phoneCall' class="icon_list"></cover-image>
<cover-image src='../../images/more.png' bindtap='phoneCall' class="icon_list"></cover-image>
</cover-view>
</cover-view>
</cover-view>
</cover-view>
<!-- <button size='mini' bindtap="includePoints" class="page-body-button" type="primary">缩放视野展示所有经纬度</button> -->
<!-- <cover-view size='mini' bindtap="driving" class='icon luxian'></cover-view>
<cover-view size='mini' bindtap="getCenterLocation" class="icon quanzai"></cover-view>
<cover-view size='mini' bindtap="translateMarker" class="icon zhondian"></cover-view>
<cover-view size='mini' bindtap="moveToLocation" class="icon dingwei"></cover-view> -->
</view>var QQMapWX = require('../../utils/lbs/qqmap-wx-jssdk.js');
var config = require("../../utils/config.js");
var api = require('../../utils/api.js');
var Code = require('../../utils/code.js');
var Config = config.Api;
var kehuId=null;
var tbr=true;
var mapCtx;
var qqmapsdk;
var From,F_jd,F_wd,F_name;
var To, T_jd, T_wd,T_title,T_name;
var pathLinType=null;
var ds_position=null;
var Markers=[];
var allMapPosition = [];
var fmmt = [null, null, null, null]
var positionType;
Page({
/**
* 页面的初始数据
*/
data: {
overlooking:true,
dogg:false,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
pathLinType = options.type;
if (pathLinType=="songche"){
positionType="song";
wx.setNavigationBarTitle({
title: '送车地图'
})
}else{
positionType="qu";
wx.setNavigationBarTitle({
title: '取车地图'
})
}
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: Config.MapKey
});
mapCtx = wx.createMapContext('myMap')
api.getAdminMap({
jd:1,
wd:1
}).then(function (e) {
T_wd = e[0].wd;
T_jd = e[0].jd;
T_title = e[0].title;
To = T_wd + "," + T_jd;
let markers={
id: e[0]._id,
latitude: T_wd,
longitude: T_jd,
callout: {
content: e[0].title,
color: "#ffffff",
fontSize: "12",
borderRadius: "8",
bgColor: "#ff3300",
padding: "10",
boxShadow: "10",
display: "ALWAYS",
}
};
fmmt[0]=markers;
Markers.push(markers);
that.setData({
latitude: T_wd,
longitude: T_jd,
markers: Markers,
})
});
onLoad(that);
},
// 跳转到目的地
getTo:function(e){
var that = this;
mapCtx.getCenterLocation({
success: function (res) {
//console.log(res)
that.setData({
covers: {
latitude: T_wd,
longitude: T_jd,
iconPath: '/images/location.png'
}
})
},
})
},
// 显示所有经纬
getAllMap:function(){
var that=this;
mapCtx.includePoints({
points: that.data.allMapPosition,
padding:[50,50,50,50],
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function (e) {
var that = this;
wx.hideTabBar({
animation: true,
success: function (e) {
//console.log("关闭下控件")
}
})
wx.getSystemInfo({
success: function (res) {
that.setData({
winH: (res.screenHeight-res.statusBarHeight-50) ,
btnLeftX: ((res.windowWidth / 2)-30)
})
},
});
wx.getLocation({
type: 'gcj02',
success(res) {
F_wd = res.latitude;
F_jd = res.longitude;
From = F_wd + "," + F_jd;
}
})
},
// 下角中间大按钮事件（扫码）
_severe_btn_:function(){
var that=this;
if (kehuId != null && kehuId!=""){
wx.scanCode({
onlyFromCamera: true,
success(res) {
var time=res.result.substring(0,8);
var code=res.result.substring(13);
var id=Code.decrypt(code)
api.getPeisongData({
positionid: id
}).then(function (e) {
//console.log(e)
var content =
"车 牌：" + e[0].carId + "\r\n" +
"车 色：" + e[0].carColor + "\r\n" +
"姓 名：" + e[0].userName + "\r\n" +
"电 话：" + e[0].userMobile + "\r\n" +
"取车地址：" + e[0].car_quchedi_name + "\r\n" +
"取车时间：" + e[0].car_quchedi_time + "\r\n" +
"送车地址：" + e[0].car_songchedi_name + "\r\n" +
"送车时间：" + e[0].car_songchedi_time + "\r\n";
wx.showModal({
title: '客户信息',
content: content,
success(res) {
if (res.confirm) {
api.setPeisongIID({
id: time + code,
iidType: pathLinType
}).then(function (e) {
onLoad(that);
wx.showToast({
title: "提交成功",
icon: 'success',
duration: 2000
})
})
} else if (res.cancel) {
wx.showToast({
title: '取消成功',
icon: 'success',
duration: 2000
})
}
}
})
})
}
})
}else{
wx.showModal({
title: '操作提示',
content: '您目前操作的存在以下问题：1.您为点击取车或送车对象。2.数据不存在该订单。3.系统出现BUG。',
showCancel:false,
success(res) { }
})
}
},
// 拨打电话
phoneCall:function(e){
//console.log(e.currentTarget.dataset.phonenuber)
wx.makePhoneCall({
phoneNumber: e.currentTarget.dataset.phonenuber //仅为示例，并非真实的电话号码
})
},
// 弹窗展示提示
dogg:function(e){
var that=this;
that.setData({ dogg: !that.data.dogg})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
var that = this;
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
clearInterval(ds_position)
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
getCenterLocation: function () {
mapCtx.getCenterLocation({
success: function (res) {
//console.log(res.longitude)
//console.log(res.latitude)
}
})
},
// 移动到当前（定位）位置
moveToLocation: function () {
mapCtx.moveToLocation();
},
translateMarker: function () {
mapCtx.translateMarker({
markerId: 1,
autoRotate: true,
duration: 1000,
destination: {
latitude: 23.10229,
longitude: 113.3345211,
},
animationEnd() {
//console.log('animation end')
}
})
},
//路径设置
mapLin: function (e) {
//console.log(e)
var Tos;
var that = this;
var id = e.currentTarget.dataset.id;
var userId = e.currentTarget.dataset.userid;
var carId = e.currentTarget.dataset.carid;
if(id){
var jd = e.currentTarget.dataset.jd;
var wd = e.currentTarget.dataset.wd;
Tos = wd + "," + jd;
}else{
Tos=false;
}
wx.showActionSheet({
// itemList: ["驾车", "公交", "骑行", "步行", "刷新驾车"],
itemList: ["驾车","刷新驾车"],
success(res) {
switch(res.tapIndex){
case 0: pathLin(that, "driving", Tos, that.data.waypoints, id,userId, carId,1); break;
case 1: pathLin(that, "driving", Tos, that.data.waypoints, id, userId, carId,0); break;
// case 0: pathLin(that, "driving", Tos, that.data.waypoints, id, userId, carId, 1); break;
// case 1: pathLin(that, "transit", Tos, that.data.waypoints, id, userId, carId, 0); break;
// case 2: pathLin(that, "bicycling", Tos, that.data.waypoints, id, userId, carId, 0); break;
// case 3: pathLin(that, "walking", Tos, that.data.waypoints, id, userId, carId, 0); break;
// case 4: pathLin(that, "driving", Tos, that.data.waypoints, id, userId, carId, 0); break;
}
},
})
},
overlooking:function(){
var that=this;
that.setData({ overlooking:true})
},
// 显示/掩藏tbr
tbr:function(){
if(tbr){
wx.showTabBar({
})
}else{
wx.hideTabBar()
}
tbr = !tbr;
},
// 打开客户信息
openUser:function(e){
var id = e.currentTarget.dataset.id;
api.getPeisongData({
positionid:id,
file:"position"
}).then(function(e){
//console.log(e)
var content =
" 车 牌 ：" + e[0].carId +"\r\n"+
" 车 色 ：" + e[0].carColor + "\r\n" +
" 姓 名 ：" + e[0].userName + "\r\n" +
" 电 话 ：" + e[0].userMobile + "\r\n" +
"取车地址：" + e[0].car_quchedi_name + "\r\n" +
"取车时间：" + e[0].car_quchedi_time + "\r\n" +
"送车地址：" + e[0].car_songchedi_name + "\r\n" +
"送车时间：" + e[0].car_songchedi_time + "\r\n" ;
wx.showModal({
title: '客户信息',
content: content,
success(res) {
if (res.confirm) {
//console.log('用户点击确定');
} else if (res.cancel) {
//console.log('用户点击取消');
}
}
})
})
},
bindcallouttap: function (e) {
console.log(e)
},
})
// 获取道路规划
function pathLin(_this, linType, Tos, waypoints, id,userId,carId,sx){
// var _this = this;
kehuId=id;
To=Tos? Tos : To;
var wps=waypoints?"&waypoints="+waypoints:"";
//网络请求设置
var opt = {
//WebService请求地址，from为起点坐标，to为终点坐标，开发key为必填
url: 'https://apis.map.qq.com/ws/direction/v1/' + linType + '/?from=' + From + '&to=' + To + '&key=' + Config.MapKey + wps,
method: 'GET',
dataType: 'json',
//请求成功回调
success: function (res) {
//console.log(res)
var ret = res.data;
var steps = ret.result.routes[0].steps;//路标指示
var distance = ret.result.routes[0].distance; //总长度
var duration = ret.result.routes[0].duration;//总耗时
var steps = ret.result.routes[0].steps;//路径到位
wx.showToast({
title: ret.message,
})
if (ret.message == "query ok") {
var result = ret.result;
if (ret.status != 0) return; //服务异常处理
var coors = ret.result.routes[0].polyline, pl = [];
//坐标解压（返回的点串坐标，通过前向差分进行压缩）
var kr = 1000000;
for (var i = 2; i < coors.length; i++) {
coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
}
//将解压后的坐标放入点串数组pl中
for (var i = 0; i < coors.length; i += 2) {
pl.push({ latitude: coors[i], longitude: coors[i + 1] })
}
api.postUserPath({
// data:{
id: id,
carId: carId,
adminId: wx.getStorageSync("MemberID"),
adminMobile: wx.getStorageSync("userMobile") || wx.getStorageSync("MemberMobile"),
userId: userId,
adminId_temp_wd: F_wd,
adminId_temp_jd: F_jd,
userId_temp_wd: T_wd,
userId_temp_jd: T_jd,
pathLin: JSON.stringify(pl),
iid: 1,
able: 1,
distance: distance,
duration: duration,
pathLinType: pathLinType,
steps: JSON.stringify(steps)
// }
}).then(function (e) {
kehuId = e;
})
// //console.log(pl)
//设置polyline属性，将路线显示出来
_this.setData({
polyline: [{
points: pl,
arrowLine: true,
color: '#FF0000DD',
width: 8
}],
distance: distance,
duration: duration
});
}
}
};
api.getPeisongData({
positionid:kehuId
}).then(function(e){
//console.log(e[0]);
var tp=true;
if (!e[0]){
tp=false;
}
if (pathLinType=="songche"){
if (tp == false || sx == 0 || e[0].songChePathLin == null || e[0].songChePathLin == ""){
wx.request(opt);
getTimePosition(_this);
}else{
_this.setData({
polyline: [{
points: JSON.parse(e[0].songChePathLin),
arrowLine: true,
color: '#FF0000DD',
width: 8
}],
distance: e[0].songChe_distance,
duration: e[0].songChe_duration
});
getTimePosition(_this);
}
}else{
if (tp == false || sx == 0 || e[0].quChePathLin == null || e[0].quChePathLin == ""){
//console.log("quche_1");
wx.request(opt);
getTimePosition(_this);
}else{
_this.setData({
polyline: [{
points: JSON.parse(e[0].quChePathLin),
arrowLine: true,
color: '#FF0000DD',
width: 8
}],
distance: e[0].quChe_distance,
duration: e[0].quChe_duration
});
getTimePosition(_this);
}
}
})
}
// 获取位置及道路
function getPosition(_this) {
linPatnPosition(_this)
}
// 定时刷新道路及图标
function getTimePosition(_this){
ds_position = setInterval(function () {
getPosition(_this);
}, 5000);
}
// 刷新地图图样（位置等）
function onLoad(that){
api.getListUser({
file:"getListUser",
fileType:pathLinType
}).then(function (e) {
var mk, amp;
e.data.forEach(function (res, k) {
if (pathLinType == "songche") {
mk = {
id: res._id,
latitude: res.car_songchedi_latitude,
longitude: res.car_songchedi_longitude,
callout: {
content: res.car_songchedi_name,
color: "#ffffff",
fontSize: "12",
borderRadius: "8",
bgColor: "#336699",
padding: "6",
boxShadow: "",
display: "ALWAYS"
}
}
amp = {
latitude: res.car_songchedi_latitude,
longitude: res.car_songchedi_longitude,
}
} else {
mk = {
latitude: res.car_quchedi_latitude,
longitude: res.car_quchedi_longitude,
callout: {
content: res.car_quchedi_name,
color: "#ffffff",
fontSize: "12",
borderRadius: "8",
bgColor: "#336699",
padding: "6",
boxShadow: "",
display: "ALWAYS"
}
}
amp = {
latitude: res.car_quchedi_latitude,
longitude: res.car_quchedi_longitude,
}
}
Markers.push(mk);
allMapPosition.push(amp)
})
allMapPosition.forEach(function (e, k) {
//console.log(e)
})
that.setData({
pathLinType: pathLinType,
userList: e.data,
markers: Markers,
allMapPosition: allMapPosition,
// waypoints: waypoints
})
});
}
// 获取道路规划及标点
function linPatnPosition(that,pid) {
var fmmtJWArray = [];
wx.getLocation({
type: "gcj02",
success: function (res) {
F_wd = res.latitude;
F_jd = res.longitude;
From = F_wd + "," + F_jd;
api.postAdminTempPosition({
positionId: kehuId,
positionType: "admin",
positionData: JSON.stringify(res)
}).then(function (e) {
//console.log();
//console.log(e)
var atp = null, utp = null;
if (!isEmpty(e[0].adminId_temp_position)) {
//console.log(e[0].adminId_temp_position)
atp = JSON.parse(e[0].adminId_temp_position);
fmmt[1] = {
id: e[0]._id + positionType + 2,
latitude: atp.latitude,
longitude: atp.longitude
};
}
if (!isEmpty(e[0].userId_temp_position)) {
//console.log(e[0].userId_temp_position)
utp = JSON.parse(e[0].userId_temp_position);
fmmt[2] = {
id: e[0]._id + positionType + 2,
latitude: utp.latitude,
longitude: utp.longitude,
callout: {
content: "车主：" + e[0].userName + "-" + e[0].userMobile+"\n" + "信息：" + e[0].carId + "-" + e[0].carColor,
color: "#ffffff",
fontSize: "12",
borderRadius: "8",
bgColor: "#336699",
padding: "6",
boxShadow: "",
display: "ALWAYS"
}
}
}
if (positionType == "song") {
//console.log(positionType)
fmmt[3] = {
id: e[0]._id + positionType + 3,
latitude: e[0].car_songchedi_latitude,
longitude: e[0].car_songchedi_longitude,
callout: {
content: "送达地：" + e[0].car_songchedi_name + "\n" + "信息：" + e[0].carId + "-" + e[0].carColor,
color: "#ffffff",
fontSize: "12",
borderRadius: "8",
bgColor: "#336699",
padding: "6",
boxShadow: "",
display: "ALWAYS"
}
};
that.setData({
markers: fmmt,
polyline: [{
points: JSON.parse(e[0].songChePathLin),
arrowLine: true,
color: '#FF0000DD',
width: 8
}],
distance: e[0].songChe_distance,
duration: e[0].songChe_duration
});
//console.log("ss1")
//console.log(fmmt)
} else {
//console.log(positionType)
fmmt[3] = {
id: e[0]._id + positionType + 3,
latitude: e[0].car_quchedi_latitude,
longitude: e[0].car_quchedi_longitude,
callout: {
content: "取车地：" + e[0].car_songchedi_name + "\n" + "信息：" + e[0].carId + "-" + e[0].carColor,
color: "#ffffff",
fontSize: "12",
borderRadius: "8",
bgColor: "#336699",
padding: "6",
boxShadow: "",
display: "ALWAYS"
}
};
that.setData({
markers: fmmt,
polyline: [{
points: JSON.parse(e[0].quChePathLin),
arrowLine: true,
color: '#FF0000DD',
width: 8
}],
distance: e[0].quChe_distance,
duration: e[0].quChe_duration
});
}
})
},
});
}
//判断字符是否为空的方法
function isEmpty(obj) {
if (typeof obj == "undefined" || obj == null || obj == "") {
return true;
} else {
return false;
}
}@import "/asset/icon_my.wxss";
@import "/pages/xiche/icon.wxss";
.icon:active{
background-color: rgb(248, 245, 245);
}
.page-section-gap{
box-sizing: border-box;
padding: 0;
}
.page-body-button {
margin-bottom: 20rpx;
}
.controls {
position: absolute;
right: 5px;
bottom: 5px;
background-color: rgba(69, 69, 70, 0.548);
width: 100rpx;
display: flex;
flex-direction: column;
border-radius: 10px;
}
.tabar{
position: absolute;
top: 0px;
right: 0px;
display: flex;
flex-direction: column;
background-color: rgba(69, 69, 70, 0.548);
color: #fff;
padding: 0px;
}
.tabar-item{
padding: 8px;
}
.tabar-item:active{
background-color: rgba(194, 194, 197, 0.548);
}
.map_sever_btn{
width: 40px;
height: 40px;
background-color: rgba(69, 69, 70, 0.548);
position: absolute;
bottom: 100rpx;
border-radius: 40px;
font-size: 30px;
line-height: 60px;
text-align: center;
color: rgba(255, 255, 255, 0.7);
padding: 10px 10px 10px 10px;
}
.map_sever_btn:active{
background-color: rgba(69, 69, 70, 0.733);
box-shadow: 0px 0px 10px 5px #888888;
}
.map_sever_btn_img{
width: 35px;
height: 35px;
margin: 0 auto;
margin-top: 3px;
}
.context{
position: absolute;
top: 0px;
left: 0px;
width: 500rpx;
/* height: 300px; */
background-color: rgba(69, 69, 70, 0.733);
overflow-y: scroll;
}
.context_title{
background-color: rgba(69, 69, 70, 0.733);
padding: 5px 0 5px 10px;
color: #fff;
/* display: flex;
flex-direction: row; */
}
.context_close{
float: right;
padding: 0px 10px;
margin-right: 20px;
font-size: 1.3em;
}
.context_list{
width: 500rpx;
height: 250px;
overflow-y: scroll;
}
.context_list_item{
padding: 8px;
display: flex;
flex-direction: column;
color: #fff;
font-size: 0.9em;
border: 1px solid #888888;
}
.context_list_item_item{
display: flex;
flex-direction: row;
margin: 5px 0;
}
.context_list_item_view{
padding: 0px 5px;
}
.icon_list{
width:50rpx;
height:50rpx;
background-size:70rpx;
font-size:70rpx;
margin: 0 auto;
/* margin:15rpx; */
color:rgba(255, 255, 255, 0.7);
}
.icon_list:active{
background-color: rgba(255, 255, 255, 0.863);
}
.carid{
width: 200rpx;
}
.uname{
width: 100rpx;
}
.context_list_item_border{
border-bottom:1px solid rgba(153, 153, 153, 0.658);
}
服务器端/PC管理端
》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》