chuangte/bike-ali
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
a3ad3f2798
bike-ali/page_user/ckmx.vue

301 lines
6.3 KiB
Vue
Raw Normal View History

11
2024-05-08 23:18:30 +08:00
<template>
<view class="page">
11
2024-07-11 18:01:54 +08:00
<u-navbar title="费用明细" :border-bottom="false" :background="bgc" title-color='#fff' title-size='36' height='45' back-icon-color='#fff'></u-navbar>
11
2024-05-31 17:54:23 +08:00
<view class="tit">
<view class="left">电单车</view>
<!-- <view class="right">查看计费规则 ></view> -->
</view>
<view class="data">
{{info.createTime}}
</view>
<view class="card">
<view class="card_tit">
账单信息
11
2024-05-08 23:18:30 +08:00
</view>
11
2024-05-31 17:54:23 +08:00
<view class="cont">
<view class="cont_box">
<view class="cont_left">
预约费
11
2024-05-08 23:18:30 +08:00
</view>
11
2024-05-31 17:54:23 +08:00
<view class="cont_right">
{{info.appointmentFee}}元
11
2024-05-08 23:18:30 +08:00
</view>
</view>
11
2024-05-31 17:54:23 +08:00
<view class="cont_box" style="margin-top: 20rpx;">
<view class="cont_left">
骑行费
11
2024-05-08 23:18:30 +08:00
</view>
11
2024-05-31 17:54:23 +08:00
<view class="cont_right">
{{info.ridingFee}}元
11
2024-05-08 23:18:30 +08:00
</view>
</view>
11
2024-05-31 17:54:23 +08:00
<view class="cont_box" style="margin-top: 20rpx;">
<view class="cont_left">
11
2024-06-27 18:04:37 +08:00
停车点外调度费
11
2024-05-08 23:18:30 +08:00
</view>
11
2024-05-31 17:54:23 +08:00
<view class="cont_right">
{{info.manageFee}}元
11
2024-05-08 23:18:30 +08:00
</view>
</view>
11
2024-05-31 17:54:23 +08:00
<view class="cont_box" style="margin-top: 20rpx;">
<view class="cont_left">
11
2024-06-27 18:04:37 +08:00
运营区外调度费
11
2024-05-08 23:18:30 +08:00
</view>
11
2024-05-31 17:54:23 +08:00
<view class="cont_right">
{{info.dispatchFee}}元
11
2024-05-08 23:18:30 +08:00
</view>
</view>
11
2024-05-31 17:54:23 +08:00
<view class="tip">
已骑行{{ rideDuration }}
11
2024-05-08 23:18:30 +08:00
</view>
11
2024-05-31 17:54:23 +08:00
</view>
<view class="price">
<view class="zhanwei"></view>
<view class="prices">
共计<span style="font-size:48rpx ;">{{info.totalFee}}</span>元
</view>
</view>
</view>
<view class="card" v-if="false">
<view class="card_tit">
账单信息
</view>
<view class="cont">
<view class="cont_box">
<view class="cont_left">
起步价（15分钟）
11
2024-05-08 23:18:30 +08:00
</view>
11
2024-05-31 17:54:23 +08:00
<view class="cont_right">
11
2024-05-08 23:18:30 +08:00
2.00元
</view>
</view>
11
2024-05-31 17:54:23 +08:00
<view class="tip">
已骑行30分9秒
</view>
</view>
<view class="price">
<view class="zhanwei"></view>
<view class="prices">
实付 <span style="font-size:48rpx ;">4.00</span>元
</view>
</view>
<view class="price" style="margin-top: 0;">
<view class="zhanwei"></view>
<view class="showmore">
查看支付方式
<view class="iconfont icon-xiangxia1"></view>
</view>
</view>
<view class="info_cont">
<view class="info_left">
微信支付
</view>
<view class="info_right">
2.00元
</view>
</view>
<view class="info_cont">
<view class="info_left">
11
2024-05-08 23:18:30 +08:00
支付时间
</view>
11
2024-05-31 17:54:23 +08:00
<view class="info_right">
2023-12-31 19:23:59
</view>
</view>
<view class="info_cont">
<view class="info_left">
11
2024-05-08 23:18:30 +08:00
订单号
11
2024-05-31 17:54:23 +08:00
</view>
<view class="info_right">
3915479812278489
11
2024-05-08 23:18:30 +08:00
</view>
</view>
11
2024-05-31 17:54:23 +08:00
</view>
11
2024-05-08 23:18:30 +08:00
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: "",
},
11
2024-05-31 17:54:23 +08:00
id: 0,
info: {},
rideDuration: '' // 新增属性用于存储骑行时间
11
2024-05-08 23:18:30 +08:00
}
},
11
2024-05-31 17:54:23 +08:00
onLoad(e) {
11
2024-06-07 18:08:55 +08:00
console.log(e,';eeeeeeeeeeeeeeeeee');
11
2024-05-31 17:54:23 +08:00
this.id = e.orderId
if(this.id){
this.orderInfo()
11
2024-05-08 23:18:30 +08:00
}
11
2024-05-31 17:54:23 +08:00
},
methods: {
orderInfo() {
this.$u.get("/appVerify/order/" + this.id).then((res) => {
if (res.code == 200) {
this.info = res.data
this.calculateRideDuration(); // 计算骑行时间
}
});
},
calculateRideDuration() {
const createTime = new Date(this.info.createTime);
const returnTime = new Date(this.info.returnTime);
const duration = (returnTime - createTime) / 1000; // 时间差，单位秒
const hours = Math.floor(duration / 3600);
const minutes = Math.floor((duration % 3600) / 60);
const seconds = Math.floor(duration % 60);
if (hours > 0) {
this.rideDuration = `${hours}小时${minutes}分${seconds}秒`;
} else {
this.rideDuration = `${minutes}分${seconds}秒`;
11
2024-05-08 23:18:30 +08:00
}
}
}
}
11
2024-05-31 17:54:23 +08:00
</script>
111
2024-06-03 18:06:08 +08:00
<style lang="scss" >
page{
background-color: #F7FAFE;
}
.page{
// width: 750rpx;
width: 750rpx;
// height: 530rpx;
11
2024-07-11 18:01:54 +08:00
background: linear-gradient( 180deg, #64B6A7 0%, rgba(255,255,255,0) 100%), #FFFFFF;
111
2024-06-03 18:06:08 +08:00
border-radius: 0rpx 0rpx 0rpx 0rpx;
.tit{
margin-left: 86rpx;
margin-right: 86rpx;
margin-top: 30rpx;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
.left{
font-weight: 700;
font-size: 40rpx;
color: #3D3D3D;
}
.right{
font-weight: 400;
font-size: 24rpx;
color: #3D3D3D;
}
}
.data{
margin-left: 86rpx;
font-weight: 400;
font-size: 24rpx;
color: #808080;
}
.card{
padding:34rpx 44rpx ;
margin: 68rpx auto;
width: 672rpx;
// height: 458rpx;
background: #FFFFFF;
box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
border-radius: 32rpx 32rpx 32rpx 32rpx;
.card_tit{
width: 112rpx;
height: 38rpx;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
11
2024-07-11 18:01:54 +08:00
background: linear-gradient( 0deg, #A7E492 0.1%, rgba(255,255,255,0) 40%), #FFFFFF;
111
2024-06-03 18:06:08 +08:00
}
.cont{
padding: 32rpx 28rpx;
margin-top: 26rpx;
width: 586rpx;
// height: 228rpx;
background: #F3F3F3;
border-radius: 26rpx 26rpx 26rpx 26rpx;
.cont_box{
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
.cont_left{
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
}
.cont_right{
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
}
}
.tip{
margin-top: 32rpx;
font-weight: 400;
font-size: 24rpx;
color: #808080;
}
}
.price{
margin-top: 28rpx;
display: flex;
flex-wrap: nowrap;
.prices{
margin-left: auto;
font-weight: 400;
font-size: 24rpx;
color: #3D3D3D;
span{
margin-left: 2rpx;
margin-right: 2rpx;
}
}
.showmore{
margin-left: auto;
display: flex;
flex-wrap: nowrap;
align-items: center;
font-weight: 400;
font-size: 20rpx;
color: #3D3D3D;
.icon-xiangshang1{
font-size: 20rpx;
color: #3D3D3D;
}
.icon-xiangxia1{
font-size: 20rpx;
color: #3D3D3D;
}
}
}
.info_cont{
margin-top: 12rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
.cont_left{
font-weight: 400;
font-size: 24rpx;
color: #3D3D3D;
}
.cont_right{
font-weight: 400;
font-size: 24rpx;
color: #3D3D3D;
}
}
}
}
</style>
Reference in New Issue Copy Permalink