<template>
<view class="page">
<u-navbar title="模板管理" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
height='45'></u-navbar>
<view class="modelCard" v-for="(item,index) in list" :key="index">
<view class="tit">
{{item.name}}
</view>
<view class="line" style="margin-bottom: 18rpx;"></view>
<view class="info">
<!-- <view class="img">
<image :src="item.picture" mode=""></image>
</view> -->
<view class="lis">
<!-- <view class="info_li">
车型简介：<span>{{item.description}}</span>
</view> -->
<view class="info_li">
说明：<span>{{item.instructions}}</span>
</view>
<view>
<view v-if="item.ridingRule==1">
<view class="card" style="width: 100%;">
<view class="li info_li" style="display: flex;flex-wrap: nowrap;">
<view class="left">
起步价：
</view>
<view class="right">
{{item.ridingRuleJson.startingPrice}}元（含{{item.ridingRuleJson.startingTime}}<span
v-if="item.rentalUnit=='minutes'">分钟</span><span
v-if="item.rentalUnit=='hours'">小时</span><span
v-if="item.rentalUnit=='day'">天</span>）
</view>
</view>
<view class="li info_li" style="display: flex;flex-wrap: nowrap;">
<view class="left">
时长费：
</view>
<view class="right">
{{item.ridingRuleJson.timeoutPrice}}元/{{ item.ridingRuleJson.timeoutTime}}<span
v-if="item.rentalUnit=='minutes'">分钟</span><span
v-if="item.rentalUnit=='hours'">小时</span><span
v-if="item.rentalUnit=='day'">天</span>
</view>
</view>
</view>
</view>
<view v-if="item.ridingRule==2">
<view class="tit" style="margin-top: 50rpx;">
{{item.name}}
</view>
<view class="card">
<view class="li" style="margin-top: 10rpx;"
v-for="(items,indexs) in item.ridingRuleJson.rule"
v-if="indexs!=item.ridingRuleJson.rule.length-1">
<view class="left" v-if="indexs==0">
区间计费
</view>
<view class="left" v-if="indexs!=0">
</view>
<view class="right">
{{items.start}}-{{items.end}}<span
v-if="item.rentalUnit=='minutes'">分钟</span>
<span v-if="item.rentalUnit=='hours'">小时</span>
<span v-if="item.rentalUnit=='day'">天</span>,
每{{items.eachUnit}}<span v-if="item.rentalUnit=='minutes'">分钟</span>
<span v-if="item.rentalUnit=='hours'">小时</span>
<span v-if="item.rentalUnit=='day'">天</span>/{{items.fee}}元
</view>
</view>
<view class="li" style="margin-top: 10rpx;"
v-for="(items,indexs) in item.ridingRuleJson.rule"
v-if="indexs==item.ridingRuleJson.rule.length-1">
<view class="left">
</view>
<view class="right">
>{{items.start}}<span v-if="item.rentalUnit=='minutes'">分钟</span>
<span v-if="item.rentalUnit=='hours'">小时</span>
<span v-if="item.rentalUnit=='day'">天</span>,
每{{items.eachUnit}}<span v-if="item.rentalUnit=='minutes'">分钟</span>
<span v-if="item.rentalUnit=='hours'">小时</span>
<span v-if="item.rentalUnit=='day'">天</span>/{{items.fee}}元
</view>
</view>
</view>
<view class="tips">
<view class="yuan">
</view>
<view class="txt">
区间计费是在使用车辆时时，不同时段内的收费标准
</view>
</view>
</view>
</view>
<!-- <view class="info_li">
运营区外调度费：<span>{{item.dispatchFee}}KM</span>
</view>
<view class="info_li">
停车点外调度费：<span>{{item.vehicleManagementFee}}KM</span>
</view>
-->
</view>
</view>
<!-- <view class="txt_li">
<view class="li">
所属门店：<span>云行租车</span>
</view>
<view class="li">
满电续航：<span>50.00km</span>
</view>
</view> -->
<view class="line" style="margin-top: 26rpx;"></view>
<view class="btn_li">
<view class="btn1" @click="del(item)">
删除
</view>
<view class="btn2" @click="todetail(item)">
编辑
</view>
</view>
</view>
<view class="btn" @click="addmodel()">
新增模板
</view>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: "#fff",
},
list: [],
areaId: '',
deptInfo:{}
}
},
onShow() {
if (uni.getStorageSync('adminAreaid')) {
this.areaId = uni.getStorageSync('adminAreaid')
this.getdept()
}
},
methods: {
getdept() {
let data ={
areaId:this.areaId
}
this.$u.get(`/appVerify/getDept?`,data).then((res) => {
if (res.code == 200) {
this.deptInfo=res.data
// this.list = res.data
this.getModelList()
} else {
// 处理接口返回错误的情况
}
}).catch(error => {
// 处理接口请求失败的情况
});
},
addmodel() {
uni.navigateTo({
url: '/pages_adminSet/ChargingDetail'
})
},
del(item) {
// 显示确认删除的提示框
uni.showModal({
title: '确认删除',
content: '确定删除该收费方式？',
success: (res) => {
if (res.confirm) {
// 如果用户点击了确认，执行删除操作
this.$u.delete(`/system/fee/` + item.ruleId).then((res) => {
if (res.code == 200) {
this.getModelList(); // 刷新列表
} else {
// 处理接口返回错误的情况
uni.showToast({
title: '删除失败，请稍后再试',
icon: 'none'
});
}
}).catch(error => {
// 处理接口请求失败的情况
uni.showToast({
title: '请求失败，请稍后再试',
icon: 'none'
});
});
} else if (res.cancel) {
// 用户取消删除操作
console.log('取消删除');
}
}
});
},
todetail(item) {
uni.navigateTo({
url: '/pages_adminSet/ChargingDetail?ruleId=' + item.ruleId
})
},
getModelList() {
let data = {
deptId: this.deptInfo.deptId
}
this.$u.get(`/app/fee/list?`, data).then((res) => {
if (res.code == 200) {
// this.list = res.data
this.list = res.data.map(item => {
try {
item.ridingRuleJson = JSON.parse(item.ridingRuleJson);
} catch (e) {
console.error('Invalid JSON in ridingRuleJson:', item
.ridingRuleJson);
}
return item;
});
} else {
// 处理接口返回错误的情况
}
}).catch(error => {
// 处理接口请求失败的情况
});
},
}
}
</script>
<style lang="scss" scoped>
page {}
.page {
padding-bottom: 170rpx;
.modelCard {
margin-top: 22rpx;
width: 750rpx;
padding-bottom: 12rpx;
background: #FFFFFF;
border-radius: 0rpx 0rpx 0rpx 0rpx;
.info {
margin-left: 42rpx;
display: flex;
flex-wrap: nowrap;
// align-items: center;
align-items: stretch;
/* 让左右两边的高度一致 */
.img {
display: flex;
align-items: center;
justify-content: center;
background: #EFEFEF;
border-radius: 10rpx;
width: 218rpx;
min-height: 134rpx;
image {
width: 173.59rpx;
height: 133.22rpx;
}
}
.lis {
margin-left: 60rpx;
.info_li {
margin-top: 8rpx;
font-weight: 400;
font-size: 28rpx;
color: #808080;
span {
color: #808080;
}
}
}
}
.tit {
padding: 24rpx 32rpx;
font-weight: 600;
font-size: 32rpx;
color: #3D3D3D;
}
.line {
width: 100%;
height: 1rpx;
background: #D8D8D8;
}
.btn_li {
margin-top: 16rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
.btn1 {
display: flex;
align-items: center;
justify-content: center;
width: 50%;
height: 67rpx;
font-weight: 600;
font-size: 32rpx;
color: #FF1C1C;
border-right: 1rpx solid #FF1C1C;
}
.btn2 {
display: flex;
align-items: center;
justify-content: center;
width: 50%;
height: 67rpx;
font-weight: 600;
font-size: 32rpx;
color: #3D3D3D;
// border-right: 1rpx solid #FF1C1C ;
}
}
.txt_li {
margin-top: 8rpx;
width: 100%;
display: flex;
flex-wrap: nowrap;
.li {
width: 50%;
padding-left: 28rpx;
font-weight: 400;
font-size: 28rpx;
color: #808080;
span {
color: #808080;
}
}
}
}
.btn {
position: fixed;
left: 40rpx;
bottom: 48rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
width: 672rpx;
height: 100rpx;
background: #4C97E7;
border-radius: 10rpx 10rpx 10rpx 10rpx;
font-weight: 500;
font-size: 40rpx;
color: #FFFFFF;
}
}
</style>