206 lines
6.6 KiB
Vue
206 lines
6.6 KiB
Vue
<template>
|
||
<view class="uni-container">
|
||
<u-navbar :autoBack="true" :placeholder="true" bgColor="#fff">
|
||
<view slot='center' style="font-size: 36rpx; font-weight: bold;">
|
||
入住条件
|
||
</view>
|
||
</u-navbar>
|
||
<scroll-view scroll-y class="scroll">
|
||
<view class="form-box">
|
||
<view class="form-item">
|
||
<view class="label">间数</view>
|
||
<u-number-box v-model="detData.room" :min="1" :max="10" integer :disabledInput="true" @change="roomChange"></u-number-box>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="label">成人数</view>
|
||
<u-number-box v-model="detData.adult" :min="adultMin" :max="adultMax" integer :disabledInput="true" @change="adultChange"></u-number-box>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="label">儿童数</view>
|
||
<u-number-box v-model="detData.children" :min="0" :max="childrenMax" integer :disabledInput="true" @change="childrenChange"></u-number-box>
|
||
</view>
|
||
</view>
|
||
<view class="tips">选择儿童年龄，我们为您精准筛选可入住房型</view>
|
||
<view class="form-box">
|
||
<view class="form-item" v-for="(item, index) in childrenList" :key="index">
|
||
<view class="label">儿童{{index + 1}}</view>
|
||
<view class="value" @click="ageDetail(index)">
|
||
<view class="age">{{item}}</view>
|
||
<u-icon name="arrow-right" color="rgba(0, 0, 0, 0.45)" size="28rpx"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="footer">
|
||
<view class="btn" @click="save">确定</view>
|
||
</view>
|
||
<u-popup :show="showPopupAge" :round="10" mode="bottom">
|
||
<view class="age_con">
|
||
<view class="head">
|
||
<view class="title">儿童年龄</view>
|
||
</view>
|
||
<view class="age_box">
|
||
<view :class="['age', isAge == item ? 'activeAge' : '']" v-for="(item, index) in ageList" :key="index" @click="changeAge(item)">{{item}}</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import _config from '../../common/http/config.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
detData: {
|
||
room: 1,
|
||
adult: 2,
|
||
children: 0,
|
||
},
|
||
adultMin: 1,
|
||
adultMax: 8,
|
||
childrenMax: 3,
|
||
childrenList: [],
|
||
ageList: ['<1岁', '1岁', '2岁', '3岁', '4岁', '5岁', '6岁', '7岁', '8岁', '9岁', '10岁', '11岁', '12岁', '13岁', '14岁', '15岁', '16岁', '17岁'],
|
||
showPopupAge: false,
|
||
isAge: '<1岁',
|
||
detAgeIndex: null
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
if (uni.getStorageSync('hotel_room')) {
|
||
this.detData = uni.getStorageSync('hotel_room');
|
||
}
|
||
if (uni.getStorageSync('hotel_children')) {
|
||
this.childrenList = uni.getStorageSync('hotel_children');
|
||
}
|
||
this.adultMin = this.detData.room;
|
||
this.adultMax = this.detData.room * 8;
|
||
this.childrenMax = this.detData.room * 3;
|
||
},
|
||
methods: {
|
||
roomChange(e) {
|
||
this.detData.room = e.value;
|
||
this.adultMin = this.detData.room;
|
||
this.adultMax = this.detData.room * 8;
|
||
this.childrenMax = this.detData.room * 3;
|
||
if (this.detData.adult < this.detData.room) {
|
||
this.detData.adult = this.detData.room;
|
||
}
|
||
if (this.detData.adult > this.detData.room * 8) {
|
||
this.detData.adult = this.detData.room * 8;
|
||
}
|
||
if (this.detData.children > this.detData.room * 3) {
|
||
this.detData.children = this.detData.room * 3;
|
||
this.childrenList = this.childrenList.slice(0, this.detData.children);
|
||
}
|
||
},
|
||
adultChange(e) {
|
||
this.detData.adult = e.value;
|
||
},
|
||
childrenChange(e) {
|
||
this.detData.children = e.value;
|
||
if (this.childrenList.length > this.detData.children) {
|
||
this.childrenList = this.childrenList.slice(0, this.detData.children);
|
||
}
|
||
if (this.childrenList.length < this.detData.children) {
|
||
let num = this.detData.children - this.childrenList.length;
|
||
for (var i = 0; i < num; i ++) {
|
||
this.childrenList.push('<1岁')
|
||
};
|
||
}
|
||
},
|
||
ageDetail(i) {
|
||
this.isAge = this.childrenList[i];
|
||
this.detAgeIndex = i;
|
||
this.showPopupAge = true;
|
||
},
|
||
changeAge(i) {
|
||
this.isAge = i;
|
||
this.childrenList[this.detAgeIndex] = i;
|
||
this.showPopupAge = false;
|
||
},
|
||
save() {
|
||
uni.setStorageSync('hotel_room', this.detData);
|
||
uni.setStorageSync('hotel_children', this.childrenList);
|
||
uni.navigateBack();
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page{ background: #F6F6F6; }
|
||
.uni-container {
|
||
width: 100%;
|
||
padding-bottom: 48rpx;
|
||
min-height: 100vh;
|
||
box-sizing: border-box;
|
||
.scroll {padding-bottom: 120rpx;}
|
||
.form-box {
|
||
background: #FFFFFF;
|
||
padding: 0 24rpx;
|
||
margin: 24rpx 24rpx 0;
|
||
.form-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 96rpx;
|
||
border-bottom: 1rpx solid #ECEAEA;
|
||
&:last-child {
|
||
border: none;
|
||
}
|
||
.label {
|
||
font-size: 28rpx;
|
||
color: rgba(0,0,0,0.65);
|
||
}
|
||
.value {
|
||
display: flex; align-items: center;
|
||
.age {font-size: 28rpx; color: rgba(0,0,0,0.85); margin-right: 6rpx;}
|
||
}
|
||
/deep/.u-number-box {
|
||
.u-number-box__minus, .u-number-box__plus {
|
||
width: 48rpx !important; height: 48rpx !important; border-radius: 4rpx !important; border: 1rpx solid #03AE80 !important; background: rgba(71,175,195,0.1) !important;
|
||
.u-icon__icon {color: #03AE80 !important; font-size: 22rpx !important;}
|
||
}
|
||
.u-number-box__minus--disabled {
|
||
border: 1rpx solid rgba(0,0,0,0.25) !important; background: #FFFFFF !important;
|
||
.u-icon__icon {color: rgba(0,0,0,0.45) !important;}
|
||
}
|
||
.u-number-box__input {background: #FFFFFF !important; font-size: 28rpx !important; color: #333333 !important;}
|
||
}
|
||
}
|
||
}
|
||
.tips {margin: 24rpx 24rpx 0; font-size: 28rpx; color: rgba(0,0,0,0.65);}
|
||
.footer {
|
||
position: fixed; left: 0; bottom: 0; width: 100%; padding: 13rpx 0; box-sizing: border-box; background-color: #FFFFFF;
|
||
.btn {
|
||
margin: 0 auto;
|
||
width: 654rpx;
|
||
height: 90rpx;
|
||
background: #03AE80;
|
||
border-radius: 49rpx;
|
||
line-height: 90rpx;
|
||
text-align: center;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
.age_con {
|
||
padding: 32rpx 32rpx 0;
|
||
.head {
|
||
margin-bottom: 44rpx;
|
||
.title { font-weight: 500; font-size: 34rpx; color: rgba(0,0,0,0.85); }
|
||
.text { margin-top: 8rpx; font-size: 28rpx; color: rgba(0,0,0,0.25); }
|
||
}
|
||
.age_box {
|
||
display: flex; align-items: center; flex-wrap: wrap;
|
||
.age {
|
||
width: 120rpx; height: 64rpx; background: #F6F7F9; border-radius: 4rpx; line-height: 64rpx; text-align: center; margin: 0 21rpx 16rpx 0; font-size: 26rpx; color: rgba(0,0,0,0.65);
|
||
&:nth-child(5n) { margin-right: 0; }
|
||
}
|
||
.activeAge { background: rgba(71,175,195,0.1); border: 1rpx solid #03AE80; color: #03AE80; }
|
||
}
|
||
}
|
||
}
|
||
</style> |