<template>
<view class="page">
<u-navbar title="计费规则" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
height='40'></u-navbar>
<view class="cont" style="margin-top: 50rpx;">
<view class="tit" style="margin-top: 50rpx;">
骑行服务费
</view>
<view class="card">
<view class="li">
<view class="left">
预约服务费
</view>
<view class="right">
{{areaInfo. appointmentServiceFee}}元/10分钟
</view>
</view>
<view class="li" style="margin-top: 38rpx;">
<view class="left">
押金
</view>
<view class="right">
{{areaInfo.vehicleManagementFee}}元
</view>
</view>
</view>
<view class="tips" style="margin-top: 10rpx;margin-left: 5rpx;">
<view class="yuan">
</view>
<view class="txt">
预约服务费是在使用预约服务时，预约时段内的收费标准
</view>
</view>
<view class="tips" style="margin-top: 10rpx;margin-left: 5rpx">
<view class="yuan"></view>
<view class="txt">
押金是在使用车辆前的收费标准，归还设备后可退
</view>
</view>
<view class="tit" style="margin-top: 50rpx;">
免费时长
</view>
<view class="card">
<view class="li">
<view class="left">
免费时长
</view>
<view class="right">
{{freeInfo.freeRideTime}}分钟
</view>
</view>
</view>
<view >
<view v-if="freeInfo.ridingRule==1">
<view class="tit" style="margin-top: 50rpx;">
{{freeInfo.name}}
</view>
<view class="card">
<view class="li">
<view class="left">
起步价
</view>
<view class="right">
{{freeInfo.ridingRuleJson.startingPrice}}元（含{{freeInfo.ridingRuleJson.startingTime}}<span
v-if="freeInfo.rentalUnit=='minutes'">分钟</span><span
v-if="freeInfo.rentalUnit=='hours'">小时</span><span
v-if="freeInfo.rentalUnit=='day'">天</span>）
</view>
</view>
<view class="li" style="margin-top: 38rpx;">
<view class="left">
时长费
</view>
<view class="right">
{{freeInfo.ridingRuleJson.timeoutPrice}}元/{{ freeInfo.ridingRuleJson.timeoutTime}}<span
v-if="freeInfo.rentalUnit=='minutes'">分钟</span><span
v-if="freeInfo.rentalUnit=='hours'">小时</span><span
v-if="freeInfo.rentalUnit=='day'">天</span>
</view>
</view>
</view>
</view>
<view v-if="freeInfo.ridingRule==2">
<view class="tit" style="margin-top: 50rpx;">
{{freeInfo.name}}
</view>
<view class="card">
<view class="li" style="margin-top: 10rpx;" v-for="(items,index) in freeInfo.ridingRuleJson.rule"
v-if="index!=freeInfo.ridingRuleJson.rule.length-1">
<view class="left" v-if="index==0">
区间计费
</view>
<view class="left" v-if="index!=0">
</view>
<view class="right">
{{items.start}}-{{items.end}}<span v-if="freeInfo.rentalUnit=='minutes'">分钟</span>
<span v-if="freeInfo.rentalUnit=='hours'">小时</span>
<span v-if="freeInfo.rentalUnit=='day'">天</span>,
每{{items.eachUnit}}<span v-if="freeInfo.rentalUnit=='minutes'">分钟</span>
<span v-if="freeInfo.rentalUnit=='hours'">小时</span>
<span v-if="freeInfo.rentalUnit=='day'">天</span>/{{items.fee}}元
</view>
</view>
<view class="li" style="margin-top: 10rpx;" v-for="(items,index) in freeInfo.ridingRuleJson.rule"
v-if="index==freeInfo.ridingRuleJson.rule.length-1">
<view class="left">
</view>
<view class="right">
>{{items.start}}<span v-if="freeInfo.rentalUnit=='minutes'">分钟</span>
<span v-if="freeInfo.rentalUnit=='hours'">小时</span>
<span v-if="freeInfo.rentalUnit=='day'">天</span>,
每{{items.eachUnit}}<span v-if="freeInfo.rentalUnit=='minutes'">分钟</span>
<span v-if="freeInfo.rentalUnit=='hours'">小时</span>
<span v-if="freeInfo.rentalUnit=='day'">天</span>/{{items.fee}}元
</view>
</view>
</view>
<view class="tips">
<view class="yuan">
</view>
<view class="txt">
区间计费是在使用车辆时时，不同时段内的收费标准
</view>
</view>
</view>
</view>
<view class="tit" style="margin-top: 50rpx;">
违规停车管理费
</view>
<view class="card">
<view class="li">
<view class="left">
调度费（非停车点）
</view>
<view class="right">
{{areaInfo. dispatchFee}}元
</view>
</view>
<view class="tip" style="width: 440rpx;">
车辆停止运营区内非还车点（P点）需缴纳 的费用
</view>
<view class="li" style="margin-top: 38rpx;">
<view class="left">
管理费费
</view>
<view class="right">
{{areaInfo.vehicleManagementFee}}元
</view>
</view>
<view class="tip">
车辆停至运营区外需缴纳的费用
</view>
</view>
<view class="tips">
<view class="yuan">
</view>
<view class="txt">
调度费（非还车点）、调度费（运营区域外）不重复叠加 收取
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: "#fff",
},
areaInfo:{},
freeInfo:{}
}
},
computed: {
userId() {
return this.$store.getters.userId;
},
},
onLoad(options) {
try {
if (options.item) {
this.freeInfo = JSON.parse(decodeURIComponent(options.item));
console.log( this.freeInfo,' this.freeInfo');
}
} catch (error) {
console.error('Error parsing item:', error);
}
},
onShow() {
this.getarea()
},
methods: {
getarea() {
let id = uni.getStorageSync('areaId');
this.$u.get("/app/area/"+id).then((res) => {
if (res.code == 200) {
this.areaInfo=res.data
// this.getlist()
} else {
uni.showToast({
title:res.msg,
icon: 'none',
duration: 2000
});
}
});
},
}
}
</script>
<style lang="scss" >
page{
background-color: #fff;
}
.page{
width: 750rpx;
// display: flex;
// justify-content: center;
.cont{
margin: 0 58rpx;
padding-bottom: 100rpx;
.tit{
margin-left: 32rpx;
font-weight: 700;
font-size: 36rpx;
color: #3D3D3D;
}
.card{
margin-top: 26rpx;
padding: 40rpx 30rpx;
width: 634rpx;
// height: 232rpx;
background: #F3F3F3;
border-radius: 24rpx 24rpx 24rpx 24rpx;
.li{
display: flex;
justify-content: space-between;
align-items: center;
.left{
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
line-height: 38rpx;
}
.right{
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
line-height: 38rpx;
}
}
.tip{
font-weight: 400;
font-size: 24rpx;
color: #808080;
}
}
.tips{
display: flex;
// flex-wrap: nowrap;
// align-items: center;
font-weight: 400;
font-size: 24rpx;
color: #808080;
.yuan{
// display: inline;
margin-top: 10rpx;
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background-color:#808080 ;
margin-right: 10rpx;
}
.txt{
font-weight: 400;
font-size: 24rpx;
color: #808080;
}
}
}
}
</style>