316 lines
7.3 KiB
Vue
316 lines
7.3 KiB
Vue
<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> |