公司演示版e鹿悦游
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
CjyTravel/subPageB/hotel/hotellist/hotellist.vue

605 lines
17 KiB

<template>
<view class="v-pages v-pages-bg">
<!-- 搜索 -->
<view class="v-pages-search">
<view class="search_box row flex-align-center">
<view class="col">
<input @input="write" type="text" class="input" @confirm="confirm" confirm-type="search"
color="#A0A7B2" placeholder-style="color:#999" placeholder="请输入酒店名称搜索" />
</view>
<view class="btn_img" @click="search()">
<image src="/subPageB/static/img/icon-search.png" class="img"></image>
</view>
</view>
<!-- 排序筛选 -->
<view class="search-container m-t-12">
<view class="row">
<view @tap="changePanel" :class="[searchItemClass, selectedParam.hiddenSortPanel ? 'active' : '']"
data-type="hiddenSortPanel">智能排序</view>
<view @tap="changePanel"
:class="[searchItemClass, selectedParam.hiddenAttributePanel ? 'active' : '']"
data-type="hiddenAttributePanel">
分类筛选
</view>
</view>
</view>
</view>
<mescroll-uni :up="upOption" @down="downCallback" @up="upCallback" :fixed="false">
<view class="v-pages-list bgfff" style="margin-top: 170rpx;">
<navigator hover-class="none"
:url="'/subPageB/hotel/hoteldetail/hoteldetail?id=' + itemName.id + '&region=' + itemName.region"
v-for="(itemName, index) in listDatas" :key="index">
<view class="list_item row">
<view class="item_recommend hotel" v-if="itemName.isrecommend == 'YES'">
<image src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/hotel_top_01.png"
mode="widthFix">
</image>
</view>
<view class="item_image hotel">
<image class="img" :src="itemName.hlogo" mode="aspectFill"></image>
</view>
<view class="item_content">
<view class="content-name">{{ itemName.hname }}</view>
<view class="content-level hotel">{{ itemName.hlevel }} </view>
<view class="content-tip"><text class="item">免费停车</text><text class="item">机器人服务</text>
</view>
<view class="content-address m-t-12"> 距您约{{ itemName.distance }}</view>
</view>
</view>
</navigator>
</view>
</mescroll-uni>
<view class="sort-page" :hidden="selectedParam.hiddenSortPanel">
<view class="sort-group">
<view @tap="selected"
:class="[pageClass.sortItemClass, selectedParam.sortId == item.id ? 'sort-item-active' : '']"
data-panel="hiddenSortPanel" data-type="sortId" :data-id="item.id"
v-for="(item, index) in filter.sort" :key="index">
{{ item.name }}
</view>
</view>
</view>
<view class="sort-page" :hidden="selectedParam.hiddenRegionPanel">
<view class="sort-group">
<view @tap="regionSelected"
:class="[pageClass.sortItemClass, selectedParam.bm == item.bm ? 'sort-item-active' : '']"
data-panel="hiddenRegionPanel" :data-name="item.title" data-type="bm" :data-id="item.bm"
v-for="(item, index) in regionList" :key="index">
{{ item.title }}
</view>
</view>
</view>
<view class="filter-page" :hidden="selectedParam.hiddenAttributePanel">
<view class="filter-box">
<scroll-view scrollY class="filter-hd">
<view @tap="parentLevel"
:class="[pageClass.filterHdItemClass, parentLevelItem == 'attribute_' + items.type ? 'filter-hd-item-active' : '']"
:data-parentLevelItem="'attribute_' + items.type" v-for="(items, index) in filter.attribute"
:key="index">
{{ items.name }}
</view>
</scroll-view>
<scroll-view scrollY class="filter-bd">
<view class="filter-group" v-if="parentLevelItem == 'attribute_' + items.type"
v-for="(items, index) in filter.attribute" :key="items.dicnum">
<view @tap="childLevel"
:class="[pageClass.filterBdItem, selectedFIlter['attribute_' + items.type] == 0 ? 'filter-bd-item-active' : '']"
data-id="0" :data-type="'attribute_' + items.type">
全部
</view>
<view @tap="childLevel"
:class="[pageClass.filterBdItem, selectedFIlter['attribute_' + items.type] == item.dicnum ? 'filter-bd-item-active' : '']"
:data-id="item.dicnum" :data-type="'attribute_' + items.type"
v-for="(item, childIndex) in items.child" :key="childIndex">
{{ item.dicname }}
</view>
</view>
</scroll-view>
</view>
<view class="control-bar-block">
<view @tap="resetFilter" class="control-back-btn">恢复默认</view>
<view @tap="confirmClick" class="control-confirm-btn">确定</view>
</view>
</view>
</view>
</template>
<script>
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
import uniNavBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue';
import uniSection from '@/components/uni-section/uni-section.vue';
import uniStatusBar from '@/components/uni-status-bar/uni-status-bar.vue';
// 自定义的mescroll-xinlang.vue
import MescrollUni from '@/components/mescroll-diy/mescroll-xinlang.vue';
var that;
export default {
components: {
uniIcons,
uniNavBar,
uniSection,
uniStatusBar,
MescrollUni
},
data() {
that = this;
return {
searchItemClass: 'search-tip-item',
pageClass: {
sortItemClass: 'sort-item',
filterHdItemClass: 'filter-hd-item',
filterBdItem: 'filter-bd-item'
},
priceSymbol: '',
destinationBak: 'all',
destination: 'all',
filter: [],
parentLevelItem: 'attribute_htype',
defaultFilter: {
attribute_htype: 0
},
latitude: 0,
longitude: 0,
selectedFIlterBak: {
price: 0
},
selectedFIlter: {
attribute_htype: 0
},
selectedParam: {
sortId: 5,
bm: '',
hiddenSortPanel: !0,
hiddenAttributePanel: !0,
hiddenRegionPanel: !0
},
param: {
page: 1,
noData: !1,
loading: !1,
finished: !1
},
listDatas: [],
topNum: 0,
rootPaht: this.$config.ROOTPATH,
regionname: '区域',
regionList: [],
searchTitle: '',
downOption: {
auto: false //是否在初始化完毕之后自动执行下拉回调callback; 默认true
},
upOption: {
auto: true //是否在初始化完毕之后自动执行下拉回调callback; 默认true
},
top: 0,
mescroll: '',
data: false,
netType: true
};
},
onLoad(option) {
var that = this;
this.$util.getNetworkType(
function(res) {
if (res.networkType === 'none') {
uni.showToast({
title: that.$param.netMsg,
icon: "none",
duration: 2000
})
that.netType = false;
}
},
function() {
uni.showToast({
title: that.$param.netMsg,
icon: "none",
duration: 2000
})
that.netType = false;
}
)
if (!that.netType) {
return;
}
this.$util.hideLoadingByTime();
uni.showLoading({
title: '加载中',
mask: true
});
var region = option.region;
if (region != null && region != '') {
this.selectedParam.bm = region;
}
this.get_attribute();
this.getRedisRegion();
this.initData();
//this.get_data(null);
// this.requestLocation();
that.$util.saveOperatorLog(that, 'FUN', '酒店');
},
onShow() {
this.$util.getLocation(
function(res) {
console.log(res, '坐标')
that.$param.clat = res.latitude;
that.$param.clng = res.longitude;
that.destinationBak != that.destination && (that.initData(), that.get_data());
})
},
methods: {
/*下拉刷新的回调 */
downCallback() {
this.mescroll.resetUpScroll();
},
upCallback(mescroll) {
var that = this;
if (that.param.page == 1) {
that.mescroll = mescroll;
that.get_data(mescroll);
//that.requestLocation();
} else {
that.get_data(mescroll);
}
},
write: function(e) {
this.searchTitle = e.detail.value;
},
search: function() {
uni.showLoading({
title: '加载中',
mask: true
});
this.initData();
this.get_data();
},
//
back() {
uni.navigateBack({
delta: 1
});
},
showMenu() {
uni.showToast({
title: '菜单'
});
},
clickLeft() {
uni.showToast({
title: '左侧按钮'
});
},
showCity() {
uni.showToast({
title: '选择城市'
});
},
scan() {
uni.showToast({
title: '扫码'
});
},
confirm(e) {
this.searchTitle = e.detail.value;
uni.showLoading({
title: '加载中',
mask: true
});
this.initData();
this.get_data();
},
//
callGpsSuccess: function(lat, lng) {
that.$param.clat = lat;
that.$param.clng = lng;
that.latitude = lat;
that.longitude = lng;
that.get_data();
uni.hideLoading();
that.$util.unbindGpsObj();
},
callGpsFail: function() {
that.latitude = this.$param.lat;
that.longitude = this.$param.lng;
that.get_data();
uni.hideLoading();
this.$util.unbindGpsObj();
},
requestLocation: function(region) {
console.log('---requestLocation---');
this.$util.getLocation(
function(res) {
if (that.$wechat.isWechat()) {
that.$param.clat = res.latitude;
that.$param.clng = res.longitude;
that.getData();
that.get_attribute(), that.initData(), that.get_data();
} else {
that.get_attribute(), that.initData(), that.get_data();
}
uni.hideLoading();
},
function() {
console.log('location error---');
}
);
},
initData: function() {
var param = {};
param.page = 1;
param.noData = false;
param.finished = false;
this.data = false;
this.param = param;
this.listDatas = [];
this.destinationBak = this.destination;
},
selected: function(event) {
uni.showLoading({
title: '加载中',
mask: true
});
this.initData();
var dataset = event.currentTarget.dataset;
var param = this.selectedParam;
param[dataset.type] = dataset.id;
param.hiddenSortPanel = !0;
//console.log(dataset.id);
this.selectedParam = param;
this.get_data();
},
regionSelected: function(event) {
uni.showLoading({
title: '加载中',
mask: true
});
this.initData();
var dataset = event.currentTarget.dataset;
var param = this.selectedParam;
param[dataset.type] = dataset.id;
param.hiddenRegionPanel = !0;
// console.log(dataset.id);
this.selectedParam = param;
this.regionname = dataset.name;
this.get_data();
},
getRedisRegion: function() {
var that = this;
var data = {
key: that.$param.userkey + '_mdd_list'
};
that.$Request.post(that.$config.getRedisData, data).then(res => {
if (res.status == 200) {
that.regionList = res.data.mddList;
var all = {
bm: '',
title: '全部'
};
that.regionList.unshift(all);
for (var i = 0; i < that.regionList.length; i++) {
if (that.regionList[i].bm == that.selectedParam.bm) {
that.regionname = that.regionList[i].title;
}
}
} else {
that.getRegion();
}
});
},
changePanel: function(event) {
var dataSet = event.currentTarget.dataset,
selectedParam = this.selectedParam;
'hiddenSortPanel' == dataSet.type ? (selectedParam.hiddenAttributePanel = !0, selectedParam
.hiddenRegionPanel = !0) : (selectedParam.hiddenSortPanel = !0),
(selectedParam[dataSet.type] = !selectedParam[dataSet.type]),
(this.selectedParam = selectedParam);
},
changeRegionPanel: function(event) {
var dataSet = event.currentTarget.dataset,
selectedParam = this.selectedParam;
if ('hiddenRegionPanel' == dataSet.type) {
selectedParam.hiddenAttributePanel = !0;
selectedParam.hiddenSortPanel = !0;
} else {
selectedParam.hiddenRegionPanel = !0;
}
(selectedParam[dataSet.type] = !selectedParam[dataSet.type]), (this.selectedParam = selectedParam);
},
resetFilter: function() {
this.selectedFIlter = {
attribute_htype: 0
}
},
confirmClick: function() {
uni.showLoading({
title: '加载中',
mask: true
});
this.initData();
//设置选中的筛选项
var selectedParam = this.selectedParam;
(selectedParam.hiddenAttributePanel = true), (this.selectedFIlterBak = this.selectedFIlter);
this.parentLevelItem = 'attribute_htype';
this.selectedParam = selectedParam;
this.get_data();
},
parentLevel: function(t) {
var currentTarget = t.currentTarget.dataset;
//console.log("aaaaaaaaaaaaaaaaa"+a.parentlevelitem);
this.parentLevelItem = currentTarget.parentlevelitem;
},
childLevel: function(t) {
var a = t.currentTarget.dataset,
e = this.selectedFIlter;
this.selectedFIlterBak = e;
e[a.type] = a.id;
this.selectedFIlter = e;
},
get_attribute: function() {
var that = this;
var url = this.$config.getCondition;
var data = {
type: 'hotel',
userkey: this.$param.userkey,
condition: this.$param.hotelType
};
this.$Request.post(url, data).then(res => {
var flag = that.$util.isSuccess(res);
if (!flag) {
return;
}
this.filter = res.data;
});
},
getRegion: function() {
var that = this;
var url = this.$config.getMessageInfoFormFilter;
var data = {
type: this.$param.mddType,
userkey: this.$param.userkey,
pageSize: 100,
sort: '2'
};
this.$Request.post(url, data).then(res => {
var flag = that.$util.isSuccess(res);
if (!flag) {
return;
}
this.regionList = res.data;
for (var i = 0; i < this.regionList.length; i++) {
if (this.regionList[i].bm == this.selectedParam.bm) {
this.regionname = this.regionList[i].title;
}
}
this.regionList.unshift({
title: '全部',
bm: ''
});
});
},
// onReachScroll: function(t) {
// //console.log(t);
// t.detail.scrollTop > 100 ? this.floorstatus=true: this.floorstatus=false;
// var a = this.param;
// a.noData || a.finished || a.loading || this.get_data(this.selectedParam.bm);
// },
get_data: function(mescroll) {
var type = this.selectedFIlterBak['attribute_htype'];
var level = this.selectedFIlterBak['attribute_hlevel'];
var region = this.selectedParam.bm;
// if(selectRegion == undefined || selectRegion == ""){
// region = this.$config.ARER_CODE;
// }else{
// region = selectRegion;
// }
mescroll = this.mescroll;
// mescroll.setPageSize(3);
console.log('页码' + this.param.page);
var requestData = {
pagesize: 10, //mescroll.optUp.page.size,
areacode: region,
pageno: this.param.page,
timestamp: 0,
sort: this.selectedParam.sortId,
type: null == level || 0 == level ? '' : level,
level: null == type || 0 == type ? '' : type,
lng: this.$param.clng,
lat: this.$param.clat,
userkey: this.$param.userkey,
name: this.searchTitle
};
//console.log(this.$config.getHotelList);
this.$Request.post(this.$config.getHotelList, requestData).then(res => {
var list = res.data,
dataListLen = res.data.length,
that = this;
setTimeout(
function() {
if (dataListLen > 0) {
if (that.param.page == 1) {
that.listDatas = [];
}
// if(that.param.page == 1 && dataListLen != mescroll.optUp.page.size){
// that.data = true;
// }
that.param.page += 1;
for (var i = 0; i < dataListLen; i++) {
var item = {
id: list[i].guid,
region: list[i].region,
hlogo: that.rootPaht + list[i].hlogo,
hname: list[i].hname,
hlevel: list[i].hlevel,
isrecommend: list[i].isrecommend,
dicname: list[i].dicname,
hphone: list[i].hphone,
price: list[i].price,
distance: that.$util.formatDistance(list[i].distance)
};
that.listDatas.push(item);
}
}
/* else if (dataListLen == 0 && requestData.name == '') {
that.listDatas = [];
} */
if (mescroll != undefined && mescroll != null) {
console.log('条数' + dataListLen);
mescroll.endSuccess(dataListLen);
}
uni.hideLoading();
},
1500,
list,
dataListLen,
mescroll,
that
);
});
},
onPullDownRefresh() {
console.log('onPullDownRefresh');
setTimeout(function() {
uni.stopPullDownRefresh();
console.log('stopPullDownRefresh');
}, 1000);
}
}
};
</script>
<style>
page {
background: #fff;
}
/* .list-item{ padding: 20rpx; box-sizing: border-box; box-shadow: none; margin-top:0; margin-bottom: 20rpx;} */
.sort-page {
top: 180rpx !important
}
.filter-page {
height: auto;
top: 180rpx !important;
}
.search-container {
height: auto;
}
.sell_jd image {
width: 24rpx;
margin-right: 8rpx;
}
</style>