Commit 4c5be41b authored by 罗超's avatar 罗超

晚上列表搜索功能

parent b00a64d7
...@@ -8,9 +8,12 @@ ...@@ -8,9 +8,12 @@
<u-cell-group> <u-cell-group>
<u-cell-item @click="cellClick(item.value)" :arrow="false" :title="item.label" v-for="(item, index) in options" <u-cell-item @click="cellClick(item.value)" :arrow="false" :title="item.label" v-for="(item, index) in options"
:key="index" :title-style="{ :key="index" :title-style="{
color: value == item.value ? activeColor : inactiveColor color: value == item.value ? activeColor : inactiveColor,
fontWeight:value == item.value?'bold':'500',
fontSize:value == item.value?'28rpx':'26rpx',
}"> }">
<u-icon v-if="value == item.value" name="checkbox-mark" :color="activeColor" size="32"></u-icon> <!-- <u-icon v-if="value == item.value" name="checkbox-mark" :color="activeColor" size="32"></u-icon> -->
<u-icon slot="right-icon" v-if="value == item.value" size="32" color="#000" name="success"></u-icon>
</u-cell-item> </u-cell-item>
</u-cell-group> </u-cell-group>
</view> </view>
......
<template> <template>
<view class="u-dropdown"> <view class="u-dropdown" style="padding: 0 15px;">
<view class="u-dropdown__menu" :style="{ <view class="u-dropdown__menu" :style="{
height: $u.addUnit(height) height: $u.addUnit(height)
}" :class="{ }" :class="{
'u-border-bottom': borderBottom 'u-border-bottom': borderBottom
}"> }">
<view class="u-dropdown__menu__item" v-for="(item, index) in menuList" :key="index" @tap.stop="menuClick(index)"> <view class="u-dropdown__menu__item" v-for="(item, index) in menuList" :key="index" @tap.stop="menuClick(index)">
<view class="u-flex"> <view class="u-flex" style="width: 100%;flex-wrap: nowrap;">
<text class="u-dropdown__menu__item__text" :style="{ <text class="u-dropdown__menu__item__text" :style="{
color: item.disabled ? '#c0c4cc' : (index === current || highlightIndex == index) ? activeColor : inactiveColor, color: item.disabled ? '#c0c4cc' : (index === current || highlightIndex == index) ? activeColor : inactiveColor,
fontSize: $u.addUnit(titleSize) fontSize: (index === current || highlightIndex == index) ? '28rpx' : '26rpx',
fontWeight: (index === current || highlightIndex == index) ? 'bold' : '500'
}">{{item.title}}</text> }">{{item.title}}</text>
<view class="u-dropdown__menu__item__arrow" :class="{ <view class="u-dropdown__menu__item__arrow" :class="{
'u-dropdown__menu__item__arrow--rotate': index === current 'u-dropdown__menu__item__arrow--rotate': index === current
...@@ -250,9 +251,13 @@ ...@@ -250,9 +251,13 @@
@include vue-flex; @include vue-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
overflow: hidden;
&__text { &__text {
font-size: 28rpx; font-size: 26rpx;
color: $u-content-color; color: $u-content-color;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
&__arrow { &__arrow {
margin-left: 6rpx; margin-left: 6rpx;
......
...@@ -709,6 +709,8 @@ ...@@ -709,6 +709,8 @@
"root": "pages/hotel", "root": "pages/hotel",
"pages": [{ "pages": [{
"path": "list" "path": "list"
},{
"path": "components/time/index"
}] }]
} }
], ],
......
<template>
<view class="range-slider" :style="'width:' + width + 'rpx;height:' + height + 'rpx'">
<view class="range-bar" :style="'width:100%;height:' + barHeight + 'rpx'">
<view class="range-bar-bg" :style="'background-color:' + backgroundColor + ''"></view>
<view class="range-bar-progress" :style="'margin-left:' + progressBarLeft + 'rpx;width:' + progressBarWidth + 'rpx;background-color:' + activeColor + ''"></view>
</view>
<view
class="block"
:class="{ active: isMinActive }"
:style="'width:' + blockSize + 'rpx;height:' + blockSize + 'rpx;margin-left:' + minBlockLeft + 'rpx;'"
@touchstart="_onBlockTouchStart"
@touchmove.stop="_onBlockTouchMove"
@touchend="_onBlockTouchEnd"
:data-left="minBlockLeft"
data-tag="minBlock"
>
<slot name="minBlock"></slot>
</view>
<view
class="block"
:class="{ active: isMaxActive }"
:style="'width:' + blockSize + 'rpx;height:' + blockSize + 'rpx;margin-left:' + maxBlockLeft + 'rpx;'"
@touchstart="_onBlockTouchStart"
@touchmove.stop="_onBlockTouchMove"
@touchend="_onBlockTouchEnd"
:data-left="maxBlockLeft"
data-tag="maxBlock"
>
<slot name="maxBlock"></slot>
</view>
</view>
</template>
<script>
/**
* range-slider v1.0.6
*/
const _windowWidth = uni.getSystemInfoSync().windowWidth;
export default {
data() {
return {
isMinActive: false,
isMaxActive: false,
//#ifdef H5
MAX_LENGTH: 294,
maxBlockLeft: 300,
//#endif
// #ifndef H5
MAX_LENGTH: 700,
maxBlockLeft: 350,
// #endif
minBlockLeft: 0,
progressBarLeft: 0,
progressBarWidth: 350,
originalMinValue: 0,
originalMaxValue: 0
};
},
components: {},
props: {
//组件宽度
width: {
type: Number,
default: 750
},
//组件高度
height: {
type: Number,
default: 100
},
//滑块大小
blockSize: {
type: Number,
default: 50
},
//区间进度条高度
barHeight: {
type: Number,
default: 5
},
//背景条颜色
backgroundColor: {
type: String,
default: '#e9e9e9'
},
//已选择的颜色
activeColor: {
type: String,
default: '#1aad19'
},
//最小值
min: {
type: Number,
default: 0
},
//最大值
max: {
type: Number,
default: 100
},
//设置初始值
values: {
type: Array,
default: function() {
return [0, 100];
}
},
//步长值
step: {
type: Number,
default: 1
},
//live模式,是否动态更新
liveMode: {
type: Boolean,
default: true
}
},
created: function() {
//使用自定义组件编译模式时,支持生命周期为:created
this._refresh();
},
onLoad: function(option) {
//不使用自定义组件编译模式时,支持生命周期为:onload
this._refresh();
},
onUnload: function() {},
watch: {
//组件宽度
width: function(newVal, oldVal, changedPath) {
var that = this;
if (newVal != that.width) {
this._refresh();
}
},
//滑块大小
blockSize: function(newVal, oldVal, changedPath) {
var that = this;
if (newVal != that.blockSize) {
this._refresh();
}
},
//最小值
min: function(newVal, oldVal, changedPath) {
var that = this;
if (newVal != that.min) {
that._refresh();
}
},
//最大值
max: function(newVal, oldVal, changedPath) {
var that = this;
if (newVal != that.max) {
that._refresh();
}
},
//设置初始值
values: function(newVal, oldVal, changedPath) {
var that = this;
var values = that.values;
console.log('refresh', newVal, oldVal);
if (that._isValuesValid(newVal) && that._isValuesValid(values)) {
if (values[0] != oldVal[0] || values[1] != oldVal[1]) that._refresh();
}
}
},
methods: {
//补0
_pad: function(num, n) {
return Array(n - ('' + num).length + 1).join(0) + num;
},
_pxToRpx: function(px) {
return (750 * px) / _windowWidth;
},
_onBlockTouchStart: function(e) {
let tag = e.target.dataset.tag;
if (tag == 'minBlock' || tag == 'maxBlock') {
this.isMinActive = tag == 'minBlock';
this.isMaxActive = tag == 'maxBlock';
//兼容h5平台及某版本微信
if (e.hasOwnProperty('changedTouches')) {
this._blockDownX = e.changedTouches[0].pageX;
} else {
this._blockDownX = e.pageX;
}
//#ifdef H5
this._blockLeft = parseFloat(e.target.dataset.left);
//#endif
// #ifndef H5
this._blockLeft = e.target.dataset.left;
// #endif
this._curBlock = e.target.dataset.tag;
}
},
_onBlockTouchMove: function(e) {
let tag = e.target.dataset.tag;
if (tag == 'minBlock' || tag == 'maxBlock') {
var that = this;
var values = that._calculateValues(e);
that._refreshProgressBar(values[2], values[3]);
that._refreshBlock(values[2], values[3]);
//拖动时也触发事件
var eventDetail = {
minValue: this.formatNumber(values[0], this.step),
maxValue: this.formatNumber(values[1], this.step),
fromUser: true,
originalValue: {
minValue: values[0],
maxValue: values[1]
}
};
this.originalMinValue = values[0];
this.originalMaxValue = values[1];
var eventOption = {};
//
if (this.liveMode) that.$emit('rangechange', eventDetail, eventOption);
}
},
_onBlockTouchEnd: function(e) {
let tag = e.target.dataset.tag;
this.isMinActive = false;
this.isMaxActive = false;
if (tag == 'minBlock' || tag == 'maxBlock') {
var that = this;
var values = that._calculateValues(e.mp.changedTouches[0]);
that._refreshProgressBar(values[2], values[3]);
that._refreshBlock(values[2], values[3]);
var eventDetail = {
minValue: this.formatNumber(values[0], this.step),
maxValue: this.formatNumber(values[1], this.step),
fromUser: true,
originalValue: {
minValue: values[0],
maxValue: values[1]
}
};
this.originalMinValue = values[0];
this.originalMaxValue = values[1];
var eventOption = {};
that.$emit('rangechange', eventDetail, eventOption);
}
},
_isValuesValid: function(values) {
return values != null && values != undefined && values.length == 2;
},
/**
* 根据手势计算相关数据
*/
_calculateValues: function(e) {
var pageX = e.pageX;
//兼容h5平台
if (e.hasOwnProperty('changedTouches')) {
pageX = e.changedTouches[0].pageX;
}
var that = this;
var moveLength = pageX - that._blockDownX;
var left = that._blockLeft + that._pxToRpx(moveLength);
left = Math.max(0, left);
left = Math.min(left, that.MAX_LENGTH);
var minBlockLeft = that.minBlockLeft;
var maxBlockLeft = that.maxBlockLeft;
if (that._curBlock == 'minBlock') {
minBlockLeft = left;
} else {
maxBlockLeft = left;
}
var range = that.max - that.min;
var minLeft = Math.min(minBlockLeft, maxBlockLeft);
var maxLeft = Math.max(minBlockLeft, maxBlockLeft);
var minValue = (minLeft / that.MAX_LENGTH) * range + that.min;
var maxValue = (maxLeft / that.MAX_LENGTH) * range + that.min;
return [minValue, maxValue, minLeft, maxLeft];
},
/**
* 计算滑块坐标
*/
_calculateBlockLeft: function(minValue, maxValue) {
var that = this;
var blockSize = that.blockSize;
var range = that.max - that.min;
var minLeft = ((minValue - that.min) / range) * that.MAX_LENGTH;
var maxLeft = ((maxValue - that.min) / range) * that.MAX_LENGTH;
return [minLeft, maxLeft];
},
/**
* 刷新进度条视图
*/
_refreshProgressBar: function(minBlockLeft, maxBlockLeft) {
var that = this;
var blockSize = that.blockSize;
that.progressBarLeft = minBlockLeft + blockSize / 2;
that.progressBarWidth = Math.abs(maxBlockLeft - minBlockLeft);
},
/**
* 刷新滑块视图
*/
_refreshBlock: function(minBlockLeft, maxBlockLeft) {
var that = this;
that.minBlockLeft = minBlockLeft;
that.maxBlockLeft = maxBlockLeft;
},
/**
* 刷新整个视图
*/
_refresh: function() {
var that = this;
var MAX_LENGTH = that.width - that.blockSize;
that.MAX_LENGTH = MAX_LENGTH;
that.maxBlockLeft = MAX_LENGTH;
that.progressBarWidth = MAX_LENGTH;
var values = that.values;
if (this.originalMinValue && this.originalMinValue) {
values = [this.originalMinValue || values[0], this.originalMaxValue || values[1]];
}
if (that._isValuesValid(values)) {
values[0] = Math.max(that.min, values[0]);
values[0] = Math.min(values[0], that.max);
values[1] = Math.max(that.min, values[1]);
values[1] = Math.min(values[1], that.max);
var leftValues = that._calculateBlockLeft(values[0], values[1]);
that._refreshProgressBar(leftValues[0], leftValues[1]);
that._refreshBlock(leftValues[0], leftValues[1]);
}
},
formatNumber(num, step) {
//格式化数字,保留几位小数
let stepStr = '' + step;
let index = stepStr.indexOf('.');
let len = index > -1 ? stepStr.length - index - 1 : 0;
let offestNum = parseInt(1 + Array(('' + len).length + 1).join(0)) * 0.1;
let tmpNum = num * offestNum;
return ((parseInt(tmpNum / step + (step > 1 ? 1 : step) * 0.5) * step) / offestNum).toFixed(len);
}
}
};
</script>
<style>
.range-slider {
position: relative;
}
.range-bar {
position: absolute;
}
.range-bar {
position: absolute;
top: 50%;
transform: translate(0, -50%);
border-radius: 10000rpx;
}
.range-bar-bg {
position: absolute;
width: 100%;
height: 100%;
border-radius: 10000rpx;
}
.range-bar-progress {
position: absolute;
width: 100%;
height: 100%;
background-color: blueviolet;
}
.block {
position: absolute;
top: 50%;
transform: translate(0, -50%);
background: #fff;
border-radius: 50%;
box-shadow: 0rpx 0rpx 6rpx #ccc;
}
.block.active {
transform: translate(0, -50%) scale(1.5);
}
</style>
//节假日信息
const day=[
{
year:2022,
month:1,
festival:[
{name:'元旦',day:1},
{name:'除夕',day:31},
]
},
{
year:2022,
month:2,
festival:[
{name:'春节',day:1},
{name:'元宵',day:15},
{name:'情人节',day:14}
]
},
{
year:2022,
month:3,
festival:[
{name:'妇女节',day:8},
]
},
{
year:2022,
month:4,
festival:[
{name:'清明',day:4},
]
},
{
year:2022,
month:5,
festival:[
{name:'劳动节',day:1},
{name:'青年节',day:4},
{name:'母亲节',day:10},
]
},
{
year:2021,
month:6,
festival:[
{name:'儿童节',day:1},
{name:'父亲节',day:21},
{name:'端午',day:14},
]
},
{
year:2021,
month:7,
festival:[
{name:'建党节',day:1}
]
},
{
year:2021,
month:8,
festival:[
{name:'建军节',day:1},
{name:'七夕',day:14},
{name:'中元节',day:22},
]
},
{
year:2021,
month:9,
festival:[
{name:'教师节',day:10},
{name:'中秋',day:21}
]
},
{
year:2021,
month:10,
festival:[
{name:'国庆',day:1},
{name:'重阳',day:14}
]
},
{
year:2021,
month:11,
festival:[
{name:'感恩节',day:26}
]
},
{
year:2021,
month:12,
festival:[
{name:'平安夜',day:24},
{name:'圣诞节',day:25}
]
}
]
export default day
\ No newline at end of file
<template>
<view class="content">
<scroll-view :scroll-y="true" style="height: 100%;">
<view class="header">
<!-- <view class="bar"></view>
<view class="set text-gray">
<text @click="close" style="font-size:40upx;">返回</text>
<text @click="reset" style="font-size:35upx;color:#DDDDDD">清空</text>
</view> -->
<!-- <view class="in-and-out">
<view class="item" v-if="start.length > 0">
<view style="font-size:30upx;color:#C0C0C0">入住日期</view>
<view style="font-weight: bold;margin-top:10upx;font-size:36upx">{{ startDay }}</view>
<view style="font-size:24upx;margin-top:10upx">{{ startWeek }}</view>
</view>
<view class="item text" v-if="start.length == 0">
<view>入住日期</view>
</view>
<view class="item">
<view class="count-border" :class="day == 0 ? 'gray' : 'orange'">
<view class="count" style="font-size:26upx;line-height:26upx;">{{ day }}</view>
</view>
</view>
<view class="item text" v-if="end.length == 0">
<view>离店日期</view>
</view>
<view class="item" v-if="end.length > 0">
<view style="font-size:30upx;color:#C0C0C0">离店日期</view>
<view style="font-weight: bold;margin-top:10upx;font-size:36upx">{{ endDay }}</view>
<view style="font-size:24upx;margin-top:10upx">{{ endWeek }}</view>
</view>
</view> -->
<view style="font-size: 32rpx;color:#111;text-align: center;padding:30rpx 0;">
<text>选择日期</text>
</view>
<view class="week">
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
</view>
</view>
<view class="section">
<view v-for="(res, line) in resDate" class="item" :key="line">
<view class="year">{{ res.year }}{{ res.month }}</view>
<view class="day">
<view v-for="week in res.oneDayWeek" class="day-list"
:style="{ width: (dayWidth - 10) / 7 + 'px' }"></view>
<view @tap="selectDay(line, index,(line+1).toString()+index)" v-for="(item, index) in res.day"
:key="index" class="day-list" :class="[
line == start[0] && index == start[1] ? 'bg-orange select-style' : '',
(line >= start[0] && line <= end[0] && index > start[1] && index < end[1]) || (line >= start[0] && index > start[1] && line < end[0]) || (line <= end[0] && index < end[1] && line > start[0]) || (line < end[0] && line > start[0]) ? 'bg-higlt-orange' : '',
line == 0 && index + 1 < nowDay ? 'time-out' : '',
isNaN(item) ? 'is-festival' : '',
(isNaN(item) && line == start[0] && index == start[1]) || (isNaN(item) && line == end[0] && index == end[1]) ? 'not-festival' : '',
(priceStauts.length > 0 && priceStauts[line][index] <0 && start.length>0 && end.length>0) ||(priceStauts.length > 0 && priceStauts[line][index] <0 &&start.length==0 && end.length==0)?'not-sub' : '',
priceStauts.length > 0 && end.length==0 && start.length>0 && priceStauts[line][index]<0 && line+index*2!=lastNot[0]+lastNot[1]*2? 'not-sub' : '',
]" :style="{ width: (dayWidth - 10) / 7 + 'px',borderRadius:line == end[0] && index == end[1]?'0px 6px 6px 0px':'',backgroundColor:line == end[0] && index == end[1]?'#111':'',color:line == end[0] && index == end[1]?'#FFFFFF':''}">
<view style="padding-top:2px;padding-bottom:2px;">{{ item }}</view>
<view class="select-style" v-if="line == start[0] && index == start[1]">入住</view>
<view class="select-style" v-if="line == end[0] && index == end[1]">离店</view>
<view style="font-size:12px;padding-bottom: 3px;" v-if="priceStauts.length > 0">
<view v-if="priceStauts[line][index]>0">{{ priceStauts[line][index] }}</view>
<view v-if="priceStauts[line][index] <0">无房</view>
</view>
</view>
</view>
</view>
</view>
<view class="submit">
<button class="sub-btn" :disabled="!isSub" @click="submit">
<text v-if="isSub">确定</text>
<text v-if="!isSub">请选择入住日期</text>
</button>
</view>
</scroll-view>
</view>
</template>
<script>
//引入节假日的数据,也可以用后台返回去渲染
import json from './day.js';
export default {
computed: {
//房间是否能预订
isSub() {
if (this.priceStauts.length > 0) {
for (var i = this.start[0]; i <= this.end[0]; i++) {
if (i == this.start[0]) {
for (var j = this.start[1]; j < this.date[i].length; j++) {
if (this.priceStauts[i][j] == -1) return false
}
} else if (this.end[0] == this.start[0]) {
for (var j = this.start[1]; j < this.end[1]; j++) {
if (this.priceStauts[i][j] == -1) return false
}
} else if (i == this.end[0]) {
for (var j = 0; j < this.end[1]; j++) {
if (this.priceStauts[i][j] == -1) return false
}
} else {
for (var j = 0; j < this.priceStauts[i].length; j++) {
if (this.priceStauts[i][j] == -1) return false
}
}
}
}
return this.start.length == 2 && this.end.length == 2 ? true : false
},
//计算日历里的节假日
resDate() {
if (this.date.length == 0) return
for (var i = 0; i < this.date.length; i++) {
for (var j = 0; j < this.festival.length; j++) {
if (this.festival[j].year == this.date[i].year && this.festival[j].month == this.date[i].month) {
for (var k = 0; k < this.festival[j].festival.length; k++) {
if (this.date[i].day.indexOf(this.festival[j].festival[k].day) != -1) {
this.date[i].day[this.date[i].day.indexOf(this.festival[j].festival[k].day)] = this
.festival[j].festival[k].name;
}
}
}
}
}
return this.date;
}
},
data() {
return {
out: 0,
festival: json, //节假日
type: '-', //日期分隔符
date: [], //日期数组对象
dayWidth: 0, //日期的宽度
nowDay: 0, //当前时间的日
start: [], //入住时间
count: 6, //显示月的数量
startDay: '', //入住日期
startWeek: '', //入住时间的周几
end: [], //离开时间
endDay: '', //离开日期
endWeek: '', //离开时间的周几
day: 0, //多少晚
priceStauts: [], //价格状态
lastNot: [0, 10] //前置的无房操作
};
},
mounted () {
console.log("进入了....")
uni.getSystemInfo({
success: res => {
this.dayWidth = res.windowWidth;
}
});
this.setDate();
this.nowDay = new Date().getDate();
/*默认入住离店日期,今日入住明日离店,此处应在setDefaultDate函数内传入vuex里保存的日期进行默认操作
*不推荐使用本地缓存,下边只是使用缓存的示例
*/
uni.getStorage({
key: 'Time',
success: (res) => {
console.log(res)
if (res && res.data) {
var obj = JSON.parse(res.data)
this.start = this.setDefaultDate(obj.start);
this.end = this.setDefaultDate(obj.end);
}
},
fail: () => {
this.start = this.setDefaultDate(this.getDefaultDate(0));
this.end = this.setDefaultDate(this.getDefaultDate(1));
}
})
//如果需要日期的价格,-1为无房,其他价格代表正常
// if (option && option.request) {
// uni.request({
// url: 'http://api.tcdbp.com', //当需要日历价格的时候请求的后台接口地址
// method: 'GET',
// data: {
// count: this.count //获取几个月分的数据
// },
// success: res => {
// if (res.data.status != 1) {
// return uni.showToast({
// title: res.data.message,
// icon: 'none',
// mask: true
// });
// }
// this.priceStauts = res.data.data;
// },
// fail: () => {
// uni.showToast({
// title: '网络错误请稍后再试',
// icon: 'none',
// mask: true
// });
// }
// });
// }
},
watch: {
//离店日期
end(newVal) {
if (this.end.length != 0) {
//计算选择离店日期
this.endDay = this.setMonth(newVal[0]) + this.isFestival(newVal[0], newVal[1]) + '日';
this.endWeek = this.getWeek(this.date[newVal[0]].year + '/' + this.date[newVal[0]].month + '/' + this
.isFestival(newVal[0], newVal[1]));
//计算天数
var startDay = this.date[this.start[0]].year + '/' + this.date[this.start[0]].month + '/' + this
.isFestival(this.start[0], this.start[1]);
var endDay = this.date[newVal[0]].year + '/' + this.date[newVal[0]].month + '/' + this.isFestival(this
.end[0], this.end[1]);
this.day = this.getDay(startDay, endDay);
} else {
this.day = 0;
}
},
//入住日期
start(newVal) {
if (this.start.length > 0) {
this.startDay = this.setMonth(newVal[0]) + this.isFestival(newVal[0], newVal[1]) + '日';
this.startWeek = this.getWeek(this.date[newVal[0]].year + '/' + this.date[newVal[0]].month + '/' + this
.isFestival(
newVal[0], newVal[1]));
}
if (this.priceStauts.length > 0) {
console.log(this.lastNot)
for (var i = newVal[0]; i < this.priceStauts.length; i++) {
if (i == newVal[0]) {
for (var j = newVal[1]; j < this.priceStauts[i].length; j++) {
if (this.priceStauts[i][j] == -1) {
this.lastNot = [i, j]
console.log(this.lastNot)
return
}
}
} else {
for (var j = 0; j < this.priceStauts[i].length; j++) {
if (this.priceStauts[i][j] == -1) {
this.lastNot = [i, j];
console.log(this.lastNot)
return
}
}
}
}
//清空
this.lastNot = []
}
}
},
methods: {
//月份补零
setMonth(dateIndex) {
let month = this.date[dateIndex].month;
if (month < 10) {
month = '0' + month;
}
return month + '月';
},
//如果是节假日名称则返回选择的日期天数
isFestival(line, index, push = false) {
var date = this.date[line].day[index];
if (isNaN(date)) {
var newIndex = this.date[line].day.indexOf(date) + 1;
if (push) return newIndex;
return newIndex < 10 ? '0' + newIndex : newIndex;
} else {
if (push) return date;
return date < 10 ? '0' + date : date;
}
},
//获取今天明天的日期
getDefaultDate(AddDayCount) {
var dd = new Date();
dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期
var year = dd.getFullYear();
var mon = dd.getMonth() + 1; //获取当前月份的日期
var day = dd.getDate();
return year + '-' + mon + '-' + day;
},
//设置入住时间 如果没有传值则根据默认值设置
setDefaultDate(data) {
var arr = [0, parseInt(this.nowDay - 1)];
var start = data.indexOf('-') != -1 ? data.split('-') : data.split('/');
var year = new Date().getFullYear();
var month = new Date().getMonth() + 1;
for (var i = 0; i < this.date.length; i++) {
if (this.date[i].year == start[0] && this.date[i].month == start[1]) {
if (year == start[0] && month == start[1] && start[2] < this.nowDay) {
arr = [i, parseInt(this.nowDay - 1)];
} else {
arr = [i, parseInt(start[2] - 1)];
}
break;
}
}
return arr;
},
//清空
reset() {
this.start = [];
this.end = [];
this.day = 0;
},
//补零操作
setPull(day) {
if (day < 10) {
day = '0' + day;
}
return day
},
//计算天数
getDay(date1, date2) {
//获得天数
//date1:开始日期,date2结束日期
var a1 = Date.parse(new Date(date1));
var a2 = Date.parse(new Date(date2));
var day = parseInt((a2 - a1) / (1000 * 60 * 60 * 24)); //核心:时间戳相减,然后除以天数
return day;
},
//计算周几
getWeek(date) {
var weekDay = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var myDate = new Date(Date.parse(date));
return weekDay[myDate.getDay()];
},
//选择入住离开
selectDay(line, index) {
if (line == 0 && index + 1 < this.nowDay) return;
//如果有入住情况和价格则需要进行一些列的判断
if (this.priceStauts.length > 0) {
if ((this.start.length == 0 && this.priceStauts[line][index] < 0) || (this.end.length > 0 && this
.priceStauts[line][index] < 0)) {
return uni.showToast({
title: '该日期已被预订',
icon: 'none'
});
}
if ((this.start.length > 0 && line < this.start[0]) || (line == this.start[0] && this.start[1] >
index)) {
if (this.priceStauts[line][index] < 0)
return uni.showToast({
title: '该日期已被预订',
icon: 'none'
});
this.start = [line, index];
this.end = [];
return;
}
if (this.start.length > 0 && this.end.length == 0) {
if (this.start[0] - line == 0) {
for (var j = this.start[1]; j < index; j++) {
if (this.priceStauts[line][j] < 0)
return uni.showToast({
title: '很抱歉,所选入离店时间包含无房日期',
icon: 'none',
mask: true
});
}
} else {
//如果不在同一个月份有三种情况需要处理
for (var i = this.start[0]; i <= line; i++) {
//开始日期到开始日期当月的最大日期是否包含无房情况
if (i == this.start[0]) {
for (var j = this.start[1]; j < this.priceStauts[i].length; j++) {
if (this.priceStauts[i][j] < 0)
return uni.showToast({
title: '很抱歉,所选入离店时间包含无房日期',
icon: 'none',
mask: true
});
}
} else if (i == line) {
//结束日期到当月结束日期之前是否包含无房情况
for (var j = 0; j < index; j++) {
if (this.priceStauts[i][j] < 0)
return uni.showToast({
title: '很抱歉,所选入离店时间包含无房日期',
icon: 'none',
mask: true
});
}
} else {
//中间间隔的月份需要检查每一天是否包含无房情况
for (var j = 0; j < this.priceStauts[i].length; j++) {
if (this.priceStauts[i][j] < 0)
return uni.showToast({
title: '很抱歉,所选入离店时间包含无房日期',
icon: 'none',
mask: true
});
}
}
}
}
}
}
//如果没有入住时间
if (this.start.length == 0) {
//填充入住时间
this.start = [line, index];
} else if (this.start.length > 0 && this.start[0] == line && this.start[1] == index && this.end.length ==
0) {
return;
} else {
//如果没有离开时间
if (this.end.length == 0) {
//如果有价格和入住离开情况则需要进行判断所选的离店时间时候包含无房日期
if (line < this.start[0] || (line == this.start[0] && index < this.start[1])) {
this.end = this.start;
this.start = [line, index];
} else {
//如果离开时间比入住时间晚则填充
this.end = [line, index];
}
} else {
//如果有离开时间则清空离开时间重新填充入住时间
this.start = [line, index];
this.end = [];
}
}
},
//设置日历
setDate() {
//年份
var year = new Date().getFullYear();
//月份
var month = new Date().getMonth();
console.log("执行了...")
for (let i = 0; i < this.count; i++) {
var day = [];
var week = 0;
for (var j = 0; j < new Date(year, month + 1, 0).getDate(); j++) {
day.push(j + 1);
}
this.date.push({
year: year,
month: month + 1,
day: day,
oneDayWeek: new Date(Date.parse(year + '/' + (month + 1) + '/' + '01')).getDay()
});
if (month == 11) {
year += 1;
month = 0;
} else {
month++;
}
}
return this.date;
},
//关闭
close() {
uni.navigateBack({
delta: 1
});
},
//确定入住离店事件提交
submit() {
var obj = {
/* startYMD: this.date[this.start[0]].year + this.type + this.date[this.start[0]].month + this.type + this.isFestival(
this.start[0], this.start[1]),
startMD: this.date[this.start[0]].month + this.type + this.isFestival(this.start[0], this.start[1]),
startDay: this.startDay,
startWeek: this.startWeek,
endYMD: this.date[this.end[0]].year + this.type + this.date[this.end[0]].month + this.type + this.isFestival(this
.end[0], this.end[1]),
emdMD: this.date[this.end[0]].month + this.type + this.type + this.isFestival(this.end[0], this.end[1]),
endDay: this.endDay,
endWeek: this.endWeek,
day: this.day */
start: this.date[this.start[0]].year + this.type + this.date[this.start[0]].month + this.type +
this.isFestival(this.start[0], this.start[1], true),
end: this.date[this.end[0]].year + this.type + this.date[this.end[0]].month + this.type + this
.isFestival(this.end[0], this.end[1], true),
startDay: this.date[this.start[0]].month + '-' + this.isFestival(this.start[0], this.start[1],
true),
endDay: this.date[this.end[0]].month + '-' + this.isFestival(this.end[0], this.end[1], true),
day: this.day
};
/*此处应把需要的数据进行保存,如入住离开日期...添加到vuex然后再进行跳转到上一页
*不推荐使用本地缓存,下面是缓存的示例
*/
uni.setStorage({
key: 'Time',
data: JSON.stringify(obj)
})
this.$emit("finish",obj)
//价格清单,应该存入vuex获取缓存中
// if (this.priceStauts.length > 0) {
// var price = []
// if (this.end[0] - this.start[0] == 0) {
// for (var i = this.start[1]; i < this.end[1]; i++) {
// var day = this.date[this.start[0]].year + this.type + this.setPull(this.date[this.start[0]]
// .month) + this.type + this.isFestival(
// this.start[0], i)
// price.push({
// day_str: day,
// price: this.priceStauts[this.start[0]][i]
// })
// }
// } else {
// for (var i = this.start[0]; i <= this.end[0]; i++) {
// console.log(i)
// if (i == this.start[0]) {
// for (var j = this.start[1]; j < this.date[i].day.length; j++) {
// var day = this.date[i].year + this.type + this.setPull(this.date[i].month) + this
// .type + this.isFestival(
// i, j)
// price.push({
// day_str: day,
// price: this.priceStauts[i][j]
// })
// }
// } else if (i == this.end[0]) {
// for (var j = 0; j < this.end[1]; j++) {
// var day = this.date[i].year + this.type + this.setPull(this.date[i].month) + this
// .type + this.isFestival(
// i, j)
// price.push({
// day_str: day,
// price: this.priceStauts[i][j]
// })
// }
// } else {
// for (var j = 0; j < this.date[i].day.length; j++) {
// var day = this.date[i].year + this.type + this.setPull(this.date[i].month) + this
// .type + this.isFestival(
// i, j)
// price.push({
// day_str: day,
// price: this.priceStauts[i][j]
// })
// }
// }
// }
// }
// //加入缓存
// uni.setStorage({
// key: 'Price',
// data: JSON.stringify(price)
// })
// }
//跳转到上一页
// uni.navigateBack({
// delta: 1
// })
}
}
};
</script>
<style>
/**确认按钮**/
.submit {
width: 100%;
background: white;
position: fixed;
bottom: 0upx;
height: auto;
}
.sub-btn {
height: auto;
border-radius: 10upx;
background: #111;
color: white;
}
.content {
height: 100%;
z-index: 999;
}
/**不能预订**/
/* 入住离开时间的color */
.bg-orange {
background: #111111 !important;
border-radius: 6px 0px 0px 6px !important;
}
.bg-higlt-orange {
background-color: #fff;
}
/* 节假日的日期样式 */
.is-festival {
font-size: 22rpx !important;
color: #000 !important;
}
/** 非节假日的日期样式**/
.not-festival {
font-size: 18upx;
color: white;
}
/***入住离开时间的日历样式*/
.not-sub {
color: #222222;
background: #dddddd;
}
.select-out-item {
background: #ffffff;
}
.select-style {
color: white !important;
font-size: 20rpx !important;
/* font-size: 20upx; */
/* padding-top: 4upx; */
}
.time-out {
/* text-decoration: line-through; */
color: #ccc !important;
}
/**
* 点击日期的样式
*/
.bg {
background: orange;
}
/**
* 日期部分
*/
.section {
width: 100%;
padding-bottom: 150upx;
height: auto;
padding-top: 176rpx;
background-color: #F1F4F6;
}
.section>.item>.year {
text-align: center;
height: 50rpx;
font-weight: bold;
/* padding-left:30upx;
padding-right: 30upx; */
font-size: 24rpx;
line-height: 50rpx;
color: #1B1D1E;
}
.section>.item>.day {
display: flex;
flex-wrap: wrap;
text-align: center;
margin-left: 5px;
margin-right: 5px;
}
.section>.item>.day>.day-list {
margin-top: 30upx;
margin-bottom: 30upx;
min-height: 100upx;
max-height: 180upx;
display: flex;
font-size: 26rpx;
flex-direction: column;
align-items: center;
justify-content: center;
color:#1B1D1E;
}
/**
* 头部固定
*/
.header {
position: fixed;
top: 0;
width: 100%;
/* height: 400upx; */
background: white;
box-shadow: 0px 10rpx 30rpx 0px rgba(36, 36, 36, 0.06);
}
.bar {
width: 100%;
height: var(--status-bar-height);
background: #222222;
}
/**
* 关闭清空
*/
.set {
height: 100upx;
padding-left: 30upx;
padding-right: 30upx;
align-items: center;
display: flex;
justify-content: space-between;
}
/**
* 入住离开时间
*/
.in-and-out {
height: 210upx;
padding-left: 30upx;
padding-right: 30upx;
display: flex;
align-items: center;
justify-content: space-between;
}
/**
* 入住离开的view
*/
.in-and-out>.item {
display: flex;
flex-direction: column;
height: 100upx;
}
/**
* 未选择入离时间时的文字样式
*/
.in-and-out>.text {
margin-top: 100upx;
font-weight: bold;
font-size: 36upx;
color: #c0c0c0;
}
/**
* 一共选择了多少晚的样式
*/
.in-and-out>.item>.count-border {
width: 200upx;
font-size: 28upx;
height: 40upx;
margin-top: 48upx;
text-align: center;
}
.gray {
color: #c0c0c0;
border-bottom: 1px solid #c0c0c0;
}
.orange {
color: orange;
border-bottom: 1px solid orange;
}
/**
* 共多少晚
*/
.in-and-out>.item>.count-border>.count {
font-size: 10px;
}
/**
* 周一到周日
*/
.week {
/* height: 70upx; */
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 25px;
padding-right: 25px;
font-size: 24rpx;
color:#1B1D1E;
background: white;
margin-bottom: 16rpx;
}
.isa {
color: red;
}
.isa2 {
color: red;
}
</style>
<template> <template>
<view class="hotel-list"> <view class="hotel-list">
<view class="search-box"> <view class="search-box">
<view class="date"> <view class="date" @click="chosenDate">
<view>05-12</view> <view>{{searchObj.date.startDay}}</view>
<view>05-13</view> <view>{{searchObj.date.endDay}}</view>
</view> </view>
<view class="days">1</view> <view class="days">{{searchObj.date.day}}</view>
<view style="width: 1px; flex: 1;"> <view style="width: 1px; flex: 1;">
<u-search placeholder="关键字/位置/品牌/酒店名" v-model="searchKey" input-align="left" :value="searchKey" <u-search placeholder="关键字/位置/品牌/酒店名" v-model="searchObj.searchKey" input-align="left" :value="searchObj.searchKey"
text-color="#111" bg-color="rgba(0,0,0,0)" :show-action="false"></u-search> text-color="#111" bg-color="rgba(0,0,0,0)" :show-action="false"></u-search>
</view> </view>
</view> </view>
<view style="padding: 30rpx 0;"> <view>
<u-dropdown ref="uDropdown" @open="open" @close="close" active-color="#000" inactive-color="#444"> <u-dropdown ref="uDropdown" @open="open" @close="close" active-color="#000" inactive-color="#444">
<u-dropdown-item v-model="value1" title="推荐排序" :options="options1" @change="change"></u-dropdown-item> <u-dropdown-item v-model="searchObj.sort" :title="optionsTitle[0]" :options="options1" @change="change">
<u-dropdown-item v-model="value2" title="距离" :options="options2"></u-dropdown-item> </u-dropdown-item>
<u-dropdown-item v-model="value2" title="价格/星级" :options="options2"></u-dropdown-item> <u-dropdown-item v-model="searchObj.enclosure" :title="optionsTitle[1]" :options="options2" @change="change2"></u-dropdown-item>
<u-dropdown-item v-model="value2" title="筛选" :options="options2"></u-dropdown-item> <u-dropdown-item :title="optionsTitle[2]">
<view class="slot-content" style="padding: 30rpx;background-color: #FFF;">
<view>
<text style="font-size: 28rpx;color:#111;font-weight: 800;margin-right: 10rpx;">价格</text>
<text style="font-size: 24rpx;color:#111;">{{tempRateAndPrice.priceText}}</text>
</view>
<view style="display: flex;align-items: center;color: #999999;margin-top: 15rpx;">
<view style="font-size: 24rpx;flex:1">¥0</view>
<view style="font-size: 24rpx;flex:1;color: #333;text-align: right;">¥1000以上</view>
</view>
<range-slider :width="690" :height="80" :step="10" :liveMode="true" background-color="#E2E2E2"
:block-size="40" active-color="#111111" min="0" max="1000" @rangechange="rangechange4"
:values="tempRateAndPrice.price"></range-slider>
<view style="margin: 20rpx 0 29rpx 0;">
<text style="font-size: 28rpx;color:#111;font-weight: 800;">星级</text>
</view>
<view class="hotel-rate-box">
<view v-for="(x,i) in rates" :key="i" class="hotel-rate" :class="{'active':tempRateAndPrice.rate.indexOf(x.value)!=-1}" @click="setHotelRate(x.value)">{{x.label}}</view>
</view>
<view style="box-shadow: 0px -10px 30px 0px rgba(36, 36, 36, 0.06);margin-top:40rpx;display: flex;">
<view style="flex:1;margin-right: 30rpx;">
<u-button :custom-style="btnStyle" @click="resetPrice">重置</u-button>
</view>
<view style="flex:1;">
<u-button :custom-style="btnStyle2" @click="surePrice">完成</u-button>
</view>
</view>
</view>
</u-dropdown-item>
<!-- <u-dropdown-item v-model="value2" :title="optionsTitle[3]" :options="options2"></u-dropdown-item> -->
</u-dropdown> </u-dropdown>
</view> </view>
<u-popup v-model="showTimePopup" mode="bottom" border-radius="20" length="95%" :safe-area-inset-bottom="true">
<canlendar @finish="chosenDateResult"></canlendar>
</u-popup>
</view> </view>
</template> </template>
<script> <script>
import rangeSlider from "./components/range-slider.vue"
import canlendar from "./components/time/index.vue"
export default { export default {
data() { data() {
return { return {
searchKey: "", showTimePopup:false,
value1: 1, value1: 1,
value2: 2, value2: 2,
options1: [{ searchObj:{
label: '默认排序', searchKey:"",
sort:1,
enclosure:-1,
rateAndPrice:{
price:{},
priceText:"不限",
rate:[]
},
date:{}
},
tempRateAndPrice:{
price:{},
priceText:"不限",
rate:[]
},
optionsTitle: [
"推荐排序",
"附近",
"价格/星级",
"筛选"
],
rates: [
{
label:"二星/经济",
value:1
},
{
label:"三星/舒适",
value:2
},
{
label:"四星/高档",
value:3
},
{
label:"五星/豪华",
value:4
}
],
options1: [
{
label: '推荐排序',
value: 1, value: 1,
}, },
{ {
label: '距离优先', label: '好评优先',
value: 2, value: 2,
},
{
label: '低价优先',
value: 3,
},
{
label: '高价优先',
value: 4,
} }
], ],
options2: [{ options2: [
label: '去冰', {
label: '不限',
value: -1,
},
{
label: '宝镜岩',
value: 1, value: 1,
}, },
{ {
label: '加冰', label: '盆景滩',
value: 2, value: 2,
}, },
{
label: '芦苇海',
value: 3,
},
{
label: '五彩池',
value: 4,
},
{
label: '镜海',
value: 5,
},
{
label: '犀牛海',
value: 6,
},
{
label: '诺日朗瀑布',
value: 7,
},
{
label: '火花海',
value: 8,
},
], ],
btnStyle:{
borderRadius: '16rpx',
color: '#111',
fontSize: '30rpx',
width: '100%',
border:"1px solid #111",
background:"#FFF"
},
btnStyle2:{
borderRadius: '16rpx',
color: '#fff',
fontSize: '30rpx',
width: '100%',
background:"#111"
} }
}
},
components: {
rangeSlider,
canlendar
}, },
created() { created() {
console.log(this.$u)
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title: "酒店", title: "酒店",
}); });
let d1=new Date();
let d=new Date();
let d2=new Date(d.setDate(d.getDate()+1))
var obj = {
start: `${d1.getFullYear()}-${d1.getMonth()+1}-${d1.getDate()}`,
end: `${d2.getFullYear()}-${d2.getMonth()+1}-${d2.getDate()}`,
startDay: `${d1.getMonth()+1}-${d1.getDate()}`,
endDay: `${d2.getMonth()+1}-${d2.getDate()}`,
day: 1
}
uni.setStorage({
key: 'Time',
data: JSON.stringify(obj)
})
this.searchObj.date=obj
}, },
methods: { methods: {
chosenDateResult(obj){
this.searchObj.date=obj
this.showTimePopup=false
},
chosenDate(){
// uni.navigateTo({
// url:"/pages/hotel/components/time/index"
// })
this.showTimePopup=true
},
setHotelRate(rateId){
let temp=this.tempRateAndPrice.rate.indexOf(rateId)
if(temp==-1){
this.tempRateAndPrice.rate.push(rateId)
}else{
this.tempRateAndPrice.rate.splice(temp,1)
}
},
resetPrice(){
this.optionsTitle[2]="价格/星级"
this.searchObj.rateAndPrice={
price:{
minValue:0,
maxValue:1000
},
priceText:"不限",
rate:[]
}
this.closeDropdown();
},
surePrice(){
let result=""
if(this.tempRateAndPrice.rate.length>0){
this.rates.forEach(x=>{
if(this.tempRateAndPrice.rate.indexOf(x.value)!=-1){
result+=x.label+","
}
})
}
if(this.tempRateAndPrice.priceText!="不限"){
result+=this.tempRateAndPrice.priceText
}
result=result==""?"价格/星级":result
console.log(result)
this.optionsTitle[2]=result
this.$forceUpdate()
this.searchObj.rateAndPrice=this.tempRateAndPrice
this.closeDropdown();
},
rangechange4(e){
if(e.minValue==0){
if(e.maxValue==1000){
this.tempRateAndPrice.priceText="不限"
}else{
this.tempRateAndPrice.priceText=`¥${e.maxValue}以下`
}
}else if(e.maxValue==1000){
this.tempRateAndPrice.priceText=`¥${e.minValue}以上`
}else{
this.tempRateAndPrice.priceText=`¥${e.minValue} - ¥${e.maxValue}之间`
}
},
closeDropdown() {
this.$refs.uDropdown.close();
},
open(index) { open(index) {
// 展开某个下来菜单时,先关闭原来的其他菜单的高亮 // 展开某个下来菜单时,先关闭原来的其他菜单的高亮
// 同时内部会自动给当前展开项进行高亮 // 同时内部会自动给当前展开项进行高亮
this.$refs.uDropdown.highlight(); this.$refs.uDropdown.highlight();
if(index==2){
this.tempRateAndPrice=this.searchObj.rateAndPrice
}
}, },
close(index) { close(index) {
// 关闭的时候,给当前项加上高亮 // 关闭的时候,给当前项加上高亮
// 当然,您也可以通过监听dropdown-item的@change事件进行处理 // 当然,您也可以通过监听dropdown-item的@change事件进行处理
this.$refs.uDropdown.highlight(index); this.$refs.uDropdown.highlight(index);
}, },
change() { change(index) {
// 更多的细节,如有需要请自行根据业务逻辑进行处理 let temp = this.options1.find(x => {
// this.$refs.uDropdown.highlight(xxx); if (x.value == index) {
return x
} else {
return false
}
})
this.optionsTitle[0] = temp.label
},
change2(index){
if(index!=-1){
let temp = this.options2.find(x => {
if (x.value == index) {
return x
} else {
return false
}
})
this.optionsTitle[1] = temp.label
}else{
this.optionsTitle[1] = "附近"
}
} }
}, },
} }
...@@ -78,7 +311,7 @@ ...@@ -78,7 +311,7 @@
<style> <style>
.hotel-list { .hotel-list {
height: 100vh; height: 100vh;
padding: 0 15px;
} }
.hotel-list .search-box { .hotel-list .search-box {
...@@ -88,6 +321,7 @@ ...@@ -88,6 +321,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
padding: 19rpx 30rpx; padding: 19rpx 30rpx;
margin: 0 30rpx;
} }
.hotel-list .search-box .date { .hotel-list .search-box .date {
...@@ -106,4 +340,26 @@ ...@@ -106,4 +340,26 @@
border-right: 1px solid #E2E2E2; border-right: 1px solid #E2E2E2;
font-size: 24rpx; font-size: 24rpx;
} }
.hotel-rate-box{
display: flex;
align-items: center;
}
.hotel-rate{
width: 160rpx;
height: 60rpx;
background: #ECF1F4;
border-radius: 10rpx;
font-size: 26rpx;
color: #999999;
line-height: 60rpx;
margin-right: 15rpx;
text-align: center;
}
.hotel-rate:last-child{
margin-right: 0;
}
.hotel-rate.active{
background: #111111;
color: #FFFFFF;
}
</style> </style>
...@@ -4,8 +4,8 @@ export default { ...@@ -4,8 +4,8 @@ export default {
// Vue.prototype.host2 = "http://192.168.0.110:8200" // Vue.prototype.host2 = "http://192.168.0.110:8200"
// Vue.prototype.host2 = "https://mallApi.oytour.com" // Vue.prototype.host2 = "https://mallApi.oytour.com"
// Vue.prototype.host2 = "http://192.168.1.5:8088" // Vue.prototype.host2 = "http://192.168.1.5:8088"
Vue.prototype.host2 = "http://192.168.20.17:8014" //Vue.prototype.host2 = "http://192.168.20.17:8014"
// Vue.prototype.host2 = "http://192.168.1.13:8088" Vue.prototype.host2 = "http://192.168.20.13:8088"
// Vue.prototype.host2 = "http://testmall.oytour.com/" // Vue.prototype.host2 = "http://testmall.oytour.com/"
Vue.prototype.request = function(param, success, failed) { Vue.prototype.request = function(param, success, failed) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment