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>
<view class="hotel-list-item">
<view class="img-box">
<image src="http://imgfile.oytour.com/Upload/DMC/202105251114114560000000058.png" mode="aspectFill"></image>
</view>
<view class="hotel-info">
<view class="hotel-name">乐山禅驿·嘉定院子酒店</view>
<view class="hotel-start">
<!-- TODO：判定是否为星级酒店，如果是显示星级，不是，显示另外一种方式 -->
<view class="rate" v-if="hotelType==0">
<u-rate active-color="#FEB969" inactive-color="#FFF" current="4" active-icon="star" inactive-icon="star" disabled></u-rate>
<text style="margin-left: 20rpx;vertical-align: top;">四星</text>
</view>
<view class="other-rate" v-if="hotelType==1">
<view>
<view class="hotel-list-item" v-for="(item,index) in HotelList" :key="index">
<view class="img-box">
<image :src="item.CoverImg" mode="aspectFill"></image>
</view>
<view class="hotel-info">
<view class="hotel-name">{{item.HotelName}}</view>
<view class="hotel-start">
<!-- TODO：判定是否为星级酒店，如果是显示星级，不是，显示另外一种方式 -->
<view class="rate" v-if="hotelType==0">
<u-rate active-color="#FEB969" inactive-color="#FFF" current="4" active-icon="star" inactive-icon="star" disabled></u-rate>
<text style="margin-left: 20rpx;vertical-align: top;">{{item.StarName}}</text>
</view>
<!-- <view class="other-rate" v-if="hotelType==1">
<text>温泉酒店</text>
<span class="line"></span>
</view>
<view class="other-rate" v-if="hotelType==2">
<text>精选民宿</text>
<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 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>
......@@ -35,10 +38,10 @@
<script>
export default {
props:{
hotelType:{
type:Number,
default:0
props: {
HotelList: {
type: Array,
default: null
}
},
data() {
......@@ -46,32 +49,39 @@
key: value
}
},
created() {
console.log(this.HotelList, 'hotel');
},
}
</script>
<style>
.hotel-list-item{
.hotel-list-item {
margin: 30rpx 30rpx 0 30rpx;
padding-bottom: 30rpx;
border-bottom: 1rpx solid #E2E2E2;
display: flex;
align-items: center;
}
.hotel-list-item .img-box{
.hotel-list-item .img-box {
width: 220rpx;
height: 280rpx;
border-radius: 20rpx;
overflow: hidden;
margin-right: 30rpx;
}
.hotel-list-item .img-box image{
.hotel-list-item .img-box image {
width: 100%;
}
.hotel-list-item .hotel-info{
.hotel-list-item .hotel-info {
width: 1px;
flex: 1;
}
.hotel-list-item .hotel-info .hotel-name{
.hotel-list-item .hotel-info .hotel-name {
font-weight: 500;
color: #111111;
line-height: 30rpx;
......@@ -80,27 +90,33 @@
overflow: hidden;
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-weight: 500;
color: #999999;
line-height: 30rpx;
}
.hotel-list-item .hotel-info .hotel-start .other-rate{
.hotel-list-item .hotel-info .hotel-start .other-rate {
display: inline-block;
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;
line-height: 30rpx;
font-weight: 500;
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;
height: 6px;
bottom: 2px;
......@@ -109,12 +125,13 @@
position: absolute;
z-index: 1;
}
.hotel-list-item .hotel-info .localtion{
.hotel-list-item .hotel-info .localtion {
font-size: 24rpx;
font-weight: 400;
color: #999999;
line-height: 30rpx;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
......@@ -123,14 +140,16 @@
-webkit-box-orient: vertical;
margin-bottom: 10rpx;
}
.hotel-list-item .hotel-info .price{
.hotel-list-item .hotel-info .price {
margin-top: 10rpx;
font-weight: 500;
color: #FF3166;
font-size: 20rpx;
text-align: right;
}
.hotel-list-item .hotel-info .price .money{
.hotel-list-item .hotel-info .price .money {
font-size: 36rpx;
}
</style>
pages/hotel/list.vue
View file @ 42932480
......@@ -2,20 +2,20 @@
<view class="hotel-list">
<view class="search-box">
<view class="date" @click="chosenDate">
<view>住 {{searchObj.date.startDay}}</view>
<view>离 {{searchObj.date.endDay}}</view>
<view>住 {{startDay}}</view>
<view>离 {{endDay}}</view>
</view>
<view class="days">{{searchObj.date.day}}晚</view>
<view class="days">{{day}}晚</view>
<view style="width: 1px; flex: 1;">
<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>
<u-search placeholder="关键字/位置/品牌/酒店名" v-model="searchObj.Name" input-align="left" :value="searchObj.Name"
text-color="#111" bg-color="rgba(0,0,0,0)" @change="getList(1)" :show-action="false"></u-search>
</view>
</view>
<view>
<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 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]">
<view class="slot-content" style="padding: 30rpx;background-color: #FFF;">
<view>
......@@ -33,7 +33,7 @@
<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 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 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;">
......@@ -52,21 +52,11 @@
<canlendar @finish="chosenDateResult"></canlendar>
</u-popup>
<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>
<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;">
<hotel-good></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>
<hotel-good :HotelList="HotelList"></hotel-good>
<u-loadmore v-if="showLoading" :status="status" :load-text="loadText" :font-size="24" :margin-top="20"
:margin-bottom="20" bg-color="#F5F5F5" color="#111" />
</scroll-view>
......@@ -85,17 +75,21 @@
value1: 1,
value2: 2,
searchObj:{
searchKey:"",
sort:1,
enclosure:-1,
rateAndPrice:{
price:{},
priceText:"不限",
rate:[]
},
date:{},
moreSearch:[]
pageIndex:1,
pageSize:15,
Name:'', //关键字
StartPrice:0,
EndPrice:1000,
QStartDate:'',
QEndDate:'',
OrderByType:'1', //排序类型
QStars:'', //星级
TagList:[] //查询标签
},
day:0,
startDay:'',
endDay:'',
HotelList:[], //酒店数据
tempRateAndPrice:{
price:{},
priceText:"不限",
......@@ -107,42 +101,8 @@
"价格/星级",
"筛选"
],
rates: [
{
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,
}
],
rates: [],
options1: [], //推荐排序数据
options2: [
{
label: '不限',
......@@ -196,32 +156,6 @@
width: '100%',
background:"#111"
},
threeLevelList:[
{
name:"民宿",
id:0
},
{
name:"大床房",
id:1
},
{
name:"双床房",
id:2
},
{
name:"含早餐",
id:3
},
{
name:"免费取消",
id:4
},
{
name:"优惠活动",
id:5
}
],
loadText: {
loadmore: "轻轻上拉，加载更多",
loading: "努力加载中",
......@@ -233,6 +167,7 @@
},
showLoading:false,
status: "loadmore",
page_count:0
}
},
components: {
......@@ -241,9 +176,9 @@
hotelGood
},
created() {
uni.navigateTo({
url:"/pages/hotel/order"
})
// uni.navigateTo({
// url:"/pages/hotel/order"
// })
uni.setNavigationBarTitle({
title: "酒店",
});
......@@ -261,7 +196,14 @@
key: 'Time',
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: {
scroll: function(e) {
......@@ -275,25 +217,29 @@
},
lower(e) {
// TODO: 滚动到了底部，实现翻页加载
// if (this.msg.pageIndex < this.page_count) {
// this.status = "loading";
// this.msg.pageIndex++;
// this.init();
// } else {
// this.isover = true;
// this.status = "nomore";
// }
if (this.searchObj.pageIndex < this.page_count) {
this.status = "loading";
this.searchObj.pageIndex++;
this.getList();
} else {
this.status = "nomore";
}
},
chosenMorewhere(id){
let i=this.searchObj.moreSearch.indexOf(id)
if(i==-1){
this.searchObj.moreSearch.push(id)
chosenMorewhere(obj){
if(obj.IsCheck==0){
obj.IsCheck=1
}else{
this.searchObj.moreSearch.splice(i,1)
obj.IsCheck=0;
}
this.getList(1);
},
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
},
chosenDate(){
......@@ -312,7 +258,7 @@
},
resetPrice(){
this.optionsTitle[2]="价格/星级"
this.searchObj.rateAndPrice={
this.tempRateAndPrice={
price:{
minValue:0,
maxValue:1000
......@@ -321,6 +267,9 @@
rate:[]
}
this.closeDropdown();
this.searchObj.StartPrice=0;
this.searchObj.EndPrice=1000;
this.getList(1);
},
surePrice(){
let result=""
......@@ -338,10 +287,12 @@
console.log(result)
this.optionsTitle[2]=result
this.$forceUpdate()
this.searchObj.rateAndPrice=this.tempRateAndPrice
this.closeDropdown();
this.getList(1);
},
rangechange4(e){
this.searchObj.StartPrice = e.minValue;
this.searchObj.EndPrice = e.maxValue;
if(e.minValue==0){
if(e.maxValue==1000){
this.tempRateAndPrice.priceText="不限"
......@@ -379,6 +330,7 @@
}
})
this.optionsTitle[0] = temp.label
this.getList(1);
},
change2(index){
if(index!=-1){
......@@ -393,6 +345,62 @@
}else{
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