Skip to content

J
jz_Travel
Commit 42932480 authored by zhengke's avatar zhengke
Browse files
Options

修改

parent e30f3578
Hide whitespace changes
Inline Side-by-side
Showing with 181 additions and 154 deletions
pages/hotel/components/hotel-good.vue
View file @ 42932480
<template> <template>
<view class="hotel-list-item"> <view>
<view class="img-box"> <view class="hotel-list-item" v-for="(item,index) in HotelList" :key="index">
<image src="http://imgfile.oytour.com/Upload/DMC/202105251114114560000000058.png" mode="aspectFill"></image> <view class="img-box">
</view> <image :src="item.CoverImg" mode="aspectFill"></image>
<view class="hotel-info"> </view>
<view class="hotel-name">乐山禅驿·嘉定院子酒店</view> <view class="hotel-info">
<view class="hotel-start"> <view class="hotel-name">{{item.HotelName}}</view>
<!-- TODO：判定是否为星级酒店，如果是显示星级，不是，显示另外一种方式 --> <view class="hotel-start">
<view class="rate" v-if="hotelType==0"> <!-- TODO：判定是否为星级酒店，如果是显示星级，不是，显示另外一种方式 -->
<u-rate active-color="#FEB969" inactive-color="#FFF" current="4" active-icon="star" inactive-icon="star" disabled></u-rate> <view class="rate" v-if="hotelType==0">
<text style="margin-left: 20rpx;vertical-align: top;">四星</text> <u-rate active-color="#FEB969" inactive-color="#FFF" current="4" active-icon="star" inactive-icon="star" disabled></u-rate>
</view> <text style="margin-left: 20rpx;vertical-align: top;">{{item.StarName}}</text>
<view class="other-rate" v-if="hotelType==1"> </view>
<!-- <view class="other-rate" v-if="hotelType==1">
<text>温泉酒店</text> <text>温泉酒店</text>
<span class="line"></span> <span class="line"></span>
</view> </view>
<view class="other-rate" v-if="hotelType==2"> <view class="other-rate" v-if="hotelType==2">
<text>精选民宿</text> <text>精选民宿</text>
<span class="line"></span> <span class="line"></span>
</view> -->
</view>
<view class="localtion">{{item.Address}}</view>
<view>
<u-tag v-for="(subItem,subIndex) in item.TagList" style="margin-right:10rpx;" :text="subItem" bg-color="#FFF" border-color="#DFBE6E" color="#DFBE6E"
size="mini"></u-tag>
</view>
<view class="price">
<text>￥</text>
<text class="money">{{item.B2BPrice}}</text>
<text>起</text>
</view> </view>
</view>
<view class="localtion">距该酒店直线4.1公里·近九寨千古情景区·沟口</view>
<view>
<u-tag text="亲子设施" bg-color="#FFF" border-color="#DFBE6E" color="#DFBE6E" size="mini"></u-tag>
</view>
<view class="price">
<text>￥</text>
<text class="money">599</text>
<text>起</text>
</view> </view>
</view> </view>
</view> </view>
...@@ -35,10 +38,10 @@ ...@@ -35,10 +38,10 @@
<script> <script>
export default { export default {
props:{ props: {
hotelType:{ HotelList: {
type:Number, type: Array,
default:0 default: null
} }
}, },
data() { data() {
...@@ -46,32 +49,39 @@ ...@@ -46,32 +49,39 @@
key: value key: value
} }
}, },
created() {
console.log(this.HotelList, 'hotel');
},
} }
</script> </script>
<style> <style>
.hotel-list-item{ .hotel-list-item {
margin: 30rpx 30rpx 0 30rpx; margin: 30rpx 30rpx 0 30rpx;
padding-bottom: 30rpx; padding-bottom: 30rpx;
border-bottom: 1rpx solid #E2E2E2; border-bottom: 1rpx solid #E2E2E2;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.hotel-list-item .img-box{
.hotel-list-item .img-box {
width: 220rpx; width: 220rpx;
height: 280rpx; height: 280rpx;
border-radius: 20rpx; border-radius: 20rpx;
overflow: hidden; overflow: hidden;
margin-right: 30rpx; margin-right: 30rpx;
} }
.hotel-list-item .img-box image{
.hotel-list-item .img-box image {
width: 100%; width: 100%;
} }
.hotel-list-item .hotel-info{
.hotel-list-item .hotel-info {
width: 1px; width: 1px;
flex: 1; flex: 1;
} }
.hotel-list-item .hotel-info .hotel-name{
.hotel-list-item .hotel-info .hotel-name {
font-weight: 500; font-weight: 500;
color: #111111; color: #111111;
line-height: 30rpx; line-height: 30rpx;
...@@ -80,27 +90,33 @@ ...@@ -80,27 +90,33 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.hotel-list-item .hotel-info .hotel-start{
margin:10rpx 0; .hotel-list-item .hotel-info .hotel-start {
margin: 10rpx 0;
} }
.hotel-list-item .hotel-info .hotel-start .rate{
.hotel-list-item .hotel-info .hotel-start .rate {
font-size: 30rpx; font-size: 30rpx;
font-weight: 500; font-weight: 500;
color: #999999; color: #999999;
line-height: 30rpx; line-height: 30rpx;
} }
.hotel-list-item .hotel-info .hotel-start .other-rate{
.hotel-list-item .hotel-info .hotel-start .other-rate {
display: inline-block; display: inline-block;
position: relative; position: relative;
} }
.hotel-list-item .hotel-info .hotel-start .other-rate text{
position: relative;z-index: 2; .hotel-list-item .hotel-info .hotel-start .other-rate text {
position: relative;
z-index: 2;
font-size: 30rpx; font-size: 30rpx;
line-height: 30rpx; line-height: 30rpx;
font-weight: 500; font-weight: 500;
color: #111; color: #111;
} }
.hotel-list-item .hotel-info .hotel-start .other-rate .line{
.hotel-list-item .hotel-info .hotel-start .other-rate .line {
background-color: #DFBE6E; background-color: #DFBE6E;
height: 6px; height: 6px;
bottom: 2px; bottom: 2px;
...@@ -109,12 +125,13 @@ ...@@ -109,12 +125,13 @@
position: absolute; position: absolute;
z-index: 1; z-index: 1;
} }
.hotel-list-item .hotel-info .localtion{
.hotel-list-item .hotel-info .localtion {
font-size: 24rpx; font-size: 24rpx;
font-weight: 400; font-weight: 400;
color: #999999; color: #999999;
line-height: 30rpx; line-height: 30rpx;
text-overflow: -o-ellipsis-lastline; text-overflow: -o-ellipsis-lastline;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -123,14 +140,16 @@ ...@@ -123,14 +140,16 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
margin-bottom: 10rpx; margin-bottom: 10rpx;
} }
.hotel-list-item .hotel-info .price{
.hotel-list-item .hotel-info .price {
margin-top: 10rpx; margin-top: 10rpx;
font-weight: 500; font-weight: 500;
color: #FF3166; color: #FF3166;
font-size: 20rpx; font-size: 20rpx;
text-align: right; text-align: right;
} }
.hotel-list-item .hotel-info .price .money{
.hotel-list-item .hotel-info .price .money {
font-size: 36rpx; font-size: 36rpx;
} }
</style> </style>
pages/hotel/list.vue
View file @ 42932480
...@@ -2,20 +2,20 @@ ...@@ -2,20 +2,20 @@
<view class="hotel-list"> <view class="hotel-list">
<view class="search-box"> <view class="search-box">
<view class="date" @click="chosenDate"> <view class="date" @click="chosenDate">
<view>住 {{searchObj.date.startDay}}</view> <view>住 {{startDay}}</view>
<view>离 {{searchObj.date.endDay}}</view> <view>离 {{endDay}}</view>
</view> </view>
<view class="days">{{searchObj.date.day}}晚</view> <view class="days">{{day}}晚</view>
<view style="width: 1px; flex: 1;"> <view style="width: 1px; flex: 1;">
<u-search placeholder="关键字/位置/品牌/酒店名" v-model="searchObj.searchKey" input-align="left" :value="searchObj.searchKey" <u-search placeholder="关键字/位置/品牌/酒店名" v-model="searchObj.Name" input-align="left" :value="searchObj.Name"
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)" @change="getList(1)" :show-action="false"></u-search>
</view> </view>
</view> </view>
<view> <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="searchObj.sort" :title="optionsTitle[0]" :options="options1" @change="change"> <u-dropdown-item v-model="searchObj.OrderByType" :title="optionsTitle[0]" :options="options1" @change="change">
</u-dropdown-item> </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="searchObj.enclosure" :title="optionsTitle[1]" :options="options2" @change="change2"></u-dropdown-item> -->
<u-dropdown-item :title="optionsTitle[2]"> <u-dropdown-item :title="optionsTitle[2]">
<view class="slot-content" style="padding: 30rpx;background-color: #FFF;"> <view class="slot-content" style="padding: 30rpx;background-color: #FFF;">
<view> <view>
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
<text style="font-size: 28rpx;color:#111;font-weight: 800;">星级</text> <text style="font-size: 28rpx;color:#111;font-weight: 800;">星级</text>
</view> </view>
<view class="hotel-rate-box"> <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 v-for="(x,i) in rates" :key="i" class="hotel-rate" :class="{'active':tempRateAndPrice.rate.indexOf(x.Id)!=-1}" @click="setHotelRate(x.Id)">{{x.Name}}</view>
</view> </view>
<view style="box-shadow: 0px -10px 30px 0px rgba(36, 36, 36, 0.06);margin-top:40rpx;display: flex;"> <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;"> <view style="flex:1;margin-right: 30rpx;">
...@@ -52,21 +52,11 @@ ...@@ -52,21 +52,11 @@
<canlendar @finish="chosenDateResult"></canlendar> <canlendar @finish="chosenDateResult"></canlendar>
</u-popup> </u-popup>
<view class="morewhere"> <view class="morewhere">
<view v-for="(x,i) in threeLevelList" class="item" @click="chosenMorewhere(x.id)" :class="{'active':searchObj.moreSearch.indexOf(x.id)!=-1}">{{x.name}}</view> <view v-for="(x,i) in searchObj.TagList" class="item" @click="chosenMorewhere(x)" :class="{'active':x.IsCheck==1}">{{x.Name}}</view>
</view> </view>
<scroll-view :scroll-y="true" @scrolltolower="lower" :enable-back-to-top="true" :enable-flex="true" :scroll-top="scrollTop" <scroll-view :scroll-y="true" @scrolltolower="lower" :enable-back-to-top="true" :enable-flex="true" :scroll-top="scrollTop"
@scroll="scroll" style="height: calc(100% - 224rpx); padding-bottom: 0px;"> @scroll="scroll" style="height: calc(100% - 224rpx); padding-bottom: 0px;">
<hotel-good></hotel-good> <hotel-good :HotelList="HotelList"></hotel-good>
<hotel-good></hotel-good>
<hotel-good :hotelType="1"></hotel-good>
<hotel-good></hotel-good>
<hotel-good :hotelType="1"></hotel-good>
<hotel-good></hotel-good>
<hotel-good></hotel-good>
<hotel-good></hotel-good>
<hotel-good :hotelType="2"></hotel-good>
<hotel-good></hotel-good>
<hotel-good></hotel-good>
<u-loadmore v-if="showLoading" :status="status" :load-text="loadText" :font-size="24" :margin-top="20" <u-loadmore v-if="showLoading" :status="status" :load-text="loadText" :font-size="24" :margin-top="20"
:margin-bottom="20" bg-color="#F5F5F5" color="#111" /> :margin-bottom="20" bg-color="#F5F5F5" color="#111" />
</scroll-view> </scroll-view>
...@@ -85,17 +75,21 @@ ...@@ -85,17 +75,21 @@
value1: 1, value1: 1,
value2: 2, value2: 2,
searchObj:{ searchObj:{
searchKey:"", pageIndex:1,
sort:1, pageSize:15,
enclosure:-1, Name:'', //关键字
rateAndPrice:{ StartPrice:0,
price:{}, EndPrice:1000,
priceText:"不限", QStartDate:'',
rate:[] QEndDate:'',
}, OrderByType:'1', //排序类型
date:{}, QStars:'', //星级
moreSearch:[] TagList:[] //查询标签
}, },
day:0,
startDay:'',
endDay:'',
HotelList:[], //酒店数据
tempRateAndPrice:{ tempRateAndPrice:{
price:{}, price:{},
priceText:"不限", priceText:"不限",
...@@ -107,42 +101,8 @@ ...@@ -107,42 +101,8 @@
"价格/星级", "价格/星级",
"筛选" "筛选"
], ],
rates: [ rates: [],
{ options1: [], //推荐排序数据
label:"二星/经济",
value:1
},
{
label:"三星/舒适",
value:2
},
{
label:"四星/高档",
value:3
},
{
label:"五星/豪华",
value:4
}
],
options1: [
{
label: '推荐排序',
value: 1,
},
{
label: '好评优先',
value: 2,
},
{
label: '低价优先',
value: 3,
},
{
label: '高价优先',
value: 4,
}
],
options2: [ options2: [
{ {
label: '不限', label: '不限',
...@@ -196,32 +156,6 @@ ...@@ -196,32 +156,6 @@
width: '100%', width: '100%',
background:"#111" background:"#111"
}, },
threeLevelList:[
{
name:"民宿",
id:0
},
{
name:"大床房",
id:1
},
{
name:"双床房",
id:2
},
{
name:"含早餐",
id:3
},
{
name:"免费取消",
id:4
},
{
name:"优惠活动",
id:5
}
],
loadText: { loadText: {
loadmore: "轻轻上拉，加载更多", loadmore: "轻轻上拉，加载更多",
loading: "努力加载中", loading: "努力加载中",
...@@ -233,6 +167,7 @@ ...@@ -233,6 +167,7 @@
}, },
showLoading:false, showLoading:false,
status: "loadmore", status: "loadmore",
page_count:0
} }
}, },
components: { components: {
...@@ -241,9 +176,9 @@ ...@@ -241,9 +176,9 @@
hotelGood hotelGood
}, },
created() { created() {
uni.navigateTo({ // uni.navigateTo({
url:"/pages/hotel/order" // url:"/pages/hotel/order"
}) // })
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title: "酒店", title: "酒店",
}); });
...@@ -261,7 +196,14 @@ ...@@ -261,7 +196,14 @@
key: 'Time', key: 'Time',
data: JSON.stringify(obj) data: JSON.stringify(obj)
}) })
this.searchObj.date=obj // this.searchObj.date=obj
this.searchObj.QStartDate = obj.start;
this.searchObj.QEndDate = obj.end;
this.startDay = obj.startDay;
this.endDay = obj.endDay;
this.day = obj.day;
this.getSearchCondition();
this.getList();
}, },
methods: { methods: {
scroll: function(e) { scroll: function(e) {
...@@ -275,25 +217,29 @@ ...@@ -275,25 +217,29 @@
}, },
lower(e) { lower(e) {
// TODO: 滚动到了底部，实现翻页加载 // TODO: 滚动到了底部，实现翻页加载
// if (this.msg.pageIndex < this.page_count) { if (this.searchObj.pageIndex < this.page_count) {
// this.status = "loading"; this.status = "loading";
// this.msg.pageIndex++; this.searchObj.pageIndex++;
// this.init(); this.getList();
// } else { } else {
// this.isover = true; this.status = "nomore";
// this.status = "nomore"; }
// }
}, },
chosenMorewhere(id){ chosenMorewhere(obj){
let i=this.searchObj.moreSearch.indexOf(id) if(obj.IsCheck==0){
if(i==-1){ obj.IsCheck=1
this.searchObj.moreSearch.push(id)
}else{ }else{
this.searchObj.moreSearch.splice(i,1) obj.IsCheck=0;
} }
this.getList(1);
}, },
chosenDateResult(obj){ chosenDateResult(obj){
this.searchObj.date=obj this.searchObj.QStartDate = obj.start;
this.searchObj.QEndDate = obj.end;
this.startDay = obj.startDay;
this.endDay = obj.endDay;
this.day = obj.day;
this.getList(1);
this.showTimePopup=false this.showTimePopup=false
}, },
chosenDate(){ chosenDate(){
...@@ -312,7 +258,7 @@ ...@@ -312,7 +258,7 @@
}, },
resetPrice(){ resetPrice(){
this.optionsTitle[2]="价格/星级" this.optionsTitle[2]="价格/星级"
this.searchObj.rateAndPrice={ this.tempRateAndPrice={
price:{ price:{
minValue:0, minValue:0,
maxValue:1000 maxValue:1000
...@@ -321,6 +267,9 @@ ...@@ -321,6 +267,9 @@
rate:[] rate:[]
} }
this.closeDropdown(); this.closeDropdown();
this.searchObj.StartPrice=0;
this.searchObj.EndPrice=1000;
this.getList(1);
}, },
surePrice(){ surePrice(){
let result="" let result=""
...@@ -338,10 +287,12 @@ ...@@ -338,10 +287,12 @@
console.log(result) console.log(result)
this.optionsTitle[2]=result this.optionsTitle[2]=result
this.$forceUpdate() this.$forceUpdate()
this.searchObj.rateAndPrice=this.tempRateAndPrice
this.closeDropdown(); this.closeDropdown();
this.getList(1);
}, },
rangechange4(e){ rangechange4(e){
this.searchObj.StartPrice = e.minValue;
this.searchObj.EndPrice = e.maxValue;
if(e.minValue==0){ if(e.minValue==0){
if(e.maxValue==1000){ if(e.maxValue==1000){
this.tempRateAndPrice.priceText="不限" this.tempRateAndPrice.priceText="不限"
...@@ -379,6 +330,7 @@ ...@@ -379,6 +330,7 @@
} }
}) })
this.optionsTitle[0] = temp.label this.optionsTitle[0] = temp.label
this.getList(1);
}, },
change2(index){ change2(index){
if(index!=-1){ if(index!=-1){
...@@ -393,6 +345,62 @@ ...@@ -393,6 +345,62 @@
}else{ }else{
this.optionsTitle[1] = "附近" this.optionsTitle[1] = "附近"
} }
},
//获取查询条件
getSearchCondition(){
console.log('进入了111');
this.request2({
url: '/api/Hotel/GetHotelQuery',
data: {}
},
res => {
if (res.resultCode == 1) {
let tempObj = res.data;
this.options1=[];
this.rates=[];
if(tempObj&&tempObj.OrderByList.length>0){
tempObj.OrderByList.forEach(x=>{
let obj = {
label:x.Name,
value:x.Id
}
this.options1.push(obj);
})
}
if(tempObj&&tempObj.TagList){
this.searchObj.TagList = tempObj.TagList;
}
if(tempObj&&tempObj.StarList){
this.rates = tempObj.StarList;
console.log(this.rates,'this.rates');
}
console.log(res,'查询条件');
}
},
err => {
}
);
},
//获取列表数据
getList(type){
this.searchObj.QStars = this.tempRateAndPrice.rate.toString();
console.log(this.searchObj);
if(type==1){
this.HotelList=[];
}
this.request2({
url: '/api/Hotel/AppGetHotelPage',
data: this.searchObj
},
res => {
if (res.resultCode == 1) {
console.log(res,'查询列表数据');
this.HotelList = this.HotelList.concat(res.data.pageData);
this.page_count = res.data.pageCount;
}
}
);
} }
}, },
} }
......
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