947 lines
38 KiB
Vue
947 lines
38 KiB
Vue
<template>
|
|
<view class="waper">
|
|
<u-navbar :autoBack="true" :bgColor="scrollTop > 10 ? '#fff' : 'transparent'" :leftIconColor="scrollTop > 10 ? '#303133' : '#fff'">
|
|
<view slot='center' class="navbar_title">{{scrollTop > 10 ? '酒店详情' : ''}}</view>
|
|
</u-navbar>
|
|
<view class="fixed" v-if="scrollTop > paddingTop" :style="'top: ' + navHeight + 'px;'">
|
|
<view class="tabs_box">
|
|
<view :class="['tabs', isTabs == index ? 'activeTabs' : '']" v-for="(item, index) in tabList" :key="index" @click="changeTab(index)">
|
|
<text>{{item}}</text>
|
|
<view class="line" v-if="isTabs == index"></view>
|
|
</view>
|
|
</view>
|
|
<view class="date" v-if="isType.indexOf(hourRoomClassifyIds) == -1">
|
|
<view class="left" @click="checkInDate">
|
|
<view class="time">
|
|
<view>{{startDatePage}}</view>
|
|
<view>{{startWeekPage}}</view>
|
|
</view>
|
|
<view class="site">{{nightsPage}}晚</view>
|
|
<view class="time">
|
|
<view>{{stopDatePage}}</view>
|
|
<view>{{stopWeekPage}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="right" @click="selectNum">{{numData.room}}间·{{numData.adult + numData.children}}人</view>
|
|
</view>
|
|
<view class="date" v-if="isType.indexOf(hourRoomClassifyIds) != -1">
|
|
<view class="left" @click="checkInDate">
|
|
<view class="time">
|
|
<view>{{startDatePageHour}}</view>
|
|
<view>{{startWeekPageHour}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="swiper">
|
|
<swiper :autoplay="true" :current="current" circular @change="changeSwiper">
|
|
<swiper-item v-for="(i, index) in detail.carouselImage" :key="index">
|
|
<image :src="$utils.setImgUrl(i)" mode=""></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="current">{{current + 1}}/{{detail.imageLength}}</view>
|
|
</view>
|
|
<view class="content">
|
|
<view class="info">
|
|
<view class="title">{{detail.name}}</view>
|
|
<view class="time">
|
|
<view class="left">
|
|
<view class="text">{{detail.openingTime}}年开业</view>
|
|
<view class="tag">
|
|
<view v-for="(m, x) in detail.label" :key="x">{{m}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="right" @click="detailPage">
|
|
<view class="text">详情/设施</view>
|
|
<u-icon name="arrow-right" color="#03AE80" size="28rpx"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="address">
|
|
<view class="left">
|
|
<view class="area" v-if="detail.address">{{detail.address}}</view>
|
|
<view class="msg" v-if="distance != null">
|
|
<view class="msg_icon">
|
|
<image src="../../static/image/eatery/local.png" mode=""></image>
|
|
</view>
|
|
<view class="text">距您{{distance}}公里</view>
|
|
</view>
|
|
</view>
|
|
<view class="right" @click="openLocation">
|
|
<view class="right_icon">
|
|
<image src="../../static/home/location.png" mode=""></image>
|
|
</view>
|
|
<!-- <view class="text">地图</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content_waper">
|
|
<view class="date" v-if="isType.indexOf(hourRoomClassifyIds) == -1">
|
|
<view class="left" @click="checkInDate">
|
|
<view class="time">
|
|
<view>{{startDatePage}}</view>
|
|
<view>{{startWeekPage}}</view>
|
|
</view>
|
|
<view class="site">{{nightsPage}}晚</view>
|
|
<view class="time">
|
|
<view>{{stopDatePage}}</view>
|
|
<view>{{stopWeekPage}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="right" @click="selectNum">{{numData.room}}间·{{numData.adult + numData.children}}人</view>
|
|
</view>
|
|
<view class="date" v-if="isType.indexOf(hourRoomClassifyIds) != -1">
|
|
<view class="left" @click="checkInDate">
|
|
<view class="time">
|
|
<view>{{startDatePageHour}}</view>
|
|
<view>{{startWeekPageHour}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="types_box">
|
|
<scroll-view class="scroll_waper" scroll-x="true">
|
|
<view :class="['types', isType.indexOf(item.roomClassifyIds) != -1 ? 'activeType' : '']" v-for="(item, index) in typesList" :key="index" @click="changeType(item)">
|
|
<text>{{item.name}}</text>
|
|
<image class="atvIcon" v-if="isType.indexOf(item.roomClassifyIds) != -1" src="https://date_active.png" mode=""></image>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view v-if="infoList !== null && infoList.length">
|
|
<view class="recommendText">
|
|
<u-icon name="thumb-up" color="#E54042" size="28rpx"></u-icon>
|
|
<view class="tips">为您推荐的房型</view>
|
|
</view>
|
|
<view class="shop">
|
|
<view class="list" v-for="(i, index) in infoList" :key="index" @click="goDetail(i.id)">
|
|
<view class="img">
|
|
<image :src="$utils.setImgUrl(i.image.split(',')[0])" mode=""></image>
|
|
<view>{{i.image.split(',').length}}</view>
|
|
</view>
|
|
<view :class="['text', !i.quantity ? 'grey' : '']">
|
|
<view class="title">{{i.level2Name}}</view>
|
|
<view class="tag">
|
|
<view v-if="i.bedType">{{i.bedType}}</view>
|
|
<view v-if="i.limitedLivePerson">{{i.limitedLivePerson}}人入住</view>
|
|
<view v-if="i.window">{{i.window}}</view>
|
|
<view v-if="i.breakfast">{{i.breakfast}}</view>
|
|
</view>
|
|
<view class="msg">{{i.cancelRuleTypeDesc}}</view>
|
|
<view class="fot">
|
|
<view class="surplus"><text v-if="i.quantity">剩余{{i.quantity}}间</text></view>
|
|
<view class="money">
|
|
<view>¥{{i.datePrices[0].originalPrice}}</view>
|
|
<view>
|
|
<text>¥</text>{{i.datePrices[0].price}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="btn" @click.stop="reserve(i)">
|
|
<view> {{ i.quantity ? '订' : '满' }} </view>
|
|
<view> {{ i.quantity ? '在线付' : '已订完' }} </view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="recommendList !== null && recommendList.length">
|
|
<view class="recommendText col1">
|
|
<u-icon name="info-circle" color="#03AE80" size="28rpx"></u-icon>
|
|
<view class="tips">可供您自由组合的房型</view>
|
|
</view>
|
|
<view class="shop">
|
|
<view class="list" v-for="(i, index) in recommendList" :key="index" @click="goDetail(i.id)">
|
|
<view class="img">
|
|
<image :src="$utils.setImgUrl(i.image.split(',')[0])" mode=""></image>
|
|
<view>{{i.image.split(',').length}}</view>
|
|
</view>
|
|
<view :class="['text', !i.quantity ? 'grey' : '']">
|
|
<view class="title">{{i.level2Name}}</view>
|
|
<view class="tag">
|
|
<view v-if="i.bedType">{{i.bedType}}</view>
|
|
<view v-if="i.limitedLivePerson">{{i.limitedLivePerson}}人入住</view>
|
|
<view v-if="i.window">{{i.window}}</view>
|
|
<view v-if="i.breakfast">{{i.breakfast}}</view>
|
|
</view>
|
|
<view class="msg">{{i.cancelRuleTypeDesc}}</view>
|
|
<view class="fot">
|
|
<view class="surplus"><text v-if="i.quantity">剩余{{i.quantity}}间</text></view>
|
|
<view class="money">
|
|
<view>¥{{i.datePrices[0].originalPrice}}</view>
|
|
<view>
|
|
<text>¥</text>{{i.datePrices[0].price}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="btn" @click.stop="reserve(i)">
|
|
<view> {{ i.quantity ? '订' : '满' }} </view>
|
|
<view> {{ i.quantity ? '在线付' : '已订完' }} </view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="facilities" id="target">
|
|
<view class="active">
|
|
<text>设施服务</text>
|
|
<image src="../../static/home/title_bg.png" mode=""></image>
|
|
</view>
|
|
<view class="list_box">
|
|
<view class="item" v-for="(item, index) in ssList1" :key="index">
|
|
<image :src="$utils.setImgUrl(item.logo)" mode=""></image>
|
|
<view>{{item.name}}</view>
|
|
</view>
|
|
<view class="item" v-if="!allFlag" v-for="(item, index) in ssList2" :key="index">
|
|
<image :src="$utils.setImgUrl(item.logo)" mode=""></image>
|
|
<view>{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="all" v-if="allFlag" @click="allFlag = !allFlag">
|
|
全部设施
|
|
<u-icon name="arrow-right" color="#03AE80" size="28rpx"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="policy">
|
|
<view class="active">
|
|
<text>订房必读</text>
|
|
<image src="../../static/home/title_bg.png" mode=""></image>
|
|
</view>
|
|
<view class="row">
|
|
<view class="label">城市通知</view>
|
|
<u-parse :content="detail.importantNotice"></u-parse>
|
|
<view class="label">入住限制</view>
|
|
<view class="text">{{detail.checkInWay}}</view>
|
|
</view>
|
|
<view class="col">
|
|
<view class="left">
|
|
<u-icon name="clock" color="rgba(0,0,0,0.85)" size="28rpx"></u-icon>
|
|
</view>
|
|
<view class="right">
|
|
<view>入离时间</view>
|
|
<view>入住时间:{{detail.checkInTime}}之后 离店时间:{{detail.leaveTime}}之前</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<u-popup :show="showPopupDate" :round="10" mode="bottom">
|
|
<view class="date_con" v-if="selected1.length || selected2.length">
|
|
<view class="head">
|
|
<view class="title">选择日期</view>
|
|
<view class="close" @click="closePopup">
|
|
<u-icon name="close" color="#000000" size="36rpx" />
|
|
</view>
|
|
</view>
|
|
<view v-if="isType.indexOf(hourRoomClassifyIds) == -1">
|
|
<wu-calendar :insert="true" mode="range" :date="[startDate, stopDate]" color="#03AE80" :startDate="calendarStartDate1" :endDate="calendarEndDate1" :lunar="true" :monthShowCurrentMonth="true" :selected="selected1" @change="calendarChange1" startText="入住" endText="离店"></wu-calendar>
|
|
<view class="date_fot">
|
|
<view class="bot_box">
|
|
<view class="box1">
|
|
<view class="text">入住</view>
|
|
<view class="date">{{startDateActive}} {{startWeekActive}}</view>
|
|
</view>
|
|
<view class="box2">—</view>
|
|
<view class="box1">
|
|
<view class="text">离店</view>
|
|
<view class="date">{{stopDateActive}} {{stopWeekActive}}</view>
|
|
</view>
|
|
</view>
|
|
<view :class="['btn1', !stopWeekActive ? 'disBtn' : '']" @click="confirm1">确认{{nights}}晚</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="isType.indexOf(hourRoomClassifyIds) != -1">
|
|
<wu-calendar :insert="true" :date="startDateHour" color="#03AE80" :startDate="calendarStartDate2" :endDate="calendarEndDate2" :lunar="true" :monthShowCurrentMonth="true" :selected="selected2" @change="calendarChange2"></wu-calendar>
|
|
<view class="date_fot">
|
|
<view class="bot_box1">
|
|
{{startDateActiveHour}} {{startWeekActiveHour}}入住
|
|
</view>
|
|
<view class="btn1" @click="confirm2">确认</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
navHeight: 0,
|
|
paddingTop: 0,
|
|
scrollTop: 0,
|
|
current: 0,
|
|
tabList: ['预定', '详情'],
|
|
isTabs: 0,
|
|
id: '',
|
|
detail: {},
|
|
infoList: null,
|
|
recommendList: null,
|
|
ssList1: [],
|
|
ssList2: [],
|
|
allFlag: false,
|
|
distance: null,
|
|
numData: {},
|
|
typesList: [],
|
|
isType: [],
|
|
// 钟点房房型id
|
|
hourRoomClassifyIds: null,
|
|
|
|
// 获取房型入住时间参数
|
|
startDateParams: '',
|
|
// 获取房型离店时间参数
|
|
stopDateParams: '',
|
|
// 页面展示入住时间
|
|
startDatePage: '',
|
|
// 页面展示离店时间
|
|
stopDatePage: '',
|
|
// 页面展示入住周几
|
|
startWeekPage: '',
|
|
// 页面展示离店周几
|
|
stopWeekPage: '',
|
|
// 页面展示入住几晚
|
|
nightsPage: 1,
|
|
|
|
// 获取房型钟点房入住时间参数
|
|
startDateParamsHour: '',
|
|
// 页面展示钟点房入住时间
|
|
startDatePageHour: '',
|
|
// 页面展示钟点房入住周几
|
|
startWeekPageHour: '',
|
|
|
|
showPopupDate: false,
|
|
// 弹窗展示选中入住时间
|
|
startDate: '',
|
|
// 弹窗展示选中离店时间
|
|
stopDate: '',
|
|
// 弹窗展示入住时间
|
|
startDateActive: '',
|
|
// 弹窗展示离店时间
|
|
stopDateActive: '',
|
|
// 弹窗展示入住周几
|
|
startWeekActive: '',
|
|
// 弹窗展示离店周几
|
|
stopWeekActive: '',
|
|
// 弹窗日历可选开始日期
|
|
calendarStartDate1: '',
|
|
// 弹窗日历可选结束日期
|
|
calendarEndDate1: '',
|
|
// 弹窗展示入住几晚
|
|
nights: 1,
|
|
|
|
// 弹窗展示钟点房选中入住时间
|
|
startDateHour: '',
|
|
// 弹窗展示钟点房入住时间
|
|
startDateActiveHour: '',
|
|
// 弹窗展示钟点房入住周几
|
|
startWeekActiveHour: '',
|
|
// 弹窗钟点房日历可选开始日期
|
|
calendarStartDate2: '',
|
|
// 弹窗钟点房日历可选结束日期
|
|
calendarEndDate2: '',
|
|
weekList: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
|
|
selected1: [],
|
|
selected2: []
|
|
}
|
|
},
|
|
onPageScroll(e) {
|
|
this.scrollTop = e.scrollTop;
|
|
if (this.scrollTop < this.paddingTop) {
|
|
this.isTabs = 0;
|
|
}
|
|
// uni.createSelectorQuery().select('.date_scroll').boundingClientRect(res => {
|
|
// this.dateScrollTop = res.top;
|
|
// }).exec()
|
|
},
|
|
onShow() {
|
|
this.isType = [];
|
|
// 缓存取房间数、人数
|
|
if (uni.getStorageSync('hotel_room')) {
|
|
this.numData = uni.getStorageSync('hotel_room');
|
|
} else {
|
|
this.numData = {
|
|
room: 1,
|
|
adult: 2,
|
|
children: 0,
|
|
}
|
|
uni.setStorageSync('hotel_room', this.numData);
|
|
uni.setStorageSync('hotel_children', []);
|
|
}
|
|
this.getClassify();
|
|
},
|
|
onLoad (options) {
|
|
this.id = options.id;
|
|
this.navHeight = this.$paddingTop;
|
|
this.paddingTop = this.$paddingTop + uni.upx2px(330);
|
|
|
|
if (uni.getStorageSync('hotel_date')) {
|
|
let hotelDate = uni.getStorageSync('hotel_date');
|
|
let nowDate = this.$moment().format("YYYY-MM-DD");
|
|
if (this.$moment(hotelDate[0]).isBefore(nowDate)) {
|
|
this.getDate();
|
|
this.numData = {
|
|
room: 1,
|
|
adult: 2,
|
|
children: 0,
|
|
}
|
|
uni.setStorageSync('hotel_room', this.numData);
|
|
uni.setStorageSync('hotel_children', []);
|
|
} else {
|
|
this.startDateParams = hotelDate[0];
|
|
this.stopDateParams = hotelDate[1];
|
|
this.startDatePage = this.$moment(hotelDate[0]).format("MM月DD日");
|
|
this.stopDatePage = this.$moment(hotelDate[1]).format("MM月DD日");
|
|
this.startWeekPage = this.weekList[this.$moment(hotelDate[0]).day()];
|
|
this.stopWeekPage = this.weekList[this.$moment(hotelDate[1]).day()];
|
|
this.nightsPage = this.$moment(hotelDate[1]).diff(this.$moment(hotelDate[0]), 'days');
|
|
}
|
|
} else {
|
|
this.getDate();
|
|
}
|
|
|
|
this.startDate = this.startDateParams;
|
|
this.stopDate = this.stopDateParams;
|
|
this.startDateActive = this.startDatePage;
|
|
this.stopDateActive = this.stopDatePage;
|
|
this.startWeekActive = this.startWeekPage;
|
|
this.stopWeekActive = this.stopWeekPage;
|
|
this.nights = this.nightsPage;
|
|
|
|
this.startDateParamsHour = this.startDateParams;
|
|
this.startDatePageHour = this.startDatePage;
|
|
this.startWeekPageHour = this.startWeekPage;
|
|
this.startDateHour = this.startDateParamsHour;
|
|
this.startDateActiveHour = this.startDatePageHour;
|
|
this.startWeekActiveHour = this.startWeekPageHour;
|
|
|
|
|
|
this.getDetail();
|
|
},
|
|
|
|
methods: {
|
|
getDate() {
|
|
this.startDateParams = this.$moment().format("YYYY-MM-DD");
|
|
this.stopDateParams = this.$moment().add(1, 'days').format("YYYY-MM-DD");
|
|
this.startDatePage = this.$moment().format("MM月DD日");
|
|
this.stopDatePage = this.$moment().add(1, 'days').format("MM月DD日");
|
|
this.startWeekPage = this.weekList[this.$moment().day()];
|
|
this.stopWeekPage = this.weekList[this.$moment().add(1, 'days').day()];
|
|
this.nightsPage = 1;
|
|
uni.setStorageSync('hotel_date', [this.startDateParams, this.stopDateParams]);
|
|
},
|
|
async getDetail() {
|
|
let res=await this.$http.homestayId(this.id);
|
|
res.data.carouselImage = res.data.carouselImage.split(',');
|
|
res.data.label = res.data.label.split(',');
|
|
res.data.openingTime = res.data.openingTime.split('-')[0];
|
|
this.detail=res.data;
|
|
this.detail.imageLength = this.detail.carouselImage.length;
|
|
if (this.detail.facilitiesList.length > 8) {
|
|
this.ssList1 = this.detail.facilitiesList.slice(0, 8);
|
|
this.ssList2 = this.detail.facilitiesList.slice(8);
|
|
this.allFlag = true;
|
|
} else {
|
|
this.ssList1 = this.detail.facilitiesList;
|
|
this.ssList2 = [];
|
|
this.allFlag = false;
|
|
}
|
|
uni.getLocation({
|
|
type: 'gcj02',
|
|
isHighAccuracy: true,
|
|
success: (res) => {
|
|
let latitude = res.latitude;
|
|
let longitude = res.longitude;
|
|
if (latitude && longitude) {
|
|
this.getDistance(latitude, longitude, this.detail.latitude, this.detail.longitude);
|
|
}
|
|
}
|
|
})
|
|
},
|
|
async getPriceList() {
|
|
let params = {
|
|
hotelHomestayId: this.id
|
|
}
|
|
let res = await this.$http.hotelLowestPrice(params);
|
|
if (res.data.length) {
|
|
this.calendarStartDate1 = res.data[0].date;
|
|
this.calendarEndDate1 = res.data[res.data.length - 1].date;
|
|
this.selected1 = [];
|
|
res.data.forEach(e => {
|
|
this.selected1.push({
|
|
date: e.date,
|
|
info: '¥' + e.lowerPrice,
|
|
infoColor: '#6ac695'
|
|
})
|
|
})
|
|
} else {
|
|
this.calendarStartDate1 = this.$moment().format("YYYY-MM-DD");
|
|
this.calendarEndDate1 = this.$moment().add(1, 'months').format("YYYY-MM-DD");
|
|
}
|
|
},
|
|
async getHourPriceList() {
|
|
let params = {
|
|
hotelHomestayId: this.id
|
|
}
|
|
let res = await this.$http.hourLowestPrice(params);
|
|
if (res.data.length) {
|
|
this.calendarStartDate2 = res.data[0].date;
|
|
this.calendarEndDate2 = res.data[res.data.length - 1].date;
|
|
this.selected2 = [];
|
|
res.data.forEach(e => {
|
|
this.selected2.push({
|
|
date: e.date,
|
|
info: '¥' + e.lowerPrice,
|
|
infoColor: '#6ac695'
|
|
})
|
|
})
|
|
} else {
|
|
this.calendarStartDate2 = this.$moment().format("YYYY-MM-DD");
|
|
this.calendarEndDate2 = this.$moment().add(1, 'months').format("YYYY-MM-DD");
|
|
}
|
|
},
|
|
async getHouseType() {// 普通房列表
|
|
let ids = [];
|
|
if (this.isType.length) {
|
|
this.isType.forEach(e => {
|
|
ids.push(...e)
|
|
})
|
|
}
|
|
let params = {
|
|
hotelHomestayId: this.id,
|
|
startTime: this.startDateParams,
|
|
endTime: this.stopDateParams,
|
|
roomQuantity: this.numData.room,
|
|
adultQuantity: this.numData.adult,
|
|
roomClassifyIds: ids.join(',')
|
|
}
|
|
let res=await this.$http.classifyList(params);
|
|
this.infoList = res.data.meetConditionRoomClassifyList;
|
|
this.recommendList = res.data.notMeetConditionRoomClassifyList;
|
|
},
|
|
async getHourList() {// 钟点房列表
|
|
let ids = [];
|
|
if (this.isType.length) {
|
|
this.isType.forEach(e => {
|
|
if (this.hourRoomClassifyIds != e) ids.push(...e);
|
|
})
|
|
}
|
|
let params = {
|
|
hotelHomestayId: this.id,
|
|
startTime: this.startDateParamsHour,
|
|
endTime: this.startDateParamsHour,
|
|
roomClassifyIds: ids.join(',')
|
|
}
|
|
let res=await this.$http.hourClassifyList(params);
|
|
this.infoList = res.data.meetConditionRoomClassifyList;
|
|
this.recommendList = res.data.notMeetConditionRoomClassifyList;
|
|
},
|
|
changeType(e) {
|
|
if (e) {
|
|
let index = this.isType.indexOf(e.roomClassifyIds);
|
|
if (index == -1) {
|
|
this.isType.push(e.roomClassifyIds);
|
|
} else {
|
|
this.isType.splice(index, 1);
|
|
}
|
|
let index1 = this.isType.indexOf(this.hourRoomClassifyIds);
|
|
if (index1 == -1) {
|
|
if (!this.selected1.length) this.getPriceList();
|
|
this.getHouseType();
|
|
} else {
|
|
if (!this.selected2.length) this.getHourPriceList();
|
|
this.getHourList();
|
|
}
|
|
} else {
|
|
if (!this.selected1.length) this.getPriceList();
|
|
this.getHouseType();
|
|
}
|
|
},
|
|
async getClassify() {
|
|
let res = await this.$http.homeClassify(this.id);
|
|
this.typesList = res.data;
|
|
let f = this.typesList.find(m => m.name.indexOf('钟点房') != -1)
|
|
if (f) this.hourRoomClassifyIds = f.roomClassifyIds;
|
|
this.changeType();
|
|
},
|
|
getDistance(lat1, lon1, lat2, lon2) {
|
|
const R = 6371; // 地球半径,单位为千米
|
|
const dLat = (lat2 - lat1) * Math.PI / 180;
|
|
const dLon = (lon2 - lon1) * Math.PI / 180;
|
|
const a =
|
|
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
|
|
Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
|
|
Math.sin(dLon / 2) * Math.sin(dLon / 2);
|
|
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
|
const distance = R * c;
|
|
this.distance = distance.toFixed(2); // 保留两位小数
|
|
},
|
|
openLocation () {// 打开位置
|
|
if (this.detail.latitude && this.detail.longitude) {
|
|
let latitude = this.detail.latitude;
|
|
let longitude = this.detail.longitude;
|
|
uni.openLocation({
|
|
latitude: Number(latitude),
|
|
longitude: Number(longitude),
|
|
name: this.detail.name,
|
|
address: this.detail.address,
|
|
})
|
|
}
|
|
},
|
|
changeTab(i) {
|
|
this.isTabs = i;
|
|
if (i == 0) {
|
|
uni.pageScrollTo({
|
|
scrollTop: 0,
|
|
duration: 300
|
|
});
|
|
} else {
|
|
uni.pageScrollTo({
|
|
selector: `#${'target'}`,
|
|
duration: 300,
|
|
})
|
|
}
|
|
},
|
|
detailPage() {
|
|
uni.navigateTo({ url: `/pages/hotel/hotelDetail?id=${this.id}` });
|
|
},
|
|
changeSwiper(e) {
|
|
this.current = e.detail.current;
|
|
},
|
|
goDetail(id) {
|
|
if (this.isType.indexOf(this.hourRoomClassifyIds) == -1) {
|
|
uni.navigateTo({ url: `/pages/hotel/hotelSpecs?id=${id}&hotelId=${this.id}` });
|
|
} else {
|
|
uni.navigateTo({ url: `/pages/hotel/hotelSpecs?id=${id}&hotelId=${this.id}&hourDate=${this.startDateParamsHour}` });
|
|
}
|
|
},
|
|
async reserve(e) {
|
|
if (e.quantity) {
|
|
let info = await this.$http.getUserInfo()
|
|
if (info.code === 200) {
|
|
if (info.data.isBlack) {
|
|
uni.showToast({ mask: true, title: '您是黑名单用户,禁止购票', icon: 'none' })
|
|
} else if (!info.data.mobile || !info.data.name) {
|
|
uni.showToast({ mask: true, title: '请完善个人信息', icon: 'none' })
|
|
setTimeout(() => {
|
|
uni.navigateTo({ url: '/pages/my/myProfile' })
|
|
}, 1500)
|
|
} else {
|
|
if (this.isType.indexOf(this.hourRoomClassifyIds) == -1) {
|
|
uni.navigateTo({ url: `/pages/hotel/confirmOrder?id=${e.id}&hotelId=${this.id}` });
|
|
} else {
|
|
uni.navigateTo({ url: `/pages/hotel/confirmOrder?id=${e.id}&hotelId=${this.id}&hourDate=${this.startDateParamsHour}` });
|
|
}
|
|
}
|
|
} else {
|
|
uni.$u.toast(info.msg);
|
|
}
|
|
}
|
|
},
|
|
confirm1() {
|
|
if (!this.stopWeekActive) {
|
|
uni.showToast({ mask: true, title: '请选择离店日期', icon: 'none' });
|
|
} else {
|
|
this.startDateParams = this.startDate;
|
|
this.stopDateParams = this.stopDate;
|
|
this.startDatePage = this.startDateActive;
|
|
this.stopDatePage = this.stopDateActive;
|
|
this.startWeekPage = this.startWeekActive;
|
|
this.stopWeekPage = this.stopWeekActive;
|
|
this.nightsPage = this.nights;
|
|
this.showPopupDate = false;
|
|
this.getPriceList();
|
|
this.getHouseType();
|
|
uni.setStorageSync('hotel_date', [this.startDateParams, this.stopDateParams]);
|
|
}
|
|
},
|
|
checkInDate() {
|
|
this.showPopupDate = true;
|
|
},
|
|
selectNum() {
|
|
uni.navigateTo({ url: `/pages/hotel/condition` });
|
|
},
|
|
closePopup() {
|
|
this.showPopupDate = false;
|
|
if (this.isType.indexOf(this.hourRoomClassifyIds) == -1) {
|
|
this.startDate = this.startDateParams;
|
|
this.stopDate = this.stopDateParams;
|
|
this.startDateActive = this.startDatePage;
|
|
this.stopDateActive = this.stopDatePage;
|
|
this.startWeekActive = this.startWeekPage;
|
|
this.stopWeekActive = this.stopWeekPage;
|
|
this.nights = this.nightsPage;
|
|
} else {
|
|
this.startDateHour = this.startDateParamsHour;
|
|
this.startDateActiveHour = this.startDatePageHour;
|
|
this.startWeekActiveHour = this.startWeekPageHour;
|
|
}
|
|
},
|
|
calendarChange1(e) {
|
|
this.startDate = e.range.before;
|
|
this.startDateActive = this.$moment(e.range.before).format("MM月DD日");
|
|
this.startWeekActive = this.weekList[this.$moment(e.range.before).day()];
|
|
this.stopDate = e.range.after || '';
|
|
this.stopDateActive = e.range.after ? this.$moment(e.range.after).format("MM月DD日") : '-';
|
|
this.stopWeekActive = e.range.after ? this.weekList[this.$moment(e.range.after).day()] : '';
|
|
this.nights = e.range.data.length ? (e.range.data.length - 1) : '-';
|
|
},
|
|
calendarChange2(e) {
|
|
this.startDateHour = e.fulldate;
|
|
this.startDateActiveHour = this.$moment(e.fulldate).format("MM月DD日");
|
|
this.startWeekActiveHour = this.weekList[this.$moment(e.fulldate).day()];
|
|
},
|
|
confirm2() {
|
|
this.startDateParamsHour = this.startDateHour;
|
|
this.startDatePageHour = this.startDateActiveHour;
|
|
this.startWeekPageHour = this.startWeekActiveHour;
|
|
this.showPopupDate = false;
|
|
this.getHourPriceList();
|
|
this.getHourList();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.fixed {
|
|
position: fixed; left: 0; top: 169rpx; width: 100%; background: #FFFFFF; padding: 24rpx; box-sizing: border-box; z-index: 6;
|
|
.tabs_box {
|
|
display: flex; align-items: center; padding-left: 21rpx; margin-bottom: 26rpx;
|
|
.tabs {
|
|
margin-right: 55rpx; font-size: 28rpx; color: rgba(0,0,0,0.65);
|
|
&:last-child { margin-right: 0; }
|
|
}
|
|
.activeTabs {
|
|
position: relative; font-weight: 500; font-size: 32rpx; color: #03AE80;
|
|
.line { position: absolute; width: 24rpx; height: 4rpx; background: #03AE80; border-radius: 3rpx; left: 50%; bottom: -10rpx; transform: translateX(-50%); }
|
|
}
|
|
}
|
|
.date{
|
|
width: 100%; background: rgba(71,175,195,0.1); border-radius: 18rpx; height: 94rpx; box-sizing: border-box; padding: 0 24rpx; display: flex; justify-content: space-between; align-items: center;
|
|
.left{
|
|
display: flex; align-items: center;
|
|
.time{
|
|
display: flex; align-items: center;
|
|
view{
|
|
&:nth-child(1){ color: rgba(0, 0, 0, 0.85); font-size: 32rpx; font-weight: 500; }
|
|
&:nth-child(2){ color: rgba(0, 0, 0, 0.45); margin-left: 4rpx; font-size: 24rpx; }
|
|
}
|
|
}
|
|
.site{
|
|
margin: 0 24rpx; position: relative; height: 24rpx; line-height: 20rpx; color: #03AE80; box-sizing: border-box; border: 2rpx solid #03AE80; border-radius: 18rpx; padding: 0 8rpx; font-size: 16rpx; font-weight: 500;
|
|
&::after{ content: ""; width: 8rpx; height: 2rpx; background: #03AE80; position: absolute; left: -8rpx; top: 50%; transform: translateY(-50%); }
|
|
&::before{ content: ""; width: 8rpx; height: 2rpx; background: #03AE80; position: absolute; right: -8rpx; top: 50%; transform: translateY(-50%); }
|
|
}
|
|
}
|
|
.right{ color: rgba(0, 0, 0, 0.85); font-size: 28rpx; }
|
|
}
|
|
}
|
|
.swiper{
|
|
width: 100%; height: 492rpx; position: relative;
|
|
swiper{ width: 100%; height: 100%; }
|
|
.current{ padding: 0 20rpx; height: 40rpx; line-height: 40rpx; color: #fff; background: rgba(0, 0, 0, 0.5); font-size: 24rpx; border-radius: 50rpx; position: absolute; right: 24rpx; bottom: 122rpx; }
|
|
}
|
|
.content{
|
|
width: 100%; position: relative; z-index: 5; margin-top: -102rpx;
|
|
.info{
|
|
width: 100%; background: #fff; border-radius: 40rpx 40rpx 0 0; box-sizing: border-box; padding: 32rpx 24rpx 4rpx;
|
|
.title{ line-height: 60rpx; color: rgba(0, 0, 0, 0.85); font-size: 40rpx; font-weight: 600; }
|
|
.time{
|
|
width: 100%; margin-top: 24rpx; border-top: 2rpx solid #ECEAEA; height: 86rpx; box-sizing: border-box; padding-right: 156rpx; position: relative;
|
|
.left{
|
|
width: 100%; height: 100%; position: relative; box-sizing: border-box; padding-left: 145rpx;
|
|
.text{ color: rgba(0, 0, 0, 0.85); font-size: 24rpx; font-weight: 600; position: absolute; left: 0; bottom: 0; height: 84rpx; line-height: 84rpx; }
|
|
.tag{
|
|
width: 100%; font-size: 0; height: 36rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; top: 24rpx;
|
|
view{
|
|
display: inline-block; vertical-align: top; height: 36rpx; line-height: 36rpx; padding: 0 10rpx; background: #F4F4F4; border-radius: 4rpx; color: rgba(0, 0, 0, 0.45); font-size: 20rpx; margin-right: 10rpx;
|
|
&:last-child{ margin-right: 0; }
|
|
}
|
|
}
|
|
}
|
|
.right{
|
|
position: absolute; right: 0; top: 24rpx; height: 36rpx; display: flex; align-items: center;
|
|
.text{ color: #03AE80; font-size: 24rpx; margin-right: 4rpx; }
|
|
}
|
|
}
|
|
.address{
|
|
width: 100%; border-top: 2rpx solid #ECEAEA; box-sizing: border-box; padding: 24rpx 72rpx 24rpx 0; position: relative;
|
|
.left{
|
|
width: 100%; min-height: 88rpx; display: flex; flex-direction: column; justify-content: center;
|
|
.area{ width: 100%; line-height: 42rpx; color: rgba(0, 0, 0, 0.85); font-size: 28rpx; font-weight: 600; }
|
|
.msg{
|
|
margin-top: 8rpx; height: 36rpx; box-sizing: border-box; padding-left: 36rpx; position: relative;
|
|
.msg_icon{ position: absolute; left: 0; top: 6rpx; width: 24rpx; height: 24rpx; }
|
|
.text{ color: rgba(0, 0, 0, 0.45); font-size: 24rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 36rpx; }
|
|
}
|
|
}
|
|
.right{
|
|
position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; justify-content: center; align-items: center;
|
|
.right_icon{
|
|
image{ width: 52rpx; height: 52rpx; }
|
|
}
|
|
.text{ margin-top: 4rpx; color: #03AE80; font-size: 24rpx; }
|
|
}
|
|
}
|
|
}
|
|
.content_waper{
|
|
width: 100%; box-sizing: border-box; padding: 22rpx 24rpx;
|
|
.date{
|
|
width: 100%; background: #fff; border-radius: 18rpx; height: 94rpx; box-sizing: border-box; padding: 0 24rpx; display: flex; justify-content: space-between; align-items: center;
|
|
.left{
|
|
display: flex; align-items: center;
|
|
.time{
|
|
display: flex; align-items: center;
|
|
view{
|
|
&:nth-child(1){ color: rgba(0, 0, 0, 0.85); font-size: 32rpx; font-weight: 500; }
|
|
&:nth-child(2){ color: rgba(0, 0, 0, 0.45); margin-left: 4rpx; font-size: 24rpx; }
|
|
}
|
|
}
|
|
.site{
|
|
margin: 0 24rpx; position: relative; height: 24rpx; line-height: 20rpx; color: #03AE80; box-sizing: border-box; border: 2rpx solid #03AE80; border-radius: 18rpx; padding: 0 8rpx; font-size: 16rpx; font-weight: 500;
|
|
&::after{ content: ""; width: 8rpx; height: 2rpx; background: #03AE80; position: absolute; left: -8rpx; top: 50%; transform: translateY(-50%); }
|
|
&::before{ content: ""; width: 8rpx; height: 2rpx; background: #03AE80; position: absolute; right: -8rpx; top: 50%; transform: translateY(-50%); }
|
|
}
|
|
}
|
|
.right{ color: rgba(0, 0, 0, 0.85); font-size: 28rpx; }
|
|
}
|
|
.types_box {
|
|
width: 100%; height: 96rpx;
|
|
.scroll_waper {width: 100%; height: 100%; white-space: nowrap;}
|
|
.types {
|
|
width: 155rpx; height: 70rpx; display: inline-block; background: #FFFFFF; border-radius: 10rpx; border: 2rpx solid #FFFFFF; margin-right: 22rpx; margin-top: 22rpx;position: relative;
|
|
&:last-child {margin-right: 0;}
|
|
text {position: absolute; width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); font-weight: 500; font-size: 24rpx; color: rgba(0,0,0,0.65); text-align: center; line-height: 1; }
|
|
}
|
|
.activeType {
|
|
border: 2rpx solid #03AE80;
|
|
text {font-size: 28rpx; color: #03AE80;}
|
|
.atvIcon {position: absolute; right: 0; bottom: 0; width: 40rpx; height: 40rpx;}
|
|
}
|
|
}
|
|
.shop{
|
|
width: 100%;
|
|
.list{
|
|
width: 100%; position: relative; box-sizing: border-box; padding: 24rpx; padding-left: 206rpx; border-radius: 18rpx; background: #fff; margin-bottom: 20rpx;
|
|
&:last-child { margin-bottom: 0; }
|
|
.img{
|
|
width: 158rpx; height: 200rpx; position: absolute; left: 24rpx; top: 24rpx;
|
|
image{ border-radius: 10rpx; }
|
|
view{ border-radius: 0 10rpx 0 10rpx; position: absolute; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); color: #fff; text-align: center; line-height: 30rpx; height: 30rpx; font-size: 24rpx; width: 50rpx; }
|
|
}
|
|
.text{
|
|
width: 100%; height: 200rpx; box-sizing: border-box; padding-top: 4rpx; position: relative;
|
|
.title{ line-height: 48rpx; height: 48rpx; color: rgba(0, 0, 0, 0.85); font-size: 32rpx; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.tag{
|
|
margin-top: 10rpx; font-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 36rpx;
|
|
view{
|
|
display: inline-block; vertical-align: top; color: rgba(0, 0, 0, 0.85); font-size: 24rpx; margin-right: 12rpx; line-height: 36rpx;
|
|
&:last-child{ margin-right: 0; }
|
|
}
|
|
}
|
|
.msg{ margin-top: 8rpx; height: 36rpx; color: #03AE80; line-height: 36rpx; font-size: 24rpx; box-sizing: border-box; padding-right: 92rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.fot {
|
|
margin-top: 8rpx; height: 46rpx; display: flex; align-items: center; justify-content: space-between;
|
|
.surplus { font-size: 24rpx; color: #E54042; }
|
|
.money{
|
|
display: flex; align-items: baseline; box-sizing: border-box; padding-right: 92rpx;
|
|
view{
|
|
&:first-child { font-size: 20rpx; color: rgba(0,0,0,0.45); margin-right: 4rpx; text-decoration: line-through; }
|
|
&:last-child {
|
|
font-weight: bold; font-size: 40rpx; color: #E54042;
|
|
text { font-size: 24rpx; color: #E54042; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.btn {
|
|
position: absolute; right: 0; bottom: 0; width: 78rpx; height: 82rpx; border-radius: 10rpx; border: 3rpx solid #03AE80; overflow: hidden; text-align: center; background-color: #03AE80;
|
|
view{
|
|
&:first-child { font-weight: 500; font-size: 32rpx; color: #FFFFFF; line-height: 52rpx; }
|
|
&:last-child { height: 30rxp; line-height: 30rpx; width: 100%; text-align: center; background-color: #FFFFFF; font-size: 20rpx; color: rgba(0,0,0,0.65); }
|
|
}
|
|
}
|
|
}
|
|
.grey {
|
|
.title {color: rgba(0,0,0,0.25);}
|
|
.tag {
|
|
view {color: rgba(0,0,0,0.25);}
|
|
}
|
|
.msg {color: rgba(0,0,0,0.25);}
|
|
.btn {
|
|
border: 3rpx solid #BFBFBF; background-color: #BFBFBF;
|
|
view{
|
|
&:last-child { color: rgba(0,0,0,0.25); }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.recommendText {
|
|
padding: 22rpx 24rpx; display: flex; align-items: center;
|
|
.tips {margin-left: 12rpx; font-size: 24rpx; color: #E54042;}
|
|
}
|
|
.col1 {
|
|
.tips {color: #03AE80;}
|
|
}
|
|
.active{
|
|
position: relative; display: inline-block; vertical-align: top; margin-bottom: 4rpx;
|
|
text{ font-weight: 500; font-size: 36rpx; color: rgba(0,0,0,0.85); }
|
|
image{ width: 72rpx; height: 37rpx; position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); right: -46rpx; display: block; }
|
|
}
|
|
.facilities {
|
|
margin-top: 22rpx; background: #FFFFFF; border-radius: 18rpx; padding: 32rpx 24rpx 24rpx; box-sizing: border-box;
|
|
.list_box {
|
|
display: flex; align-items: center; flex-wrap: wrap;
|
|
.item {
|
|
margin-top: 20rpx; text-align: center; width: 25%;
|
|
image { width: 40rpx; height: 40rpx; }
|
|
view { margin-top: 8rpx; font-size: 24rpx; color: rgba(0,0,0,0.85); }
|
|
}
|
|
}
|
|
.all { margin-top: 24rpx; display: flex; align-items: center; justify-content: center; font-size: 26rpx; color: #03AE80; }
|
|
}
|
|
.policy {
|
|
margin-top: 22rpx; background: #FFFFFF; border-radius: 18rpx; padding: 32rpx 24rpx 24rpx; box-sizing: border-box;
|
|
.row {
|
|
padding-bottom: 24rpx; border-bottom: 1rpx solid #ECEAEA; margin-bottom: 24rpx;
|
|
.label { font-size: 28rpx; color: rgba(0,0,0,0.85); margin: 20rpx 0 12rpx; }
|
|
.text { font-size: 26rpx; color: rgba(0,0,0,0.65); line-height: 30rpx; }
|
|
u-parse { font-size: 26rpx; color: rgba(0,0,0,0.65); line-height: 30rpx; }
|
|
}
|
|
.col {
|
|
margin-top: 20rpx; display: flex; align-items: baseline;
|
|
.right {
|
|
margin-left: 12rpx;
|
|
view {
|
|
&:first-child { font-size: 28rpx; color: rgba(0,0,0,0.85); }
|
|
&:last-child { margin-top: 12rpx; font-size: 26rpx; color: rgba(0,0,0,0.65); }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.date_con {
|
|
padding: 32rpx 0 10rpx; position: relative; max-height: 80vh; overflow: scroll;
|
|
.head {
|
|
position: relative; text-align: center; margin: 0 32rpx 30rpx;
|
|
.title { font-weight: 500; font-size: 34rpx; color: rgba(0,0,0,0.85); }
|
|
.close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
|
|
}
|
|
.date_fot {
|
|
border-top: 1rpx solid #ECEAEA; padding: 30rpx 48rpx 0; box-sizing: border-box;
|
|
.bot_box {
|
|
display: flex; align-items: center; justify-content: space-between; padding: 0 12rpx;
|
|
.box1 {
|
|
flex: 1;
|
|
.text {font-size: 24rpx; color: rgba(0,0,0,0.45); margin-bottom: 8rpx;}
|
|
.date {font-weight: 500; font-size: 30rpx; color: rgba(0,0,0,0.85);}
|
|
}
|
|
.box2 {width: max-content; margin: 0 98rpx; font-weight: 500; font-size: 30rpx; color: rgba(0,0,0,0.85);}
|
|
}
|
|
.bot_box1 { text-align: center; font-weight: 500; font-size: 30rpx; color: rgba(0,0,0,0.85); }
|
|
.btn1 {height: 90rpx;line-height: 90rpx; background: #03AE80; border-radius: 49rpx; font-weight: 500; font-size: 32rpx; color: #FFFFFF; margin-top: 36rpx; text-align: center;}
|
|
.disBtn {background: #DCDCDC;}
|
|
}
|
|
}
|
|
</style> |