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
Expand all
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 @@
<u-cell-group>
<u-cell-item
@
click=
"cellClick(item.value)"
:arrow=
"false"
:title=
"item.label"
v-for=
"(item, index) in options"
: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-group>
</view>
...
...
node_modules/uview-ui/components/u-dropdown/u-dropdown.vue
View file @
4c5be41b
<
template
>
<view
class=
"u-dropdown"
>
<view
class=
"u-dropdown"
style=
"padding: 0 15px;"
>
<view
class=
"u-dropdown__menu"
:style=
"
{
height: $u.addUnit(height)
}" :class="{
'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-flex"
>
<view
class=
"u-flex"
style=
"width: 100%;flex-wrap: nowrap;"
>
<text
class=
"u-dropdown__menu__item__text"
:style=
"
{
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>
<view
class=
"u-dropdown__menu__item__arrow"
:class=
"
{
'u-dropdown__menu__item__arrow--rotate': index === current
...
...
@@ -250,9 +251,13 @@
@include
vue-flex
;
justify-content
:
center
;
align-items
:
center
;
overflow
:
hidden
;
&
__text
{
font-size
:
2
8
rpx
;
font-size
:
2
6
rpx
;
color
:
$u-content-color
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
}
&
__arrow
{
margin-left
:
6rpx
;
...
...
pages.json
View file @
4c5be41b
...
...
@@ -709,6 +709,8 @@
"root"
:
"pages/hotel"
,
"pages"
:
[{
"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
This diff is collapsed.
Click to expand it.
pages/hotel/list.vue
View file @
4c5be41b
<
template
>
<view
class=
"hotel-list"
>
<view
class=
"search-box"
>
<view
class=
"date"
>
<view>
住
05-12
</view>
<view>
离
05-13
</view>
<view
class=
"date"
@
click=
"chosenDate"
>
<view>
住
{{
searchObj
.
date
.
startDay
}}
</view>
<view>
离
{{
searchObj
.
date
.
endDay
}}
</view>
</view>
<view
class=
"days"
>
1
晚
</view>
<view
class=
"days"
>
{{
searchObj
.
date
.
day
}}
晚
</view>
<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>
</view>
</view>
<view
style=
"padding: 30rpx 0;"
>
<view>
<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=
"value2"
title=
"距离"
:options=
"options2"
></u-dropdown-item>
<u-dropdown-item
v-model=
"value2"
title=
"价格/星级"
:options=
"options2"
></u-dropdown-item>
<u-dropdown-item
v-model=
"value2"
title=
"筛选"
:options=
"options2"
></u-dropdown-item>
<u-dropdown-item
v-model=
"searchObj.sort"
:title=
"optionsTitle[0]"
:options=
"options1"
@
change=
"change"
>
</u-dropdown-item>
<u-dropdown-item
v-model=
"searchObj.enclosure"
:title=
"optionsTitle[1]"
:options=
"options2"
@
change=
"change2"
></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>
</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>
</
template
>
<
script
>
import
rangeSlider
from
"./components/range-slider.vue"
import
canlendar
from
"./components/time/index.vue"
export
default
{
data
()
{
return
{
searchKey
:
""
,
showTimePopup
:
false
,
value1
:
1
,
value2
:
2
,
options1
:
[{
label
:
'默认排序'
,
searchObj
:{
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
,
},
{
label
:
'
距离
优先'
,
label
:
'
好评
优先'
,
value
:
2
,
},
{
label
:
'低价优先'
,
value
:
3
,
},
{
label
:
'高价优先'
,
value
:
4
,
}
],
options2
:
[{
label
:
'去冰'
,
options2
:
[
{
label
:
'不限'
,
value
:
-
1
,
},
{
label
:
'宝镜岩'
,
value
:
1
,
},
{
label
:
'
加冰
'
,
label
:
'
盆景滩
'
,
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
()
{
console
.
log
(
this
.
$u
)
uni
.
setNavigationBarTitle
({
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
:
{
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
)
{
// 展开某个下来菜单时,先关闭原来的其他菜单的高亮
// 同时内部会自动给当前展开项进行高亮
this
.
$refs
.
uDropdown
.
highlight
();
if
(
index
==
2
){
this
.
tempRateAndPrice
=
this
.
searchObj
.
rateAndPrice
}
},
close
(
index
)
{
// 关闭的时候,给当前项加上高亮
// 当然,您也可以通过监听dropdown-item的@change事件进行处理
this
.
$refs
.
uDropdown
.
highlight
(
index
);
},
change
()
{
// 更多的细节,如有需要请自行根据业务逻辑进行处理
// this.$refs.uDropdown.highlight(xxx);
change
(
index
)
{
let
temp
=
this
.
options1
.
find
(
x
=>
{
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 @@
<
style
>
.hotel-list
{
height
:
100vh
;
padding
:
0
15px
;
}
.hotel-list
.search-box
{
...
...
@@ -88,6 +321,7 @@
display
:
flex
;
align-items
:
center
;
padding
:
19
rpx
30
rpx
;
margin
:
0
30
rpx
;
}
.hotel-list
.search-box
.date
{
...
...
@@ -106,4 +340,26 @@
border-right
:
1px
solid
#E2E2E2
;
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
>
plugin/api.js
View file @
4c5be41b
...
...
@@ -4,8 +4,8 @@ export default {
// Vue.prototype.host2 = "http://192.168.0.110:8200"
// Vue.prototype.host2 = "https://mallApi.oytour.com"
// Vue.prototype.host2 = "http://192.168.1.5:8088"
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.17:8014"
Vue
.
prototype
.
host2
=
"http://192.168.20
.13:8088"
// Vue.prototype.host2 = "http://testmall.oytour.com/"
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