Skip to content

J
jz_Travel
Commit 4c5be41b authored by 罗超's avatar 罗超
Browse files
Options

晚上列表搜索功能

parent b00a64d7
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1634 additions and 31 deletions
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: 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;
......
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: 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>
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.
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="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>
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) {
......
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