492 lines
11 KiB
Vue
492 lines
11 KiB
Vue
<template>
|
||
<map id="mapRef" ref="mapRef" style="width: 100%;height: 100vh;" show-location :longitude="location.longitude"
|
||
:latitude="location.latitude" :markers="markers" :scale="scale" :polygons="polygons" :polyline="polylines"
|
||
:circles="circles" />
|
||
<div class="divMapTools" style="left: 10px;">
|
||
<div>
|
||
<image class="divImg" src="/static/userui/home/localtion.png" @click="refresh" />
|
||
</div>
|
||
<div>
|
||
<image class="divImg" src="/static/userui/home/fault.png" @click="reportFault" />
|
||
</div>
|
||
</div>
|
||
<div class="divMapTools" style="right: 10px;">
|
||
<div>
|
||
<image class="divImg" src="/static/userui/home/packing.png" @click="getSite" />
|
||
</div>
|
||
<div>
|
||
<image class="divImg" src="/static/userui/home/mine.png" @click="getMine" />
|
||
</div>
|
||
</div>
|
||
<div v-if="hasOrder" class="divMapOrder" @click="showOrderInfo">
|
||
<div>
|
||
<image style="width: 15px;height: 15px;margin-left: 15px;margin-right: 10px;"
|
||
src="/static/userui/home/speaker.png" />
|
||
<label>有骑行订单未支付，请查看</label>
|
||
</div>
|
||
<div style="margin-right: 15px;">
|
||
<label>查看 <label>></label></label>
|
||
</div>
|
||
</div>
|
||
<div class="divMapBottom">
|
||
<div :class="(hasOrder?'divScanBtnDis ':'')+'divScanBtn'" @click="scanBike">
|
||
<uni-icons type="scan" color="white" :size="25"></uni-icons>
|
||
<label style="margin-left: 5px;">扫码用车</label>
|
||
</div>
|
||
</div>
|
||
<div v-if="showOrder" class="divOrder">
|
||
<div class="divOrderRow">
|
||
<div class="divOrderCell">
|
||
<image class="divOrderImg" src="/static/userui/home/money.png" />
|
||
<label>费用：</label>
|
||
<label>{{order.money}}元</label>
|
||
</div>
|
||
<div class="divOrderCell2">
|
||
<label>{{order.bikecode}}</label>
|
||
</div>
|
||
</div>
|
||
<div class="divOrderRow" style="font-size: 12px;">
|
||
<div class="divOrderCell">
|
||
<image class="divOrderImg" src="/static/userui/home/timer.png" />
|
||
<label>计时：</label>
|
||
<label style="color: #61D246;">{{order.time}}</label>
|
||
</div>
|
||
<div class="divOrderCell2">
|
||
<image class="divOrderImg" src="/static/userui/home/bike.png" />
|
||
<label>骑行：</label>
|
||
<label style="color: #61D246;">{{order.mileage}}</label>
|
||
</div>
|
||
</div>
|
||
<div class="divOderBtn">
|
||
<image v-if="orderState==0" style="width: 120px;height: 40px;" src="/static/userui/home/lock.png"
|
||
@click="lockRiding" />
|
||
<image v-if="orderState==1" style="width: 120px;height: 40px;" src="/static/userui/home/run.png"
|
||
@click="continueRiding" />
|
||
<image style="width: 160px;height: 40px;" src="/static/userui/home/end.png" @click="endRiding" />
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="showMess!=1" class="divMess">
|
||
<uni-card>
|
||
<uni-list border>
|
||
<uni-list-item thumb="/static/userui/home/map1.png" thumb-size="lg">
|
||
<template v-slot:body>
|
||
<div class="divMessTitle1">服务区域</div>
|
||
<div class="divMessTitle2">请在服务区域内骑行</div>
|
||
</template>
|
||
</uni-list-item>
|
||
<uni-list-item thumb="/static/userui/home/map2.png" thumb-size="lg">
|
||
<template v-slot:body>
|
||
<div class="divMessTitle1">换车区域</div>
|
||
<div class="divMessTitle2">还车时确保车辆已经到达还车区域或者距你最近的停车网点</div>
|
||
</template>
|
||
</uni-list-item>
|
||
<uni-list-item thumb="/static/userui/home/map3.png" thumb-size="lg">
|
||
<template v-slot:body>
|
||
<div class="divMessTitle1">停车网点</div>
|
||
<div class="divMessTitle2">还车至停车网点，时长费最多可半价优惠</div>
|
||
</template>
|
||
</uni-list-item>
|
||
</uni-list>
|
||
<div class="divMessWorn">
|
||
<div class="divMessWornTitle">
|
||
·注意事项
|
||
</div>
|
||
<div class="divMessWornContent">禁止私自加锁或破坏车辆</div>
|
||
<div class="divMessWornContent">未满12岁禁止骑行</div>
|
||
<div class="divMessWornContent">如车辆故障，及时通过app保修</div>
|
||
</div>
|
||
<div class="divMessBtn">
|
||
<label
|
||
style="color: #61D145;border: 1px solid #0000000f;padding: 5px 15px;border-radius: 5px;box-shadow: 2px 2px #0000000a;"
|
||
@click="clickMess">已知晓</label>
|
||
</div>
|
||
</uni-card>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
onMounted,
|
||
getCurrentInstance
|
||
} from 'vue';
|
||
import {
|
||
showModelMessage,
|
||
getUrlParams
|
||
} from "@/utils/tools.js";
|
||
import {
|
||
callOrdereApi,
|
||
callOperateApi
|
||
} from "@/utils/api.js";
|
||
|
||
import { findIndex } from 'lodash';
|
||
|
||
const location = ref({
|
||
longitude: "",
|
||
latitude: ""
|
||
});
|
||
const scale = ref(15);
|
||
const markers = ref([]);
|
||
const polygons = ref([]); //面
|
||
const polylines = ref([]); //线
|
||
const circles = ref([]); //圆
|
||
|
||
let oMap = null;
|
||
|
||
const oUser = uni.getStorageSync("wechat_user");
|
||
const showMess = ref(uni.getStorageSync("kbike-mess"));
|
||
const hasOrder = ref(false); //是否有订单
|
||
const showOrder = ref(false);
|
||
const order = ref({
|
||
bikecode: "123456",
|
||
money: "2.5",
|
||
time: "22.58min",
|
||
mileage: "5.6km"
|
||
});
|
||
//订单信息
|
||
let orderData = {
|
||
bikeCode: null,
|
||
status: null,
|
||
createdAt: null,
|
||
orderId: null
|
||
};
|
||
let orderTimer = null;
|
||
const orderState = ref(0);
|
||
|
||
|
||
//车辆
|
||
let arrBikeData = [];
|
||
|
||
//加载数据
|
||
function getLoalcationData () {
|
||
uni.getLocation({
|
||
type: 'gcj02',
|
||
geocode: true,
|
||
success(res) {
|
||
const {
|
||
latitude,
|
||
longitude
|
||
} = res;
|
||
location.value = {
|
||
longitude:103.975457,latitude:30.633199
|
||
};
|
||
const params={longitude:103.975457,latitude:30.633199};
|
||
callOrdereApi("userOrders/bikeList",params,"post").then(res=>{
|
||
console.log("11111111111111111","userOrders/bikeList",res);
|
||
const{code,data,message}=res;
|
||
if(code!=200){
|
||
showModelMessage(message);
|
||
return;
|
||
}
|
||
arrBikeData=data||[];
|
||
const arrData=markers.value||[];
|
||
debugger;
|
||
arrBikeData.map((item) => {
|
||
const{longitude,latitude}=item;
|
||
let index=findIndex(arrData,{longitude,latitude});
|
||
index==index==-1?arrData.length:index;
|
||
arrData[index]=addMarker(index, item[1], item[0], "mapbike.png",true);
|
||
})
|
||
markers.value =arrData ;
|
||
console.log("555555555555555555555555555",arrData)
|
||
|
||
})
|
||
|
||
},
|
||
fail(res) {
|
||
|
||
}
|
||
});
|
||
}
|
||
|
||
function clickMess () {
|
||
uni.setStorageSync("kbike-mess", 1);
|
||
showMess.value = 1;
|
||
}
|
||
|
||
//刷新
|
||
function refresh () {
|
||
getLoalcationData();
|
||
}
|
||
|
||
//故障上报
|
||
function reportFault () {
|
||
if (!oUser) {
|
||
tologin();
|
||
return;
|
||
}
|
||
showModelMessage("该功能暂未实现！");
|
||
}
|
||
|
||
//站点
|
||
function getSite () {
|
||
showModelMessage("该功能暂未实现！");
|
||
}
|
||
|
||
//个人中心
|
||
function getMine () {
|
||
if (!oUser) {
|
||
tologin();
|
||
return;
|
||
}
|
||
showModelMessage("该功能暂未实现！");
|
||
}
|
||
|
||
//扫描
|
||
function scanBike () {
|
||
if (!oUser) {
|
||
tologin();
|
||
return;
|
||
}
|
||
const {
|
||
userId
|
||
} = oUser;
|
||
uni.navigateTo({
|
||
url:"/pages/user/scan/scancode?type=ride"
|
||
})
|
||
/*
|
||
uni.scanCode({
|
||
onlyFromCamera: true, //只能扫码
|
||
scanType: ["qrCode"],
|
||
success: function(res) {
|
||
const {
|
||
result
|
||
} = res;
|
||
if (!result || result.indexOf("number") == -1) {
|
||
showModelMessage("无效的车辆二维码");
|
||
return
|
||
}
|
||
const options = getUrlParams(result);
|
||
console.log("11111111111111111111","scanBike",options);
|
||
const bikeId = options["number"];
|
||
addRide(bikeId)
|
||
}
|
||
}) */
|
||
}
|
||
|
||
/* //订单
|
||
function addRide(bikeId){
|
||
const {
|
||
userId
|
||
} = oUser;
|
||
const params = {
|
||
userId,
|
||
bikeId
|
||
}
|
||
callOrdereApi("userOrders/saveRide", params, "post").then(res => {
|
||
const {
|
||
code,
|
||
message
|
||
} = res;
|
||
console.log("11111111111111111111", "addRide", res);
|
||
if (code != 200) {
|
||
showModelMessage(message);
|
||
} else {
|
||
|
||
}
|
||
})
|
||
} */
|
||
|
||
//添加点
|
||
function addMarker (id, longitude, latitude, icon,joinCluster) {
|
||
return {
|
||
id: id,
|
||
latitude,
|
||
longitude,
|
||
width: 30,
|
||
height: 30,
|
||
zIndex: "100",
|
||
iconPath: "/static/userui/home/" + icon,
|
||
joinCluster: joinCluster?true:false
|
||
};
|
||
}
|
||
|
||
//添加线
|
||
function addLine(scolor, arrPoints) {
|
||
return {
|
||
points: arrPoints,
|
||
color: scolor,
|
||
width: 3
|
||
}
|
||
}
|
||
//显示订单
|
||
function showOrderInfo () {
|
||
showOrder.value = true;
|
||
}
|
||
|
||
//获取订单
|
||
function getOrder() {
|
||
const {
|
||
userId
|
||
} = oUser;
|
||
callOrdereApi("userOrders/checkHistoryOrder", {
|
||
userId
|
||
}, "get").then(res => {
|
||
console.log("111111111111111", "getOrder", res);
|
||
const {
|
||
code,
|
||
data,
|
||
message
|
||
} = res;
|
||
if (code != 200) {
|
||
showModelMessage(message);
|
||
return;
|
||
}
|
||
if (!data) { //订单完成
|
||
completeRiding();
|
||
return;
|
||
}
|
||
const {
|
||
bikeCode,
|
||
status,
|
||
createdAt,
|
||
orderId,
|
||
tempLock,
|
||
ridePoint,
|
||
returnPoint
|
||
} = data;
|
||
//0-进行中 1-已取消 2-待支付 3-已支付 4-退款中 5-已退款
|
||
orderState.value = tempLock ? 1 : 0;
|
||
orderData = data;
|
||
if(status==2){
|
||
completeRiding();
|
||
// hasOrder.value = true;
|
||
return;
|
||
}
|
||
else if(status!=0){
|
||
completeRiding();
|
||
return;
|
||
}
|
||
showOrder.value = true;
|
||
if (!orderTimer) {
|
||
console.log("5555555555555555555555555555555");
|
||
orderTimer = setInterval(getTracking, 10000);
|
||
}
|
||
})
|
||
}
|
||
|
||
//轨迹
|
||
function getTracking() {
|
||
const {
|
||
bikeCode,
|
||
createdAt,ridePoint, returnPoint
|
||
} = orderData;
|
||
const params = {
|
||
ebikeCode: bikeCode,
|
||
//startTime: createdAt
|
||
startTime: '2025-04-02 09:00:00'
|
||
}
|
||
callOperateApi("ebikeTracking/query", params, "post").then(res => {
|
||
const {
|
||
code,
|
||
data,
|
||
message
|
||
} = res;
|
||
if (code != 200) {
|
||
return;
|
||
}
|
||
const arrPoints =!data?[]: data.map(item => {
|
||
const {
|
||
lngGCJ02,
|
||
latGCJ02
|
||
} = item;
|
||
return {
|
||
longitude: lngGCJ02,
|
||
latitude: latGCJ02
|
||
}
|
||
})
|
||
const lng= startPoint[0];
|
||
const lat=startPoint[1];
|
||
const start={
|
||
longitude:lng,
|
||
latitude: lat
|
||
}
|
||
// const end={
|
||
// longitude: endPoint[0],
|
||
// latitude: endPoint[1]
|
||
// }
|
||
arrPoints.splice(0,0,start);
|
||
// arrPoints.push(end);
|
||
|
||
const arrMakers=markers.value||[];
|
||
const id=10000000;
|
||
let index=findIndex(arrMakers,{id});
|
||
index=index==-1?arrMakers.length:index;
|
||
arrMakers[index]=addMarker(id,lng,lat,"mapstart.png");
|
||
markers.value=arrMakers[index];
|
||
polylines.value=[addLine("#168DED",arrPoints)];
|
||
})
|
||
}
|
||
|
||
//完成骑行
|
||
function completeRiding(){
|
||
if(!orderTimer) return;
|
||
clearInterval(orderTimer);
|
||
orderTimer=null;
|
||
showOrder.value = false;
|
||
hasOrder.value = false;
|
||
orderState.value=0;
|
||
}
|
||
|
||
function tologin() {
|
||
uni.navigateTo({
|
||
url: "/pages/user/login/wx_login"
|
||
})
|
||
}
|
||
|
||
//临时锁车
|
||
function lockRiding() {
|
||
showModelMessage("该功能暂未实现！");
|
||
orderState.value = 1;
|
||
}
|
||
|
||
//结束用车
|
||
function endRiding() {
|
||
showModelMessage("该功能暂未实现！");
|
||
const {userId}=oUser;
|
||
const {
|
||
bikeCode
|
||
} = orderData;
|
||
const params={userId,bikeCode}
|
||
callOrdereApi("userOrders/doneRide",params,"post").then(res=>{
|
||
const{code,data,message}=res;
|
||
console.log("111111111111111111111111","endRiding",res);
|
||
if(code!=200){
|
||
showModelMessage(message);
|
||
return;
|
||
}
|
||
completeRiding();
|
||
})
|
||
|
||
}
|
||
|
||
//继续骑行 需要开锁
|
||
function continueRiding() {
|
||
showModelMessage("该功能暂未实现！");
|
||
orderState.value = 0;
|
||
//getOrder();
|
||
}
|
||
|
||
|
||
getLoalcationData();
|
||
|
||
onMounted(() => {
|
||
const instance = getCurrentInstance();
|
||
oMap = uni.createMapContext("mapRef", {
|
||
this: instance.proxy
|
||
});
|
||
const {
|
||
userId
|
||
} = oUser;
|
||
if (userId) {
|
||
getOrder();
|
||
}
|
||
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
@import url("home.css");
|
||
</style> |