Skip to content

J
jz_Travel
Commit f8c4bdaf authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent c0b4fe08
Hide whitespace changes
Inline Side-by-side
Showing with 1094 additions and 1055 deletions
pages/hotel/components/hotelRoom.vue
View file @ f8c4bdaf
...@@ -52,26 +52,21 @@ ...@@ -52,26 +52,21 @@
<view class="column"> <view class="column">
<view class="hotelDetailRPrice"> <view class="hotelDetailRPrice">
{{subItem.Currency }} {{subItem.Currency }}
<text> <text v-if="subItem&&subItem.PriceList&&subItem.PriceList.length>0">
{{subItem.TotalPrice}} {{subItem.PriceList[0].Price}}
</text>起/晚 </text>起/晚/间
</view> </view>
<view class="hotelDetailRPriceT">{{dayObj.day}}晚总价 <view class="hotelDetailRPriceT">{{dayObj.day}}晚总价
<text> <text>
{{subItem.Currency}}{{ (subItem.TotalPrice*dayObj.day).toFixed(2) }} {{subItem.Currency}}{{ (subItem.TotalPrice).toFixed(2) }}起
</text> </text>
</view> </view>
</view> </view>
<!--:class="[!index?'active':'']"-->
<view class="column hotelDetailRPriceBook"> <view class="column hotelDetailRPriceBook">
<!--<text v-if="!index" class="hotelDetailMinXiRS">剩2间</text>-->
<view class="hotelDetailMinXiRB" @click="setOrder(subItem)"> <view class="hotelDetailMinXiRB" @click="setOrder(subItem)">
订 订
</view> </view>
</view> </view>
<!-- <view class="hotelDetailRPriceBook" @click="setOrder(subItem)">
订
</view> -->
</view> </view>
</view> </view>
</view> </view>
...@@ -111,13 +106,13 @@ ...@@ -111,13 +106,13 @@
<view class="hotelDetailMinXiRF"> </view> <view class="hotelDetailMinXiRF"> </view>
<view class="hotelDetailMinXiRP"> <view class="hotelDetailMinXiRP">
{{subItem.Currency }} {{subItem.Currency }}
<text> <text v-if="subItem&&subItem.PriceList&&subItem.PriceList.length>0">
{{subItem.TotalPrice}} {{subItem.PriceList[0].Price}}
</text> </text>起/晚/间
</view> </view>
<view class="hotelDetailMinXiRT">{{dayObj.day}}晚总价 <view class="hotelDetailMinXiRT">{{dayObj.day}}晚总价
<text> <text>
{{subItem.Currency}}{{ (subItem.TotalPrice*dayObj.day).toFixed(2) }} {{subItem.Currency}}{{ (subItem.TotalPrice).toFixed(2) }}起
</text> </text>
</view> </view>
</view> </view>
...@@ -405,6 +400,9 @@ ...@@ -405,6 +400,9 @@
hotelid: this.HotelInfo.hotelid, hotelid: this.HotelInfo.hotelid,
name: this.HotelInfo.name, name: this.HotelInfo.name,
images: [], images: [],
address: "",
destination: "",
country: "",
} }
if (this.HotelInfo) { if (this.HotelInfo) {
if (this.HotelInfo.images && this.HotelInfo.images.length > 0) { if (this.HotelInfo.images && this.HotelInfo.images.length > 0) {
...@@ -412,6 +410,17 @@ ...@@ -412,6 +410,17 @@
Path: this.HotelInfo.images[0].url Path: this.HotelInfo.images[0].url
}); });
} }
if (this.HotelInfo.location) {
if (this.HotelInfo.location.address) {
pHotel.address = encodeURIComponent(this.HotelInfo.location.address);
}
if (this.HotelInfo.location.country && this.HotelInfo.location.country.name) {
pHotel.country = this.HotelInfo.location.country.name;
}
if (this.HotelInfo.location.destination && this.HotelInfo.location.destination.name) {
pHotel.destination = this.HotelInfo.location.destination.name;
}
}
} }
uni.navigateTo({ uni.navigateTo({
url: `/pages/hotel/order?searchObj=${JSON.stringify(this.searchObj)}&HotelInfo=${JSON.stringify(pHotel)}&RoomInfo=${JSON.stringify(subItem)}&CreateBy=${createBy}`, url: `/pages/hotel/order?searchObj=${JSON.stringify(this.searchObj)}&HotelInfo=${JSON.stringify(pHotel)}&RoomInfo=${JSON.stringify(subItem)}&CreateBy=${createBy}`,
......
pages/hotel/order.vue
View file @ f8c4bdaf
...@@ -100,8 +100,8 @@ ...@@ -100,8 +100,8 @@
联系姓名 联系姓名
</view> </view>
<view class="val row"> <view class="val row">
<input type="text" v-model="orderMsg.SurName" placeholder="请输入姓" /> <input type="text" v-model="orderMsg.guestLastName" placeholder="请输入姓" />
<input type="text" v-model="orderMsg.Name" placeholder="请输入名" /> <input type="text" v-model="orderMsg.guestFirstName" placeholder="请输入名" />
</view> </view>
</view> </view>
<view class="form-items"> <view class="form-items">
...@@ -146,7 +146,6 @@ ...@@ -146,7 +146,6 @@
<text class="content" style="color:grey" v-else-if="couponList.length==0">暂无优惠券</text> <text class="content" style="color:grey" v-else-if="couponList.length==0">暂无优惠券</text>
<text class="content" v-else <text class="content" v-else
:style="{ color: mainColor }">已优惠{{currentCoupon.discountMoney}} 元</text> :style="{ color: mainColor }">已优惠{{currentCoupon.discountMoney}} 元</text>
<!-- <u-icon name="ellipsis" size="36" v-if="couponList.length > 0"></u-icon> -->
</text> </text>
<u-icon name="arrow" :size="32" color="#111" v-if="couponList.length>0"></u-icon> <u-icon name="arrow" :size="32" color="#111" v-if="couponList.length>0"></u-icon>
</view> </view>
...@@ -166,7 +165,7 @@ ...@@ -166,7 +165,7 @@
<text style="margin-right: 5rpx;">{{orderMsg.RoomCount}}间房</text> <text style="margin-right: 5rpx;">{{orderMsg.RoomCount}}间房</text>
<text style="margin-right: 5rpx;">{{dayObj.day}}晚</text> <text style="margin-right: 5rpx;">{{dayObj.day}}晚</text>
<text class="red"> <text class="red">
{{RoomInfo.Currency}}{{(orderMsg.TotalPrice*orderMsg.RoomCount*dayObj.day).toFixed(2)}} {{RoomInfo.Currency}}{{(orderMsg.TotalPrice).toFixed(2)}}
</text> </text>
</view> </view>
</view> </view>
...@@ -176,16 +175,19 @@ ...@@ -176,16 +175,19 @@
</view> </view>
</view> </view>
<view class="flex f12 grey" style="margin-bottom: 40rpx"> <template
<view style="flex: 1"> v-if="roomRateDetails&&roomRateDetails.RatePlanList&&roomRateDetails.RatePlanList.length>0">
<text style="margin-right: 30rpx">房间</text> <template v-for="subItem in roomRateDetails.RatePlanList">
</view> <view class="flex f12 grey" style="margin-bottom: 40rpx">
<view style="text-align: right"> <view style="flex: 1">
{{orderMsg.RoomCount}}间×{{dayObj.day}}晚×{{RoomInfo.Currency}} <text style="margin-right: 30rpx">房间{{subItem.RoomOccupancy.RoomNum}}</text>
<!--{{ getPrice(orderMsg.TotalPrice) }}--> </view>
{{ orderMsg.TotalPrice }} <view style="text-align: right">
</view> {{(subItem.PriceList.length*subItem.PriceList[0].Price).toFixed(2)}}
</view> </view>
</view>
</template>
</template>
<view class="flex f12 grey" style="margin-bottom: 40rpx" <view class="flex f12 grey" style="margin-bottom: 40rpx"
:style="{'color':mainColor+' !important'}" v-if="useCouponIds.length>0"> :style="{'color':mainColor+' !important'}" v-if="useCouponIds.length>0">
<view style="flex: 1"> <view style="flex: 1">
...@@ -198,8 +200,7 @@ ...@@ -198,8 +200,7 @@
<view style="flex: 1">小计</view> <view style="flex: 1">小计</view>
<view> <view>
{{RoomInfo.Currency}} {{RoomInfo.Currency}}
<!--{{ (getPrice(orderMsg.TotalPrice)*orderMsg.RoomCount)-currentCoupon.discountMoney }}--> {{ (orderMsg.TotalPrice-currentCoupon.discountMoney).toFixed(2) }}
{{ ((orderMsg.TotalPrice*orderMsg.RoomCount*dayObj.day)-currentCoupon.discountMoney).toFixed(2) }}
</view> </view>
</view> </view>
</view> </view>
...@@ -210,7 +211,7 @@ ...@@ -210,7 +211,7 @@
<text class="">购买说明</text> <text class="">购买说明</text>
</view> </view>
<view class="rule"> <view class="rule">
<text class="king"> <text class="king">
</text> </text>
<text v-if="roomRateDetails&& <text v-if="roomRateDetails&&
roomRateDetails.CancellationPolicyList && roomRateDetails.CancellationPolicyList &&
...@@ -242,9 +243,7 @@ ...@@ -242,9 +243,7 @@
<view class="price"> <view class="price">
<text class="f11">{{RoomInfo.Currency}}</text> <text class="f11">{{RoomInfo.Currency}}</text>
<text> <text>
<!--{{ (getPrice(orderMsg.TotalPrice)*orderMsg.RoomCount)-currentCoupon.discountMoney }}--> {{ (orderMsg.TotalPrice-currentCoupon.discountMoney).toFixed(2) }}
<!-- {{ (orderMsg.TotalPrice*orderMsg.RoomCount)-currentCoupon.discountMoney }} -->
{{ ((orderMsg.TotalPrice*orderMsg.RoomCount*dayObj.day)-currentCoupon.discountMoney).toFixed(2) }}
</text> </text>
</view> </view>
<view class="sum-detail">共计 {{orderMsg.RoomCount}}间房</view> <view class="sum-detail">共计 {{orderMsg.RoomCount}}间房</view>
...@@ -259,9 +258,7 @@ ...@@ -259,9 +258,7 @@
<u-toast ref="uToast" /> <u-toast ref="uToast" />
<u-picker mode="selector" v-model="showCountry" :default-selector="[0]" :range="countrys" <u-picker mode="selector" v-model="showCountry" :default-selector="[0]" :range="countrys"
@confirm='(e)=>{changeDown(e,CountryType)}' range-key="label" @input="showCountry=false"></u-picker> @confirm='(e)=>{changeDown(e,CountryType)}' range-key="label" @input="showCountry=false"></u-picker>
<!-- <coupon v-if="couponList.length > 0 && showCoupon" :price="getPrice(orderMsg.TotalPrice)" :list="couponList"
:current="useCouponIds" @close="closeCouponHandler" :order="orderMsg" :numberPeople="searchObj.peoples">
</coupon>-->
<coupon v-if="couponList.length > 0 && showCoupon" :price="orderMsg.TotalPrice" :list="couponList" <coupon v-if="couponList.length > 0 && showCoupon" :price="orderMsg.TotalPrice" :list="couponList"
:current="useCouponIds" @close="closeCouponHandler" :order="orderMsg" :numberPeople="searchObj.peoples"> :current="useCouponIds" @close="closeCouponHandler" :order="orderMsg" :numberPeople="searchObj.peoples">
</coupon> </coupon>
...@@ -306,18 +303,18 @@ ...@@ -306,18 +303,18 @@
RatePlanID: "", RatePlanID: "",
CheckOutDate: "", //离店时间 CheckOutDate: "", //离店时间
RoomCount: "", //房间数量 RoomCount: "", //房间数量
guestLastName: "张", //英文姓 guestLastName: "", //英文姓
guestFirstName: "无误", //英文名 guestFirstName: "", //英文名
guestAddress: "", guestAddress: "",
guestPhoneNumber: "13344445555", guestPhoneNumber: "",
guestEmail: "123@qq.com", //Email guestEmail: "", //Email
BookingID: "", BookingID: "",
HotelName: "", //酒店名称 HotelName: "", //酒店名称
HotelPic: "", //酒店封面 HotelPic: "", //酒店封面
GuestList: [], GuestList: [],
TotalPrice: 0, //总价 TotalPrice: 0, //总价
CustomerPayMoney: 0, CustomerPayMoney: 0,
DiscountMoney: 0, //优惠 DiscountMoney: 0, //优惠金额
CouponAllotIds: '', //优惠券Id CouponAllotIds: '', //优惠券Id
// #ifdef MP-DI // #ifdef MP-DI
OrderSource: 7, OrderSource: 7,
...@@ -395,7 +392,7 @@ ...@@ -395,7 +392,7 @@
this.searchObj = JSON.parse(options.searchObj) this.searchObj = JSON.parse(options.searchObj)
} }
if (options.HotelInfo) { if (options.HotelInfo) {
this.HotelInfo = JSON.parse(options.HotelInfo) this.HotelInfo = JSON.parse(options.HotelInfo);
this.orderMsg.hotelId = this.HotelInfo.hotelid; this.orderMsg.hotelId = this.HotelInfo.hotelid;
this.orderMsg.HotelName = this.HotelInfo.name; this.orderMsg.HotelName = this.HotelInfo.name;
if (this.HotelInfo.images && this.HotelInfo.images.length > 0) { if (this.HotelInfo.images && this.HotelInfo.images.length > 0) {
...@@ -504,8 +501,8 @@ ...@@ -504,8 +501,8 @@
guestInfo += `儿童${this.searchObj.childrenNumberZC}; `; guestInfo += `儿童${this.searchObj.childrenNumberZC}; `;
} }
let msg = { let msg = {
SurName: this.orderMsg.SurName, SurName: this.orderMsg.guestLastName,
Name: this.orderMsg.Name, Name: this.orderMsg.guestFirstName,
ContactNumber: this.orderMsg.guestPhoneNumber, ContactNumber: this.orderMsg.guestPhoneNumber,
Mailbox: this.orderMsg.guestEmail, Mailbox: this.orderMsg.guestEmail,
GoodsId: this.HotelInfo.hotelid, GoodsId: this.HotelInfo.hotelid,
...@@ -543,7 +540,7 @@ ...@@ -543,7 +540,7 @@
} }
//道旅酒店参数 //道旅酒店参数
let that = this; let that = this;
var CreateBy = 0
//直客 //直客
// #ifdef MP-DI // #ifdef MP-DI
if (this.customer.salesBaseInfo && this.customer.salesBaseInfo.employeeId) { if (this.customer.salesBaseInfo && this.customer.salesBaseInfo.employeeId) {
...@@ -863,7 +860,6 @@ ...@@ -863,7 +860,6 @@
} }
return msg return msg
}, },
} }
} }
</script> </script>
......
pages/hotel/orderInfor.vue
View file @ f8c4bdaf
<template> <template>
<view class="hotel-detail" v-if="roomRateDetails.RatePlanList&&roomRateDetails.RatePlanList.length>0"> <view class="hotel-detail" v-if="roomRateDetails.RatePlanList&&roomRateDetails.RatePlanList.length>0">
<scroll-view <scroll-view ref="scrollView" scroll-y="true" style="width: 100%; height: 100%" @scroll="scroll"
ref="scrollView" :scroll-top="scrollTop">
scroll-y="true" <view class="media" :style="{ opacity: 100 - boxOption + '%' }" @click="openPicture">
style="width: 100%; height: 100%" <u-swiper :list="HotelInfo.images" mode="number" :effect3d="false" :height="545" :interval="5000"
@scroll="scroll" :border-radius="0" name="Path"></u-swiper>
:scroll-top="scrollTop" <!-- #ifdef MP-WEIXIN -->
> <view @click="goback" :style="[titleStyle, { opacity: '100% !important' }]"
<view style="position: fixed; top: 0; left: 0; padding-left: 6rpx">
class="media" <u-icon name="arrow-left" size="44" color="#FFF" style="margin-top: 22rpx"></u-icon>
:style="{ opacity: 100 - boxOption + '%' }" </view>
@click="openPicture" <!-- #endif -->
> <view class="orderIforDiZhi">
<u-swiper <view class="orderIforDiZhiL">{{ HotelInfo.name }}</view>
:list="HotelInfo.images" <view class="orderIforDiZhiR row">
mode="number" <view class="orderIforDiZhiRImg">
:effect3d="false" <img style="width: 23rpx;height:28rpx;"
:height="545" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638766148323678002.png" />
:interval="5000" </view>
:border-radius="0" <view class="orderIforDiZhiRText">
name="Path" {{ HotelInfo.address }},
></u-swiper> {{ HotelInfo.destination }},
<!-- {{ HotelInfo.country }}
<view class="video-box" v-if="active == 0"> </view>
<video </view>
id="myVideo" </view>
:src="detailData.VideoUrl" </view>
style="width: 100%; height: 100%" <view class="hotel-title" :style="[titleStyle]">
:controls="controls" <view @click="goback">
:show-center-play-btn="false" <!-- #ifdef MP-WEIXIN -->
:show-fullscreen-btn="false" <u-icon name="arrow-left" size="44"></u-icon>
@fullscreenchange="videoControl" <!-- #endif -->
object-fit="fill" </view>
></video> <view style="flex: 1; margin-left: 30rpx; text-align: left" class="name-ali">
<view @click="enlarge" class="play-btn"> {{ HotelInfo.name }}
播放按钮 </view>
<image </view>
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616471847000_345.png" <view class="ReservationInforBox">
style="width: 37rpx; height: 44rpx" <view class="ReservationInforTitle">预定信息</view>
mode="" <view class="ResInforText row-sb-n">
></image> <view class="ResInforL">入住时间</view>
</view> <view class="ResInforR">{{roomMsg.StartDate}}({{getWeek(roomMsg.StartDate)}})</view>
</view>--> </view>
<!-- #ifdef MP-WEIXIN --> <view class="ResInforText row-sb-n">
<view <view class="ResInforL">离店日期</view>
@click="goback" <view class="ResInforR">{{roomMsg.EndDate}}({{getWeek(roomMsg.EndDate)}})</view>
:style="[titleStyle, { opacity: '100% !important' }]" </view>
style="position: fixed; top: 0; left: 0; padding-left: 6rpx" <view class="ResInforText row-sb-n">
> <view class="ResInforL">入住时间</view>
<u-icon <view class="ResInforR">共 {{day}}晚</view>
name="arrow-left" </view>
size="44" <view class="ResInforText row-sb-n">
color="#FFF" <view class="ResInforL">房型</view>
style="margin-top: 22rpx" <view class="ResInforR">{{roomRateDetails.RatePlanList[0].RatePlanName}}({{searchObj.rooms}}间)
></u-icon> </view>
</view> </view>
<!-- #endif --> <view class="ResInforText row-sb-n">
<view class="orderIforDiZhi"> <view class="ResInforL">餐型</view>
<view class="orderIforDiZhiL">{{ HotelInfo.name }}</view> <view class="ResInforR"
<view class="orderIforDiZhiR row"> v-if="roomRateDetails.RatePlanList && roomRateDetails.RatePlanList.length > 0">
<view class="orderIforDiZhiRImg"> <template v-for="( itemp, indexp ) in roomRateDetails.RatePlanList[0].PriceList">
<img <template v-if="!indexp">
style="width: 23rpx;height:28rpx;" {{getMealtype(itemp.MealType)}}
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638766148323678002.png"/> <template v-if="itemp.MealAmount>0">
</view> ×{{itemp.MealAmount}}份
<view class="orderIforDiZhiRText"> </template>
{{ HotelInfo.address }}, </template>
{{ HotelInfo.destination }}, </template>
{{ HotelInfo.country }} </view>
</view> </view>
</view> <view class="ResInforText row-sb-n">
</view> <view class="ResInforL">人数</view>
</view> <view class="ResInforR">最多入住{{ roomRateDetails.RatePlanList[0].MaxOccupancy}}人</view>
<view class="hotel-title" :style="[titleStyle]"> </view>
<view @click="goback"> <view class="ResInforText row-sb-n">
<!-- #ifdef MP-WEIXIN --> <view class="ResInforL">取消政策</view>
<u-icon name="arrow-left" size="44"></u-icon> <view class="ResInforR">
<!-- #endif --> <text v-if="roomRateDetails&&
</view>
<view
style="flex: 1; margin-left: 30rpx; text-align: left"
class="name-ali"
>
{{ HotelInfo.name }}
</view
>
</view>
<view class="ReservationInforBox">
<view class="ReservationInforTitle">预定信息</view>
<view class="ResInforText row-sb-n">
<view class="ResInforL">入住时间</view>
<view class="ResInforR">{{roomMsg.StartDate}}({{getWeek(roomMsg.StartDate)}})</view>
</view>
<view class="ResInforText row-sb-n">
<view class="ResInforL">离店日期</view>
<view class="ResInforR">{{roomMsg.EndDate}}({{getWeek(roomMsg.EndDate)}})</view>
</view>
<view class="ResInforText row-sb-n">
<view class="ResInforL">入住时间</view>
<view class="ResInforR">共 {{day}}晚</view>
</view>
<view class="ResInforText row-sb-n">
<view class="ResInforL">房型</view>
<view class="ResInforR">{{roomRateDetails.RatePlanList[0].RatePlanName}}({{searchObj.rooms}}间)</view>
</view>
<view class="ResInforText row-sb-n">
<view class="ResInforL">餐型</view>
<view class="ResInforR" v-if="roomRateDetails.RatePlanList && roomRateDetails.RatePlanList.length > 0">
<template v-for="( itemp, indexp ) in roomRateDetails.RatePlanList[0].PriceList" >
<template v-if="!indexp">
{{getMealtype(itemp.MealType)}}
<template v-if="itemp.MealAmount>0">
×{{itemp.MealAmount}}份
</template>
</template>
</template>
</view>
</view>
<view class="ResInforText row-sb-n">
<view class="ResInforL">人数</view>
<view class="ResInforR">最多入住{{ roomRateDetails.RatePlanList[0].MaxOccupancy}}人</view>
</view>
<view class="ResInforText row-sb-n">
<view class="ResInforL">取消政策</view>
<view class="ResInforR">
<text v-if="roomRateDetails&&
roomRateDetails.CancellationPolicyList && roomRateDetails.CancellationPolicyList &&
roomRateDetails.CancellationPolicyList.length > 0"> roomRateDetails.CancellationPolicyList.length > 0">
<template v-for="(itemCancella, index1) in roomRateDetails.CancellationPolicyList"> <template v-for="(itemCancella, index1) in roomRateDetails.CancellationPolicyList">
<template v-if="index1==0">{{ getformatDateStr(itemCancella.FromDate) }}之前免费取消</template> <template
<template v-if="itemCancella.Amount==roomRateDetails.TotalPrice"> v-if="index1==0">{{ getformatDateStr(itemCancella.FromDate) }}之前免费取消</template>
<template>{{ getformatDateStr(itemCancella.FromDate) }}起不可取消，取消将收取订单全额费用;</template> <template v-if="itemCancella.Amount==roomRateDetails.TotalPrice">
</template> <template>{{ getformatDateStr(itemCancella.FromDate) }}起不可取消，取消将收取订单全额费用;</template>
<template v-else> </template>
<template>{{ getformatDateStr(itemCancella.FromDate) }} <template v-else>
<template v-if="index1!=(roomRateDetails.CancellationPolicyList.length-1)"> <template>{{ getformatDateStr(itemCancella.FromDate) }}
-{{ getformatDateStr(roomRateDetails.CancellationPolicyList[index1+1].FromDate) }} 之间</template> <template v-if="index1!=(roomRateDetails.CancellationPolicyList.length-1)">
取消，收费 {{DanWei}}{{getPrice(itemCancella.Amount)}};</template> -{{ getformatDateStr(roomRateDetails.CancellationPolicyList[index1+1].FromDate) }}
</template> 之间</template>
</template> 取消，收费 {{DanWei}}{{getPrice(itemCancella.Amount)}};</template>
</template>
</template>
</text> </text>
</view> </view>
</view> </view>
</view> </view>
<view class="ReservationInforBox"> <view class="ReservationInforBox">
<view class="ReservationInforTitle" @click="goback">立即确认</view> <view class="ReservationInforTitle" @click="goback">立即确认</view>
<view class="ResInforText ResInforTtisp row-sb-n"> <view class="ResInforText ResInforTtisp row-sb-n">
<view class="ResInforTisp">订单提交后，酒店将立即确认您的订单，保障您的住房需求。</view> <view class="ResInforTisp">订单支付后，酒店将立即确认您的订单，保障您的住房需求。</view>
</view> </view>
</view> </view>
<view style="height: 36rpx;"></view> <view style="height: 36rpx;"></view>
</scroll-view> </scroll-view>
</view> </view>
</template> </template>
<script> <script>
import roomGood from "./components/room-good.vue"; import roomGood from "./components/room-good.vue";
import nearGood from "./components/near-good.vue"; import nearGood from "./components/near-good.vue";
import recommedHotel from "./components/recommed-hotel.vue"; import recommedHotel from "./components/recommed-hotel.vue";
import canlendar from "./components/time/index.vue"; import canlendar from "./components/time/index.vue";
import hotelRoom from "./components/hotelRoom.vue"; import hotelRoom from "./components/hotelRoom.vue";
import hotelInfor from "./components/hotelInfor.vue"; import hotelInfor from "./components/hotelInfor.vue";
import hotelPolicy from "./components/hotelPolicy.vue"; import hotelPolicy from "./components/hotelPolicy.vue";
import hotelFacilities from "./components/hotelFacilities.vue"; import hotelFacilities from "./components/hotelFacilities.vue";
export default { export default {
components: { components: {
roomGood, roomGood,
nearGood, nearGood,
recommedHotel, recommedHotel,
canlendar, canlendar,
hotelInfor, hotelInfor,
hotelPolicy, hotelPolicy,
hotelFacilities, hotelFacilities,
hotelRoom, hotelRoom,
}, },
data() { data() {
return { return {
imgsList: [], imgsList: [],
id: 0, id: 0,
typeList: [ typeList: [{
{ Id: 0,
Id: 0, Name: "视频",
Name: "视频", },
}, {
{ Id: 1,
Id: 1, Name: "图片",
Name: "图片", },
}, ],
], boxOption: 0,
boxOption: 0, titleStyle: {
titleStyle: { opacity: 0,
opacity: 0, },
}, mainColor: "",
mainColor: "", controls: false,
controls: false, videoUrl: "https://video.c-ctrip.com/videos/230i1r000001hxb2mEEE4.mp4",
videoUrl: "https://video.c-ctrip.com/videos/230i1r000001hxb2mEEE4.mp4", active: 1,
active: 1, islike: false,
islike: false, nearbyType: 0,
nearbyType: 0, roomMsg: {
roomMsg: { HotelId: 0,
HotelId: 0, StartDate: "",
StartDate: "", EndDate: "",
EndDate: "", },
}, day: 0,
day: 0, threeLevelList: [{
threeLevelList: [ name: "单人床",
{ id: 1,
name: "单人床", isCheck: 0,
id: 1, },
isCheck: 0, {
}, name: "大床房",
{ id: 2,
name: "大床房", isCheck: 0,
id: 2, },
isCheck: 0, {
}, name: "双床房",
{ id: 3,
name: "双床房", isCheck: 0,
id: 3, },
isCheck: 0, {
}, name: "含早餐",
{ id: 4,
name: "含早餐", isCheck: 0,
id: 4, },
isCheck: 0, {
}, name: "可取消",
{ id: 5,
name: "可取消", isCheck: 0,
id: 5, },
isCheck: 0, ],
}, RoomList: [], //可过滤房间
], dataList: {}, //数据
RoomList: [], //可过滤房间 isShowAll: false, //显示全部
dataList: {}, //数据 HotelArr: [], //推荐酒店
isShowAll: false, //显示全部 searchObj: {},
HotelArr: [], //推荐酒店 dayObj: {},
searchObj: {}, hotelData: {}, //传递到房间预订组件
dayObj: {}, startDay: "",
hotelData: {}, //传递到房间预订组件 endDay: "",
startDay: "", Up: 0,
endDay: "", StarImgs: [
Up: 0, 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/hotel3stars.png',
StarImgs: [ 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/hotel4stars.png',
'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/hotel3stars.png', 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/hotel5stars.png',
'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/hotel4stars.png', 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638809441661552596.png',
'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/hotel5stars.png', ],
'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638809441661552596.png', openImg: [
], 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638762717498946531.png',
openImg:[ 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638762717498917358.png'
'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638762717498946531.png', ],
'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638762717498917358.png' optionsTitle: ["房型", "床型", "餐食"],
], hotelFacilities: [{
optionsTitle: ["房型", "床型", "餐食"], Name: '酒店信息',
hotelFacilities: [ ID: 1,
{Name: '酒店信息',ID:1,val:'hotelInfor',top:0,}, val: 'hotelInfor',
{Name: '酒店政策',ID:2,val:'hotelPolicy',top:0,}, top: 0,
{Name: '设施服务',ID:3,val:'hotelFacilities',top:0,}, },
], {
current: 1, Name: '酒店政策',
scrollTop: 100, ID: 2,
old:{ val: 'hotelPolicy',
scrollTop: 0 top: 0,
}, },
HotelInfo:{}, {
roomRateDetails:{}, Name: '设施服务',
params:{}, ID: 3,
HotelMealTypes: [], val: 'hotelFacilities',
}; top: 0,
}, },
created() { ],
this.Up = uni.getStorageSync("mall_UserInfo") current: 1,
? uni.getStorageSync("mall_UserInfo").UserPageType scrollTop: 100,
: 0; old: {
}, scrollTop: 0
onLoad(options) { },
if(options.msg){ HotelInfo: {},
this.params = JSON.parse(decodeURIComponent(options.msg)) roomRateDetails: {},
console.log(JSON.parse(decodeURIComponent(options.msg))) params: {},
} HotelMealTypes: [],
if(options.HotelInfo){ };
this.HotelInfo = JSON.parse(options.HotelInfo) },
console.log(this.HotelInfo,'酒店详情') created() {
} this.Up = uni.getStorageSync("mall_UserInfo") ?
this.id = options.id; uni.getStorageSync("mall_UserInfo").UserPageType :
this.roomMsg.HotelId = options.id; 0;
let that = this; },
uni.getSystemInfo({ onLoad(options) {
success(res) { if (options.msg) {
that.titleStyle = { this.params = JSON.parse(decodeURIComponent(options.msg))
height: "45px", }
paddingTop: `${res.statusBarHeight}px`, if (options.HotelInfo) {
opacity: "0", this.HotelInfo = JSON.parse(options.HotelInfo);
}; if (this.HotelInfo && this.HotelInfo.address) {
}, this.HotelInfo.address = decodeURIComponent(this.HotelInfo.address);
}); }
this.mainColor = this.$uiConfig.mainColor; }
if (options.dayObj) { this.id = options.id;
var tempDay = JSON.parse(options.dayObj); this.roomMsg.HotelId = options.id;
this.roomMsg.StartDate = tempDay.start; let that = this;
this.roomMsg.EndDate = tempDay.end; uni.getSystemInfo({
this.startDay = tempDay.startDay; success(res) {
this.endDay = tempDay.endDay; that.titleStyle = {
this.day = tempDay.day; height: "45px",
this.dayObj = tempDay; paddingTop: `${res.statusBarHeight}px`,
} opacity: "0",
if (options.searchObj) { };
this.searchObj = JSON.parse(options.searchObj); },
} });
this.getdidaMealType() this.mainColor = this.$uiConfig.mainColor;
this.initHotel() if (options.dayObj) {
}, var tempDay = JSON.parse(options.dayObj);
methods: { this.roomMsg.StartDate = tempDay.start;
//日期格式化 this.roomMsg.EndDate = tempDay.end;
this.startDay = tempDay.startDay;
this.endDay = tempDay.endDay;
this.day = tempDay.day;
this.dayObj = tempDay;
}
if (options.searchObj) {
this.searchObj = JSON.parse(options.searchObj);
}
this.getdidaMealType()
this.initHotel()
},
methods: {
//日期格式化
getformatDateStr(value) { getformatDateStr(value) {
var dt = new Date(value); var dt = new Date(value);
let year = dt.getFullYear(); let year = dt.getFullYear();
...@@ -319,705 +286,713 @@ ...@@ -319,705 +286,713 @@
let date = (dt.getDate()).toString().padStart(2, "0"); let date = (dt.getDate()).toString().padStart(2, "0");
return year + "-" + month + "-" + date; return year + "-" + month + "-" + date;
}, },
//获取道旅餐食类型 //获取道旅餐食类型
getdidaMealType() { getdidaMealType() {
this.apipost('dmc_post_GetDidaMealType', {}, res => { this.apipost('dmc_post_GetDidaMealType', {}, res => {
if (res.resultCode == 1) { if (res.resultCode == 1) {
this.HotelMealTypes = res.data; this.HotelMealTypes = res.data;
} }
}, null) }, null)
}, },
//获取餐型 //获取餐型
getMealtype(mealtypeId) { getMealtype(mealtypeId) {
let mealtypeName = ""; let mealtypeName = "";
if (mealtypeId > 0) { if (mealtypeId > 0) {
this.HotelMealTypes.forEach((item) => { this.HotelMealTypes.forEach((item) => {
if (item.ID == mealtypeId) { if (item.ID == mealtypeId) {
mealtypeName = item.Name_CN; mealtypeName = item.Name_CN;
} }
}); });
} }
return mealtypeName; return mealtypeName;
}, },
initHotel() { initHotel() {
uni.showLoading({ uni.showLoading({
title: '加载中...', title: '加载中...',
mask: true mask: true
}); });
this.apipost( this.apipost(
"dmc_post_GetDiDaPriceConfirm",this.params, "dmc_post_GetDiDaPriceConfirm", this.params,
res => { res => {
if (res.resultCode == 1) { if (res.resultCode == 1) {
uni.hideLoading(); uni.hideLoading();
this.roomRateDetails = res.data.PriceDetails.HotelList[0]; this.roomRateDetails = res.data.PriceDetails.HotelList[0];
console.log(this.roomRateDetails,'酒店详情') this.dataList = res.data.PriceDetails;
this.dataList = res.data.PriceDetails; }
} });
},
openPicture() {
let imgObj = JSON.stringify(this.HotelInfo.images);
uni.navigateTo({
url: "/pages/hotel/picture?imgObj=" + imgObj,
});
},
getMonth(date) {
let m = date.getMonth() + 1;
return m > 9 ? m : "0" + m;
},
getDay(date) {
let d = date.getDate();
return d > 9 ? d : "0" + d;
},
getWeek(date) {
var weekArray = new Array("日", "一", "二", "三", "四", "五", "六");
var week = weekArray[new Date(date).getDay()]; //注意此处必须是先new一个Date
return "周" + week;
},
previewImage(i) {
uni.previewImage({
urls: this.imgsList,
current: i,
longPressActions: {
itemList: ["发送给朋友", "保存图片", "收藏"],
success: function(data) {},
fail: function(err) {
},
},
});
},
scroll(e) {
this.old.scrollTop = e.detail.scrollTop
this.boxOption = Math.floor((e.detail.scrollTop - 50) / 1.5);
this.titleStyle.opacity =
e.detail.scrollTop - 100 < 0 ?
0 :
Math.floor(e.detail.scrollTop - 100) / 100 > 1 ?
1 :
Math.floor(e.detail.scrollTop - 100) / 100;
this.$forceUpdate();
},
enlarge(file) {
// 全屏
this.videoContext = uni.createVideoContext("myVideo");
this.videoContext.requestFullScreen({
direction: 0,
}); });
}, },
openPicture() { videoControl(e) {
let imgObj = JSON.stringify(this.HotelInfo.images); if (e.detail.fullScreen == false) {
uni.navigateTo({ this.videoContext.stop();
url: "/pages/hotel/picture?imgObj=" + imgObj, this.controls = false;
}); } else {
}, this.videoContext.play();
getMonth(date) { this.controls = true;
let m = date.getMonth() + 1; }
return m > 9 ? m : "0" + m; },
}, goback() {
getDay(date) { uni.navigateBack({
let d = date.getDate(); delta: -1,
return d > 9 ? d : "0" + d; });
}, },
getWeek(date) { // #ifdef MP-WEIXIN
var weekArray = new Array("日", "一", "二", "三", "四", "五", "六"); //分享朋友圈
var week = weekArray[new Date(date).getDay()]; //注意此处必须是先new一个Date onShareTimeline() {
return "周" + week; let uid = uni.getStorageSync("mall_UserInfo") ?
}, uni.getStorageSync("mall_UserInfo").UserId :
previewImage(i) { 0;
uni.previewImage({ if (uid == 0) {
urls: this.imgsList, uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
current: i, }
longPressActions: { let SmallShopId = uni.getStorageSync("mall_UserInfo") ?
itemList: ["发送给朋友", "保存图片", "收藏"], uni.getStorageSync("mall_UserInfo").SmallShopId :
success: function (data) {}, 0;
fail: function (err) { if (SmallShopId == 0) {
// console.log(err.errMsg); //如果微店id为0 去找所属微店id
}, SmallShopId = uni.getStorageSync("mall_UserInfo") ?
}, uni.getStorageSync("mall_UserInfo").UserSmallShopId :
}); 0;
}, }
scroll(e) { let title = this.dataList.HotelName ? this.dataList.HotelName : "帖子";
this.old.scrollTop = e.detail.scrollTop let imageUrl =
this.boxOption = Math.floor((e.detail.scrollTop - 50) / 1.5); this.dataList.HotelImg && this.dataList.HotelImg.length > 0 ?
this.titleStyle.opacity = this.dataList.HotelImg[0] :
e.detail.scrollTop - 100 < 0 "";
? 0 let id = this.id;
: Math.floor(e.detail.scrollTop - 100) / 100 > 1 return {
? 1 title: title,
: Math.floor(e.detail.scrollTop - 100) / 100; query: "id=" +
this.$forceUpdate(); this.id +
}, "&user_id=" +
enlarge(file) { uid +
// 全屏 "&SmallShopId=" +
this.videoContext = uni.createVideoContext("myVideo"); SmallShopId +
this.videoContext.requestFullScreen({ "&Up=" +
direction: 0, this.Up +
}); "&JumpType=18" +
}, "&dayObj=" +
videoControl(e) { JSON.stringify(this.dayObj) +
if (e.detail.fullScreen == false) { "&searchObj=" +
this.videoContext.stop(); JSON.stringify(this.searchObj),
this.controls = false; imageUrl: imageUrl,
} else { };
this.videoContext.play(); },
this.controls = true;
} //分享给朋友
}, onShareAppMessage(res) {
goback() { let u = uni.getStorageSync("mall_UserInfo");
uni.navigateBack({ let uid = u.UserId ? u.UserId : 0;
delta: -1, if (uid == 0) {
}); uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
}, }
// #ifdef MP-WEIXIN let SmallShopId = u.SmallShopId ? u.SmallShopId : 0;
//分享朋友圈 if (SmallShopId == 0) {
onShareTimeline() { //如果微店id为0 去找所属微店id
let uid = uni.getStorageSync("mall_UserInfo") SmallShopId = u.UserSmallShopId ? u.UserSmallShopId : 0;
? uni.getStorageSync("mall_UserInfo").UserId }
: 0; return {
if (uid == 0) { title: this.dataList.HotelName ? this.dataList.HotelName : "帖子",
uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0; path: "/pages/index/index?id=" +
} this.id +
let SmallShopId = uni.getStorageSync("mall_UserInfo") "&user_id=" +
? uni.getStorageSync("mall_UserInfo").SmallShopId uid +
: 0; "&SmallShopId=" +
if (SmallShopId == 0) { SmallShopId +
//如果微店id为0 去找所属微店id "&Up=" +
SmallShopId = uni.getStorageSync("mall_UserInfo") this.Up +
? uni.getStorageSync("mall_UserInfo").UserSmallShopId "&JumpType=18" +
: 0; "&dayObj=" +
} JSON.stringify(this.dayObj) +
let title = this.dataList.HotelName ? this.dataList.HotelName : "帖子"; "&searchObj=" +
let imageUrl = JSON.stringify(this.searchObj),
this.dataList.HotelImg && this.dataList.HotelImg.length > 0 imageUrl: this.dataList.HotelImg && this.dataList.HotelImg.length > 0 ?
? this.dataList.HotelImg[0] this.dataList.HotelImg[0] : "",
: ""; };
let id = this.id; },
return { // #endif
title: title, },
query: };
"id=" + </script>
this.id +
"&user_id=" + <style scoped>
uid + @import url("@/asset/css/flex.css");
"&SmallShopId=" +
SmallShopId + .hotel-detail {
"&Up=" + height: 100vh;
this.Up + overflow: hidden;
"&JumpType=18" + width: 100vw;
"&dayObj=" + font-family: "pingfang";
JSON.stringify(this.dayObj) + background: #F3F3F3;
"&searchObj=" + }
JSON.stringify(this.searchObj),
imageUrl: imageUrl, .hotel-detail .flex {
}; display: flex;
}, align-items: center;
}
//分享给朋友
onShareAppMessage(res) { .hotel-detail .f12 {
let u = uni.getStorageSync("mall_UserInfo"); font-size: 24rpx !important;
let uid = u.UserId ? u.UserId : 0; }
if (uid == 0) {
uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0; .hotel-detail .king {
} width: 44rpx;
let SmallShopId = u.SmallShopId ? u.SmallShopId : 0; height: 44rpx;
if (SmallShopId == 0) { border-radius: 50%;
//如果微店id为0 去找所属微店id overflow: hidden;
SmallShopId = u.UserSmallShopId ? u.UserSmallShopId : 0; background: rgba(255, 255, 255, 0.2);
} display: flex;
return { align-items: center;
title: this.dataList.HotelName ? this.dataList.HotelName : "帖子", justify-content: center;
path: position: relative;
"/pages/index/index?id=" + }
this.id +
"&user_id=" + .hotel-detail .regular {
uid + font-weight: 500 !important;
"&SmallShopId=" + }
SmallShopId +
"&Up=" + .hotel-detail .hotel-content {
this.Up + position: relative;
"&JumpType=18" + z-index: 2;
"&dayObj=" + top: -110rpx;
JSON.stringify(this.dayObj) + }
"&searchObj=" +
JSON.stringify(this.searchObj), .hotel-detail .hotel-content .date-box {
imageUrl: margin: 30rpx 0;
this.dataList.HotelImg && this.dataList.HotelImg.length > 0 background: #ecf1f4;
? this.dataList.HotelImg[0] border-radius: 16rpx;
: "", padding: 25rpx;
}; justify-content: space-between;
}, }
// #endif
.hotel-detail .hotel-content .date-box .hr-line {
}, width: 24rpx;
}; height: 4rpx;
</script> background: #222;
margin-right: 24rpx;
<style scoped> }
@import url("@/asset/css/flex.css");
.hotel-detail { .hotel-detail .hotel-content .date-box .ver-line {
height: 100vh; width: 1px;
overflow: hidden; height: 49rpx;
width: 100vw; background: #a8a8a8;
font-family: "pingfang"; opacity: 0.3;
background: #F3F3F3; margin-right: 24rpx;
} }
.hotel-detail .flex { .hotel-detail .hotel-content .date-box .date {
display: flex; font-size: 24rpx;
align-items: center; font-weight: bold;
} color: #111111;
margin-right: 24rpx;
.hotel-detail .f12 { }
font-size: 24rpx !important;
} .hotel-detail .hotel-content .date-box .date .date-week {
font-size: 24rpx;
.hotel-detail .king { font-weight: 500;
width: 44rpx; color: #6e6e6e;
height: 44rpx; margin-left: 18rpx;
border-radius: 50%; }
overflow: hidden;
background: rgba(255, 255, 255, 0.2); .hotel-detail .hotel-content .hotel-more-info {
display: flex; width: 140rpx;
align-items: center; height: 60rpx;
justify-content: center; line-height: 60rpx;
position: relative; background: #ffffff;
} border: 1px solid #111111;
border-radius: 8rpx;
.hotel-detail .regular { margin: 0 auto;
font-weight: 500 !important; font-size: 24rpx;
} font-weight: 500;
color: #1f1f1f;
.hotel-detail .hotel-content { text-align: center;
position: relative; }
z-index: 2;
top: -110rpx; .hotel-detail .empty-block {
} height: 20rpx;
background-color: #ecf1f4;
.hotel-detail .hotel-content .date-box { }
margin: 30rpx 0;
background: #ecf1f4; .hotel-detail .hotel-content .detail-box {
border-radius: 16rpx; padding: 33rpx 30rpx 0 30rpx;
padding: 25rpx; }
justify-content: space-between;
} .hotel-detail .hotel-content .detail-box .nearby-type {
padding: 0 16rpx;
.hotel-detail .hotel-content .date-box .hr-line { height: 40rpx;
width: 24rpx; line-height: 40rpx;
height: 4rpx; background: #fff;
background: #222; border-radius: 20rpx;
margin-right: 24rpx; margin-right: 10rpx;
}
font-size: 28rpx;
.hotel-detail .hotel-content .date-box .ver-line { font-weight: 500;
width: 1px; color: #1f1f1f;
height: 49rpx; }
background: #a8a8a8;
opacity: 0.3; .hotel-detail .hotel-content .detail-box .nearby-type.active {
margin-right: 24rpx; color: #dfbe6e;
} background: rgba(223, 190, 110, 0.2);
}
.hotel-detail .hotel-content .date-box .date {
font-size: 24rpx; .hotel-detail .hotel-content .title-style-one {
font-weight: bold; font-weight: 500;
color: #111111; font-size: 24rpx;
margin-right: 24rpx; color: #080A09;
} line-height: 43rpx;
text-indent: 21rpx;
.hotel-detail .hotel-content .date-box .date .date-week { }
font-size: 24rpx;
font-weight: 500; .hotel-detail .hotel-content .title-style-one item-title {
color: #6e6e6e; line-height: 36rpx;
margin-left: 18rpx; }
}
.hotel-detail .hotel-content .title-style-one .item-content {
.hotel-detail .hotel-content .hotel-more-info { color: #B99846;
width: 140rpx; margin-left: 5rpx;
height: 60rpx; line-height: 36rpx;
line-height: 60rpx; }
background: #ffffff;
border: 1px solid #111111; .title-style-one li {
border-radius: 8rpx; margin-bottom: 5rpx;
margin: 0 auto; }
font-size: 24rpx;
font-weight: 500; .hotel-detail .hotel-content .big-title {
color: #1f1f1f; position: relative;
text-align: center; font-size: 32rpx;
} font-weight: bold;
margin-bottom: 35rpx;
.hotel-detail .empty-block { }
height: 20rpx;
background-color: #ecf1f4; .hotel-detail .hotel-content .big-title::before {
} display: block;
width: 18rpx;
.hotel-detail .hotel-content .detail-box { height: 18rpx;
padding: 33rpx 30rpx 0 30rpx; background: #E2C27A;
} border-radius: 5rpx;
content: " ";
.hotel-detail .hotel-content .detail-box .nearby-type { position: absolute;
padding: 0 16rpx; left: 0;
height: 40rpx; bottom: -4rpx;
line-height: 40rpx; z-index: 1;
background: #fff; }
border-radius: 20rpx;
margin-right: 10rpx; .hotel-detail .hotel-content .big-title text {
font-size: 34rpx;
font-size: 28rpx; font-weight: bold;
font-weight: 500; color: #1f1f1f;
color: #1f1f1f; position: relative;
} z-index: 2;
}
.hotel-detail .hotel-content .detail-box .nearby-type.active {
color: #dfbe6e; .hotel-detail .hotel-content .hotel-base .hotel-room .room-type {
background: rgba(223, 190, 110, 0.2); /* padding:10rpx 30rpx; */
} display: flex;
align-items: center;
.hotel-detail .hotel-content .title-style-one { overflow-x: auto;
font-weight: 500; flex-wrap: nowrap;
font-size: 24rpx; }
color: #080A09;
line-height: 43rpx; .hotel-detail .hotel-content .hotel-base .room-list {
text-indent: 21rpx; padding-top: 40rpx;
} }
.hotel-detail .hotel-content .title-style-one item-title{
line-height: 36rpx; .hotel-detail .hotel-content .hotel-base .hotel-room .room-type .item {
} padding: 16rpx 30rpx;
.hotel-detail .hotel-content .title-style-one .item-content{ background: #ecf1f4;
color: #B99846; border-radius: 8rpx;
margin-left: 5rpx; margin-right: 26rpx;
line-height: 36rpx; font-size: 22rpx;
} color: #999999;
.title-style-one li{ font-weight: 400;
margin-bottom: 5rpx; flex-shrink: 0;
} }
.hotel-detail .hotel-content .big-title {
position: relative; .hotel-detail .hotel-content .hotel-base .hotel-room .room-type .item.active {
font-size: 32rpx; background: #111111;
font-weight: bold; color: #ffffff;
margin-bottom: 35rpx; }
}
.hotel-detail .hotel-content .hotel-base .hotel-room .room-type .item:last-child {
.hotel-detail .hotel-content .big-title::before { margin-right: 0;
display: block; }
width: 18rpx;
height: 18rpx; .hotel-detail .hotel-content .hotel-base {
background: #E2C27A; /* position: relative;
border-radius: 5rpx;
content: " ";
position: absolute;
left: 0;
bottom: -4rpx;
z-index: 1;
}
.hotel-detail .hotel-content .big-title text {
font-size: 34rpx;
font-weight: bold;
color: #1f1f1f;
position: relative;
z-index: 2;
}
.hotel-detail .hotel-content .hotel-base .hotel-room .room-type {
/* padding:10rpx 30rpx; */
display: flex;
align-items: center;
overflow-x: auto;
flex-wrap: nowrap;
}
.hotel-detail .hotel-content .hotel-base .room-list {
padding-top: 40rpx;
}
.hotel-detail .hotel-content .hotel-base .hotel-room .room-type .item {
padding: 16rpx 30rpx;
background: #ecf1f4;
border-radius: 8rpx;
margin-right: 26rpx;
font-size: 22rpx;
color: #999999;
font-weight: 400;
flex-shrink: 0;
}
.hotel-detail .hotel-content .hotel-base .hotel-room .room-type .item.active {
background: #111111;
color: #ffffff;
}
.hotel-detail
.hotel-content
.hotel-base
.hotel-room
.room-type
.item:last-child {
margin-right: 0;
}
.hotel-detail .hotel-content .hotel-base {
/* position: relative;
top: -140rpx; */ top: -140rpx; */
border-top-left-radius: 60rpx; border-top-left-radius: 60rpx;
border-top-right-radius: 60rpx; border-top-right-radius: 60rpx;
background: url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/hoteldetailbj.png) no-repeat #F3F3F3; background: url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/hoteldetailbj.png) no-repeat #F3F3F3;
background-size: 100% auto; background-size: 100% auto;
padding: 39rpx 0 44rpx 0; padding: 39rpx 0 44rpx 0;
} }
.location { .location {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.location .loc-left { .location .loc-left {
width: 1px; width: 1px;
flex: 1; flex: 1;
} }
.location .loc-left .loc-name { .location .loc-left .loc-name {
font-size: 28rpx; font-size: 28rpx;
font-weight: 800; font-weight: 800;
color: #111111; color: #111111;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.location .loc-left .loc-remark { .location .loc-left .loc-remark {
font-size: 22rpx; font-size: 22rpx;
font-weight: 500; font-weight: 500;
color: #6e6e6e; color: #6e6e6e;
line-height: 34rpx; line-height: 34rpx;
} }
.location .loc-right { .location .loc-right {
font-size: 24rpx; font-size: 24rpx;
font-weight: 500; font-weight: 500;
color: #111111; color: #111111;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.hotel-detail .hotel-content .hotel-base .head { .hotel-detail .hotel-content .hotel-base .head {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 40rpx; margin-bottom: 40rpx;
} }
.hotel-detail .hotel-content .hotel-base .head .hotel-name { .hotel-detail .hotel-content .hotel-base .head .hotel-name {
font-size: 36rpx; font-size: 36rpx;
font-weight: 800; font-weight: 800;
color: #111111; color: #111111;
} }
.hotel-detail .hotel-content .hotel-base .head .hotel-tag { .hotel-detail .hotel-content .hotel-base .head .hotel-tag {
font-size: 22rpx; font-size: 22rpx;
font-weight: 500; font-weight: 500;
color: #6e6e6e; color: #6e6e6e;
} }
.hotel-Opening{
font-weight: 500; .hotel-Opening {
font-size: 24rpx; font-weight: 500;
color: #B99846; font-size: 24rpx;
margin-right: 31rpx; color: #B99846;
margin-bottom: 20rpx; margin-right: 31rpx;
display: inline-block; margin-bottom: 20rpx;
} display: inline-block;
.hotel-tagText{ }
background: #FFFFFF;
border-radius: 4rpx; .hotel-tagText {
border: 1rpx solid #B99846; background: #FFFFFF;
color: #B99846; border-radius: 4rpx;
text-align: center; border: 1rpx solid #B99846;
margin-right: 8rpx; color: #B99846;
margin-bottom: 20rpx; text-align: center;
height: 34rpx; margin-right: 8rpx;
line-height: 26rpx; margin-bottom: 20rpx;
padding: 0 12rpx; height: 34rpx;
display: inline-block; line-height: 26rpx;
} padding: 0 12rpx;
.hotel-detail .hotel-content .hotel-base .head .op-box image { display: inline-block;
width: 58rpx; }
height: 58rpx;
} .hotel-detail .hotel-content .hotel-base .head .op-box image {
width: 58rpx;
.hotel-detail .hotel-content .hotel-base .shebei { height: 58rpx;
padding: 34rpx 0; }
margin-bottom: 34rpx;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); .hotel-detail .hotel-content .hotel-base .shebei {
display: flex; padding: 34rpx 0;
align-items: center; margin-bottom: 34rpx;
} border-bottom: 1px solid rgba(0, 0, 0, 0.1);
display: flex;
.hotel-detail .hotel-content .hotel-base .shebei .sb-left { align-items: center;
width: 1px; }
flex: 1;
/* display: flex; */ .hotel-detail .hotel-content .hotel-base .shebei .sb-left {
align-items: center; width: 1px;
display: -webkit-box; flex: 1;
overflow: auto; /* display: flex; */
margin-right: 20rpx; align-items: center;
} display: -webkit-box;
overflow: auto;
.hotel-detail .hotel-content .hotel-base .shebei .sb-left .sb-item { margin-right: 20rpx;
padding: 7rpx 13rpx; }
background: #ecf1f4;
border-radius: 4rpx; .hotel-detail .hotel-content .hotel-base .shebei .sb-left .sb-item {
font-size: 22rpx; padding: 7rpx 13rpx;
font-weight: 500; background: #ecf1f4;
color: #111111; border-radius: 4rpx;
margin-right: 10rpx; font-size: 22rpx;
} font-weight: 500;
color: #111111;
.hotel-detail .hotel-content .hotel-base .shebei .sb-right { margin-right: 10rpx;
font-size: 24rpx; }
font-weight: 500;
color: #111111; .hotel-detail .hotel-content .hotel-base .shebei .sb-right {
display: flex; font-size: 24rpx;
align-items: center; font-weight: 500;
} color: #111111;
display: flex;
.hotel-detail .hotel-title { align-items: center;
line-height: 45px !important; }
font-size: 16px;
text-align: center; .hotel-detail .hotel-title {
position: fixed; line-height: 45px !important;
left: 0; font-size: 16px;
top: 0; text-align: center;
width: 100%; position: fixed;
color: #111; left: 0;
box-sizing: content-box; top: 0;
z-index: 5; width: 100%;
display: flex; color: #111;
align-items: center; box-sizing: content-box;
background-color: #f6f6f6; z-index: 5;
padding-left: 6rpx; display: flex;
} align-items: center;
background-color: #f6f6f6;
.hotel-detail .media { padding-left: 6rpx;
position: relative; }
z-index: 1;
background: #fff; .hotel-detail .media {
box-shadow: 0rpx 14rpx 40rpx 0rpx rgba(76,76,76,0.06); position: relative;
border-radius: 0rpx 0rpx 40rpx 40rpx; z-index: 1;
overflow: hidden; background: #fff;
} box-shadow: 0rpx 14rpx 40rpx 0rpx rgba(76, 76, 76, 0.06);
border-radius: 0rpx 0rpx 40rpx 40rpx;
.hotel-detail .media .play-btn { overflow: hidden;
position: absolute; }
left: 50%;
top: 50%; .hotel-detail .media .play-btn {
margin-top: -49rpx; position: absolute;
margin-left: -49rpx; left: 50%;
width: 98rpx; top: 50%;
height: 98rpx; margin-top: -49rpx;
border-radius: 20rpx; margin-left: -49rpx;
background-color: rgba(255, 255, 255, 0.4); width: 98rpx;
display: flex; height: 98rpx;
align-items: center; border-radius: 20rpx;
justify-content: center; background-color: rgba(255, 255, 255, 0.4);
} display: flex;
align-items: center;
.hotel-detail .media .video-box { justify-content: center;
background-color: #111; }
height: 545rpx;
position: relative; .hotel-detail .media .video-box {
} background-color: #111;
height: 545rpx;
.hotel-detail .media .type-box { position: relative;
width: 100px; }
height: 50rpx;
position: absolute; .hotel-detail .media .type-box {
background-color: rgba(255, 255, 255, 0.6); width: 100px;
border-radius: 50rpx; height: 50rpx;
left: 50%; position: absolute;
bottom: 80px; background-color: rgba(255, 255, 255, 0.6);
margin-left: -50px; border-radius: 50rpx;
} left: 50%;
bottom: 80px;
.hotel-detail .media .media-info .type-img-box { margin-left: -50px;
background-color: rgba(255, 255, 255, 0.5); }
color: #fff;
display: flex; .hotel-detail .media .media-info .type-img-box {
align-items: center; background-color: rgba(255, 255, 255, 0.5);
height: 96rpx; color: #fff;
width: 96rpx; display: flex;
padding: 8rpx; align-items: center;
border-radius: 12rpx; height: 96rpx;
position: relative; width: 96rpx;
} padding: 8rpx;
border-radius: 12rpx;
.hotel-detail .media .media-info .type-img-box image { position: relative;
height: 80rpx; }
width: 80rpx;
border-radius: 12rpx; .hotel-detail .media .media-info .type-img-box image {
opacity: 0.5; height: 80rpx;
} width: 80rpx;
border-radius: 12rpx;
.hotel-detail .media .media-info .type-img-box .content { opacity: 0.5;
position: absolute; }
left: 0;
top: 0; .hotel-detail .media .media-info .type-img-box .content {
right: 0; position: absolute;
bottom: 0; left: 0;
text-align: center; top: 0;
font-size: 20rpx; right: 0;
color: #fff; bottom: 0;
display: flex; text-align: center;
flex-direction: column; font-size: 20rpx;
align-items: center; color: #fff;
justify-content: center; display: flex;
justify-items: center; flex-direction: column;
} align-items: center;
justify-content: center;
.hotel-detail .media .media-info .type-img-box text { justify-items: center;
font-size: 22rpx; }
font-family: pingfang;
margin-left: 6rpx; .hotel-detail .media .media-info .type-img-box text {
} font-size: 22rpx;
font-family: pingfang;
.hotel-detail .media .media-info { margin-left: 6rpx;
position: absolute; }
background-color: rgba(0, 0, 0, 0.35);
top: 287rpx; .hotel-detail .media .media-info {
bottom: 0; position: absolute;
left: 0; background-color: rgba(0, 0, 0, 0.35);
right: 0; top: 287rpx;
padding: 30rpx 50rpx; bottom: 0;
} left: 0;
right: 0;
.hotel-detail .media .media-info .mi-left { padding: 30rpx 50rpx;
flex: 1; }
}
.detail_ShareBtn { .hotel-detail .media .media-info .mi-left {
width: 100%; flex: 1;
height: 100%; }
position: absolute;
left: 0; .detail_ShareBtn {
top: 0; width: 100%;
opacity: 0; height: 100%;
} position: absolute;
.name-ali { left: 0;
/* #ifdef MP-ALIPAY */ top: 0;
box-sizing: border-box; opacity: 0;
padding-left: 30rpx; }
/* #endif */
} .name-ali {
/* #ifdef MP-ALIPAY */
.orderIforDiZhi{ box-sizing: border-box;
padding: 27rpx 32rpx 41rpx 32rpx; padding-left: 30rpx;
} /* #endif */
.orderIforDiZhiL{ }
font-weight: 800;
font-size: 32rpx; .orderIforDiZhi {
color: #080A09; padding: 27rpx 32rpx 41rpx 32rpx;
padding-bottom: 18rpx; }
}
.orderIforDiZhiRImg{ .orderIforDiZhiL {
width: 23rpx; font-weight: 800;
margin-right: 13rpx; font-size: 32rpx;
} color: #080A09;
.orderIforDiZhiRText{ padding-bottom: 18rpx;
width: 1px; }
flex: 1;
font-weight: 500; .orderIforDiZhiRImg {
font-size: 28rpx; width: 23rpx;
color: #1D1D20; margin-right: 13rpx;
line-height: 38rpx; }
}
.ReservationInforBox{ .orderIforDiZhiRText {
border-radius: 18rpx; width: 1px;
background: #fff; flex: 1;
margin: 28rpx 31rpx 28rpx 31rpx; font-weight: 500;
padding: 37rpx 18rpx 49rpx 18rpx; font-size: 28rpx;
} color: #1D1D20;
.ReservationInforTitle{ line-height: 38rpx;
font-weight: 800; }
font-size: 32rpx;
color: #080A09; .ReservationInforBox {
padding-bottom: 24rpx; border-radius: 18rpx;
} background: #fff;
.ResInforText{ margin: 28rpx 31rpx 28rpx 31rpx;
padding: 21rpx 19rpx; padding: 37rpx 18rpx 49rpx 18rpx;
} }
.ResInforL{
width: 120rpx; .ReservationInforTitle {
text-align: right; font-weight: 800;
margin-right: 57rpx; font-size: 32rpx;
font-weight: 500; color: #080A09;
font-size: 28rpx; padding-bottom: 24rpx;
color: #303133; }
}
.ResInforR{ .ResInforText {
width: 1px; padding: 21rpx 19rpx;
flex: 1; }
font-weight: bold;
font-size: 28rpx; .ResInforL {
color: #080A09; width: 120rpx;
} text-align: right;
.ResInforR.active{ margin-right: 57rpx;
color: #B99846; font-weight: 500;
} font-size: 28rpx;
.ResInforTisp{ color: #303133;
font-weight: 500; }
font-size: 24rpx;
color: #1D1D20; .ResInforR {
line-height: 42rpx; width: 1px;
} flex: 1;
.ResInforText.ResInforTtisp{ font-weight: bold;
padding: 14rpx 19rpx 21rpx 19rpx; font-size: 28rpx;
} color: #080A09;
}
</style>
.ResInforR.active {
\ No newline at end of file color: #B99846;
}
.ResInforTisp {
font-weight: 500;
font-size: 24rpx;
color: #1D1D20;
line-height: 42rpx;
}
.ResInforText.ResInforTtisp {
padding: 14rpx 19rpx 21rpx 19rpx;
}
</style>
\ No newline at end of file
pages/hotel/orderdetails.vue
View file @ f8c4bdaf
...@@ -130,7 +130,7 @@ ...@@ -130,7 +130,7 @@
<view class="ResInforText row-sb-n"> <view class="ResInforText row-sb-n">
<view class="ResInforL Lwidth">联系姓名</view> <view class="ResInforL Lwidth">联系姓名</view>
<view class="ResInforR"> <view class="ResInforR">
{{ orderData.parmResultRoomInfo.SurName }}{{ orderData.parmResultRoomInfo.Name }} {{ orderData.parmResultRoomInfo.guestFirstName }}{{ orderData.parmResultRoomInfo.guestLastName }}
</view> </view>
</view> </view>
<view class="ResInforText row-sb-n"> <view class="ResInforText row-sb-n">
...@@ -169,13 +169,13 @@ ...@@ -169,13 +169,13 @@
<view class="form-items" style="border-bottom: none;padding: 20rpx 0;"> <view class="form-items" style="border-bottom: none;padding: 20rpx 0;">
<view class="label"> 明细 </view> <view class="label"> 明细 </view>
</view> </view>
<view class="flex f12 grey" style="margin-bottom: 40rpx" <view v-if="RatePlanList&&RatePlanList.length>0" class="flex f12 grey" style="margin-bottom: 40rpx"
v-for="(item,index) in orderData.parmResultRoomInfo.GuestList" :key="index"> v-for="(item,index) in RatePlanList" :key="index">
<view style="flex: 1"> <view style="flex: 1">
<text style="margin-right: 30rpx">房间数</text> <text style="margin-right: 30rpx">房间数 {{index+1}}</text>
</view> </view>
<view style="text-align: right"> <view style="text-align: right">
1间({{ item.GuestInfo.length }}人) × {{ DanWei }}{{ orderData.model.RoomPrice }} {{ DanWei }}{{ item.TotalPrice }}
</view> </view>
</view> </view>
...@@ -476,6 +476,8 @@ ...@@ -476,6 +476,8 @@
this.RatePlanList = res.data.parmResult.Success.BookingDetails.Hotel.RatePlanList this.RatePlanList = res.data.parmResult.Success.BookingDetails.Hotel.RatePlanList
this.DanWei = res.data.parmResult.Success.BookingDetails.Hotel.RatePlanList[0].Currency this.DanWei = res.data.parmResult.Success.BookingDetails.Hotel.RatePlanList[0].Currency
this.roomRateDetails = res.data.parmResult.Success.BookingDetails.Hotel this.roomRateDetails = res.data.parmResult.Success.BookingDetails.Hotel
} else {
this.initBookHotel()
} }
res.data.parmResultRoomInfo.GuestList.forEach((item, index) => { res.data.parmResultRoomInfo.GuestList.forEach((item, index) => {
this.roomNum++ this.roomNum++
...@@ -490,6 +492,63 @@ ...@@ -490,6 +492,63 @@
} }
); );
}, },
//未付款是初始化预定房型，餐型等，
initBookHotel() {
var cMsg = {
"sort": 1,
"displayFrom": 1,
"CheckInDate": this.orderData.parmResultRoomInfo.CheckInDate,
"CheckOutDate": this.orderData.parmResultRoomInfo.CheckOutDate,
"searchroomGroup": [],
"ratePlanID": this.orderData.parmResultRoomInfo.RatePlanID,
"imgUrl": "",
"RoomCount": this.orderData.parmResultRoomInfo.RoomCount,
"ChildCount": 0,
"AdultCount": 0,
"OccupancyDetails": [],
"hotelId": this.orderData.parmResultRoomInfo.hotelId
};
if (this.orderData.parmResultRoomInfo.GuestList && this.orderData.parmResultRoomInfo.GuestList.length >
0) {
this.orderData.parmResultRoomInfo.GuestList.forEach(item => {
var rObj = {
"roomNum": item.RoomNum,
"numberOfAdults": item.numberOfAdults,
"numberOfChildren": item.numberOfChildren,
"ChildAgeDetails": item.ChildAgeDetails,
"ChildAgeTexts": []
};
if (item.GuestInfo && item.GuestInfo.length > 0) {
item.GuestInfo.forEach(subItem => {
if (subItem.IsAdult == 0) {
rObj.ChildAgeTexts.push(subItem.Age);
}
})
}
cMsg.searchroomGroup.push(rObj)
})
}
uni.showLoading({
title: '加载中...',
mask: true
});
this.apipost(
"dmc_post_GetDiDaPriceConfirm", cMsg,
res => {
uni.hideLoading();
if (res.resultCode == 1) {
var tempData = res.data;
if (tempData && tempData.PriceDetails && tempData.PriceDetails.HotelList && tempData
.PriceDetails.HotelList.length > 0) {
this.RatePlanList = tempData.PriceDetails.HotelList[0].RatePlanList;
}
}
}, failed => {
uni.hideLoading();
console.log("failed", failed);
});
},
//日期格式化 //日期格式化
getformatDateStr(value) { getformatDateStr(value) {
var dt = new Date(value); var dt = new Date(value);
......
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