Skip to content

J
jz_Travel
Commit c01d8b9a authored by 罗超's avatar 罗超
Browse files
Options

订单确认页

parent 8878119e
Show whitespace changes
Inline Side-by-side
Showing with 363 additions and 2 deletions
pages.json
View file @ c01d8b9a
......@@ -728,6 +728,8 @@
"path": "picture"
},{
"path": "description"
},{
"path": "order"
},{
"path": "detail",
"enablePullDownRefresh": true,
......
pages/hotel/components/room-good.vue
View file @ c01d8b9a
......@@ -23,7 +23,7 @@
<view class="rm-opera">
<!-- 如果库存少于5显示 -->
<view class="warm-count">剩2间</view>
<view class="buy">
<view class="buy" @click="previewOrder">
<view class="buy-content">抢</view>
<view class="buy-tips">在线订</view>
</view>
......@@ -32,6 +32,15 @@
</template>
<script>
export default {
methods: {
previewOrder(){
uni.navigateTo({
url:"/pages/hotel/order"
})
},
},
}
</script>
<style>
......
pages/hotel/detail.vue
View file @ c01d8b9a
......@@ -339,6 +339,7 @@
url:"/pages/hotel/description"
})
},
chosenDateResult(obj) {
obj.startDay = this.formatMonthDay(obj.startDay)
obj.endDay = this.formatMonthDay(obj.endDay)
......
pages/hotel/list.vue
View file @ c01d8b9a
......@@ -242,7 +242,7 @@
},
created() {
uni.navigateTo({
url:"/pages/hotel/description"
url:"/pages/hotel/order"
})
uni.setNavigationBarTitle({
title: "酒店",
......
pages/hotel/order.vue 0 → 100644
View file @ c01d8b9a
<template>
<view>
<view class="hotel-order">
<view class="o-head">
<view class="o-timer flex">
<view class="time-item">5月20日 周六</view>
<view class="time-split">
<view>1晚</view>
<image style="width: 66rpx;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1622098352000_930.png" mode="widthFix"></image>
</view>
<view class="time-item">5月23日 周日</view>
</view>
<view class="room-name">藏韵高级双床房</view>
<view class="room-remark">含早 | 1.5m大床 | 24㎡ | 有窗</view>
<view class="big-title">
<text class=" f12">订房必知</text>
</view>
<view class="rule">
<text class="king">此房间支持免费取消， </text>
<text>订单需要等待酒店或供应商确认后生效，订单确认结果我们将会通知推送到您的微信，请您在下单时同意结果订阅，以便您能正常收到消息。</text>
</view>
</view>
<view class="form">
<view class="form-items">
<view class="label">房间数量</view>
<view class="val">
<u-number-box size="28" :min="1" :max="100" v-model="order.roomCount"></u-number-box>
</view>
</view>
<view class="form-items">
<view class="label">住客姓名</view>
<view class="val">
<input type="text" v-model="order.userName" placeholder="若是多人,输入代表人员即可" />
</view>
</view>
<view class="form-items">
<view class="label">联系电话</view>
<view class="val">
<input type="text" v-model="order.userName" placeholder="输入电话号码" />
</view>
</view>
<view class="form-items">
<view class="label">预计到店</view>
<view class="val flex">
<view style="flex: 1;" class="f14">14:00</view>
<u-icon name="arrow" color="#D9D9D9" size="20" />
</view>
</view>
</view>
<view class="empty-block"></view>
<view style="padding:50rpx 40rpx">
<view class="big-title">
<text>费用明细</text>
</view>
<view class="form" style="margin:40rpx 0;padding: 0;">
<view class="form-items">
<view class="label">
在线支付
</view>
<view class="val f14 regular" style="text-align: right;">
<text style="margin-right: 30rpx;">2间房</text>
<text class="red">￥5666</text>
</view>
</view>
<view class="form-items" style="border-bottom: none;">
<view class="label">
房费明细
</view>
</view>
<view class="flex f12 grey">
<view style="flex:1">
<text style="margin-right: 30rpx;">2021-05-27</text>
<text>含早</text>
</view>
<view style="text-align: right;">2间 × ¥1416.5</view>
</view>
<view class="flex f12 grey" style="margin-top: 40rpx;">
<view style="flex:1">
<text style="margin-right: 30rpx;">2021-05-28</text>
<text class="red">不含早</text>
</view>
<view style="text-align: right;">2间 × ¥1416.5</view>
</view>
</view>
</view>
<view class="empty-block"></view>
<view style="padding:50rpx 40rpx">
<view class="big-title">
<text>重要提醒</text>
</view>
<view class="sheshi">
<view class="she-title">入离时间</view>
<view class="she-content">
<text>入住时间：14:00以后；离店时间：12:00以前</text>
</view>
</view>
<view class="sheshi">
<view class="she-title">宠物政策</view>
<view class="she-content">
<text>允许携带宠物，酒店可能收取额外费用</text>
</view>
</view>
<view class="sheshi">
<view class="she-title">酒店提示</view>
<view class="she-content">
<text>疫情期间，请佩戴好口罩。住宿提供方支持中国（含港澳台）及外国客人入住</text>
</view>
</view>
<view class="sheshi">
<view class="she-title">儿童政策</view>
<view class="she-content">
<text>不接受18岁以下客人单独入住。每房间可有1名儿童使用现有床铺。不可加床</text>
</view>
</view>
</view>
</view>
<view class="opera-box">
<view class="box flex">
<view class="price">
<text class="f11">￥</text>
<text>5666</text>
</view>
<view class="sum-detail">共计 2万·2间房</view>
<u-button :ripple="true" :hair-line="false" :custom-style="btnStyle">立即购买</u-button>
</view>
</view>
</view>
</template>
<script>
export default{
data() {
return {
order: {
roomCount:1,
userName:''
},
btnStyle:{
height:"80rpx",
lineHeight:"80rpx",
borderRadius:"16rpx",
background:"#111",
color:"#FFF",
fontSize:"28rpx",
fontWeight:"600",
width:'193rpx',
}
}
},
created() {
uni.setNavigationBarTitle({
title: "九寨沟星宇国际大酒店",
});
},
}
</script>
<style>
.hotel-order{
color: #111111;
margin-bottom: 160rpx;
}
.opera-box{
background-color: #FFF;
padding: 20rpx 45rpx 40rpx 45rpx;
position: fixed;
bottom: 0;
left: 0;
right: 0;
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;
}
.hotel-order .red{
color:#D91818 !important
}
.hotel-order .grey{
color:#6E6E6E !important
}
.hotel-order .form{
margin-top: 60rpx;
padding:0 45rpx;
}
.hotel-order .form .form-items{
margin-bottom: 40rpx;
display: flex;
align-items: center;
padding-bottom: 36rpx;
border-bottom:1px solid #f5f5f5;
font-size: 28px;
font-weight: 500;
}
.hotel-order .form .form-items:last-child{
border-bottom: none;
}
.hotel-order .form .form-items .label{
font-size: 28rpx;
font-weight: 600;
margin-right: 60rpx;
flex-shrink: 0;
}
.hotel-order .form .form-items .val{
flex:1;
}
.hotel-order .sheshi{
margin-top: 50rpx;
}
.hotel-order .sheshi .she-title{
font-size: 28rpx;
font-weight: 800;
}
.hotel-order .sheshi .she-content{
margin-top: 24rpx;
}
.hotel-order .sheshi .she-content text{
font-size: 24rpx;
font-weight: 500;
color: #4A4A4A;
line-height: 40rpx;
margin-right: 24rpx;
}
.hotel-order .form .form-items .val input{
border:none;
padding: 0;
margin: 0;
outline: none;
height: 38rpx;
line-height: 38rpx;
font-size: 28rpx;
font-weight: 500;
width: 100%;
}
.hotel-order .king {
color: #DFBE6E !important;
}
.hotel-order .f12 {
font-size:24rpx !important;
}
.f11 {
font-size:22rpx !important;
}
.hotel-order .f14 {
font-size:28rpx !important;
}
.hotel-order .regular {
font-weight: 500 !important;
}
.hotel-order .flex{
display: flex;
align-items: center;
}
.hotel-order .empty-block{
height: 20rpx;
background: #ECF1F4;
}
.hotel-order .flex-wrap{
flex-wrap: wrap;
}
.hotel-order .o-head{
padding: 45rpx;
background: #FFFFFF;
box-shadow: 0px 2rpx 15rpx 0px rgba(76, 76, 76, 0.13);
border-radius: 0px 0px 60rpx 60rpx;
}
.hotel-order .o-head .o-timer{
height: 100rpx;
background: #ECF1F4;
border-radius: 20rpx;
padding: 0 40rpx;
}
.hotel-order .o-head .o-timer .time-item{
font-size: 32rpx;
font-weight: 800;
flex:1;
}
.hotel-order .o-head .o-timer .time-item:last-child{
text-align: right;
}
.hotel-order .o-head .o-timer .time-split{
font-size: 24rpx;
font-weight: 400;
text-align: center;
}
.hotel-order .o-head .room-name{
font-size: 32rpx;
font-weight: bold;
margin-top: 40rpx;
margin-bottom: 10rpx;
}
.hotel-order .o-head .room-remark{
font-size: 28rpx;
font-weight: 500;
padding-bottom:30rpx;
margin-bottom: 30rpx;
border-bottom: 1px solid #E7E7E7;
}
.hotel-order .o-head .rule{
font-size: 22rpx;
font-weight: 500;
color: #6E6E6E;
margin-top: 18rpx;
}
.hotel-order .big-title {
position: relative;
}
.hotel-order .big-title::before {
display: block;
width: 71rpx;
height: 12rpx;
background: #DFBE6E;
border-radius: 4rpx;
content: ' ';
position: absolute;
left: 0;
bottom: 6rpx;
z-index: 1;
}
.hotel-order .big-title text {
font-size: 34rpx;
font-weight: bold;
color: #1F1F1F;
position: relative;
z-index: 2;
}
</style>
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