Skip to content

J
jz_Travel
Commit 25a4d88e authored by youjie's avatar youjie
Browse files
Options

酒店产品相关 布局

parent 43c3269a
Show whitespace changes
Inline Side-by-side
Showing with 2891 additions and 51 deletions
pages.json
View file @ 25a4d88e
......@@ -661,8 +661,8 @@
"path": "description"
}, {
"path": "order"
}, {
"path": "detail",
},{
"path": "detail",//酒店详情
"enablePullDownRefresh": true,
"style": {
"navigationStyle": "custom",
......@@ -671,6 +671,24 @@
"titlePenetrate": "YES"
}
}
},{
"path": "orderInfor",//下单就到信息
"style": {
"navigationStyle": "custom",
"mp-alipay": {
"transparentTitle": "always",
"titlePenetrate": "YES"
}
}
}, {
"path": "orderdetails",//酒店订单详情
"style": {
"navigationStyle": "custom",
"mp-alipay": {
"transparentTitle": "always",
"titlePenetrate": "YES"
}
}
}
]
},
......
pages/hotel/order.vue
View file @ 25a4d88e
......@@ -15,7 +15,7 @@
<view>{{dayObj.day?dayObj.day:''}}晚</view>
</view>
</view>
<view class="o-detail">详情</view>
<view class="o-detail" @click="goUrl">详情</view>
</view>
<view class="room-dateil row items-center">
<view class="room-name">{{HotelInfo.HotelName?HotelInfo.HotelName:''}}</view>
......@@ -62,6 +62,7 @@
</view>
</view>
</view>
<view>
<view class="form-items">
<view class="label">住客姓名</view>
<view class="val">
......@@ -70,15 +71,21 @@
</view>
<view class="form-items">
<view class="label">联系电话</view>
<view class="form-itemsL row"
@click="showCountry=true">
<text>+86</text>
<!--'arrow-up':'arrow-down'-->
<u-icon name="arrow-down" color="#080A09" size="20" />
</view>
<view class="val">
<input type="text" v-model="orderMsg.ConsigneeMobile" placeholder="输入电话号码" />
</view>
</view>
<view class="form-items">
<view class="label">预计到店</view>
<view class="val flex" @click="showtime=true">
<view style="flex: 1;" class="f14">{{orderMsg.ArrivalTime}}</view>
<u-icon name="arrow" color="#D9D9D9" size="20" />
<view class="val flex form-itemsTime" @click="showtime=true">
<view style="flex: 1;" class="f14">{{orderMsg.ArrivalTime}} 房间整晚保留</view>
<!--<u-icon name="arrow" color="#D9D9D9" size="20" />-->
</view>
</view>
<view class="form-items">
......@@ -88,24 +95,42 @@
</view>
</view>
</view>
<view class="empty-block"></view>
<view style="padding:50rpx 40rpx">
</view>
<view class="CouponBox">
<view class="big-title">
<text>优惠券</text>
</view>
<view style="margin-top: 20px;display: flex; align-items: center;">
<view style="font-size: 12px;width:1px;flex:1">请选择优惠券</view>
<view style="display: flex;align-items: center;">
<text style="color:#F20707;font-size: 12px;" @click="showCouponHandler">
<text style="flex: 1;" v-if="useCouponIds == 0 &&couponList.length>0">{{couponList.length}}张可用优惠券</text>
<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>
</view>
</view>
<view class="PriceBox">
<view class="big-title">
<text>费用明细</text>
<text>订单金额</text>
</view>
<view class="form" style="margin:40rpx 0;padding: 0;">
<view class="form-items">
<view class="form" style="margin:20rpx 0 15rpx 0;padding: 0;">
<view class="form-items PriceZaiXian">
<view class="label">
在线支付
</view>
<view class="val f14 regular" style="text-align: right;">
<text style="margin-right: 30rpx;">{{orderMsg.RoomNumber}}人</text>
<text style="margin-right: 30rpx;">{{orderMsg.RoomNumber}}间房</text>
<text class="red">￥{{orderMsg.Final_Price}}</text>
</view>
</view>
<view class="form-items" style="border-bottom: none;">
<view class="form-items PriceMinXi" style="border-bottom: none;">
<view class="label">
房费明细
明细
</view>
</view>
<view class="flex f12 grey" style="margin-bottom:40rpx;" v-for="(item,index) in priceList" :key="index">
......@@ -114,14 +139,19 @@
<text v-if="index!=0">{{item.BreakfastTypeStr}}</text>
</view>
<view style="text-align: right;" v-if="index!=priceList.length-1">{{orderMsg.RoomNumber}}间 × ¥{{$utils.getretailer()==true? item.B2BPrice:item.SalesPrice}}</view>
</view >
<view class="PriceTole row-sb-n">
<view>合计</view>
<view>
¥100
</view>
</view>
</view>
</view>
<view class="empty-block"></view>
<view>
<view class="buyTispBox">
<view class="big-title">
<text class=" f12">订房必知</text>
<text class="">购买说明</text>
</view>
<view class="rule">
<text class="king">此房间
......@@ -131,6 +161,8 @@
<text>订单需要等待酒店或供应商确认后生效，订单确认结果我们将会通知推送到您的微信，请您在下单时同意结果订阅，以便您能正常收到消息。</text>
</view>
</view>
<view style="height: 27rpx"></view>
<!--
<view style="padding:50rpx 40rpx">
<view class="big-title">
<text>重要提醒</text>
......@@ -141,7 +173,7 @@
<view>{{item.Content}}</view>
</view>
</view>
</view>
</view>-->
</view>
</scroll-view>
<view class="opera-box">
......@@ -156,11 +188,24 @@
</view>
<u-picker v-model="showtime" mode="time" @confirm='confirm' :params="params" :default-time='orderMsg.ArrivalTime'></u-picker>
<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="price" :list="couponList"
:current="useCouponIds"
@close="closeCouponHandler"
:current-price="realCurrentPriceInfo"
:order="orderMsg"></coupon>
</view>
</template>
<script>
import coupon from '@/components/coupon/index';
export default{
components: {
coupon
},
data() {
return {
order: {
......@@ -208,6 +253,18 @@
EndDate:''
},
tipsText:'',
showCountry: false,
countrys:[],
couponList: [],
showCoupon: false,
price: 0,
useCouponIds: [],
realCurrentPriceInfo: {},
currentCoupon: {
discountMoney: 0
},
showPz:false,
pzCoupon:null,
}
},
created() {
......@@ -236,8 +293,105 @@
});
this.CalTotalPrice();
this.getRoomPrice();
this.GetCountryInfo()
},
methods:{
goUrl(){
uni.navigateTo({
url: '/pages/hotel/orderInfor'
})
},
showCouponHandler() {
this.showCoupon = this.couponList.length > 0;
},
closeCouponHandler(e) {
if (e != -1) {
this.useCouponIds = e;
//叠加使用优惠券
let TotalDiscountAmount = 0
this.couponList.forEach(x=>{
let findIndex = this.useCouponIds.findIndex(y=>x.id==y)
if(findIndex!=-1){
let discountMoney = 0
if(x.couponsType==1){
discountMoney = x.denomination
}else{
discountMoney = (parseFloat(this.price) * (1 - parseFloat(x.denomination / 10)))
.toFixed(2)
}
TotalDiscountAmount += discountMoney
}
})
if(TotalDiscountAmount)this.currentCoupon.discountMoney = TotalDiscountAmount
else this.currentCoupon.discountMoney = 0
}else{
this.currentCoupon.discountMoney = 0
this.useCouponIds = []
}
this.showCoupon = false;
},
getUserCouponList() {
let couponParams = {
"lineId": '', //线路ID
"lineteamId": 0, //系列ID
"userId": this.customer.accountId,
"CouponsUseScope": 9, //特定使用平台(当地游=8 跟团游=2 小包团=10)
"isExpansion": 0, //是否启动膨胀金1-是
"CustomerType": 0, //客户类型 0-同行，1-直客
"TCID": '',
}
this.apipost(
"coupon_post_GetUserCanUseCouponList", couponParams,
(res) => {
if (res.resultCode == 1) {
console.log("coupon_post_GetUserCanUseCouponList_res", res);
this.couponList = res.data
this.calcPzCouponHandler()
}
},
(err) => {
console.log("coupon_post_GetUserCanUseCouponList_err", err);
}
);
},
usePzCouponHandler(){
this.showPz = false
this.closeCouponHandler([this.pzCoupon.id])
this.pzCoupon = null
},
calcPzCouponHandler(){
this.couponList.forEach((x)=>{
if(x.expansionModel.denomination>0){
if(this.pzCoupon && this.pzCoupon.expansionModel.denomination<x.expansionModel.denomination)
this.pzCoupon=x
else
this.pzCoupon=x
x.realDenomination = x.denomination
x.denomination =x.expansionModel.denomination
}
})
this.showPz = this.pzCoupon?true:false
},
GetCountryInfo(){
this.apipost("GetCountryInfo_post", {}, (r) => {
for (let i = 0; i < r.data.phoneCountList.length; i++) {
let Count = r.data.phoneCountList[i]
let obj = {
...Count,
value: Count.ID,
label: Count.Name,
}
this.countrys.push(obj)
}
})
},
changeDown(e){
let i = [e]
// this.customer.count = this.countrys[i].ID
// this.optionsTitle[0] = this.countrys[i].Name
// this.customer.PhoneCountryStr = '+'+this.countrys[i].PhoneCode
},
editNum(type) {
if (type == 1) {
if(this.orderMsg.RoomNumber>1)this.orderMsg.RoomNumber--;
......@@ -434,27 +588,27 @@
}
.hotel-order .form{
margin-top: 60rpx;
padding:0 45rpx;
padding:0 19rpx 44rpx 19rpx;
background: #fff;
border-radius: 18rpx;
margin: 28rpx 31rpx;
}
.hotel-order .form .form-items{
margin-bottom: 40rpx;
display: flex;
align-items: center;
padding-bottom: 36rpx;
border-bottom:1px solid #f5f5f5;
padding: 22rpx 15rpx;
font-size: 28px;
font-weight: 500;
color: #303133;
}
.hotel-order .form .form-items:last-child{
border-bottom: none;
.hotel-order .form .form-items:first-child{
padding: 10rpx 15rpx 20rpx 15rpx;
}
.hotel-order .form .form-items .label{
width: 112rpx;
font-size: 28rpx;
font-weight: 600;
margin-right: 60rpx;
font-weight: 500;
margin-right: 57rpx;
flex-shrink: 0;
}
.hotel-order .form .form-items .val{
......@@ -575,17 +729,17 @@
}
.hotel-order .big-title::before {
display: block;
width: 71rpx;
height: 12rpx;
background: #DFBE6E;
border-radius: 4rpx;
content: ' ';
// display: block;
// width: 71rpx;
// height: 12rpx;
// background: #DFBE6E;
// border-radius: 4rpx;
// content: ' ';
position: absolute;
left: 0;
bottom: 6rpx;
z-index: 1;
// position: absolute;
// left: 0;
// bottom: 6rpx;
// z-index: 1;
}
.hotel-order .big-title text {
font-size: 34rpx;
......@@ -621,7 +775,7 @@
color: #1D1D20;
}
.visaProductTextBox{
padding: 39rpx 0 21rpx 0;
padding: 29rpx 0 21rpx 0;
font-family: PingFang SC;
}
.visaProductTitle{
......@@ -653,4 +807,64 @@
font-size: 28rpx;
color: #080A09;
}
.form-itemsTime{
font-weight: bold;
font-size: 28rpx;
color: #080A09;
}
.form-itemsL text{
font-weight: bold;
font-size: 28rpx;
color: #B99846;
margin-right: 26rpx;
}
.CouponBox{
margin: 0 31rpx 32rpx 31rpx;
padding: 18rpx 34rpx 35rpx 34rpx;
background: #fff;
border-radius: 18rpx;
}
.PriceBox{
margin: 0 31rpx 32rpx 31rpx;
padding: 18rpx 34rpx 35rpx 34rpx;
background: #fff;
border-radius: 18rpx;
}
.PriceZaiXian{
border-bottom: 1rpx solid #F0F0F0 ;
}
.PriceZaiXian .label{
font-weight: bold;
}
.hotel-order .form .form-items.PriceZaiXian{
padding: 0;
padding-top: 15rpx;
padding-bottom: 20rpx;
}
.hotel-order .form .form-items.PriceMinXi{
padding: 0;
padding-top: 20rpx;
padding-bottom: 30rpx;
}
.PriceTole{
color: #BFB9B9;
}
.buyTispBox{
border-radius: 18rpx;
background: #fff;
margin: 0 31rpx 27rpx 31rpx;
padding: 37rpx 18rpx 47rpx 18rpx;
}
.buyTispBox .big-title{
font-weight: 800;
font-size: 32rpx;
color: #080A09;
margin-bottom: 37rpx;
}
.buyTispBox .rule{
font-weight: 500;
font-size: 24rpx;
color: #1D1D20;
line-height: 42rpx;
}
</style>
pages/hotel/orderInfor.vue 0 → 100644
View file @ 25a4d88e
<template>
<view class="hotel-detail">
<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="dataList.HotelImg"
:effect3d="false"
:height="545"
:interval="5000"
:border-radius="0"
name="Path"
v-if="active == 1"
></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">成田国际花园酒店</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">
95 Cheongpa-ro 20-gil, 龙山区, 首尔, 首尔(及其周边地区)，韩国
</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"
>
{{ dataList.HotelName }}
</view
>
</view>
<view class="ReservationInforBox">
<view class="ReservationInforTitle">预定信息</view>
<view class="ResInforText row-sb-n">
<view class="ResInforL">入住时间</view>
<view class="ResInforR">2025-02-05(周二)</view>
</view>
<view class="ResInforText row-sb-n">
<view class="ResInforL">离店日期</view>
<view class="ResInforR">2025-02-05(周二)</view>
</view>
<view class="ResInforText row-sb-n">
<view class="ResInforL">入住时间</view>
<view class="ResInforR">共 1晚</view>
</view>
<view class="ResInforText row-sb-n">
<view class="ResInforL">房型</view>
<view class="ResInforR">高级双床房(1间)</view>
</view>
<view class="ResInforText row-sb-n">
<view class="ResInforL">餐型</view>
<view class="ResInforR">含早餐 x2份</view>
</view>
<view class="ResInforText row-sb-n">
<view class="ResInforL">窗户</view>
<view class="ResInforR">有窗</view>
</view>
<view class="ResInforText row-sb-n">
<view class="ResInforL">人数</view>
<view class="ResInforR">最多入住2人</view>
</view>
<view class="ResInforText row-sb-n">
<view class="ResInforL">面积</view>
<view class="ResInforR">32㎡</view>
</view>
<view class="ResInforText row-sb-n">
<view class="ResInforL">网络</view>
<view class="ResInforR">WIFI</view>
</view>
<view class="ResInforText row-sb-n">
<view class="ResInforL">楼层数</view>
<view class="ResInforR">1-20</view>
</view>
<view class="ResInforText row-sb-n">
<view class="ResInforL">取消政策</view>
<view class="ResInforR">不可修改</view>
</view>
</view>
<view class="ReservationInforBox">
<view class="ReservationInforTitle">立即确认</view>
<view class="ResInforText ResInforTtisp row-sb-n">
<view class="ResInforTisp">订单提交后，酒店将立即确认您的订单，保障您的住房需求。</view>
</view>
</view>
<view style="height: 36rpx;"></view>
</scroll-view>
<u-popup
v-model="showTimePopup"
mode="bottom"
border-radius="20"
length="85%"
:safe-area-inset-bottom="true"
>
<view style="
width: 100%;
height: 100%;
display: flex;
flex-direction: column;">
<view style="flex: 1; width: 100%; height: 1rpx">
<canlendar @finish="chosenDateResult" title="日期和人数"></canlendar>
</view>
<view style="background: #ecf1f4; padding: 20rpx 0;margin-bottom: 80rpx;">
<view class="row line-flex" style="padding: 30rpx; background: #fff">
<text style="font-size: 28rpx; color: #111; font-weight: 500">房间</text>
<text style="
font-size: 22rpx;
color: #999;
margin-left: 30rpx;
flex: 1;
"></text>
<u-number-box size="28" :min="1" :max="100000" v-model="searchObj.rooms"></u-number-box>
</view>
<view class="row line-flex" style="padding: 30rpx; background: #fff">
<text style="font-size: 28rpx; color: #111; font-weight: 500">成人</text>
<text style="
font-size: 22rpx;
color: #999;
margin-left: 30rpx;
flex: 1;
">18周岁以上</text>
<u-number-box size="28" :min="1"
:max="100000"
v-model="searchObj.adultsNumber"
@change="crChange"></u-number-box>
</view>
<view class="row line-flex" style="padding: 30rpx; background: #fff">
<text style="font-size: 28rpx; color: #111; font-weight: 500">儿童(占床)</text>
<text style="
font-size: 22rpx;
color: #999;
margin-left: 30rpx;
flex: 1;
">2-18周岁(不含)</text>
<u-number-box size="28" :min="0" :max="100000"
v-model="searchObj.childrenNumberZC"
@change="etChange"
></u-number-box>
</view>
</view>
</view>
</u-popup>
</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: "",
showTimePopup: false,
controls: false,
videoUrl: "https://video.c-ctrip.com/videos/230i1r000001hxb2mEEE4.mp4",
active: 1,
islike: false,
nearbyType: 0,
searchObj: {
date: {},
},
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',
],
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
}
};
},
created() {
this.Up = uni.getStorageSync("mall_UserInfo")
? uni.getStorageSync("mall_UserInfo").UserPageType
: 0;
},
onLoad(options) {
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;
} else {
let d1 = new Date();
let d = new Date();
let d2 = new Date(d.setDate(d.getDate() + 1));
let startWeek = "周" + "日一二三四五六".charAt(new Date().getDay());
let endWeek = "周" + "日一二三四五六".charAt(new Date().getDay() + 1);
let month1 = d1.getMonth() + 1;
let day1 = d1.getDate();
let Month1 = month1>9?month1:'0'+month1;
let Day1 = day1>9?day1:'0'+day1;
let month2 = d2.getMonth() + 1;
let day2 = d2.getDate();
let Month2 = month2>9?month2:'0'+month2;
let Day2 = day2>9?day2:'0'+day2;
var obj = {
start: `${d1.getFullYear()}-${Month1}-${Day1}`,
end: `${d2.getFullYear()}-${Month2}-${Day2}`,
startDay: `${Month1}-${Day1}`,
endDay: `${Month2}-${Day2}`,
day: 1,
startWeek: startWeek,
endWeek: endWeek,
};
this.roomMsg.StartDate = obj.start;
this.roomMsg.EndDate = obj.end;
this.startDay = obj.startDay;
this.endDay = obj.endDay;
this.day = obj.day;
this.dayObj = obj;
}
if (this.id > 0) {
this.getHotelDetail(this.id);
}
if (options.searchObj) {
this.searchObj = JSON.parse(options.searchObj);
}
this.getRecomHotel();
},
methods: {
goFacil(item){
this.current = item.ID;
this.scrollTop = this.old.scrollTop
this.$nextTick(function() {
this.scrollTop = item.top
});
},
openTime() {
this.showTimePopup = true;
},
etChange(e){
this.searchObj.childrenNumberZC = e.value;
this.peopleChange()
},
crChange(e){
this.searchObj.adultsNumber = e.value;
this.peopleChange()
},
peopleChange(){
this.searchObj.peoples = this.searchObj.adultsNumber + this.searchObj.childrenNumberZC
console.log(this.searchObj.peoples,'人数')
},
//获取推荐酒店
getRecomHotel() {
this.searchObj.HotelId = this.id;
this.request2(
{
url: "/api/Hotel/AppGetHotelPage",
data: this.searchObj,
},
(res) => {
if (res.resultCode == 1) {
// console.log(res, '推荐酒店');
this.HotelArr = [];
let tempHotel = res.data.pageData;
tempHotel.forEach((x) => {
if (this.HotelArr.length < 2) {
this.HotelArr.push(x);
}
});
}
}
);
},
goMap(name, lon, lat) {
let newLon = parseFloat(lon);
let newLat = parseFloat(lat);
uni.openLocation({
latitude: newLat,
longitude: newLon,
scale: 18,
name: name,
address: name,
success: (res) => {},
fail: (err) => {},
});
},
openPicture() {
let imgObj = JSON.stringify(this.dataList.HotelImg);
uni.navigateTo({
url: "/pages/hotel/picture?imgObj=" + imgObj,
});
},
openDescription() {
let hotelObj = JSON.stringify({
id: this.id,
start: this.dayObj.start,
end: this.dayObj.end,
});
uni.navigateTo({
url:
"/pages/hotel/description?hotelObj=" + encodeURIComponent(hotelObj),
});
},
chosenDateResult(obj) {
this.roomMsg.StartDate = obj.start;
this.roomMsg.EndDate = obj.end;
this.startDay = obj.startDay;
this.endDay = obj.endDay;
this.day = obj.day;
this.getRoomType();
this.dayObj = obj;
this.showTimePopup = false;
},
//切换日期获取房型
getRoomType() {
this.request2(
{
url: "/api/Hotel/GetHotelRoom",
data: this.roomMsg,
},
(res) => {
if (res.resultCode == 1) {
this.RoomList = res.data.RoomList;
}
}
);
},
formatMonthDay(str) {
let temp = str.split("-");
// temp[0] = temp[0] > 9 ? temp[0] : "0" + temp[0];
// temp[1] = temp[1] > 9 ? temp[1] : "0" + temp[1];
return `${temp[0]}月${temp[1]}日`;
},
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;
},
changeNearbyType(t) {
this.nearbyType = t;
},
//显示全部
getAllRoom() {
this.isShowAll = !this.isShowAll;
if (this.isShowAll) {
this.threeLevelList.forEach((x) => {
x.isCheck = 1;
});
this.RoomList = this.dataList.RoomList;
} else {
this.threeLevelList.forEach((x) => {
x.isCheck = 0;
});
}
},
//点击过滤房间
changeRoomType(obj) {
if (obj.isCheck == 0) {
obj.isCheck = 1;
} else {
obj.isCheck = 0;
}
this.RoomList = [];
let num = 0;
this.threeLevelList.forEach((x) => {
if (x.isCheck == 1) {
num++;
this.dataList.RoomList.forEach((y) => {
if (x.id == 1 && y.BedType == 1) {
this.RoomList.push(y);
}
if (x.id == 2 && y.BedType == 2) {
this.RoomList.push(y);
}
if (x.id == 3 && y.BedType == 3) {
this.RoomList.push(y);
}
if (x.id == 4 && y.BreakfastType != 4) {
this.RoomList.push(y);
}
if (x.id == 5 && y.IsCancel == 2) {
this.RoomList.push(y);
}
});
}
});
if (num == this.threeLevelList.length) {
this.isShowAll = true;
} else {
this.isShowAll = false;
}
if (num == 0) {
this.RoomList = this.dataList.RoomList;
}
},
changeLike() {
this.islike = !this.islike;
},
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,
});
},
changeHandler(i) {
this.active = i;
},
//获取酒店详情
getHotelDetail(id) {
let msg = {
HotelId: id,
StartDate: this.dayObj.start,
EndDate: this.dayObj.end,
};
this.request2(
{
url: "/api/Hotel/GetHotelInfo",
data: msg,
},
(res) => {
if (res.resultCode == 1) {
// console.log(res, '详情数据');
this.dataList = res.data;
this.RoomList = this.dataList.RoomList;
this.hotelData.HotelId = this.dataList.HotelId;
this.hotelData.HotelName = this.dataList.HotelName;
this.hotelData.Booking = this.dataList.Booking;
setTimeout(() => {
this.hotelFacilities.forEach((x)=>{
const query = uni.createSelectorQuery().select(`#${x.val}`);
query.boundingClientRect((rect) => {
x.top = rect.top+250;
}).exec();
})
}, 1000);
}
}
);
},
// #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
pages/hotel/orderdetails.vue 0 → 100644
View file @ 25a4d88e
<template>
<view class="hotel-detail">
<scroll-view
ref="scrollView"
scroll-y="true"
style="height: 1px;flex: 1;box-sizing: border-box;"
@scroll="scroll"
>
<view
class="media"
:style="{ opacity: 100 - boxOption + '%' }"
>
<!-- #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"
style="margin-top: 22rpx"
></u-icon>
</view>
<!-- #endif -->
<view class="orderStatusBox flex" style="margin-bottom: 30rpx">
<u-icon customPrefix="iconfont" name="icondaizhifu-" size="52" color="#DFBE6E" v-if="orderStatus.code == 0"></u-icon>
<u-icon customPrefix="iconfont" name="iconquxiao" size="52" color="#f26c6c" v-if="orderStatus.code == -1"></u-icon>
<u-icon customPrefix="iconfont" name="iconshenhezhong" size="52" color="#86d9a5" v-if="orderStatus.code == -2"></u-icon>
<u-icon customPrefix="iconfont" name="iconzhengchang" size="52" color="#111" v-if="orderStatus.code == 1"></u-icon>
<text style="
margin-left: 26rpx;
font-size: 40rpx;
font-weight: 600;
color: #111;
">
{{ orderStatus.text }}
</text>
</view>
<view class="orderIforRzBox row">
<view class="orderIforRzImg">
<img
style="width: 14rpx;height: 68rpx;"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638766174213789755.png"/>
</view>
<view class="orderIforRzTime column">
<view>入住：<text>2月25日 周二 14:00后</text></view>
<view style="margin-top: 28rpx;">离店：<text>2月28日 周五 12:00前</text></view>
</view>
<view class="orderIforRzNum">3晚</view>
</view>
<view class="orderIforDiZhi">
<view class="orderIforDiZhiL">成田国际花园酒店</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">
95 Cheongpa-ro 20-gil, 龙山区, 首尔, 首尔(及其周边地区)，韩国
</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"
>
{{ dataList.HotelName }}
</view
>
</view>
<view class="ReservationInforBox">
<view class="ReservationInforTitle">预定信息</view>
<view class="ResInforText row-sb-n">
<view class="ResInforL">房型</view>
<view class="ResInforR">高级双床房(1间)</view>
</view>
<view class="ResInforText row-sb-n">
<view class="ResInforL">餐型</view>
<view class="ResInforR active">含早餐 x2份</view>
</view>
<view class="ResInforText row-sb-n">
<view class="ResInforL">窗户</view>
<view class="ResInforR">有窗</view>
</view>
<view class="ResInforText row-sb-n">
<view class="ResInforL">人数</view>
<view class="ResInforR">最多入住2人</view>
</view>
<view class="ResInforText row-sb-n">
<view class="ResInforL">面积</view>
<view class="ResInforR">32㎡</view>
</view>
<view class="ResInforText row-sb-n">
<view class="ResInforL">网络</view>
<view class="ResInforR">WIFI</view>
</view>
<view class="ResInforText row-sb-n">
<view class="ResInforL">楼层数</view>
<view class="ResInforR">1-20</view>
</view>
<view class="ResInforText row-sb-n">
<view class="ResInforL">取消政策</view>
<view class="ResInforR">不可修改</view>
</view>
</view>
<view class="ReservationInforBox">
<view class="ReservationInforTitle">订房信息</view>
<view class="ResInforText row-sb-n">
<view class="ResInforL">住客姓名</view>
<view class="ResInforR">李伟</view>
</view>
<view class="ResInforText row-sb-n">
<view class="ResInforL">联系电话</view>
<view class="ResInforR">1956555</view>
</view>
<view class="ResInforText row-sb-n">
<view class="ResInforL">E-mail</view>
<view class="ResInforR">ran****un@aliyun.com</view>
</view>
</view>
<view style="height: 36rpx;"></view>
</scroll-view>
<view class="opera-box">
<view class="box flex">
<view class="price">
<text class="f11">￥</text>
<text> 11111</text>
</view>
<view class="sum-detail">共计 222间房</view>
<u-button :ripple="true" :hair-line="false" :custom-style="btnStyle" @click="buyRoom">立即购买</u-button>
</view>
</view>
<u-popup
v-model="showTimePopup"
mode="bottom"
border-radius="20"
length="85%"
:safe-area-inset-bottom="true"
>
<view style="
width: 100%;
height: 100%;
display: flex;
flex-direction: column;">
<view style="flex: 1; width: 100%; height: 1rpx">
<canlendar @finish="chosenDateResult" title="日期和人数"></canlendar>
</view>
<view style="background: #ecf1f4; padding: 20rpx 0;margin-bottom: 80rpx;">
<view class="row line-flex" style="padding: 30rpx; background: #fff">
<text style="font-size: 28rpx; color: #111; font-weight: 500">房间</text>
<text style="
font-size: 22rpx;
color: #999;
margin-left: 30rpx;
flex: 1;
"></text>
<u-number-box size="28" :min="1" :max="100000" v-model="searchObj.rooms"></u-number-box>
</view>
<view class="row line-flex" style="padding: 30rpx; background: #fff">
<text style="font-size: 28rpx; color: #111; font-weight: 500">成人</text>
<text style="
font-size: 22rpx;
color: #999;
margin-left: 30rpx;
flex: 1;
">18周岁以上</text>
<u-number-box size="28" :min="1"
:max="100000"
v-model="searchObj.adultsNumber"
@change="crChange"></u-number-box>
</view>
<view class="row line-flex" style="padding: 30rpx; background: #fff">
<text style="font-size: 28rpx; color: #111; font-weight: 500">儿童(占床)</text>
<text style="
font-size: 22rpx;
color: #999;
margin-left: 30rpx;
flex: 1;
">2-18周岁(不含)</text>
<u-number-box size="28" :min="0" :max="100000"
v-model="searchObj.childrenNumberZC"
@change="etChange"
></u-number-box>
</view>
</view>
</view>
</u-popup>
</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: "",
showTimePopup: false,
controls: false,
videoUrl: "https://video.c-ctrip.com/videos/230i1r000001hxb2mEEE4.mp4",
active: 1,
islike: false,
nearbyType: 0,
searchObj: {
date: {},
},
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',
],
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
},
orderStatus: {
text: "待支付",
code: 0,
},
showPayBtn: false,
btnStyle: {
height:"80rpx",
lineHeight:"80rpx",
borderRadius:"16rpx",
background:"#111",
color:"#FFF",
fontSize:"28rpx",
fontWeight:"600",
width:'193rpx',
},
};
},
created() {
this.Up = uni.getStorageSync("mall_UserInfo")
? uni.getStorageSync("mall_UserInfo").UserPageType
: 0;
},
onLoad(options) {
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;
} else {
let d1 = new Date();
let d = new Date();
let d2 = new Date(d.setDate(d.getDate() + 1));
let startWeek = "周" + "日一二三四五六".charAt(new Date().getDay());
let endWeek = "周" + "日一二三四五六".charAt(new Date().getDay() + 1);
let month1 = d1.getMonth() + 1;
let day1 = d1.getDate();
let Month1 = month1>9?month1:'0'+month1;
let Day1 = day1>9?day1:'0'+day1;
let month2 = d2.getMonth() + 1;
let day2 = d2.getDate();
let Month2 = month2>9?month2:'0'+month2;
let Day2 = day2>9?day2:'0'+day2;
var obj = {
start: `${d1.getFullYear()}-${Month1}-${Day1}`,
end: `${d2.getFullYear()}-${Month2}-${Day2}`,
startDay: `${Month1}-${Day1}`,
endDay: `${Month2}-${Day2}`,
day: 1,
startWeek: startWeek,
endWeek: endWeek,
};
this.roomMsg.StartDate = obj.start;
this.roomMsg.EndDate = obj.end;
this.startDay = obj.startDay;
this.endDay = obj.endDay;
this.day = obj.day;
this.dayObj = obj;
}
if (this.id > 0) {
this.getHotelDetail(this.id);
}
if (options.searchObj) {
this.searchObj = JSON.parse(options.searchObj);
}
this.getRecomHotel();
},
methods: {
//立即购买
buyRoom(){
let that = this;
if (that.orderMsg.Consignee == '') {
this.$refs.uToast.show({
title: '请输入住客姓名！',
type: 'warning'
});
return;
}
if (that.orderMsg.ConsigneeMobile == '') {
this.$refs.uToast.show({
title: '请输入联系电话！',
type: 'warning'
});
return;
}
var tempObj = uni.getStorageSync('basedata').mall.wechatmessage;
var tmplIds = [];
if(tempObj&&tempObj.length>0){
tempObj.forEach(x=>{
if(x.Name=='下单成功提醒'||x.Name=='订单取消提醒'||x.Name=='订单确认通知'){
tmplIds.push(x.MessageId)
}
})
}
uni.requestSubscribeMessage({
tmplIds: tmplIds,
complete(res) {
that.request2({
url: '/api/Hotel/SetAppletHotelOrder',
data: that.orderMsg
},
res => {
if (res.resultCode == 1) {
that.queren(res.data)
}
}
);
}
})
},
formatStatus(status, loss, isCancel) {
loss = loss ? loss : -1;
//1、已申请；!=1未申请
if (loss == 1 || status == 4) {
this.orderStatus.code = -1;
this.orderStatus.text = "已取消";
this.showPayBtn = false;
} else if (status == 2 && isCancel != 1) {
this.orderStatus.code = 0;
this.orderStatus.text = "待付款";
this.showPayBtn = true;
} else if (status == 3 && isCancel != 1) {
this.orderStatus.code = 0;
this.orderStatus.text = "候补中";
this.showPayBtn = true;
} else if (status == 2 && isCancel == 1) {
this.orderStatus.code = -2;
this.orderStatus.text = "审核中";
this.showPayBtn = false;
} else if (status == 1) {
this.orderStatus.code = 1;
this.orderStatus.text = "正常";
this.showPayBtn = false;
}
},
goFacil(item){
this.current = item.ID;
this.scrollTop = this.old.scrollTop
this.$nextTick(function() {
this.scrollTop = item.top
});
},
openTime() {
this.showTimePopup = true;
},
etChange(e){
this.searchObj.childrenNumberZC = e.value;
this.peopleChange()
},
crChange(e){
this.searchObj.adultsNumber = e.value;
this.peopleChange()
},
peopleChange(){
this.searchObj.peoples = this.searchObj.adultsNumber + this.searchObj.childrenNumberZC
console.log(this.searchObj.peoples,'人数')
},
//获取推荐酒店
getRecomHotel() {
this.searchObj.HotelId = this.id;
this.request2(
{
url: "/api/Hotel/AppGetHotelPage",
data: this.searchObj,
},
(res) => {
if (res.resultCode == 1) {
// console.log(res, '推荐酒店');
this.HotelArr = [];
let tempHotel = res.data.pageData;
tempHotel.forEach((x) => {
if (this.HotelArr.length < 2) {
this.HotelArr.push(x);
}
});
}
}
);
},
goMap(name, lon, lat) {
let newLon = parseFloat(lon);
let newLat = parseFloat(lat);
uni.openLocation({
latitude: newLat,
longitude: newLon,
scale: 18,
name: name,
address: name,
success: (res) => {},
fail: (err) => {},
});
},
openPicture() {
let imgObj = JSON.stringify(this.dataList.HotelImg);
uni.navigateTo({
url: "/pages/hotel/picture?imgObj=" + imgObj,
});
},
openDescription() {
let hotelObj = JSON.stringify({
id: this.id,
start: this.dayObj.start,
end: this.dayObj.end,
});
uni.navigateTo({
url:
"/pages/hotel/description?hotelObj=" + encodeURIComponent(hotelObj),
});
},
chosenDateResult(obj) {
this.roomMsg.StartDate = obj.start;
this.roomMsg.EndDate = obj.end;
this.startDay = obj.startDay;
this.endDay = obj.endDay;
this.day = obj.day;
this.getRoomType();
this.dayObj = obj;
this.showTimePopup = false;
},
//切换日期获取房型
getRoomType() {
this.request2(
{
url: "/api/Hotel/GetHotelRoom",
data: this.roomMsg,
},
(res) => {
if (res.resultCode == 1) {
this.RoomList = res.data.RoomList;
}
}
);
},
formatMonthDay(str) {
let temp = str.split("-");
// temp[0] = temp[0] > 9 ? temp[0] : "0" + temp[0];
// temp[1] = temp[1] > 9 ? temp[1] : "0" + temp[1];
return `${temp[0]}月${temp[1]}日`;
},
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;
},
changeNearbyType(t) {
this.nearbyType = t;
},
//显示全部
getAllRoom() {
this.isShowAll = !this.isShowAll;
if (this.isShowAll) {
this.threeLevelList.forEach((x) => {
x.isCheck = 1;
});
this.RoomList = this.dataList.RoomList;
} else {
this.threeLevelList.forEach((x) => {
x.isCheck = 0;
});
}
},
//点击过滤房间
changeRoomType(obj) {
if (obj.isCheck == 0) {
obj.isCheck = 1;
} else {
obj.isCheck = 0;
}
this.RoomList = [];
let num = 0;
this.threeLevelList.forEach((x) => {
if (x.isCheck == 1) {
num++;
this.dataList.RoomList.forEach((y) => {
if (x.id == 1 && y.BedType == 1) {
this.RoomList.push(y);
}
if (x.id == 2 && y.BedType == 2) {
this.RoomList.push(y);
}
if (x.id == 3 && y.BedType == 3) {
this.RoomList.push(y);
}
if (x.id == 4 && y.BreakfastType != 4) {
this.RoomList.push(y);
}
if (x.id == 5 && y.IsCancel == 2) {
this.RoomList.push(y);
}
});
}
});
if (num == this.threeLevelList.length) {
this.isShowAll = true;
} else {
this.isShowAll = false;
}
if (num == 0) {
this.RoomList = this.dataList.RoomList;
}
},
changeLike() {
this.islike = !this.islike;
},
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,
});
},
changeHandler(i) {
this.active = i;
},
//获取酒店详情
getHotelDetail(id) {
let msg = {
HotelId: id,
StartDate: this.dayObj.start,
EndDate: this.dayObj.end,
};
this.request2(
{
url: "/api/Hotel/GetHotelInfo",
data: msg,
},
(res) => {
if (res.resultCode == 1) {
// console.log(res, '详情数据');
this.dataList = res.data;
this.RoomList = this.dataList.RoomList;
this.hotelData.HotelId = this.dataList.HotelId;
this.hotelData.HotelName = this.dataList.HotelName;
this.hotelData.Booking = this.dataList.Booking;
setTimeout(() => {
this.hotelFacilities.forEach((x)=>{
const query = uni.createSelectorQuery().select(`#${x.val}`);
query.boundingClientRect((rect) => {
x.top = rect.top+250;
}).exec();
})
}, 1000);
}
}
);
},
// #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;
display: flex;
flex-direction: column;
}
.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;
}
.orderStatusBox{
padding: 200rpx 31rpx 13rpx 31rpx;
}
.orderIforRzBox{
margin: 0 31rpx;
background: #ECF1F4;
border-radius: 18rpx;
align-items: center;
padding: 31rpx 38rpx;
}
.orderIforRzTime{
font-weight: 500;
font-size: 28rpx;
color: #1D1D20;
margin-left: 16rpx;
}
.orderIforRzNum{
font-weight: bold;
font-size: 32rpx;
color: #080A09;
}
.opera-box{
background-color: #FFF;
padding: 20rpx 45rpx 40rpx 45rpx;
z-index: 5;
}
.opera-box .box{
height: 100rpx;
background: #FFFFFF;
box-shadow: 0px 10rpx 30rpx 0px rgba(36, 36, 36, 0.2);
border-radius: 16rpx;
display: flex;
align-items: center;
padding: 0 10rpx 0 36rpx;
}
.opera-box .box .price{
font-size: 40rpx;
font-weight: 500;
color: #D91818;
margin-right: 20rpx;
}
.opera-box .box .sum-detail{
font-size: 24rpx;
flex: 1;
font-weight: 500;
color: #6E6E6E;
}
</style>
\ No newline at end of file
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