Skip to content

A
Athena
Commit 34cca8f9 authored by zhengke's avatar zhengke
Browse files
Options

增加下单

parent c2a0fed2
Hide whitespace changes
Inline Side-by-side
Showing with 692 additions and 0 deletions
src/components/Hotel/HotelBook.vue 0 → 100644
View file @ 34cca8f9
<style>
.mcont{
width: 1180px;
padding: 20px 10px;
margin: 0 auto;
font: 14px/1.5 Tahoma,Arial,Simsun,sans-serif;
color:#333;
}
.cont_main{
float: left;
width: 760px;
margin-right: 20px;
}
.bold{
font-weight:bold!important;
}
/* .order_tips_strengthen p {
padding: 5px 0;
} */
.iencourage_green{
color: #2EB000;
display: inline-block;
vertical-align: middle;
margin-right: 15px;
font-family: "Microsoft Yahei",Simsun,sans-serif;
font-size: 16px;
font-weight: bold;
}
.mod_book_tit {
padding-left: 20px;
width: 100%;
background-color: #EDF4FF;
color: #111111;
font-size: 12px;
font-weight: bold;
height: 29px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-bottom: 1px solid #E0E0E0;
}
.mod_book_bar{
height: 4px;
overflow: hidden;
background: #cfd8dc;
border-radius: 4px 4px 0 0;
}
.mod_book_box {
padding-bottom: 10px;
background: #fff;
border-radius: 0 0 3px 3px;
}
.mod_book_boxpadding {
padding: 10px 0;
}
.mod_book_item {
position: relative;
padding: 16px 10px 16px 130px;
line-height: 24px;
min-height: 24px;
}
.mod_book_item_tit {
position: absolute;
z-index: 1;
left: 0;
top: 16px;
width: 100px;
text-align: right;
color: #999;
}
.room_ename {
padding-left: 10px;
color: #999;
}
.f_chkin, .f_chkout {
float: left;
}
.f_to {
float: left;
width: 40px;
height: 2px;
margin:16px 10px;
background: #b0bec5;
}
.f_days {
float: left;
margin:4px 0 0 10px;
white-space: nowrap;
}
.f_daybtns {
float: left;
margin: -4px 0 -4px 18px;
}
.btns_base01, .btns_base02, .hotels_btn1, .hotels_btn2 {
display: inline-block;
width: 80px;
height: 30px;
text-align: center;
line-height: 30px;
border-radius: 3px;
cursor: default;
transition: all .2s ease 0s;
}
.btns_base02, .hotels_btn2 {
border: 1px solid #b2d9ff;
color: #39f;
background: #fff;
}
.mod_book_item_form {
padding: 0 10px 0 130px;
}
.mod_book_item_form .mod_book_item_tit {
top: 10px;
}
.mod_book_item_form .msg_text {
margin-left: 20px;
display: inline-block;
position: relative;
z-index: 1;
padding-left: 20px;
line-height: 24px;
font-size: 14px;
}
.w80{
width:80px!important;
}
.myItem_content .el-input__inner{
border:0;
border-bottom:1px solid #d1d1d1;
height:28px;
line-height: 28px;
border-radius: 0;
}
.t_breakfast {
border: 1px solid #dae7ef;
}
.t_breakfast th {
color: #666;
background: #f5f7f8;
font-weight: normal;
border-bottom: none;
}
.t_breakfast th, .t_breakfast td {
min-width: 52px;
height: 30px;
padding: 0 10px;
text-align: center;
border: 1px solid #dae7ef;
border-top: none;
}
.orange {
color: #f60!important;
}
.mod_book_box .mod_room {
position: relative;
}
.mod_book_box .mod_room_tit {
position: absolute;
left: 10px;
top: 19px;
color: #999;
}
.w300{
width:300px!important;
}
.w130{
width:130px!important;
}
.cont_aside{
float: left;
width: 380px;
position: static;
left: 852px;
top: -190px;
z-index: 0;
}
.aside_box {
margin-bottom: 10px;
background: #fff;
border-radius: 3px;
*zoom: 1;
}
.hinfo_img {
width: 100%;
height: 190px;
overflow: hidden;
border-radius: 3px 3px 0 0;
}
.hinfo_box {
padding: 15px 20px;
}
.hinfo_name_box {
margin-bottom: 5px;
}
.hinfo_name {
font: 20px/24px Tahoma,Arial,"Microsoft YaHei",sans-serif;
color:#06c;
}
.hinfo_img img{
width:100%;
}
.hinfo_addr {
padding-bottom: 10px;
margin-bottom: 5px;
color: #666;
font-size: 12px;
}
.hinfo_roomname {
margin-top: 10px;
color: #666;
}
.hinfo_roomename {
font-size: 12px;
color: #999;
margin-bottom: 5px;
}
.hinfo_t th {
width: 50px;
padding: 5px 0;
font-weight: normal;
text-align: left;
color: #999;
vertical-align: top;
}
.hinfo_t td{
color: #999;
}
.htotal_hd {
position: relative;
z-index: 1;
margin-top:20px;
padding: 20px;
font: 20px/24px Tahoma,Arial,"Microsoft YaHei",sans-serif;
}
.htotal_price {
position: absolute;
z-index: 1;
right: 20px;
top: 22px;
font-size: 16px;
color: #f60;
border-bottom: 1px dashed #FFBB8F;
}
.htotal_price_rmb {
font-size: 12px;
text-align: right;
margin-top: 6px;
}
.comHb_bg{
background-color: #EDF4FF;
}
.hinfo{
border:1px solid #d1d1d1;
}
.Hb_payBtn{
width: 100%;
height: 60px;
background-color: #EE4454;
color: #fff;
outline: none;
border: none;
cursor: pointer;
margin-top: 20px;
font-size: 18px;
border-radius: 4px;
}
.f_chkin .el-input__inner ,.f_chkout .el-input__inner{
height:32px;
line-height: 32px;
border-radius: 0;
}
</style>
<template>
<div class="mcont clearfix">
<div class="cont_main">
<div class="order_tips_strengthen">
<p style="margin-top:50px;">
<span class="bold iencourage_green">免费！7-12岁儿童可免费入住</span>
</p>
<p style="margin-top:20px;">
<span class="bold iencourage_green">预定超方便,无需提前支付房费</span>
</p>
</div>
<div class="mod_book" style="border:1px solid #d1d1d1;margin-top:20px;">
<div class="mod_book_tit">
预订信息
</div>
<div class="mod_book_bd">
<div class="mod_book_box mod_book_boxpadding">
<div class="mod_book_item">
<span class="mod_book_item_tit">房型信息</span>
<div class="mod_book_item_cont">
<span class="J_RoomName">{{dataList.RoomName}}</span>
</div>
</div>
<div class="mod_book_item J_DivDate" style="height:70px;">
<span class="mod_book_item_tit">入离日期</span>
<div class="mod_book_item_cont">
<div class="f_chkin">
<el-date-picker class="w130" v-model="priceMsg.CheckInTime"
size="small"
value-format="yyyy-MM-dd"
:picker-options="beforeCheck"
@change="getDayCha(),getPrice()"
type="date"
placeholder="">
</el-date-picker>
</div>
<div class="f_to"></div>
<div class="f_chkout">
<el-date-picker class="w130" v-model="priceMsg.CheckOutTime"
size="small"
value-format="yyyy-MM-dd"
:picker-options="afterCheck"
@change="getDayCha(),getPrice()"
type="date"
placeholder="">
</el-date-picker>
</div>
<span class="f_days">
<strong>{{dayNum}}</strong>晚
</span>
</div>
</div>
<div class="mod_book_item mod_book_item_form">
<span class="mod_book_item_tit" style="top:8px;">房间数量</span>
<div class="mod_book_item_cont myItem_content">
<el-select placeholder="" class="w80" v-model="priceMsg.RoomNum" @change="getPrice(),getRoomList()">
<el-option :value="1" label="1"></el-option>
<el-option :value="2" label="2"></el-option>
<el-option :value="3" label="3"></el-option>
<el-option :value="4" label="4"></el-option>
<el-option :value="5" label="5"></el-option>
<el-option :value="6" label="6"></el-option>
<el-option :value="7" label="7"></el-option>
<el-option :value="8" label="8"></el-option>
<el-option :value="9" label="9"></el-option>
<el-option :value="10" label="10"></el-option>
</el-select>
<span class="msg_text">每间最多入住<span>2</span>人</span>
</div>
</div>
<div class="mod_book_item" style="margin-top:20px;">
<span class="mod_book_item_tit">房费情况</span>
<div class="mod_book_item_cont">
<table class="t_breakfast J_TblBreakfast" cellpadding="0" cellspacing="0">
<tr>
<th v-for="(item,index) in PriListData" :key="index">{{getSubStr(item.Date)}}</th>
</tr>
<tr>
<td v-for="(item,index) in PriListData" :key="index">
<div>¥
<span class="orange">{{item.B2BPrice}}</span>
</div>
<div>{{item.IsContainsTax==1?'含税':'不含税'}}</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="mod_book" style="border:1px solid #d1d1d1;margin-top:20px;">
<div class="mod_book_tit">
入住信息
</div>
<div class="mod_book_bd">
<div class="mod_book_box mod_book_boxpadding J_DivCustomInfoInner" style="padding:30px 0;">
<div class="mod_room J_DivRoomListItem">
<div style="position:relative;margin-bottom:20px;" v-for="(item,index) in guestList" :key="index">
<span class="mod_room_tit" style="top:10px;">房间{{index+1}}</span>
<template v-for="(subItem,subIndex) in item">
<div class="mod_book_item mod_book_item_form" style="margin-bottom:10px;">
<span class="mod_book_item_tit" style="top:10px;">住客{{subIndex+1}}</span>
<div>
<el-input type="text" class="w300" v-model="subItem.Name" placeholder="姓名"></el-input>
</div>
</div>
</template>
</div>
<el-form :model="saveMsg" :rules="rules" ref="saveMsg" label-width="0">
<div class="mod_book_item mod_book_item_form" style="margin-top:20px;">
<span class="mod_book_item_tit"><span style="color:red;">*</span>手机号</span>
<el-form-item prop="Mobile">
<el-input type="text" class="w300" v-model="saveMsg.Mobile"></el-input>
</el-form-item>
</div>
<div class="mod_book_item mod_book_item_form" style="margin-top:20px;">
<span class="mod_book_item_tit">邮箱</span>
<div class="mod_book_item_cont">
<el-input type="text" class="w300" v-model="saveMsg.Email"></el-input>
</div>
</div>
<div class="mod_book_item mod_book_item_form" style="margin-top:20px;">
<span class="mod_book_item_tit">预计到店时间</span>
<div class="mod_book_item_cont">
<el-time-select v-model="saveMsg.PredictTime" class="w300" :picker-options="{
start: '00:00',
step: '00:05',
end: '24:00'
}" placeholder="选择时间">
</el-time-select>
</div>
</div>
<div class="mod_book_item mod_book_item_form" style="margin-top:20px;">
<span class="mod_book_item_tit">备注</span>
<div class="mod_book_item_cont">
<el-input type="textarea" v-model="saveMsg.Remark"></el-input>
</div>
</div>
</el-form>
</div>
</div>
</div>
</div>
<input type="button" class="Hb_payBtn" value="提交订单" @click="submitForm('saveMsg')"/>
</div>
<div class="cont_aside">
<div class="aside_box">
<div class="hinfo">
<div class="hinfo_img">
<template v-if="dataList.ImageList&&dataList.ImageList.length>0">
<img :src="dataList.ImageList[0]" alt=""/>
</template>
</div>
<div class="hinfo_box">
<div class="hinfo_name_box">
<div class="hinfo_name">
{{dataList.HotelName}}
</div>
<div class="J_scrollFold">
<p class="hinfo_addr J_HotelAddress">{{dataList.HotelAddress}}</p>
<p class="hinfo_roomname J_RoomName">{{dataList.RoomName}}</p>
<table class="hinfo_t" cellpadding="0" cellspacing="0" width="100%">
<tr>
<th>人数</th>
<td>每间房最多入住2人</td>
</tr>
<tr><th>面积</th><td>{{dataList.Area}}</td></tr>
<tr><th>网络</th><td>{{dataList.BroadBandName}}</td></tr>
<tr><th>备注</th><td>{{dataList.IsSmoke==2?'禁烟':'可吸烟'}}</td></tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="aside_box comHb_bg">
<div class="htotal">
<div class="htotal_hd">订单总额
<span class="htotal_price J_SpanTotalPrice">¥ <span class="htotal_price_num">{{totalPrice}}</span></span>
<!-- <p class="htotal_price_rmb J_SpanTotalPriceRMB">折合约<dfn>¥</dfn>1722</p> -->
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
priceMsg:{
Id:0,
CheckInTime:'',
CheckOutTime:'',
RoomNum:1
},
PriListData:[],
totalPrice:0,
roomMsg:{
Id:0,
CheckInTime:'',
CheckOutTime:'',
RoomNum:1,
IsFormB2B:1
},
dataList:{},
dayNum:0,
guestList:[],
//保存msg
saveMsg:{
Id:0,
OrderForm:1,
CreateBy:'',
RoomId:10,
RoomNum:0,
Money:0,
CheckInDate:'',
CheckOutDate:'',
Mobile:'',
Email:'',
PredictTime:'',
Remark:'',
GuestList:[]
},
rules:{
Mobile: [{
required: true,
message: "请输入手机号",
trigger: "blur"
},{
pattern: /^1[3|4|5|7|8|9][0-9]\d{8}$/,
message: "请填写正确的手机号"
}],
},
beforeCheck: {
disabledDate: time => {
if (this.priceMsg.CheckOutTime == null) {
return false;
} else {
let endTime = new Date(this.priceMsg.CheckOutTime);
return endTime.getTime() < time.getTime();
}
}
},
afterCheck: {
disabledDate: time => {
let startTime = new Date(this.priceMsg.CheckInTime);
return startTime.getTime() >= time.getTime();
}
},
};
},
mounted() {
if(this.$route.query.CheckInTime){
this.priceMsg.CheckInTime=this.$route.query.CheckInTime;
this.roomMsg.CheckInTime=this.$route.query.CheckInTime;
}
if(this.$route.query.CheckOutTime){
this.priceMsg.CheckOutTime=this.$route.query.CheckOutTime;
this.roomMsg.CheckOutTime=this.$route.query.CheckOutTime;
}
if(this.$route.query.Id){
this.priceMsg.Id=this.$route.query.Id;
this.roomMsg.Id=this.$route.query.Id;
}
this.getPrice();
this.getRoomInfo();
this.getDayCha();
//生成旅客数组
this.getRoomList();
},
created() {
},
components: {
},
methods: {
//获取房费价格
getPrice(){
this.apipost("scm_get_GetB2BSCMHotelRoomPriceList",this.priceMsg,res => {
if (res.data.resultCode == 1) {
this.PriListData=res.data.data.PriceList;
this.totalPrice=0;
this.PriListData.forEach(x=>{
this.totalPrice+=x.B2BPrice
})
} else {
this.Error(res.data.message);
}
},err => {});
},
//获取房型信息
getRoomInfo(){
this.apipost("scm_get_GetB2BSCMHotelRoomInfo",this.roomMsg,res => {
if (res.data.resultCode == 1) {
this.dataList=res.data.data;
} else {
this.Error(res.data.message);
}
},err => {});
},
//修改房间数 生成
getRoomList(){
this.guestList=[];
var GuestNum = this.priceMsg.RoomNum;
for(var i=0;i<GuestNum;i++){
var obj=[{
Id:0,
Name:''
},{
Id:0,
Name:''
}]
this.guestList.push(obj);
}
},
//重选日期获取日期差
getDayCha(){
var aDate, oDate1, oDate2, iDays;
var sDate1= this.priceMsg.CheckInTime;
var sDate2= this.priceMsg.CheckOutTime;
aDate = sDate1.split("-")
oDate1 = new Date(aDate[0] + '-' + aDate[1] + '-' + aDate[2]) //转换为12-18-2002格式
aDate = sDate2.split("-")
oDate2 = new Date(aDate[0] + '-' + aDate[1] + '-' + aDate[2])
iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 /24) //把相差的毫秒数转换为天数
this.dayNum=iDays
},
submitForm(addMsg) {
//提交创建、修改表单
this.$refs[addMsg].validate(valid => {
if (valid) {
this.SaveOrder();
} else {
return false;
}
});
},
//保存订单
SaveOrder(){
this.saveMsg.RoomNum=this.priceMsg.RoomNum;
if(this.getLocalStorage()){
let userInfo = this.getLocalStorage();
this.saveMsg.CreateBy = userInfo.customerId;
}
this.saveMsg.CreateBy=1549;
this.saveMsg.Money=this.totalPrice*this.saveMsg.RoomNum;
this.saveMsg.CheckInDate=this.priceMsg.CheckInTime;
this.saveMsg.CheckOutDate=this.priceMsg.CheckOutTime;
this.guestList.forEach(x=>{
x.forEach(y=>{
if(y.Name!=''){
this.saveMsg.GuestList.push(y);
}
})
})
if(this.saveMsg){
}
this.apipost("scm_post_SetSCMHotelOrder",this.saveMsg,res => {
if (res.data.resultCode == 1) {
this.Success(res.data.message);
} else {
this.Error(res.data.message);
}
},err => {});
},
//截取日期
getSubStr(date){
let str = date.split('-');
return str[1]+'-'+str[2]
}
}
};
</script>
\ No newline at end of file
src/components/Hotel/SupplierView.vue
View file @ 34cca8f9
...@@ -646,6 +646,9 @@ ...@@ -646,6 +646,9 @@
</template> </template>
</div> </div>
</li> </li>
<li>
<input type="button" class="Sp_PsureBtn" @click="goBook(item)" style="width:60px;margin:30px 0 0 -3px;" value="预订"/>
</li>
</ul> </ul>
<span class="HD_ComDiJia HD_Green">{{getMeal(item.Meals)}}</span> <span class="HD_ComDiJia HD_Green">{{getMeal(item.Meals)}}</span>
</div> </div>
...@@ -856,6 +859,26 @@ export default { ...@@ -856,6 +859,26 @@ export default {
} }
}) })
return str; return str;
},
//跳转至预订页面
goBook(item){
let isLogin = this.$store.state.isLogin;
if (isLogin == 0) {
this.Error("请先登录！");
this.$router.push({
path: "/login?type=1",
query: { path: this.$route.name }
});
}else{
this.$router.push({
path: 'HotelBook',
query: {
CheckInTime:this.msg.CheckInTime,
CheckOutTime:this.msg.CheckOutTime,
Id:item.Id
}
});
}
} }
} }
}; };
......
src/router.js
View file @ 34cca8f9
...@@ -474,6 +474,15 @@ export default new Router({ ...@@ -474,6 +474,15 @@ export default new Router({
title: "预览" title: "预览"
} }
}, },
{
path: "/HotelBook",
name: "HotelBook",
component: resolve =>
require(["@/components/Hotel/HotelBook"], resolve),
meta: {
title: "酒店下单"
}
},
// { // {
// path: "/ticket/Pay/:id", // path: "/ticket/Pay/:id",
......
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