attiya/ebike-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

骑行端支付界面

Browse Source
This commit is contained in:
小小 2025-04-15 14:56:05 +08:00
parent eb69eb582d
commit cabe086516
5 changed files with 173 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
ebike-maintenance/components/bike-info/bike-info.vue
View File

@ -6,63 +6,77 @@
</div> </div>
<div> <div>
<label>状态：</label> <label>状态：</label>
<label class="lbImg"><uni-icons custom-prefix="iconfont" type="icon-ebikexuanzhong" :color="color" size="16"/></label> <label class="lbImg"><uni-icons custom-prefix="iconfont" type="icon-ebikexuanzhong" :color="color"
size="16" /></label>
<label>正常</label> <label>正常</label>
</div> </div>
</div> </div>
<div class="divRow"> <div class="divRow">
<div class="lbTitle">剩余电量：</div> <div class="lbTitle">剩余电量：</div>
<div> <div>
<label class="lbImg"><uni-icons custom-prefix="iconfont" type="icon-ebikeelectricity-full" :color="color" size="16"/></label> <label class="lbImg"><uni-icons custom-prefix="iconfont" type="icon-ebikeelectricity-full"
:color="color" size="16" /></label>
<label>{{data.dl}}</label> <label>{{data.dl}}</label>
</div> </div>
</div> </div>
<div class="divRow"> <div class="divRow">
<div class="lbTitle">可骑行距离：</div> <div class="lbTitle">可骑行距离：</div>
<div> <div>
<label class="lbImg"><uni-icons custom-prefix="iconfont" type="icon-ebikeditu2" :color="color" size="16"/></label> <label class="lbImg"><uni-icons custom-prefix="iconfont" type="icon-ebikeditu2" :color="color"
size="16" /></label>
<label>{{data.jl}}</label> <label>{{data.jl}}</label>
</div> </div>
</div> </div>
<div style="margin-top: 30px;margin-bottom: 30px;"> <div style="margin-top: 30px;margin-bottom: 30px;">
<label style="margin-right: 15px;"><uni-icons custom-prefix="iconfont" type="icon-ebikejinggao" color="#FF7200" size="12"/></label> <label style="margin-right: 15px;"><uni-icons custom-prefix="iconfont" type="icon-ebikejinggao"
color="#FF7200" size="12" /></label>
<label style="font-size: 10px;">安全骑行，遵守交通规则</label> <label style="font-size: 10px;">安全骑行，遵守交通规则</label>
</div> </div>
<div> <div>
<div @click="$emit('close')">关闭</div> <div class="divBtn" @click="$emit('close')">关闭</div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue'; import {
const props=defineProps(["bikecode"]); ref,onMounted
const methods=defineEmits(["close"]) } from 'vue';
const color=ref("#61D145"); import {
const data=ref({ showModelMessage
bikeCode:props.bikecode, } from "@/utils/tools.js";
zt:1, const props = defineProps(["bikecode"]);
dl:"86%", const methods = defineEmits(["close"])
jl:"50km" const color = ref("#61D145");
const data = ref({
bikeCode: props.bikecode,
zt: 1,
dl: "86%",
jl: "50km"
}) })
onMounted(()=>{
showModelMessage("该功能暂未实现！")
})
</script> </script>
<style scoped> <style scoped>
.divRow{ .divRow {
font-size: 12px; font-size: 12px;
color: #000; color: #000;
line-height: 25px; line-height: 25px;
display: flex; display: flex;
} }
.lbTitle{ .lbTitle {
text-align: right; text-align: right;
width: 80px; width: 80px;
} }
.lbImg{ .lbImg {
margin-right: 5px; margin-right: 5px;
} }
</style> </style>

110
ebike-maintenance/components/bike-pay/bike-pay.vue
View File

@ -1,8 +1,114 @@
<template> <template>
<div style="padding: 15px;background-color: white;">
<div class="divPay">
<div class="divTitle">
<label>
<image class="divImg" :src='imgPath+"static/userui/home/money.png"' />
</label>
<label>待支付：</label>
<label>{{data.hj}}元</label>
</div>
<div class="divFont">
{{data.sj}}
</div>
<div class="divTitle2">
费用明细
</div>
<div class="divRow divFont">
<label>起步价</label>
<label>{{data.qbj}}元</label>
</div>
<div class="divRow divFont">
<label>时长费</label>
<label>{{data.scf}}元</label>
</div>
<div class="divHJ">
<label>合计：</label>
<label>{{data.hj}}元</label>
</div>
</div>
<div>
<div class="divBtn">
<label>
<uni-icons custom-prefix="iconfont" type="icon-ebikeweixin" color="white" size="25" />
</label>
支付
</div>
</div>
</div>
</template> </template>
<script> <script setup>
import {
ref,onMounted
} from 'vue';
import config from '@/utils/config';
import {
showModelMessage
} from "@/utils/tools.js";
const imgPath = config.imgPath;
const props = defineProps(["orderid"]);
const data = ref({
hj: "2.5",
sj: "2025-04-03 14:15:13",
qbj: "2.0",
scf: "0.5"
})
onMounted(()=>{
showModelMessage("该功能暂未实现！")
})
</script> </script>
<style> <style scoped>
.divPay {
width: 260px;
}
.divTitle {
line-height: 30px;
font-size: 14px;
color: #000;
font-weight: bold;
}
.divTitle2 {
font-size: 16px;
line-height: 35px;
}
.divImg {
width: 15px;
height: 12px;
margin-right: 5px;
}
.divFont {
color: #000;
font-size: 12px;
opacity: 0.7;
}
.divRow {
line-height: 20px;
display: flex;
justify-content: space-between;
}
.divHJ {
text-align: right;
font-size: 14px;
color: red;
font-weight: bold;
}
.divBtn {
text-align: center;
background: #61D145;
color: white;
line-height: 40px;
border-radius: 5px;
margin-top: 20px;
}
</style> </style>

39
ebike-maintenance/pages/user/home/home.vue
View File

@ -2,7 +2,7 @@
<map id="mapRef" ref="mapRef" style="width: 100%;height: 100vh;" show-location :longitude="location.longitude" <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" :latitude="location.latitude" :markers="markers" :scale="scale" :polygons="polygons" :polyline="polylines"
:circles="circles" @markertap="openBikeInfo" /> :circles="circles" @markertap="openBikeInfo" />
<div v-if="!showBikeInfo" class="divMapTools" style="left: 10px;"> <div v-if="showTools" class="divMapTools" style="left: 10px;">
<div> <div>
<image class="divImg" :src='imgPath+"static/userui/home/localtion.png"' @click="refresh" /> <image class="divImg" :src='imgPath+"static/userui/home/localtion.png"' @click="refresh" />
</div> </div>
@ -10,7 +10,7 @@
<image class="divImg" :src='imgPath+"static/userui/home/fault.png"' @click="reportFault" /> <image class="divImg" :src='imgPath+"static/userui/home/fault.png"' @click="reportFault" />
</div> </div>
</div> </div>
<div v-if="!showBikeInfo" class="divMapTools" style="right: 10px;"> <div v-if="showTools" class="divMapTools" style="right: 10px;">
<div> <div>
<image class="divImg" :src='imgPath+"static/userui/home/packing.png"' @click="getSite" /> <image class="divImg" :src='imgPath+"static/userui/home/packing.png"' @click="getSite" />
</div> </div>
@ -18,7 +18,7 @@
<image class="divImg" :src='imgPath+"static/userui/home/mine.png"' @click="getMine" /> <image class="divImg" :src='imgPath+"static/userui/home/mine.png"' @click="getMine" />
</div> </div>
</div> </div>
<div v-if="hasOrder" class="divMapOrder" @click="showOrderInfo"> <div v-if="hasOrder" class="divMapOrder" @click="openOrderPay">
<div> <div>
<image style="width: 15px;height: 15px;margin-left: 15px;margin-right: 10px;" <image style="width: 15px;height: 15px;margin-left: 15px;margin-right: 10px;"
:src='imgPath+"static/userui/home/speaker.png"' /> :src='imgPath+"static/userui/home/speaker.png"' />
@ -105,6 +105,9 @@
<div v-if="showBikeInfo" style="position: absolute;z-index: 2000;bottom: 0;width: 100vw;"> <div v-if="showBikeInfo" style="position: absolute;z-index: 2000;bottom: 0;width: 100vw;">
<bike-info bikecode="123456" @close="closeBikeInfo"/> <bike-info bikecode="123456" @close="closeBikeInfo"/>
</div> </div>
<div v-if="showOrderPay" style="position: absolute;z-index: 2000;bottom: 0;width: 100vw;">
<bike-pay :orderid="orderData.orderId"/>
</div>
</template> </template>
@ -142,6 +145,7 @@
let oMap = null; let oMap = null;
const showTools=ref(true);
const oUser = uni.getStorageSync("wechat_user"); const oUser = uni.getStorageSync("wechat_user");
const showMess = ref(uni.getStorageSync("kbike-mess")); const showMess = ref(uni.getStorageSync("kbike-mess"));
const hasOrder = ref(false); //是否有订单 const hasOrder = ref(false); //是否有订单
@ -161,6 +165,7 @@
}; };
let orderTimer = null; let orderTimer = null;
const orderState = ref(0); const orderState = ref(0);
const showOrderPay=ref(false);
//车辆 //车辆
@ -178,12 +183,12 @@
longitude longitude
} = res; } = res;
location.value = { location.value = {
longitude: 103.975457, latitude,
latitude: 30.633199 longitude
}; };
const params = { const params = {
longitude: 103.975457, latitude,
latitude: 30.633199 longitude
}; };
callOrdereApi("userOrders/bikeList", params, "post").then(res => { callOrdereApi("userOrders/bikeList", params, "post").then(res => {
console.log("11111111111111111", "userOrders/bikeList", res); console.log("11111111111111111", "userOrders/bikeList", res);
@ -212,7 +217,6 @@
true); true);
}) })
markers.value = arrData; markers.value = arrData;
}) })
}, },
@ -298,8 +302,9 @@
} }
} }
//显示订单 //显示订单
function showOrderInfo() { function openOrderPay() {
showOrder.value = true; showTools.value=false;
showOrderPay.value=true;
} }
//获取订单 //获取订单
@ -339,6 +344,7 @@
if (status == 2) { if (status == 2) {
completeRiding(); completeRiding();
hasOrder.value = true; hasOrder.value = true;
getTracking();
return; return;
} else if (status != 0) { } else if (status != 0) {
completeRiding(); completeRiding();
@ -346,7 +352,6 @@
} }
showOrder.value = true; showOrder.value = true;
if (!orderTimer) { if (!orderTimer) {
console.log("5555555555555555555555555555555");
orderTimer = setInterval(getTracking, 10000); orderTimer = setInterval(getTracking, 10000);
} }
}) })
@ -362,8 +367,7 @@
} = orderData; } = orderData;
const params = { const params = {
ebikeCode: bikeCode, ebikeCode: bikeCode,
//startTime: createdAt startTime: createdAt
startTime: '2025-04-02 09:00:00'
} }
callOperateApi("ebikeTracking/query", params, "post").then(res => { callOperateApi("ebikeTracking/query", params, "post").then(res => {
const { const {
@ -468,19 +472,26 @@
} }
//查看车辆信息 //查看车辆信息
function openBikeInfo() { function openBikeInfo(e) {
showModelMessage("该功能暂未实现！"); showModelMessage("该功能暂未实现！");
if(!oUser){
tologin();
}
console.log("33333333333333333",e);
showBikeInfo.value = true; showBikeInfo.value = true;
showTools.value=false;
} }
//关闭车辆信息 //关闭车辆信息
function closeBikeInfo(){ function closeBikeInfo(){
showBikeInfo.value =false; showBikeInfo.value =false;
showTools.value=true;
} }
getLoalcationData(); getLoalcationData();
onMounted(() => { onMounted(() => {
console.log("7777777777777777777777",oUser)
const instance = getCurrentInstance(); const instance = getCurrentInstance();
oMap = uni.createMapContext("mapRef", { oMap = uni.createMapContext("mapRef", {
this: instance.proxy this: instance.proxy

6
ebike-maintenance/static/iconfont.css
View File

@ -1,6 +1,6 @@
@font-face { @font-face {
font-family: "iconfont"; /* Project id 4868066 */ font-family: "iconfont"; /* Project id 4868066 */
src: url('iconfont.ttf?t=1744624163365') format('truetype'); src: url('iconfont.ttf?t=1744696432017') format('truetype');
} }
.iconfont { .iconfont {
@ -11,6 +11,10 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-ebikeweixin:before {
content: "\e608";
}
.icon-ebikeditu2:before { .icon-ebikeditu2:before {
content: "\e620"; content: "\e620";
} }

BIN
ebike-maintenance/static/iconfont.ttf
View File

Binary file not shown.