骑行端支付界面
This commit is contained in:
小小
parent
eb69eb582d
commit
cabe086516
@ -6,63 +6,77 @@
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divRow">
|
||||
<div class="lbTitle">剩余电量：</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divRow">
|
||||
<div class="lbTitle">可骑行距离：</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>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
<div @click="$emit('close')">关闭</div>
|
||||
<div class="divBtn" @click="$emit('close')">关闭</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const props=defineProps(["bikecode"]);
|
||||
const methods=defineEmits(["close"])
|
||||
const color=ref("#61D145");
|
||||
const data=ref({
|
||||
bikeCode:props.bikecode,
|
||||
zt:1,
|
||||
dl:"86%",
|
||||
jl:"50km"
|
||||
import {
|
||||
ref,onMounted
|
||||
} from 'vue';
|
||||
import {
|
||||
showModelMessage
|
||||
} from "@/utils/tools.js";
|
||||
const props = defineProps(["bikecode"]);
|
||||
const methods = defineEmits(["close"])
|
||||
const color = ref("#61D145");
|
||||
const data = ref({
|
||||
bikeCode: props.bikecode,
|
||||
zt: 1,
|
||||
dl: "86%",
|
||||
jl: "50km"
|
||||
})
|
||||
|
||||
onMounted(()=>{
|
||||
showModelMessage("该功能暂未实现！")
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.divRow{
|
||||
.divRow {
|
||||
font-size: 12px;
|
||||
color: #000;
|
||||
line-height: 25px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.lbTitle{
|
||||
|
||||
.lbTitle {
|
||||
text-align: right;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.lbImg{
|
||||
|
||||
.lbImg {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -1,8 +1,114 @@
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
@ -2,7 +2,7 @@
|
||||
<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" @markertap="openBikeInfo" />
|
||||
<div v-if="!showBikeInfo" class="divMapTools" style="left: 10px;">
|
||||
<div v-if="showTools" class="divMapTools" style="left: 10px;">
|
||||
<div>
|
||||
<image class="divImg" :src='imgPath+"static/userui/home/localtion.png"' @click="refresh" />
|
||||
</div>
|
||||
@ -10,7 +10,7 @@
|
||||
<image class="divImg" :src='imgPath+"static/userui/home/fault.png"' @click="reportFault" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!showBikeInfo" class="divMapTools" style="right: 10px;">
|
||||
<div v-if="showTools" class="divMapTools" style="right: 10px;">
|
||||
<div>
|
||||
<image class="divImg" :src='imgPath+"static/userui/home/packing.png"' @click="getSite" />
|
||||
</div>
|
||||
@ -18,7 +18,7 @@
|
||||
<image class="divImg" :src='imgPath+"static/userui/home/mine.png"' @click="getMine" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="hasOrder" class="divMapOrder" @click="showOrderInfo">
|
||||
<div v-if="hasOrder" class="divMapOrder" @click="openOrderPay">
|
||||
<div>
|
||||
<image style="width: 15px;height: 15px;margin-left: 15px;margin-right: 10px;"
|
||||
: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;">
|
||||
<bike-info bikecode="123456" @close="closeBikeInfo"/>
|
||||
</div>
|
||||
<div v-if="showOrderPay" style="position: absolute;z-index: 2000;bottom: 0;width: 100vw;">
|
||||
<bike-pay :orderid="orderData.orderId"/>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
@ -141,7 +144,8 @@
|
||||
const circles = ref([]); //圆
|
||||
|
||||
let oMap = null;
|
||||
|
||||
|
||||
const showTools=ref(true);
|
||||
const oUser = uni.getStorageSync("wechat_user");
|
||||
const showMess = ref(uni.getStorageSync("kbike-mess"));
|
||||
const hasOrder = ref(false); //是否有订单
|
||||
@ -161,6 +165,7 @@
|
||||
};
|
||||
let orderTimer = null;
|
||||
const orderState = ref(0);
|
||||
const showOrderPay=ref(false);
|
||||
|
||||
|
||||
//车辆
|
||||
@ -178,12 +183,12 @@
|
||||
longitude
|
||||
} = res;
|
||||
location.value = {
|
||||
longitude: 103.975457,
|
||||
latitude: 30.633199
|
||||
latitude,
|
||||
longitude
|
||||
};
|
||||
const params = {
|
||||
longitude: 103.975457,
|
||||
latitude: 30.633199
|
||||
latitude,
|
||||
longitude
|
||||
};
|
||||
callOrdereApi("userOrders/bikeList", params, "post").then(res => {
|
||||
console.log("11111111111111111", "userOrders/bikeList", res);
|
||||
@ -212,7 +217,6 @@
|
||||
true);
|
||||
})
|
||||
markers.value = arrData;
|
||||
|
||||
})
|
||||
|
||||
},
|
||||
@ -298,8 +302,9 @@
|
||||
}
|
||||
}
|
||||
//显示订单
|
||||
function showOrderInfo() {
|
||||
showOrder.value = true;
|
||||
function openOrderPay() {
|
||||
showTools.value=false;
|
||||
showOrderPay.value=true;
|
||||
}
|
||||
|
||||
//获取订单
|
||||
@ -339,6 +344,7 @@
|
||||
if (status == 2) {
|
||||
completeRiding();
|
||||
hasOrder.value = true;
|
||||
getTracking();
|
||||
return;
|
||||
} else if (status != 0) {
|
||||
completeRiding();
|
||||
@ -346,7 +352,6 @@
|
||||
}
|
||||
showOrder.value = true;
|
||||
if (!orderTimer) {
|
||||
console.log("5555555555555555555555555555555");
|
||||
orderTimer = setInterval(getTracking, 10000);
|
||||
}
|
||||
})
|
||||
@ -362,8 +367,7 @@
|
||||
} = orderData;
|
||||
const params = {
|
||||
ebikeCode: bikeCode,
|
||||
//startTime: createdAt
|
||||
startTime: '2025-04-02 09:00:00'
|
||||
startTime: createdAt
|
||||
}
|
||||
callOperateApi("ebikeTracking/query", params, "post").then(res => {
|
||||
const {
|
||||
@ -468,19 +472,26 @@
|
||||
}
|
||||
|
||||
//查看车辆信息
|
||||
function openBikeInfo() {
|
||||
function openBikeInfo(e) {
|
||||
showModelMessage("该功能暂未实现！");
|
||||
if(!oUser){
|
||||
tologin();
|
||||
}
|
||||
console.log("33333333333333333",e);
|
||||
showBikeInfo.value = true;
|
||||
showTools.value=false;
|
||||
}
|
||||
|
||||
//关闭车辆信息
|
||||
function closeBikeInfo(){
|
||||
showBikeInfo.value =false;
|
||||
showTools.value=true;
|
||||
}
|
||||
|
||||
getLoalcationData();
|
||||
|
||||
onMounted(() => {
|
||||
console.log("7777777777777777777777",oUser)
|
||||
const instance = getCurrentInstance();
|
||||
oMap = uni.createMapContext("mapRef", {
|
||||
this: instance.proxy
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 4868066 */
|
||||
src: url('iconfont.ttf?t=1744624163365') format('truetype');
|
||||
src: url('iconfont.ttf?t=1744696432017') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@ -11,6 +11,10 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-ebikeweixin:before {
|
||||
content: "\e608";
|
||||
}
|
||||
|
||||
.icon-ebikeditu2:before {
|
||||
content: "\e620";
|
||||
}
|
||||
|
||||
Binary file not shown.
Loading…
x
Reference in New Issue
Block a user