Skip to content

A
Athena
Commit 2e8c0a92 authored by zhengke's avatar zhengke
Browse files
Options

修改页面 增加支付

parent f5102be9
Hide whitespace changes
Inline Side-by-side
Showing with 873 additions and 149 deletions
src/components/Hotel/HotelDetail.vue
View file @ 2e8c0a92
......@@ -167,7 +167,7 @@
padding:0
}
.HD_LeftRoomInfo{
margin:20px 10px 0 20px;
margin:15px 10px 0 15px;
display: flex;
}
.HD_FuheIMG{
......@@ -377,11 +377,15 @@
padding:0 20px;
/* background-color: #F5F5F5; */
border:1px solid #DDDDDD;
margin-top:70px;
}
.HD_TOP_Map{
width:100%;
height:238px;
margin-top:20px;
display:none;
border:1px solid #DDDDDD;
}
.HD_TopScore{
......@@ -433,6 +437,35 @@
.Ht_ulName .el-input__icon{
line-height: 0;
}
.hotel-details-table {
margin-top: 15px;
border: 1px solid #DCDCDC;
border-collapse: collapse;
width:680px;
}
.hotel-details-table .td01 {
padding: 3px 15px;
background: #F7F7F7;
width: 226px;
height: 19px;
text-align: center;
}
.hotel-details-table .td02 {
padding: 3px 15px;
background: #FAFAFA;
width: 69px;
height: 19px;
text-align: center;
}
.hotel-details-table td {
width: 439px;
padding: 10px 20px;
vertical-align: middle;
text-align: center;
border: 1px solid #DCDCDC;
font-size: 14px;
box-sizing: border-box;
}
</style>
<template>
......@@ -611,6 +644,10 @@
<span v-if="item.smoking==0">禁烟</span>
<span v-if="item.smoking==1">可吸烟</span>
<span v-if="item.withBath==0">无浴室</span>
<span v-if="item.withBath==1">有浴室</span>
</div>
</div>
</td>
......@@ -654,10 +691,29 @@
<div class="HD_hotelComIntroduce">
<div class="HD_inTitle">酒店详情指南</div>
<div>
<!-- <span class="HD_ComLeftTitle">停车场</span> -->
<span class="HD_ComLeftTitle">停车场</span>
<span></span>
</div>
</div>
<div class="HD_hotelComIntroduce">
<div>
<span class="HD_ComLeftTitle">接送服务</span>
<span>{{hotelDetails.pickupService}}</span>
</div>
</div>
<div class="HD_hotelComIntroduce">
<div class="HD_inTitle">酒店描述</div>
<div>
<span>{{hotelDetails.hotelDescription}}</span>
</div>
</div>
<div class="HD_hotelComIntroduce">
<div class="HD_inTitle">完善设施服务</div>
<div>
<span>{{hotelDetails.amenitiesNotes}}</span>
</div>
</div>
<!-- <div class="HD_hotelComIntroduce">
<div>
<span class="HD_ComLeftTitle">接送服务</span>
......@@ -683,37 +739,6 @@
<span>{{hotelDetails.hotelRooms}}</span>
</div>
</div>
<div class="HD_hotelComIntroduce">
<div class="HD_inTitle">西式房间详情</div>
<div>
<span class="HD_ComLeftTitle">单人房</span>
<span>0室</span>
</div>
</div>
<div class="HD_hotelComIntroduce">
<div>
<span class="HD_ComLeftTitle">大床房</span>
<span>100室|45-60平方米</span>
</div>
</div>
<div class="HD_hotelComIntroduce">
<div>
<span class="HD_ComLeftTitle">双床房</span>
<span>120室|45-60平方米</span>
</div>
</div>
<div class="HD_hotelComIntroduce">
<div>
<span class="HD_ComLeftTitle">套房</span>
<span>48室</span>
</div>
</div>
<div class="HD_hotelComIntroduce">
<div>
<span class="HD_ComLeftTitle">房间设备</span>
<span>我是设备我是设备我是设备我是设备</span>
</div>
</div>
<div class="HD_hotelComIntroduce">
<div>
<span class="HD_ComLeftTitle">客房网络连接</span>
......@@ -721,27 +746,51 @@
{{item}}
</span>
</div>
</div>
</div>
<div class="HD_hotelComIntroduce">
<div class="HD_hotelComIntroduce" style="border-bottom:0;">
<div class="HD_inTitle">水疗</div>
<div>
<span class="HD_ComLeftTitle">温泉</span>
<span>有</span>
</div>
<table class="hotel-details-table">
<tr>
<td colspan="3" class="td01">室外</td>
<td colspan="3" class="td01">屋内</td>
<td colspan="3" class="td01">蒸气浴</td>
</tr>
<tr>
<td class="td02">男</td>
<td class="td02">女</td>
<td class="td02">混浴</td>
<td class="td02">男</td>
<td class="td02">女</td>
<td class="td02">混浴</td>
<td class="td02">男</td>
<td class="td02">女</td>
<td class="td02">混浴</td>
</tr>
<tr>
<td>{{bathRoom[0]}}</td>
<td>{{bathRoom[1]}}</td>
<td>{{bathRoom[2]}}</td>
<td>{{bathRoom[3]}}</td>
<td>{{bathRoom[4]}}</td>
<td>{{bathRoom[5]}}</td>
<td>{{bathRoom[6]}}</td>
<td>{{bathRoom[7]}}</td>
<td>{{bathRoom[8]}}</td>
</tr>
</table>
</div>
<div class="HD_hotelComIntroduce">
<div class="HD_inTitle">设施与服务</div>
<div class="HD_ServiceList">
<span v-for="item in Services">{{item}}</span>
<span v-for="item in HotSpring">{{item}}</span>
</div>
</div>
<div class="HD_hotelComIntroduce" style="border:0">
<div class="HD_inTitle">酒店政策</div>
<div class="HD_hotelComIntroduce" style="border-bottom:0;">
<div class="HD_inTitle">设施与服务</div>
<div class="HD_ServiceList">
这里是酒店政策
<span v-for="item in Services">{{item}}</span>
</div>
</div>
</div>
......@@ -783,6 +832,8 @@ export default {
InterArr:[],
//温泉
HotSpring:[],
//浴室
bathRoom:[],
};
},
mounted() {
......@@ -803,7 +854,6 @@ export default {
methods: {
getList(){
this.apipost("dmc_post_Get_GetJAPAN_HotelDetail",this.msg,res => {
console.log(res,'接口1');
if (res.data.resultCode == 1) {
this.hotelDetails = res.data.data.hotelDetails;
this.hotelSummary = res.data.data.hotelSummary;
......@@ -942,9 +992,131 @@ export default {
//拆分温泉
if(this.hotelDetails.bathAndBathAmenities!=""){
this.HotSpring=[];
this.bathRoom=[];
let HotSpring = this.hotelDetails.bathAndBathAmenities.split(",");
console.log(HotSpring,'HotSpring');
this.bathRoom=HotSpring.slice(2,11);
if(HotSpring[0]==1){
this.HotSpring.push('露天温泉(也有男女(包括时间交替)·可借贷');
}else if(HotSpring[0]==2){
this.HotSpring.push('露天温泉(有男女也有(包括时间交替)·不能借贷');
}else if(HotSpring[0]==3){
this.HotSpring.push('露天温泉(男女中只有1个(包括混浴)、可以包租)');
}else if(HotSpring[0]==4){
this.HotSpring.push('露天温泉(男女中只有一个(包括混浴)，不能包租');
}
if(HotSpring[1]==1){
this.HotSpring.push('有包租浴室(没有条件)');
}else if(HotSpring[1]==2){
this.HotSpring.push('有包租浴室(有条件)');
}
if(HotSpring[11]==1){
this.HotSpring.push('阿米尼蒂:脸·手巾(免费)');
}else if(HotSpring[11]==2){
this.HotSpring.push('阿米尼蒂:脸·手巾(收费)');
}
if(HotSpring[12]==1){
this.HotSpring.push('阿米尼蒂:牙刷、牙膏(免费)');
}else if(HotSpring[12]==2){
this.HotSpring.push('阿米尼蒂:牙刷、牙膏(收费)');
}
if(HotSpring[13]==1){
this.HotSpring.push('阿米蒂奇:浴巾(免费)');
}else if(HotSpring[13]==2){
this.HotSpring.push('阿米蒂奇:浴巾(收费)');
}
if(HotSpring[14]==1){
this.HotSpring.push('水芹菜:洗发水(免费)');
}else if(HotSpring[14]==2){
this.HotSpring.push('水芹菜:洗发水(收费)');
}
if(HotSpring[15]==1){
this.HotSpring.push('阿姆尼蒂:林斯(免费)');
}else if(HotSpring[15]==2){
this.HotSpring.push('阿姆尼蒂:林斯(收费)');
}
if(HotSpring[16]==1){
this.HotSpring.push('阿米尼蒂:沐浴露(免费)');
}else if(HotSpring[16]==2){
this.HotSpring.push('阿米尼蒂:沐浴露(收费)');
}
if(HotSpring[17]==1){
this.HotSpring.push('水黾:肥皂(免费)');
}else if(HotSpring[17]==2){
this.HotSpring.push('水黾:肥皂(收费)');
}
if(HotSpring[18]==1){
this.HotSpring.push('亚健康:浴衣(免费)');
}else if(HotSpring[18]==2){
this.HotSpring.push('亚健康:浴衣(收费)');
}
if(HotSpring[19]==1){
this.HotSpring.push('艾尼蒂:睡衣(免费)');
}else if(HotSpring[19]==2){
this.HotSpring.push('艾尼蒂:睡衣(收费)');
}
if(HotSpring[20]==1){
this.HotSpring.push('阿姆尼蒂:浴衣(免费)');
}else if(HotSpring[20]==2){
this.HotSpring.push('阿姆尼蒂:浴衣(收费)');
}
if(HotSpring[21]==1){
this.HotSpring.push('足球运动员:吹风机(免费)');
}else if(HotSpring[21]==2){
this.HotSpring.push('足球运动员:吹风机(收费)');
}
if(HotSpring[22]==1){
this.HotSpring.push('艾尼蒂:羽毛被褥(免费)');
}else if(HotSpring[22]==2){
this.HotSpring.push('艾尼蒂:羽毛被褥(收费)');
}
if(HotSpring[23]==1){
this.HotSpring.push('艾尼蒂:刮胡子(免费)');
}else if(HotSpring[23]==2){
this.HotSpring.push('艾尼蒂:刮胡子(收费)');
}
if(HotSpring[24]==1){
this.HotSpring.push('水黾:淋浴帽(免费)');
}else if(HotSpring[24]==2){
this.HotSpring.push('水黾:淋浴帽(收费)');
}
if(HotSpring[25]==1){
this.HotSpring.push('阿米尼蒂:棉签(免费)');
}else if(HotSpring[25]==2){
this.HotSpring.push('阿米尼蒂:棉签(收费)');
}
if(HotSpring[26]==1){
this.HotSpring.push('水黾:冲澡(免费)');
}else if(HotSpring[26]==2){
this.HotSpring.push('水黾:冲澡(收费)');
}
if(HotSpring[27]==1){
this.HotSpring.push('石梳:梳子刷(有)');
}
if(HotSpring[28]==1){
this.HotSpring.push('其他温泉浴:展望浴(没有条件)');
}else if(HotSpring[28]==2){
this.HotSpring.push('其他温泉浴:展望浴(有条件)');
}
if(HotSpring[29]==1){
this.HotSpring.push('其他:桑拿浴(免费)');
}else if(HotSpring[29]==2){
this.HotSpring.push('其他:桑拿浴(收费)');
}
if(HotSpring[30]==1){
this.HotSpring.push('其他:jazza(没有条件)');
}else if(HotSpring[29]==2){
this.HotSpring.push('其他:jazza(有条件)');
}
}
} else {
this.Error(res.data.message);
......@@ -956,7 +1128,6 @@ export default {
//获取符合条件房型
getSimilar(){
this.apipost("dmc_post_Get_GetJAPAN_RoomsList",this.SimilarMsg,res => {
console.log(res,'similarrrr');
if (res.data.resultCode == 1) {
if(Object.prototype.toString.call(res.data.data.roomRateDetails) == '[object Object]'){
this.SimilarList.push(res.data.data.roomRateDetails);
......
src/components/Hotel/HotelHome.vue
View file @ 2e8c0a92
......@@ -152,21 +152,21 @@
</div>
<div class="banner_img" style="margin:0 auto;margin-top:30px;">
<div class="Ht_dangji">
<div class="item">
<div class="item" @click="goSearchDetail('大阪府')">
<img src="../../assets/img/hotel/daban.png" alt=""/>
<div class="line"></div>
<div class="Ht_diming">
大阪
</div>
</div>
<div class="item">
<div class="item" @click="goSearchDetail('东京都')">
<img src="../../assets/img/hotel/dongjing.png" alt=""/>
<div class="line"></div>
<div class="Ht_diming">
东京
</div>
</div>
<div class="item">
<div class="item" @click="goSearchDetail('京都府')">
<img src="../../assets/img/hotel/jingdu.png" alt=""/>
<div class="line"></div>
<div class="Ht_diming">
......@@ -215,33 +215,33 @@
</div>
<div class="Ht_hotArea">
<div class="Ht_hoAreaOne">
<img src="../../assets/img/hotel/mgw.png" alt=""/>
<img src="../../assets/img/hotel/mgw.png" @click="goSearchDetail('名古屋')" alt=""/>
<div>名古屋</div>
</div>
<div class="Ht_otherCommon">
<img src="../../assets/img/hotel/biefu.png" alt=""/>
<img src="../../assets/img/hotel/biefu.png" @click="goSearchDetail('大分县')" alt=""/>
<div>别府</div>
</div>
<div class="Ht_otherCommon">
<img src="../../assets/img/hotel/dongye.png" alt=""/>
<img src="../../assets/img/hotel/dongye.png" @click="goSearchDetail('北海道')" alt=""/>
<div>洞爷.登别.苫小牧</div>
</div>
</div>
<div class="Ht_hotArea" style="margin-top:3px;">
<div class="Ht_otherCommon" style="margin-left:0;">
<img src="../../assets/img/hotel/shangye.png" alt=""/>
<img src="../../assets/img/hotel/shangye.png" @click="goSearchDetail('东京都')" alt=""/>
<div>上野.浅草两国</div>
</div>
<div class="Ht_otherCommon">
<img src="../../assets/img/hotel/shenhu.png" alt=""/>
<div>神户.有马.明石头</div>
<img src="../../assets/img/hotel/shenhu.png" @click="goSearchDetail('兵库县')" alt=""/>
<div>神户.有马.明石</div>
</div>
<div class="Ht_otherCommon">
<img src="../../assets/img/hotel/xianggen.png" alt=""/>
<img src="../../assets/img/hotel/xianggen.png" @click="goSearchDetail('神奈川县')" alt=""/>
<div>箱根</div>
</div>
<div class="Ht_otherCommon">
<img src="../../assets/img/hotel/zhoubian.png" alt=""/>
<img src="../../assets/img/hotel/zhoubian.png" @click="goSearchDetail('京都府')" alt=""/>
<div>京都站周边</div>
</div>
</div>
......@@ -324,7 +324,7 @@ export default {
isShowPop:false,
pickerOptions0: {
disabledDate(time) {
let today_after7=moment().add(0,'days').format('YYYY-MM-DD');
let today_after7=moment().add(8,'days').format('YYYY-MM-DD');
return time.getTime() < new Date(today_after7).getTime() - 8.64e7;
}
},
......@@ -340,12 +340,43 @@ export default {
methods: {
//查询
Search() {
console.log(this.msg,'msgggg');
if(this.msg.place==''){
this.Error('请选择目的地');
return;
}
if(this.msg.StartDate==''){
this.Error('请选择入住时间');
return;
}
if(this.msg.EndDate==''){
this.Error('请选择退房时间');
return;
}
this.$router.push({
path:"/HotelList",
query:{msg:JSON.stringify(this.msg)}
})
},
//首页点击跳转
goSearchDetail(keywords){
let msg = {
place:keywords,
StartDate:moment().format("YYYY-MM-DD"),
EndDate:moment().add(1,'days').format('YYYY-MM-DD'),
roomList:[
{
roomNum:1,
numberOfAdults:1,
numberOfChildren:0,
childAges:0
}
],
}
this.$router.push({
path:"/HotelList",
query:{msg:JSON.stringify(msg)}
})
},
//房间数改变
getRoomList(roomNum){
this.isShowPop=true;
......@@ -589,6 +620,9 @@ export default {
width:1200px;
margin:auto;
}
.Ht_hotArea>div{
cursor: pointer;
}
.Ht_special>div{
width:240px;
height:260px;
......
src/components/Hotel/HotelList.vue
View file @ 2e8c0a92
......@@ -96,10 +96,10 @@
}
.HL_ScList{
width:100%;
height:43px;
height:40px;
display: flex;
align-items: center;
border-bottom:1px solid #DDDDDD;
/* border-bottom:1px solid #DDDDDD; */
position: relative;
}
.HL_ScList:last-child{
......@@ -107,7 +107,7 @@
}
.HL_Screen .HL_ScList span{
display:inline-block;
margin-right:60px;
margin-right:20px;
cursor: pointer;
padding:4px 8px;
......@@ -176,7 +176,8 @@
.clearfix:after {content: "\0020";display: block;height: 0;clear: both;}
.HL_ListTable{
float:left;
width:840px;
/* width:840px; */
width:100%;
border-collapse:collapse;
}
.HL_ListTable td{
......@@ -205,7 +206,8 @@
float:left;
position: relative;
margin-left:13px;
width:605px;
/* width:605px; */
width:900px;
height:148px;
}
.HL_ListTitle{
......@@ -328,7 +330,7 @@
cursor: pointer;
color:blue;
position: absolute;
right:55px;
right:10px;
top:14px;
}
.HotelList .pagination {
......@@ -355,7 +357,10 @@
color:rgb(239, 242, 247);
}
.HL_Maxheight{
height:150px!important;
height:114px!important;
}
.HL_Two .icon-img-rili{
margin-left:0!important;
}
</style>
......@@ -420,6 +425,7 @@
size="small"
value-format="yyyy-MM-dd"
v-model="msg.arrivalDate"
:picker-options="pickerOptions0"
type="date"
placeholder="入住日">
</el-date-picker>
......@@ -428,6 +434,7 @@
size="small"
value-format="yyyy-MM-dd"
v-model="msg.departureDate"
:picker-options="pickerOptions0"
type="date"
placeholder="离店日">
</el-date-picker>
......@@ -590,7 +597,8 @@
<i class="iconfont icon-jiantou-copy"></i> -->
</div>
<div class="clearfix" v-loading="loading">
<div style="width:838px;float:left;min-height:380px;">
<!-- <div style="width:838px;float:left;min-height:380px;"> -->
<div style="width:100%;float:left;min-height:380px;">
<table class="HL_ListTable">
<tr v-for="item in dataList">
<td>
......@@ -642,20 +650,22 @@
</div>
</div>
</div>
<div class="HL_Map">
<div class="HL_Map" style="display:none;">
</div>
</div>
</div>
<el-pagination v-if="dataList.length>0" class="pagination"
@current-change="CurrentChange"
:current-page.sync="msg.displayFrom"
background
layout="prev, pager, next"
layout="total, prev, pager, next"
:total="TotalPage">
</el-pagination>
</div>
</template>
<script>
import moment from "moment";
export default {
data() {
return {
......@@ -892,13 +902,18 @@ export default {
departureDate:'',
searchroomGroup:[],
lowrateBySetCurrency:''
}
},
pickerOptions0: {
disabledDate(time) {
let today_after7=moment().add(8,'days').format('YYYY-MM-DD');
return time.getTime() < new Date(today_after7).getTime() - 8.64e7;
}
},
};
},
mounted() {
let msgList = JSON.parse(this.$route.query.msg);
this.placeKeyWords = msgList.place;
console.log(msgList,'msgList');
this.msg.arrivalDate = msgList.StartDate;
this.msg.departureDate = msgList.EndDate;
this.auditNum = msgList.auditNum;
......@@ -1011,13 +1026,11 @@ export default {
this.msg.searchMealType.push(x.Id);
}
})
console.log(this.msg,'msg');
this.loading=true;
this.dataList = [];
this.apipost("dmc_post_Get_GetJAPAN_HotelList",this.msg,res => {
this.loading=false;
if (res.data.resultCode == 1) {
console.log(res,'resssss');
this.dataList = res.data.data.hotelSummary;
this.dataList.forEach(x=>{
x.reviewRating = parseFloat(x.reviewRating);
......
src/components/Hotel/HotelPay.vue 0 → 100644
View file @ 2e8c0a92
<template>
<div class="pay_vue">
<el-row v-show="order_exit=='1'" :gutter="18">
<el-col :span="18" :offset="3">
<!-- 头部 -->
<div class="head" style="margin-top:20px;">
<div style="box-sizing:border-box;">
<div style="float:left;">
<i class="iconfont icon-jinggao"></i>
<div style="margin-left:50px">
<p style="font-size:14px;font-weight:600">
订单提交成功！
</p>
<p style="font-size:12px">请您在
<span style="color:#FF680B;">12小时</span>
内完成支付，否则订单会自动取消</p>
</div>
</div>
<div style="text-align:center;float:right">
<span style="font-weight:200;font-size:12px;margin-right:10px;">应付金额</span>
<span style="color:#FF680B;font-size:18px;font-weight:bold;">{{TotalPrice}}</span>
<span style="font-size:12px;color:#333333">元</span>
</div>
</div>
</div>
<div class="payvue_content">
<div class="ordernum">
订单号 : {{bookingNumber}}
<div class="triangle_border_left"></div>
</div>
<p style="text-align:center;font-size:18px;color:#333333">支付金额
<span style="font-size:18px;color:#FF680B;">￥</span>
<span style="color:#FF680B;font-size:30px;font-weight:bold;">{{TotalPrice}}</span>
</p>
<el-row style="margin-top:30px" v-loading="codeLoading">
<el-col class="position" style="padding-right:50px" :span="12">
<div style="float:right" class="pay_img">
<div class="w21">
<img class="title_img" src="../../assets/img/ticket/zfb.png" alt="">
<div class="title_content">
<p>支付宝</p>
<p>
<span @click="Code('3')" style="cursor:pointer;color:#FF680B;font-size:14px">点击生成二维码</span>
打开支付宝扫码支付
</p>
</div>
</div>
<div v-show="zfbpay_imgcode" style="text-align:center">
<img class="pay_imgcode" :src="codeInfo.CodeURL" alt="">
<p style="color:#FF680B;cursor:pointer" @click="Code('3')" v-show="code_ts!=''">{{code_ts}}</p>
<!-- <p>二维码有效时限
<span style="color:#FF680B;font-size:14px">{{time_zfb_5}}</span>
</p> -->
</div>
</div>
</el-col>
<el-col class="position" style="padding-left:50px" :span="12">
<div class="pay_img">
<div class="w21">
<img class="title_img" src="../../assets/img/ticket/weixin.png" alt="">
<div class="title_content">
<p>微信</p>
<p>
<span @click="Code('1')" style="cursor:pointer;color:#FF680B;font-size:14px">点击生成二维码</span>
打开微信扫码支付
</p>
</div>
</div>
<div v-show="wxpay_imgcode" style="text-align:center">
<img class="pay_imgcode" :src="codeInfo.CodeURL" alt="">
<p style="color:#FF680B;cursor:pointer" @click="Code('1')" v-show="code_ts!=''">{{code_ts}}</p>
<!-- <p>二维码有效时限
<span style="color:#FF680B;font-size:14px">{{time_zfb_5}}</span>
</p> -->
</div>
</div>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
<!-- 订单自动取消 -->
<div v-show="order_exit=='2'" style="margin:20px auto;text-align:center">
<span>{{order_exit_info}}</span>
<router-link to="/HotelSure" style="color:#ee4454;text-decoration:underline">返回重新下单>></router-link>
</div>
<div class="orderPay" v-show="order_exit=='3'">
<div class="div_1">
<img src="../../assets/img/ticket/gou.png" alt="">
<div style="padding-left:80px;box-sizing: border-box;width:100%">
<p style="font-size:24px;color:#333;font-weight:700">订单支付成功！</p>
<p style="font-size:12px;color:#333">如有疑问 可致电028-565464646，点击
<router-link to="/newPersonalCenter?key=8-1" style="color:#ee4454;text-decoration:underline">查看订单>></router-link>
</p>
</div>
</div>
<div class="div_2">
<p>
<span>支付金额：￥{{TotalPrice}}</span>
</p>
<p>
<span>订单编号：{{bookingNumber}}</span>
</p>
</div>
<img class="back" src="../../assets/img/ticket/back.png" alt="">
</div>
</div>
</template>
<script>
import moment from 'moment'
export default {
data() {
return {
visa:false,
zfbpay_imgcode: false,
wxpay_imgcode: false,
time_15: 0,
time_zfb_5: 0,
code: {
OrderSource: 1,
body: "",
attach: "",
total_fee: "",
payway: "",
CancelTime:''
},
AirOrderId:0,
Commoditydetails: {},
codeInfo:{},
order_exit:'1',
order_exit_info:"",
order_status:false,
timer:"",
code_yxq:0,
code_timer:'',
code_ts:"",
codeLoading:false,
PayOrder:"",
Pay_timer:"",
CodeVialdTime:0,
payway:-1,
Visainfo:{},
//应付总额
TotalPrice:0,
//订单号
bookingNumber:0
};
},
created() {
this.visa=true;
let msgList = JSON.parse(this.$route.query.msg);
let userInfo = this.getLocalStorage();
this.TotalPrice=msgList.bookMoney;
this.bookingNumber=msgList.orderId;
this.code.body=`${msgList.hotelName}${msgList.totalPnumber}${msgList.bookMoney}`;
this.code.attach=`${msgList.costType}|${userInfo.name}|${msgList.orderId}|${userInfo.customerId}|${msgList.RB_Branch_id}`
this.code.total_fee=msgList.bookMoney+'';
this.code.CancelTime = moment(msgList.CancelTime).format('YYYY-MM-DD HH:mm:ss');
this.Code('3');
},
destroyed: function () {
clearInterval(this.Pay_timer);
},
methods: {
Code(str) {
this.payway=str?this.payway=str:this.payway;
this.codeLoading=true;
this.code_ts="";
this.zfbpay_imgcode = false;
this.wxpay_imgcode = false;
this.code.payway = this.payway;
this.apipost(
"OnlinePay_post_GetCodeUrl",
this.code,
res => {
this.codeLoading=false;
if (res.data.resultCode == 1) {
this.codeInfo=res.data.data;
this.code_yxq=moment(this.codeInfo.ExpireDate).format('x')-moment(this.codeInfo.NowDate).format('x');
if((this.code_yxq/1000)>this.CodeVialdTime){
this.CodeVialdTime=(this.code_yxq/1000);
}
this.PayOrder=this.codeInfo.Pay_Order;
clearInterval(this.Pay_timer);
this.Time5();
this.PayStatus();
if (this.payway == "1") {
//微信
this.wxpay_imgcode = true;
} else if (this.payway == "3") {
//支付宝
this.zfbpay_imgcode = true;
}
if(res.data.data.IsUpdateAirOrderPayStatus==1){
// 获取支付状态
}
}else{
this.Error(res.data.message)
}
},
err => {}
);
},
Time15() {
clearInterval(this.timer);
this.CodeVialdTime =parseInt(this.Commoditydetails.timeMillisecond / 1000);
this.timer = setInterval(() => {
this.CodeVialdTime--;
if (this.CodeVialdTime <= 0) {
clearInterval(this.timer);
clearInterval(this.Pay_timer);
this.order_exit='2';
this.order_exit_info="订单支付超时，请重新下单！"
}
this.time_15 = this.s_to_hs(this.CodeVialdTime);
}, 1000);
},
// 验证是否支付成功
PayStatus(){
this.Pay_timer = setInterval(() => {
this.apipost(
"ticket_get_GetAirPayMoneyIsSuccess",
{PayOrder:this.PayOrder},
res => {
// res.data.resultCode =1;
if (res.data.resultCode == 1) {
clearInterval(this.Pay_timer);
this.order_exit='3';
}else{
// this.$message.error(res.message)
// this.payok=false;
}
},
err => {}
);
}, 10000);
},
s_to_hs(s) {
//计算分钟
//算法：将秒数除以60，然后下舍入，既得到分钟数
var h;
h = Math.floor(s / 60);
//计算秒
//算法：取得秒%60的余数，既得到秒数
s = s % 60;
//将变量转换为字符串
h += "";
s += "";
//如果只有一位数，前面增加一个0
h = h.length == 1 ? "0" + h : h;
s = s.length == 1 ? "0" + s : s;
return h + "分" + s + "秒";
},
Time5() {
clearInterval(this.code_timer);
let numall = this.code_yxq /1000;
this.code_timer = setInterval(() => {
numall--;
if (numall <= 0) {
if(this.CodeVialdTime>0){
this.Code();
}else{
this.code_ts="二维码有效时限过期，点击重新生成"
clearInterval(this.code_timer);
}
}
this.time_zfb_5 = this.s_to_hs(numall);
}, 1000);
},
}
};
</script>
<style>
.pay_vue{
font-family: "PingFang"
}
.pay_vue .icon-jinggao{
color: #49C0A1;
font-size: 38px;
position: absolute;
top:8px;
}
.pay_vue .orderPay .div_2 p span:nth-child(2){
float: right;
}
.pay_vue .orderPay .div_2 {
margin-top: 20px;
width: 320px;
}
.pay_vue .orderPay .div_2 p{
padding:6px 0;
margin:20px 0;
font-size: 12px;
color:#333;
border-bottom:1px solid rgba(221,221,221,1);
}
.pay_vue .orderPay .div_1 img{
width: 54px;
height:54px;
position: absolute;
}
.pay_vue .orderPay .div_1{
position: relative;
box-sizing: border-box;
}
.pay_vue .orderPay{
padding-top:130px;
padding-left:150px;
margin:30px auto;
width:1039px;
height:553px;
position: relative;
box-shadow:0px 4px 38px 0px rgba(107,107,107,0.2);
box-sizing: border-box;
}
.pay_vue .orderPay .back{
position: absolute;
width: 384px;
height: 289px;
right:10px;
top:110px;
}
.position {
box-sizing: border-box;
}
.payvue_content .pay_img .pay_imgcode {
display: block;
margin: 15px auto;
width: 216px;
height: 216px;
}
.payvue_content .pay_img .w21 .title_content {
padding-left: 70px;
box-sizing: border-box;
overflow: auto;
}
.payvue_content .pay_img .w21 {
position: relative;
}
.payvue_content .pay_img .title_img {
width: 47px;
height: 47px;
border-radius: 50%;
position: absolute;
}
.payvue_content .pay_img {
width: 350px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 6px 0px rgba(107, 107, 107, 0.2);
padding: 28px 10px;
box-sizing: border-box;
}
.payvue_content .ordernum {
position: relative;
width: 203px;
height: 35px;
line-height: 35px;
background: #49c0a1;
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 1);
padding-left: 16px;
box-sizing: border-box;
margin-left:-7px;
border-right-color: transparent;
}
.payvue_content .triangle_border_left{
width:0;
height:0;
border-width:17px 17px 17px 0;
border-style:solid;
border-color:transparent #30a19b transparent transparent;/*透明 灰 透明 透明 */
position: absolute;
right:0;
top:0px;
}
.payvue_content .ordernum:after { /*书签的夹角*/
content: '';
position: absolute;
top: 35px;
left: 0px;
border: 3px solid #49c0a1;
border-left-color: transparent;
border-bottom-color: transparent;
}
.pay_vue p {
margin: 0;
}
.pay_vue .head {
padding: 4px 0;
position: relative;
height: 40px;
}
.payvue_content {
min-height:479px;
position: relative;
margin-top: 15px;
padding-bottom: 25px;
padding-top: 16px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 4px 38px 0px rgba(107, 107, 107, 0.2);
}
</style>
src/components/Hotel/HotelSure.vue
View file @ 2e8c0a92
......@@ -315,18 +315,18 @@
<div class="HotelSure">
<div class="HS_LeftInfo">
<div class="HS_div1">
<div class="HS_divFirst Hs_OneType">
<!-- <div class="HS_divFirst Hs_OneType">
<img src="../../assets/img/hotel/childbed.png" alt=""/>
免费！0-1岁儿童可免费使用婴儿床
</div> -->
<div class="HS_divThree Hs_OneType" style="margin:20px 0 20px 20px;">
<img src="../../assets/img/hotel/childbed3.png" alt=""/>
超过13岁视为成人处理
</div>
<div class="HS_divTwo Hs_OneType">
<img src="../../assets/img/hotel/childbed2.png" alt=""/>
预定成功后房间将为您整晚保留
</div>
<div class="HS_divThree">
<img src="../../assets/img/hotel/childbed3.png" alt=""/>
超过13岁视为成人处理
</div>
</div>
<div class="HS_div2">
<div class="HS_bookTitle">预订信息</div>
......@@ -433,13 +433,12 @@
</div>
<div class="HS_div3">
<div class="HS_bookTitle">
<div class="HS_bookTitle" style="margin-bottom:20px;">
入住信息<span><i class="iconfont icon-jinggao1"></i>所填姓名需和入住时所持证件一致</span>
</div>
<div class="HS_div2One HS_BookMan">
<ul>
<li style="margin-left:56px;">入住时间</li>
<el-time-select
<el-form :model="sureMsg" :rules="rules" ref="sureMsg" label-width="120px">
<el-form-item label="入住时间" prop="checkInTime">
<el-time-select style="width:400px;"
v-model="sureMsg.checkInTime"
:picker-options="{
start: '15:00',
......@@ -449,78 +448,48 @@
value-format="HH:MM"
placeholder="选择时间">
</el-time-select>
</ul>
</div>
<div class="HS_div2One HS_BookMan">
<ul>
<li class="HS2_title">预订人</li>
<li>住客<img class="HS_wenhao" src="../../assets/img/hotel/wenhao.png"/></li>
<el-input tyle="text" v-model="sureMsg.guestLastName" style="width:120px;margin-right:20px;" placeholder="姓 Last Name"></el-input>
<el-input tyle="text" v-model="sureMsg.guestFirstName" style="width:120px;" placeholder="名 First Name"></el-input>
</ul>
</div>
<div class="HS_div2One HS_AreaSelect">
<ul>
<li style="margin-left:53px;">当前地址</li>
<li>
<el-input type="text" v-model="sureMsg.guestAddress" style="width:400px;" placeholder="详细地址"></el-input>
</li>
</ul>
</div>
<div class="HS_div2One HS_Email">
<ul>
<li style="margin-left:67px;">Email</li>
<li>
<el-input type="text" v-model="sureMsg.guestEmail" style="width:400px;" placeholder="接收确认邮件，获得出行资格"></el-input>
</li>
</ul>
</div>
<div class="HS_div2One HS_Email">
<ul>
<li style="margin-left:67px;">电话</li>
<li>
<el-input type="text" @keyup.native="checkInteger(sureMsg,'guestPhoneNumber')" v-model="sureMsg.guestPhoneNumber" style="width:400px;" placeholder="电话"></el-input>
</li>
</ul>
</div>
<div class="HS_div2One HS_Email" style="margin-top:30px;">
<ul>
<li style="margin-left:45px;vertical-align:top;">客户需求</li>
<li>
<el-input type="textarea" :rows="3" maxlength="400" v-model="sureMsg.guestRequest" style="width:400px;" placeholder="住宿需求"></el-input>
</li>
</ul>
</div>
<div class="HS_div2One HS_Email" style="margin-top:30px;">
<ul>
<li style="margin-left:20px;vertical-align:top;">客户需求补充</li>
<li>
<el-input type="textarea" :rows="3" maxlength="400" v-model="sureMsg.guestRequestAppendix" style="width:400px;" placeholder="住宿需求"></el-input>
</li>
</ul>
</div>
<div class="HS_div2One HS_Email" style="margin-top:30px;">
<ul>
<li style="margin-left:68px;vertical-align:top;">评语</li>
<li>
<el-input type="textarea" :rows="3" maxlength="400" v-model="sureMsg.comment" style="width:400px;" placeholder="住宿需求"></el-input>
</li>
</ul>
</div>
</el-form-item>
<el-form-item label="预订人" style="display:inline-block;" prop="guestLastName">
<el-input tyle="text" v-model="sureMsg.guestLastName" style="width:190px;margin-right:30px;" placeholder="姓 Last Name"></el-input>
</el-form-item>
<el-form-item prop="guestFirstName" style="display:inline-block;margin-left:-130px;">
<el-input tyle="text" v-model="sureMsg.guestFirstName" style="width:190px;" placeholder="名 First Name"></el-input>
</el-form-item>
<el-form-item label="当前地址" prop="guestAddress">
<el-input type="text" v-model="sureMsg.guestAddress" style="width:400px;" placeholder="详细地址"></el-input>
</el-form-item>
<el-form-item label="Email" prop="guestEmail">
<el-input type="text" v-model="sureMsg.guestEmail" style="width:400px;" placeholder="邮箱地址"></el-input>
</el-form-item>
<el-form-item label="电话" prop="guestPhoneNumber">
<el-input type="text" @keyup.native="checkInteger(sureMsg,'guestPhoneNumber')" v-model="sureMsg.guestPhoneNumber" style="width:400px;" placeholder="电话"></el-input>
</el-form-item>
<el-form-item label="客户需求" prop="guestRequest">
<el-input type="textarea" :rows="3" maxlength="400" v-model="sureMsg.guestRequest" style="width:400px;" placeholder="住宿需求"></el-input>
</el-form-item>
<el-form-item label="客户需求补充" prop="guestRequest">
<el-input type="textarea" :rows="3" maxlength="400" v-model="sureMsg.guestRequestAppendix" style="width:400px;" placeholder="客户补充需求"></el-input>
</el-form-item>
<el-form-item label="评语" prop="guestRequest">
<el-input type="textarea" :rows="3" maxlength="400" v-model="sureMsg.comment" style="width:400px;" placeholder="评语"></el-input>
</el-form-item>
</el-form>
<div class="HS_div2One HS_AreaSelect">
<ul v-for="item in sureMsg.roomGroup">
<li class="HS2_title">房间{{item.roomCount}}</li>
<li style="margin-left:20px;">人数</li>
<li style="margin-left:20px;">成人男</li>
<li>
<el-select style="width:90px" v-model="item.roomMaleCount" :disabled="item.isShowMale" clearable placeholder="成人男">
<el-option v-for="item in Pnumber" :value="item.num" :label="item.num"></el-option>
</el-select>
</li>
<li>成人女</li>
<li>
<el-select style="width:90px" v-model="item.roomFemaleCount" :disabled="item.isShowFemale" clearable placeholder="成人女">
<el-option v-for="item in Pnumber" :value="item.num" :label="item.num"></el-option>
</el-select>
</li>
<li>儿童数</li>
<li>
<el-select style="width:90px" v-model="item.roomChildCount" :disabled="item.isShowChild" clearable placeholder="儿童">
<el-option v-for="item in Pnumber" :value="item.num" :label="item.num"></el-option>
......@@ -529,7 +498,7 @@
</ul>
</div>
</div>
<input type="button" class="HD_payBtn" @click="BuyHoTel()" value="下单" />
<input type="button" class="HD_payBtn" @click="submitForm('sureMsg')" value="下单" />
</div>
<div class="HS_RightList">
<div class="HS_RightTopImg">
......@@ -646,6 +615,54 @@ export default {
CustomerId:0,
CreateBy:0
},
//验证规则
rules: {
checkInTime: [{
required: true,
message: '请选择入住时间',
trigger: 'change'
}],
guestLastName:[{
required: true,
message: "请输入英文姓",
trigger: "change"
},
{
pattern: /^[a-zA-Z]/,
message: "请输入英文姓"
}],
guestFirstName:[{
required: true,
message: "请输入英文名",
trigger: "change"
},
{
pattern: /^[a-zA-Z]/,
message: "请输入英文名"
}],
guestAddress: [{
required: true,
message: '请选择入地址',
trigger: 'blur'
}],
guestEmail: [{
required: true,
message: "请输入邮箱地址",
trigger: "change"
},
{
pattern: /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/,
message: "请输入有效的邮箱地址"
}],
guestPhoneNumber: [{
required: true,
message: "请输入电话号码",
trigger: "blur"
},{
pattern: /^1[3|4|5|7|8|9][0-9]\d{8}$/,
message: "请填写正确的手机号"
}],
},
//人数下拉
Pnumber:[{
num:0
......@@ -698,7 +715,6 @@ export default {
mounted() {
let msgList = JSON.parse(this.$route.query.msg);
this.msg = msgList;
console.log(msgList,'msglist');
this.auditNum=0;
this.childNum=0;
this.msg.searchroomGroup.forEach(x=>{
......@@ -721,7 +737,6 @@ export default {
}
this.sureMsg.roomGroup.push(obj);
}
console.log(this.sureMsg,'sureMsgsureMsgsureMsg');
this.getWeek();
this.getBookInfo();
},
......@@ -741,6 +756,11 @@ export default {
this.dataList.roomGroup=arr;
}
this.dataList.roomGroup.forEach(x=>{
if(Object.prototype.toString.call(x.rateGroup) == '[object Object]'){
let arr = [];
arr.push(x.rateGroup);
x.rateGroup= arr;
}
let tt = 0;
x.rateGroup.forEach(z=>{
tt+=parseFloat(z.perAdultRate);
......@@ -764,6 +784,17 @@ export default {
getDateInfo(){
this.getWeek();
this.getBookInfo();
},
//提交
submitForm(addMsg) {
//提交创建、修改表单
this.$refs[addMsg].validate(valid => {
if (valid) {
this.BuyHoTel();
} else {
return false;
}
});
},
//点击支付
BuyHoTel(){
......@@ -792,9 +823,27 @@ export default {
this.sureMsg.totalChargeableRateInfo = this.totalPrice;
this.apipost("dmc_post_Get_GetJAPAN_HotelBooking",this.sureMsg,res => {
console.log(res,'保存完毕');
if (res.data.resultCode == 1) {
this.Succrss(res.data.message);
this.Success('预订成功');
console.log(res.data.data,'ressss');
let num =0;
this.sureMsg.roomGroup.forEach(x=>{
num+=parseInt(x.roomFemaleCount)+parseInt(x.roomMaleCount)+parseInt(x.roomChildCount)
})
let msg = {
RB_Branch_id:res.data.data.RB_Branch_id,
costType:res.data.data.costType,
orderId:res.data.data.orderId,
bookingNumber:res.data.data.parmResult.bookingNumber,
bookMoney:res.data.data.parmResult.totalChargeableRateInfo,
CancelTime:res.data.data.CancelTime,
hotelName:res.data.data.parmResult.hotelName,
totalPnumber:num
}
this.$router.push({
path:"/HotelPay",
query:{msg:JSON.stringify(msg)}
})
} else {
this.Error(res.data.message);
}
......
src/router.js
View file @ 2e8c0a92
......@@ -412,6 +412,15 @@ export default new Router({
title: "酒店确认订单"
}
},
{
path: "/HotelPay",
name: "HotelPay",
component: resolve =>
require(["@/components/Hotel/HotelPay"], resolve),
meta: {
title: "酒店支付"
}
},
// {
// path: "/ticket/Pay/:id",
// name: "Pay",
......
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