358 lines
8.3 KiB
Vue
358 lines
8.3 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="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.startRule.startingPrice}}元（含{{item.startRule.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.startRule.timeoutPrice}}元/{{ item.startRule.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.startRule.rule"
|
||
v-if="indexs!=item.startRule.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.startRule.rule"
|
||
v-if="indexs==item.startRule.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="" style="width: 100%;text-align: center;color: #ccc;margin-top: 30rpx;">
|
||
当前没有更多模版咯...
|
||
</view>
|
||
<view class="btn" @click="addmodel()">
|
||
新增模板
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "#fff",
|
||
},
|
||
list: [],
|
||
}
|
||
},
|
||
onShow() {
|
||
this.getModelList()
|
||
},
|
||
methods: {
|
||
addmodel() {
|
||
uni.navigateTo({
|
||
url: '/page_shanghu/gongzuotai/ChargingDetail'
|
||
})
|
||
},
|
||
del(item) {
|
||
// 显示确认删除的提示框
|
||
uni.showModal({
|
||
title: '确认删除',
|
||
content: '确定删除该收费方式？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// 如果用户点击了确认，执行删除操作
|
||
this.$u.delete(`/bst/suit/${item.id}`).then((res) => {
|
||
if (res.code == 200) {
|
||
this.getModelList(); // 刷新列表
|
||
} else {
|
||
// 处理接口返回错误的情况
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration:2000
|
||
});
|
||
}
|
||
})
|
||
} else if (res.cancel) {
|
||
// 用户取消删除操作
|
||
console.log('取消删除')
|
||
}
|
||
}
|
||
});
|
||
},
|
||
todetail(item) {
|
||
uni.navigateTo({
|
||
url: '/page_shanghu/gongzuotai/ChargingDetail?ruleId=' + item.id
|
||
})
|
||
},
|
||
getModelList() {
|
||
this.$u.get(`/bst/suit/list?pageNum=1&pageSize=999`).then((res) => {
|
||
if (res.code == 200) {
|
||
this.list = res.rows.map(item => {
|
||
try {
|
||
item.startRule = item.startRule
|
||
} catch (e) {
|
||
console.error('Invalid JSON in startRule:', item.startRule)
|
||
}
|
||
return item
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration:2000
|
||
})
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</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> |