Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
J
jz_Travel
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
zhengke
jz_Travel
Commits
4c5be41b
Commit
4c5be41b
authored
May 25, 2021
by
罗超
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
晚上列表搜索功能
parent
b00a64d7
Show whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
1634 additions
and
31 deletions
+1634
-31
u-dropdown-item.vue
...s/uview-ui/components/u-dropdown-item/u-dropdown-item.vue
+5
-2
u-dropdown.vue
node_modules/uview-ui/components/u-dropdown/u-dropdown.vue
+9
-4
pages.json
pages.json
+2
-0
range-slider.vue
pages/hotel/components/range-slider.vue
+391
-0
day.js
pages/hotel/components/time/day.js
+104
-0
index.vue
pages/hotel/components/time/index.vue
+842
-0
list.vue
pages/hotel/list.vue
+279
-23
api.js
plugin/api.js
+2
-2
No files found.
node_modules/uview-ui/components/u-dropdown-item/u-dropdown-item.vue
View file @
4c5be41b
...
@@ -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>
...
...
node_modules/uview-ui/components/u-dropdown/u-dropdown.vue
View file @
4c5be41b
<
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
:
2
8
rpx
;
font-size
:
2
6
rpx
;
color
:
$u-content-color
;
color
:
$u-content-color
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
}
}
&
__arrow
{
&
__arrow
{
margin-left
:
6rpx
;
margin-left
:
6rpx
;
...
...
pages.json
View file @
4c5be41b
...
@@ -709,6 +709,8 @@
...
@@ -709,6 +709,8 @@
"root"
:
"pages/hotel"
,
"root"
:
"pages/hotel"
,
"pages"
:
[{
"pages"
:
[{
"path"
:
"list"
"path"
:
"list"
},{
"path"
:
"components/time/index"
}]
}]
}
}
],
],
...
...
pages/hotel/components/range-slider.vue
0 → 100644
View file @
4c5be41b
<
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
:
10000
rpx
;
}
.range-bar-bg
{
position
:
absolute
;
width
:
100%
;
height
:
100%
;
border-radius
:
10000
rpx
;
}
.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
:
0
rpx
0
rpx
6
rpx
#ccc
;
}
.block.active
{
transform
:
translate
(
0
,
-50%
)
scale
(
1.5
);
}
</
style
>
pages/hotel/components/time/day.js
0 → 100644
View file @
4c5be41b
//节假日信息
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
pages/hotel/components/time/index.vue
0 → 100644
View file @
4c5be41b
<
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
:
0
upx
;
height
:
auto
;
}
.sub-btn
{
height
:
auto
;
border-radius
:
10
upx
;
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
:
22
rpx
!important
;
color
:
#000
!important
;
}
/** 非节假日的日期样式**/
.not-festival
{
font-size
:
18
upx
;
color
:
white
;
}
/***入住离开时间的日历样式*/
.not-sub
{
color
:
#222222
;
background
:
#dddddd
;
}
.select-out-item
{
background
:
#ffffff
;
}
.select-style
{
color
:
white
!important
;
font-size
:
20
rpx
!important
;
/* font-size: 20upx; */
/* padding-top: 4upx; */
}
.time-out
{
/* text-decoration: line-through; */
color
:
#ccc
!important
;
}
/**
* 点击日期的样式
*/
.bg
{
background
:
orange
;
}
/**
* 日期部分
*/
.section
{
width
:
100%
;
padding-bottom
:
150
upx
;
height
:
auto
;
padding-top
:
176
rpx
;
background-color
:
#F1F4F6
;
}
.section
>
.item
>
.year
{
text-align
:
center
;
height
:
50
rpx
;
font-weight
:
bold
;
/* padding-left:30upx;
padding-right: 30upx; */
font-size
:
24
rpx
;
line-height
:
50
rpx
;
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
:
30
upx
;
margin-bottom
:
30
upx
;
min-height
:
100
upx
;
max-height
:
180
upx
;
display
:
flex
;
font-size
:
26
rpx
;
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
10
rpx
30
rpx
0px
rgba
(
36
,
36
,
36
,
0.06
);
}
.bar
{
width
:
100%
;
height
:
var
(
--status-bar-height
);
background
:
#222222
;
}
/**
* 关闭清空
*/
.set
{
height
:
100
upx
;
padding-left
:
30
upx
;
padding-right
:
30
upx
;
align-items
:
center
;
display
:
flex
;
justify-content
:
space-between
;
}
/**
* 入住离开时间
*/
.in-and-out
{
height
:
210
upx
;
padding-left
:
30
upx
;
padding-right
:
30
upx
;
display
:
flex
;
align-items
:
center
;
justify-content
:
space-between
;
}
/**
* 入住离开的view
*/
.in-and-out
>
.item
{
display
:
flex
;
flex-direction
:
column
;
height
:
100
upx
;
}
/**
* 未选择入离时间时的文字样式
*/
.in-and-out
>
.text
{
margin-top
:
100
upx
;
font-weight
:
bold
;
font-size
:
36
upx
;
color
:
#c0c0c0
;
}
/**
* 一共选择了多少晚的样式
*/
.in-and-out
>
.item
>
.count-border
{
width
:
200
upx
;
font-size
:
28
upx
;
height
:
40
upx
;
margin-top
:
48
upx
;
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
:
24
rpx
;
color
:
#1B1D1E
;
background
:
white
;
margin-bottom
:
16
rpx
;
}
.isa
{
color
:
red
;
}
.isa2
{
color
:
red
;
}
</
style
>
pages/hotel/list.vue
View file @
4c5be41b
<
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=
"search
Key"
input-align=
"left"
:value=
"
searchKey"
<u-search
placeholder=
"关键字/位置/品牌/酒店名"
v-model=
"search
Obj.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
:
19
rpx
30
rpx
;
padding
:
19
rpx
30
rpx
;
margin
:
0
30
rpx
;
}
}
.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
:
24
rpx
;
font-size
:
24
rpx
;
}
}
.hotel-rate-box
{
display
:
flex
;
align-items
:
center
;
}
.hotel-rate
{
width
:
160
rpx
;
height
:
60
rpx
;
background
:
#ECF1F4
;
border-radius
:
10
rpx
;
font-size
:
26
rpx
;
color
:
#999999
;
line-height
:
60
rpx
;
margin-right
:
15
rpx
;
text-align
:
center
;
}
.hotel-rate
:last-child
{
margin-right
:
0
;
}
.hotel-rate.active
{
background
:
#111111
;
color
:
#FFFFFF
;
}
</
style
>
</
style
>
plugin/api.js
View file @
4c5be41b
...
@@ -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
)
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment