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