315 lines
7.6 KiB
Vue
315 lines
7.6 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar title="计费规则" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
|
||
height='45'></u-navbar>
|
||
<view class="cont" style="margin-top: 50rpx;">
|
||
<view class="tit" style="margin-top: 50rpx;">
|
||
骑行服务费
|
||
</view>
|
||
<view class="card">
|
||
<view class="li" v-if="false">
|
||
<view class="left">
|
||
预约服务费
|
||
</view>
|
||
<view class="right">
|
||
{{areaInfo. appointmentServiceFee}}元/10分钟
|
||
</view>
|
||
</view>
|
||
|
||
<view class="li" >
|
||
<view class="left">
|
||
押金
|
||
</view>
|
||
<view class="right">
|
||
{{areaInfo.deposit}}元
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="tips" style="margin-top: 10rpx;margin-left: 5rpx;" v-if="false">
|
||
<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>
|