<template>
<view class="page">
<u-navbar title="收费方式" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
title-size='36' height='48' id="navbar">
</u-navbar>
<view class="list">
<view class="tishi" style="margin-top: 0;">
押金收费
</view>
<view class="wz">
注：订单提前结束剩余消费时长、金额不返还
</view>
<view class="" v-for="(item,index) in tclist" :key="index" @click="btnedit(item,1,index)">
<view class="item_list" v-if="item.mode == 1" :id="yajinindex == index ? 'active' : ''">
<view class="shoufei">
<view class="shang">
<view class="">
{{item.explain == null ? '--' : item.explain}}
</view>
</view>
<view class="price">
{{item.price == null ? '--' : item.price}}元/小时，最低消费{{item.minHours == null ? '--' : item.minHours}}小时，押金金额{{item.deposit == null ? '--' : item.deposit}}元
</view>
</view>
<view class="shuom">
(订单结束{{item.refundDuration == 0 ? '立即' : item.refundDuration + '分钟后'}}退还押金)
</view>
</view>
</view>
<view class="" style="border-bottom: 1px solid #ccc;padding-bottom: 30rpx;box-sizing: border-box;"></view>
<view class="tishi">
套餐收费
</view>
<view class="wz">
注：订单提前结束剩余消费时长、金额不返还
</view>
<view class="item_list" v-for="(item,index) in modelist" :key="index" @click="btnedit(item,2,index)" :class="{ 'active': isSelected(item.ruleId) }">
<view class="shoufei">
<view class="shang">
<view class="">{{item.explain == null ? '--' : item.explain}}</view>
</view>
<view class="shichang">
<view class="stop">
<view class="">套餐时长(时)</view>
<view class="">套餐价格(元)</view>
</view>
<view class="stop" style="background-color: #F9F9F9;">
<view class="">{{item.hours}}</view>
<view class="">{{item.price}}</view>
</view>
</view>
</view>
</view>
</view>
<view class="anniu">
<view class="tougang" style="margin-right: 30rpx;" @click="btnshop">
新建模版
</view>
<view class="tougang" @click="btnqd">
确定选择
</view>
</view>
<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: "#fff",
},
list:[
{
value: '1',
label: '单价押金收费'
},{
value: '2',
label: '套餐方式收费'
}],
show:false,
tclist:[],
modelist:[],
yajinindex:-1,
selectedIndices:[],
ruleIdsone:[],
nameone:[],
}
},
onLoad() {
},
onShow() {
this.tclist = []
this.modelist = []
this.yajinindex = -1
this.selectedIndices = []
this.ruleIdsone = []
this.getlist()
},
methods: {
// 点击选择套餐
btnedit(item,type,index){
this.nameone = []
this.ruleIdsone = []
if(type == 1){
this.yajinindex = index
this.nameone.push(item.explain)
this.selectedIndices = []
this.ruleIdsone.push(item.ruleId)
}else{
this.yajinindex = -1
this.ruleIdsone = ''
const indexExists = this.selectedIndices.includes(item.ruleId)
if (indexExists) {
this.selectedIndices = this.selectedIndices.filter(i => i !== item.ruleId)
} else {
this.selectedIndices.push(item.ruleId)
}
}
},
isSelected(ruleId) {
return this.selectedIndices.includes(ruleId)
},
// 点击确定选择套餐
btnqd(){
this.selectedIndices.forEach(val =>{
this.modelist.forEach(item => {
if(val == item.ruleId){
this.nameone.push(item.explain)
}
})
})
if(this.ruleIdsone.length > 0){
uni.setStorageSync('namelist',this.nameone)
uni.setStorageSync('ruleIdlist',this.ruleIdsone)
setTimeout(()=>{
uni.navigateBack()
},1)
}else{
uni.setStorageSync('namelist',this.nameone)
uni.setStorageSync('ruleIdlist',this.selectedIndices)
setTimeout(()=>{
uni.navigateBack()
},1)
}
},
// 请求套餐列表
getlist(){
this.$u.get(`app/rule/list`).then(res => {
if (res.code == 200) {
this.tclist = res.data
res.data.forEach(item =>{
if(item.mode == 2){
this.modelist.push(item)
}
})
}
})
},
// 点击新建套餐
btnshop(){
this.show = true
},
// 确定新建收费模版
confirm(e){
if(e[0].value == 1){
uni.navigateTo({
url:'/page_shanghu/editsheshi?type=' + 1
})
}else{
uni.navigateTo({
url:'/page_shanghu/editsheshi?type=' + 2
})
}
},
}
}
</script>
<style lang="scss">
/deep/ .u-iconfont,
/deep/ .u-title{
padding-bottom: 20rpx;
box-sizing: border-box;
}
.active{
border: 1px solid #48893B !important;
background-color: #e7f7e4 !important;
}
#active{
border: 1px solid #48893B !important;
background-color: #e7f7e4 !important;
}
page {
background: #F6F6F6;
}
.shuom{
font-size: 24rpx;
color: #3D3D3D;
margin-top: 20rpx;
padding-left: 30rpx;
box-sizing: border-box;
}
.tishi{
font-size: 32rpx;
color: #3D3D3D;
font-weight: 600;
width: 680rpx;
margin: auto;
margin-top: 20rpx;
}
.wz{
font-size: 24rpx;
color: red;
margin-top: 24rpx;
width: 100%;
padding: 0 30rpx;
box-sizing: border-box;
}
.anniu{
width: 100%;
height: 152rpx;
background: #FFFFFF;
box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.3);
border-radius: 0rpx 0rpx 0rpx 0rpx;
display: flex;
padding: 24rpx 36rpx;
box-sizing: border-box;
justify-content: space-between;
text-align: center;
position: fixed;
left: 0;
bottom: 0;
.tougang{
width: 680rpx;
margin: auto;
height: 104rpx;
background: #48893B;
font-size: 36rpx;
color: #FFFFFF;
line-height: 104rpx;
border-radius: 20rpx;
}
}
.list{
width: 100%;
height: 80vh;
padding-bottom: 80rpx;
box-sizing: border-box;
overflow: scroll;
margin-top: 28rpx;
.item_list{
width: 680rpx;
max-height: 1600rpx;
margin: auto;
margin-top: 28rpx;
background: #FFFFFF;
border: 4rpx solid #fff;
border-radius: 24rpx;
padding-bottom: 26rpx;
box-sizing: border-box;
border: 1px solid #fff;
.shoufei{
margin-top: 30rpx;
.shichang{
margin-top: 34rpx;
.stop{
display: flex;
width: 618rpx;
margin: auto;
height: 76rpx;
line-height: 76rpx;
background: #F0F0F0;
view{
width: 50%;
text-align: center;
font-size: 28rpx;
color: #3D3D3D;
}
}
}
.price{
font-size: 28rpx;
color: #3D3D3D;
margin-top: 22rpx;
padding-left: 30rpx;
box-sizing: border-box;
}
.shang{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
view{
padding-left: 30rpx;
box-sizing: border-box;
font-size: 32rpx;
color: #3D3D3D;
font-weight: 600;
display: flex;
align-items: center;
image{
width: 14rpx;
height: 42rpx;
margin-top: 0;
margin-right: 10rpx;
}
}
}
}
}
}
</style>