485 lines
12 KiB
Vue
485 lines
12 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">
|
||
<view class="">
|
||
{{item.name}}
|
||
</view>
|
||
<view class="">
|
||
<u-switch v-model="item.status == 0 ? true : false" @change="change(item)"></u-switch>
|
||
</view>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class="info">
|
||
<view class="lis">
|
||
<view class="info_li">
|
||
说明：<span>{{item.instructions == null ? '--' : item.instructions}}</span>
|
||
</view>
|
||
<view>
|
||
<!-- 普通计费 -->
|
||
<view v-if="item.ridingRule==1 && item.startRule" class="charging-card">
|
||
<view class="charging-item">
|
||
<text class="label">起步价：</text>
|
||
<text class="value">{{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>）</text>
|
||
</view>
|
||
<view class="charging-item">
|
||
<text class="label">时长费：</text>
|
||
<text class="value">{{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></text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 区间计费 -->
|
||
<view v-if="item.ridingRule==2 && item.intervalRule" class="interval-charging">
|
||
<view class="interval-header">
|
||
<view class="interval-subtitle">不同时段收费标准</view>
|
||
</view>
|
||
<view class="interval-card">
|
||
<view class="interval-item" v-for="(rule, ruleIndex) in item.intervalRule" :key="ruleIndex">
|
||
<view class="interval-range">
|
||
<view class="range-label">时间范围：</view>
|
||
<view class="range-value">
|
||
<template v-if="ruleIndex === item.intervalRule.length-1">
|
||
> {{rule.start || '0'}}
|
||
</template>
|
||
<template v-else>
|
||
{{rule.start || '0'}}-{{rule.end || '--'}}
|
||
</template>
|
||
<span class="unit" v-if="item.rentalUnit=='minutes'">分钟</span>
|
||
<span class="unit" v-if="item.rentalUnit=='hours'">小时</span>
|
||
<span class="unit" v-if="item.rentalUnit=='day'">天</span>
|
||
</view>
|
||
</view>
|
||
<view class="interval-price">
|
||
<view class="price-label">收费标准：</view>
|
||
<view class="price-value">
|
||
每{{rule.eachUnit || '--'}}<span class="unit" v-if="item.rentalUnit=='minutes'">分钟</span>
|
||
<span class="unit" v-if="item.rentalUnit=='hours'">小时</span>
|
||
<span class="unit" v-if="item.rentalUnit=='day'">天</span>
|
||
<span class="fee">/{{rule.fee || '--'}}元</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="interval-tips">
|
||
<view class="tips-icon">!</view>
|
||
<view class="tips-text">区间计费是在使用车辆时，不同时段内的收费标准</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 无数据提示 -->
|
||
<view v-if="!item.startRule && !item.intervalRule" class="no-data">
|
||
暂无计费规则数据
|
||
</view>
|
||
</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" ></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: {
|
||
// 停用按钮
|
||
change(item){
|
||
console.log(item);
|
||
let data = {
|
||
id:item.id,
|
||
status:item.status == 0 ? 1 : 0
|
||
}
|
||
this.$u.put(`/bst/suit`,data).then(res =>{
|
||
if(res.code == 200){
|
||
uni.showToast({
|
||
title: '操作成功',
|
||
icon: 'success',
|
||
duration:2000
|
||
})
|
||
this.getModelList()
|
||
}else{
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration:2000
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
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("/getInfo").then(res => {
|
||
if(res.code == 200){
|
||
this.$u.get(`/bst/suit/list?pageNum=1&pageSize=999&userId=${res.user.userId}`).then((res) => {
|
||
if (res.code == 200) {
|
||
this.list = res.rows.map(item => {
|
||
try {
|
||
// 处理普通计费规则
|
||
if (typeof item.startRule === 'string') {
|
||
item.startRule = JSON.parse(item.startRule);
|
||
}
|
||
if (!item.startRule) {
|
||
item.startRule = {};
|
||
}
|
||
|
||
// 处理区间计费规则
|
||
if (typeof item.intervalRule === 'string') {
|
||
item.intervalRule = JSON.parse(item.intervalRule);
|
||
}
|
||
if (!item.intervalRule) {
|
||
item.intervalRule = [];
|
||
}
|
||
|
||
return item;
|
||
} catch (e) {
|
||
console.error('Invalid JSON in rules:', e);
|
||
item.startRule = {};
|
||
item.intervalRule = [];
|
||
return item;
|
||
}
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration:2000
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background-color: #f8f9fa;
|
||
}
|
||
|
||
.page {
|
||
padding: 24rpx;
|
||
padding-bottom: 170rpx;
|
||
background-color: #f8f9fa;
|
||
|
||
.modelCard {
|
||
margin-bottom: 20rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.tit {
|
||
padding: 20rpx;
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
color: #1a1a1a;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.info {
|
||
padding: 20rpx;
|
||
|
||
.lis {
|
||
.info_li {
|
||
margin-bottom: 10rpx;
|
||
margin-top: 10rpx;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
line-height: 1.6;
|
||
|
||
span {
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.charging-card {
|
||
background: #f9fafb;
|
||
border-radius: 12rpx;
|
||
padding: 20rpx;
|
||
margin: 20rpx 0;
|
||
|
||
.charging-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 16rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.label {
|
||
width: 140rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.value {
|
||
flex: 1;
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
|
||
.interval-charging {
|
||
margin: 20rpx 0;
|
||
|
||
.interval-header {
|
||
margin-bottom: 20rpx;
|
||
|
||
.interval-title {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
font-weight: 600;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.interval-subtitle {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
.interval-card {
|
||
background: #f9fafb;
|
||
border-radius: 12rpx;
|
||
padding: 24rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||
|
||
.interval-item {
|
||
padding: 20rpx 0;
|
||
border-bottom: 1rpx solid #eee;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
&:first-child {
|
||
padding-top: 0;
|
||
}
|
||
|
||
.interval-range, .interval-price {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 12rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.range-label, .price-label {
|
||
width: 140rpx;
|
||
color: #666;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.range-value, .price-value {
|
||
flex: 1;
|
||
color: #333;
|
||
font-size: 28rpx;
|
||
|
||
.unit {
|
||
color: #666;
|
||
margin: 0 4rpx;
|
||
}
|
||
|
||
.fee {
|
||
color: #ff4d4f;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.interval-tips {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 20rpx;
|
||
padding: 16rpx 20rpx;
|
||
background: #f0f7ff;
|
||
border-radius: 8rpx;
|
||
|
||
.tips-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
background: #4C97E7;
|
||
border-radius: 50%;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.tips-text {
|
||
flex: 1;
|
||
font-size: 24rpx;
|
||
color: #4C97E7;
|
||
line-height: 1.4;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn_li {
|
||
display: flex;
|
||
border-top: 1rpx solid #f0f0f0;
|
||
|
||
.btn1, .btn2 {
|
||
flex: 1;
|
||
height: 96rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
transition: all 0.2s ease;
|
||
|
||
&:active {
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
|
||
.btn1 {
|
||
color: #ff4d4f;
|
||
border-right: 1rpx solid #f0f0f0;
|
||
}
|
||
|
||
.btn2 {
|
||
color: #4C97E7;
|
||
}
|
||
}
|
||
}
|
||
|
||
.no-more {
|
||
padding: 20rpx 0;
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
text-align: center;
|
||
}
|
||
|
||
.btn {
|
||
position: fixed;
|
||
left: 50%;
|
||
bottom: 48rpx;
|
||
transform: translateX(-50%);
|
||
width: 90%;
|
||
height: 96rpx;
|
||
background: linear-gradient(90deg, #4C97E7, #6ab0ff);
|
||
border-radius: 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 36rpx;
|
||
font-weight: 500;
|
||
box-shadow: 0 8rpx 24rpx rgba(76, 151, 231, 0.3);
|
||
transition: all 0.2s ease;
|
||
|
||
&:active {
|
||
transform: translateX(-50%) scale(0.98);
|
||
}
|
||
}
|
||
}
|
||
|
||
.no-data {
|
||
text-align: center;
|
||
color: #999;
|
||
padding: 30rpx 0;
|
||
font-size: 28rpx;
|
||
}
|
||
</style> |