Skip to content

S
SuperMan
Commit eb31fcbb authored by 吴春's avatar 吴春
Browse files
Options

道旅酒店

parent fab47f50
Hide whitespace changes
Inline Side-by-side
Showing with 2446 additions and 4 deletions
src/components/Hotel/DiDa/HotelDetails.vue 0 → 100644
View file @ eb31fcbb
<style scoped>
.hotelCard-img {
width: 228px;
height: 162px;
overflow: hidden;
}
.hotelCard-title {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.hotel-info-item::before {
display: inline;
content: "·";
font-weight: bolder;
margin-right: 4px;
}
.height-320 {
height: 250px;
}
.hotel-details-table {
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;
}
.hotel-details-tableMoblie {
border: 1px solid #dcdcdc;
border-collapse: collapse;
width: 100%;
margin-top: 5px;
}
.hotel-details-tableMoblie .td01 {
padding: 3px 10px;
background: #f7f7f7;
width: 33.33%;
height: 19px;
text-align: center;
}
.hotel-details-tableMoblie .td02 {
padding: 3px 5px;
background: #fafafa;
width: 33.33%;
height: 19px;
text-align: center;
}
.hotel-details-tableMoblie td {
width: 100%;
padding: 10px 20px;
vertical-align: middle;
text-align: center;
border: 1px solid #dcdcdc;
font-size: 14px;
box-sizing: border-box;
}
.HD_hotelComIntroduce {
margin: auto;
height: auto;
border-bottom: 1px solid #dcdcdc;
color: #111111;
}
.HD_hotelComIntroduce span {
display: inline-block;
margin-bottom: 10px;
}
.HD_inTitle {
font-size: 14px;
font-weight: bold;
color: #111111;
margin-bottom: 20px;
}
.HD_ServiceList span {
display: inline-block;
margin: 0 30px 10px 0;
white-space: nowrap;
}
.bg-white{
background:#fff!important;
}
.q-py-lg{
padding-top: 24px;
padding-bottom: 24px;
}
.column{
flex-direction: column;
}
.row{
display: flex;
flex-wrap: wrap;
}
.q-mb-lg {margin-bottom: 24px;}
.justify-between{justify-content: space-between;}
.q-position-engine{
margin-top: var(--q-pe-top, 0) !important;
margin-left: var(--q-pe-left, 0) !important;
will-change: auto;
}
.scroll{
overflow: auto;
}
.q-menu {
position: fixed !important;
display: inline-block;
max-width: 95vw;
box-shadow: 0 1px 5px #0003, 0 2px 2px #00000024, 0 3px 1px -2px #0000001f;
background: #fff;
border-radius: 4px;
overflow-y: auto;
overflow-x: hidden;
outline: 0;
max-height: 65vh;
z-index: 6000;
}
.q-pa-md {
padding: 16px;
}
.q-pa-mdlr {
padding:0px 16px;
}
.rounded-borders {
border-radius: 4px;
}
.wrap {
flex-wrap: wrap;
}
.q-card {
box-shadow: 0 1px 5px #0003, 0 2px 2px #00000024, 0 3px 1px -2px #0000001f;
border-radius: 4px;
vertical-align: top;
background: #fff;
position: relative;
}
.q-card>div:not(:last-child), .q-card>img:not(:last-child) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.q-card>div:first-child, .q-card>img:first-child {
border-top: 0;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
.q-card>div {
border-left: 0;
border-right: 0;
box-shadow: none;
}
.q-mr-md {
margin-right: 16px;
}
.no-shadow{
display: flex;
justify-content: flex-start;
}
.el-card__body{
height: 285px;
/* display: flex;
max-width: 1200px;
*/
display: flex;
flex-wrap: wrap;
overflow: auto;
}
.el-date-editor .el-range-input{
width:70px;
}
.el-range-separator{width:20px !important}
.el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner{
width:202px;
}
.el-input .el-input__inner, .el-select .el-input{
border-radius:4px;
height:32px;
}
.HD_Green {
background-color: green;
}
.text-white {
color: #fff !important;
}
.absolute, .absolute-full, .absolute-center, .absolute-bottom, .absolute-left, .absolute-right, .absolute-top, .absolute-top-left, .absolute-top-right, .absolute-bottom-left, .absolute-bottom-right {
position: absolute;
}
.HD_Black {
background-color: #000;
}
.q-px-lg {
padding-left: 24px;
padding-right: 24px;
}
.q-pl-lg {
padding-left: 24px;
}
.q-pt-sm {
padding-top: 8px;
}
.q-px-sm {
padding-left: 8px;
padding-right: 8px;
}
.q-mb-md {
margin-bottom: 16px;
}
.text-right {
text-align: right;
}
.q-pt-md {
padding-top: 16px;
}
.text-green {
color: #4caf50 !important;
}
.text-grey-6 {
color: #9e9e9e !important;
}
.text-red {
color: #f44336 !important;
}
.q-focus-helper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
border-radius: inherit;
opacity: 0;
transition: background-color .3s cubic-bezier(.25,.8,.5,1), opacity .4s cubic-bezier(.25,.8,.5,1);
}
.q-btn--actionable {
cursor: pointer;
}
.bg-green-6 {
background: #4caf50 !important;
}
.q-separator--horizontal {
display: block;
height: 1px;
}
.el-divider--horizontal{
margin:0px !important;
}
.order-show{
text-align: center;
color: red;
cursor: pointer;
}
.text-weight-bold {
font-weight: 700;
}
.text-orange {
color: #ff9800 !important;
}
</style>
<template>
<div class="q-py-lg">
<div class="bg-white q-py-lg column" style="max-width: 1366px; min-width: 375px; margin: auto;width:1300px" >
<div class="row q-px-lg q-mb-lg row justify-between" >
<div class="row items-center">
<div class="mobile-only row items-center">
<div class="text-weight-bold fz20 ellipsis" style="width: 280px">
{{ DidaHotelDetails.Name_CN }}
</div>
</div>
<!-- <div class="text-weight-bold fz20 ellipsis desktop-only">
{{DidaHotelDetails.Name_CN }}
</div> -->
<div v-if="DidaHotelRoomDetails&&DidaHotelRoomDetails.HotelList&&DidaHotelRoomDetails.HotelList.length>0&&DidaHotelRoomDetails.HotelList[0].LowestPrice">
<span
class="text-orange text-weight-bold fz18 q-pl-lg" >
{{ DidaHotelRoomDetails.HotelList[0].LowestPrice.Currency }}
{{ DidaHotelRoomDetails.HotelList[0].LowestPrice.Value }}
</span>
<span class="text-grey-8 q-pl-xs">/起</span>
</div>
<div class="q-ml-md">
<el-rate
v-model="DidaHotelDetails.StarRating"
size="2em"
color="#ff9800"
readonly
/>
</div>
</div>
</div>
<div class="col q-px-lg q-mb-lg" >
<div class="row nowrap">
<i class="text-grey-13 q-mr-xs el-icon-location-outline" name="place" size="xs"></i>
<span class="col fz14 text-weight-bold text-blick">{{DidaHotelDetails.Address_CN }}</span>
</div>
</div>
<div class="col q-px-lg" >
<div class="row nowrap">
<i class="text-grey-13 q-mr-xs el-icon-phone" name="place" size="xs" ></i>
<span class="col fz14 text-weight-bold text-blick">{{ DidaHotelDetails.Telephone }}</span>
</div>
</div>
<div class="rounded-borders bg-white row items-center q-pb-md" style="margin-top:20px;width: 1300px;">
<el-form class="iis_info_box clearfix" label-width="60px" style="display: block;width: 100%;">
<el-row>
<el-col :span="5" :gutter="35">
<el-form-item :label="$t('pub.date')">
<el-date-picker
size="small"
v-model="dateList"
type="daterange"
value-format="yyyy-MM-dd"
:picker-options="beforeCheck"
range-separator="至"
start-placeholder="入住时间"
end-placeholder="退房时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="2" :gutter="35" >
<el-form-item label="客房数" >
<el-select size="small" v-model="room" placeholder="请选择客房数" @change="getRoomList" style="width:70px;bolder:1px solid #DCDFE6;border-radius:4px;">
<el-option
v-for="item in roomList"
:key="item.Id"
:label="item.Id"
:value="item.Id">
</el-option>
</el-select>
</el-form-item>
</el-form-item>
</el-col>
<el-col :span="3" :gutter="35" style="margin-left:3%;margin-top:4px;">
<el-popover
class=""
style="z-index: 0; box-shadow: 0 0 50px #ddd !important"
placement="right"
trigger="click">
<el-card class="" style="max-width: 1222px;display: flex;">
<div
class="q-mr-md"
v-for="(item, index) in msg.searchroomGroup"
:key="index"
style="min-width: 150px; display: inline-block;line-height:35px;"
:style="index>3?'margin-top:20px;':''"
>
<div class="">
客房{{ index + 1 }}
</div>
<div class="">
<div class="">
成人
</div>
<el-select v-model="item.numberOfAdults" placeholder="请选择成人数" @change="setPeopleNum()">
<el-option
v-for="item in adultList"
:key="item.Id"
:label="item.Id"
:value="item.Id">
</el-option>
</el-select>
</div>
<div class="">
<div class="">
儿童
</div>
<el-select v-model="item.numberOfChildren" placeholder="请选择儿童数" @change="setPeopleNum()">
<el-option
v-for="item in childrenList"
:key="item.Id"
:label="item.Id"
:value="item.Id">
</el-option>
</el-select>
</div>
<div class="">
<div class="">
儿童年龄
</div>
<el-select v-model="item.ChildAgeDetails" placeholder="请选择儿童年龄">
<el-option
v-for="item in childrenAgeList"
:key="item.Id"
:label="item.Id"
:value="item.Id">
</el-option>
</el-select>
</div>
</div>
</el-card>
<el-button size="small"
unelevated
class="bg-white hover q-px-xs q-py-sm q-ml-xs text-grey-6"
icon="person"
slot="reference"
>
<div class="text-dark q-ml-xs">
{{ auditNum }}成人
<span class="q-px-sm">.</span>
<template v-if="childNum > 0">{{ childNum }}</template>
儿童
</div>
</el-button>
</el-popover>
</el-col>
<el-col :span="4" :gutter="35" style="margin-left:-4%;margin-top:7px;">
<div style="color:red;">超过13岁视为成人处理</div>
</el-col>
<el-col :span="2" :gutter="35" style="margin-left:-4%;margin-top:7px;float:right;">
<el-button type="primary" size="small" plain @click="getDiDaPriceSearchList()">检索</el-button>
</el-col>
</el-row>
</el-form>
</div>
<div class="row q-px-lg q-mb-lg row justify-between q-pa-mdlr" style="width:100%;">
<div style="width:100%;background:#e1f5fe!important;font-weight:700;border-radius:4px;height:53px;display:flex;padding-left:10px; align-items: center;">符合条件的房型</div>
</div>
<!-- 价格信息循环开始 -->
<!-- {{DidaHotelRoomDetails }} {{DidaHotelRoomDetails.HotelList}} {{DidaHotelRoomDetails.HotelList.length}} {{DidaHotelRoomDetails.HotelList[0].GroupRatePlanList}} {{DidaHotelRoomDetails.HotelList[0].GroupRatePlanList.length}} -->
<template v-if="DidaHotelRoomDetails&&DidaHotelRoomDetails.HotelList&&DidaHotelRoomDetails.HotelList.length>0&&DidaHotelRoomDetails.HotelList[0].GroupRatePlanList&&DidaHotelRoomDetails.HotelList[0].GroupRatePlanList.length>0 ">
<div class="q-my-md q-px-lg" style="width:100%;" v-for="(item, index) in DidaHotelRoomDetails.HotelList[0].GroupRatePlanList" v-loading="loading">
<div class="q-card row q-mb-md ">
<div class="col q-pa-sm q-pr-lg col-3 row no-wrap justify-between" style="border-right: 1px solid rgb(238, 238, 238);width:25%;height:auto;">
<div class="col-6" style="height: 100px;">
<div class="q-img q-img--menu" role="img" mode="cover" style="height: 100%;">
<div style="padding-bottom: 56.25%;"></div>
<div class="q-img__content absolute-full q-anchor--skip"></div>
</div>
</div>
<div class="col column q-pl-xs">
<div class="text-right text-green q-pt-md q-px-sm"> {{ getRoomType(item.BedType) }}</div>
</div>
</div>
<div class="col" style="width:75%;" >
<div v-for="(subItem, subIndex) in item.RatePlanList"
:key="subIndex"
v-show="subIndex < (isShow === index ? item.RatePlanList.length : 3)">
<el-divider v-if="subIndex != 0" ></el-divider>
<div class="relative-position" style="clear:both; position:relative;height:auto;"><!---->
<div class="col q-ml-lg q-pt-lg q-pb-md q-pr-md">
<div class="col q-pt-sm row items-center no-wrap">
<div class="absolute text-white q-px-lg " :class="subItem.BreakfastType == 2 ? 'HD_Black' : 'HD_Green'" style=" top: 0px; border-bottom-right-radius: 10px;"> {{ subItem.BreakfastType == 1 ? "不含早" : "含早" }}</div>
<div class="col-3 q-pl-lg" style="line-height: 30px;height: 30px;padding-top: 30px; height: auto; width: 25%"> {{ subItem.RatePlanName }}</div>
<div class="col-2 text-grey-6" style="line-height: 30px;height: 30px;padding-top: 30px;height: auto; width: 18%;" v-if="subItem.PriceList && subItem.PriceList != null">
<div class="q-card row q-mb-md" style="box-shadow: none"
v-for="(itemPrice, indexPrice) in subItem.PriceList"
:key="indexPrice"
v-loading="loading">
<div class="text-right text-green "> {{ getformatDateStr(itemPrice.StayDate) }} 报价:{{
itemPrice.Price
}}</div>
</div>
</div>
<div v-if="subItem.RatePlanCancellationPolicyList && subItem.RatePlanCancellationPolicyList != null">
<div class="q-card row q-mb-md" style="box-shadow: none;line-height: 30px;height: 30px;padding-top: 30px" v-for="(
itemCancella, index1
) in subItem.RatePlanCancellationPolicyList"
:key="index1"
v-loading="loading">
<div class="column q-pl-md q-pr-md">
<span class="text-right text-grey-6 q-pt-md">{{ getformatDateStr(itemCancella.FromDate) }}起取消({{subItem.Currency }}):-{{ itemCancella.Amount }}</span>
<span></span>
</div>
</div>
</div>
<div class="row no-wrap justify-end items-center q-pl-lg" style="line-height: 30px;height: 30px;padding-top: 30px;">
<div class="row no-wrap items-center q-pr-lg">
<span class="text-grey-6">{{ subItem.Currency }}</span>
<span class="fz20 text-red q-px-sm">{{
getPrice(subItem.TotalPrice)
}}</span>
</div>
<div class="q-pt-xs" style="position: absolute; right: 3%;line-height: 30px;height: 30px;">
<el-button type="success" @click="goUrl('HotelSure',subItem)">预约</el-button>
</div>
</div>
</div>
<div class="q-pt-sm q-mb-md" style="">
<span class="text-green fz12 q-px-sm" style="border: 1px solid green;margin-left:14px;">库存：{{ subItem.InventoryCount }}</span>
</div>
</div>
</div>
</div>
<div
class="order-show"
@click="showMore(index)"
v-if="item.RatePlanList.length > 3"
>
<span class="oder-show-content " :class="isShow===index?'el-icon-caret-top':'el-icon-caret-bottom'">{{
isShow === index ? "点击收起" : "点击显示更多"
}}</span>
</div>
</div>
</div>
</div>
</template>
<!-- 价格循环结束 -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: "",
EmployeeId: 0,
RB_Group_Id:'',
companyList:[],
dateList:[],
canHide: false, //更多筛选
theRooms: [] , //客房下拉
room: 1, //客房数
auditNum: 1,
childNum: null ,
adultList: [] , //成人下拉
childrenList: [] , //儿童下拉
childrenAgeList: [] , //儿童年龄下拉
isShowPop: false, //房间
SimilarList: [] ,
RoomTypeList: [] , //房间等级
HotelRoomTypes: [] , //散客房间类型
ScatMeaList: [] , //散客房间餐型
HotelMealTypes:[],//餐食类型
DidaHotelDetails:{},
DidaHotelRoomDetails:{},
msg: {
hotelId:0,
sort:0,
displayFrom:1,
CheckOutDate:"",
roomOptionCd:"",
CheckInDate:"",
searchroomGroup:[
{roomNum:1,numberOfAdults:1,numberOfChildren:0, ChildAgeDetails:""}
],
auditNum:1,
childNum:0,
},
hotelMsg:{
hotelId:0,
hotelImageSize:5,
photoGalleryGetFlg:1,
groupBookingFlg:1,
},
dataList: [],
roomList:[{Id:1},{Id:2},{Id:3},{Id:4},{Id:5},{Id:6},{Id:7},{Id:8},{Id:9},{Id:10}],
loading: false,
beforeCheck: {
disabledDate: time => {
if (this.msg.CheckInDate) {
let endTime = new Date(this.getBeforeDate(-7, new Date().Format("yyyy-MM-dd")));
return time && endTime.getTime() >= time.getTime();
} else {
return false;
}
}
},
afterCheck: {
disabledDate: time => {
if (this.msg.CheckInDate) {
let startTime = new Date(this.msg.CheckInDate);
//可以选择当天
return time && time.getTime() < startTime.getTime() - 1 * 24 * 60 * 60 * 1000;
} else {
return false;
}
}
}
};
},
methods: {
goUrl(url,row) {
if(this.dateList&&this.dateList.length>0){
this.msg.CheckInDate=this.dateList[0];
this.msg.CheckOutDate=this.dateList[1];
}
else{
this.msg.CheckInDate='';
this.msg.CheckOutDate='';
}
this.$router.push({ name:url,query:{"Address":this.DidaHotelDetails.Address_CN ,"RatePlanID":row.RatePlanID,"hotelId":this.msg.hotelId,"room":this.room,"auditNum":this.auditNum,"searchroomGroup":encodeURIComponent(JSON.stringify(this.msg.searchroomGroup)),"StartDate": this.msg.CheckInDate,"EndDate":this.msg.CheckOutDate,"childNum":this.childNum,blank:'y',tab:'道旅酒店预定'}})
},
//设置房间里面成人数改变总成人数和儿童数
setPeopleNum() {
this.auditNum = 0;
this.childNum = 0;
this.msg.searchroomGroup.forEach((x) => {
this.auditNum += x.numberOfAdults;
this.childNum += x.numberOfChildren;
if (x.numberOfChildren == 0) {
x.ChildAgeDetails = "";
}
});
if (this.auditNum == null || this.auditNum == undefined) {
this.auditNum = 1;
}
if (this.childNum == null || this.childNum == undefined) {
this.childNum = 1;
}
},
getRoomList() {
let roomNum = this.room
this.auditNum = 0;
this.childNum = 0;
let length = this.msg.searchroomGroup.length;
if (roomNum > length) {
for (let i = 1; i <= roomNum - length; i++) {
let obj = {
roomNum: i,
numberOfAdults: 1,
numberOfChildren: 0,
ChildAgeDetails: "",
};
this.msg.searchroomGroup.push(obj);
}
} else {
this.msg.searchroomGroup = this.msg.searchroomGroup.filter((x, i) => {
if (roomNum > i) return x;
});
}
this.auditNum = 0;
this.childNum = 0;
this.msg.searchroomGroup.forEach((x) => {
this.auditNum += x.numberOfAdults;
this.childNum += x.numberOfChildren;
});
this.isShowPop = true;
this.msg.auditNum = this.auditNum;
this.msg.childNum = this.childNum;
},
getDidaHotelDetails: function () {
this.loading = true
this.apipost('dmc_post_GetDidaHotelDetails', this.hotelMsg, res=>{
this.loading = false
if (res.data.resultCode == 1) {
this.DidaHotelDetails = res.data.data
console.log("this.DidaHotelDetails",this.DidaHotelDetails);
}
}, null)
},
getDiDaPriceSearchList: function () {
this.loading = true
if(this.dateList&&this.dateList.length>0){
this.msg.CheckInDate=this.dateList[0];
this.msg.CheckOutDate=this.dateList[1];
}
else{
this.msg.CheckInDate='';
this.msg.CheckOutDate='';
}
this.apipost('dmc_post_GetDiDaPriceSearchList', this.msg, res=>{
this.loading = false
if (res.data.resultCode == 1) {
this.DidaHotelRoomDetails = res.data.data
console.log("this.DidaHotelRoomDetails",this.DidaHotelRoomDetails);
}
}, null)
},
//获取道旅床类型列表
getdidaBedType() {
this.apipost('dmc_post_GetDidaBedTypeBaseInfo', this.hotelMsg, res=>{
this.loading = false
if (res.data.resultCode == 1) {
this.HotelRoomTypes = res.data.data;
}
}, null)
},
//获取道旅餐食类型
getdidaMealType() {
this.apipost('dmc_post_GetDidaMealType', this.hotelMsg, res=>{
this.loading = false
if (res.data.resultCode == 1) {
this.HotelMealTypes = res.data.data;
}
}, null)
},
//获取房型
getRoomType(roomtypeId) {
let roomtypeName = "";
if (roomtypeId > 0) {
this.HotelRoomTypes.forEach((item) => {
if (item.ID == roomtypeId) {
roomtypeName = item.Name_CN;
}
});
}
return roomtypeName;
},
//日期格式化
getformatDateStr(value) {
var dt = new Date(value);
let year = dt.getFullYear();
let month = (dt.getMonth() + 1).toString().padStart(2, "0");
let date = (dt.getDate() + 1).toString().padStart(2, "0");
return year + "-" + month + "-" + date;
},
getPrice(price) {
return Math.ceil(price);
},
showMore(index) {
if (this.isShow === index) {
this.isShow = "";
} else {
this.isShow = index;
}
},
},
created(){
let userInfo = this.getLocalStorage();
this.EmployeeId = userInfo.EmployeeId;
if(this.$route.query.id){
this.msg.hotelId = this.$route.query.id;
this.hotelMsg.hotelId= this.$route.query.id;
}
if(this.$route.query.StartDate){
this.dateList.push(this.$route.query.StartDate)
this.msg.CheckInDate = this.$route.query.StartDate
}
if(this.$route.query.EndDate){
this.dateList.push(this.$route.query.EndDate)
this.msg.CheckOutDate = this.$route.query.EndDate
}
},
mounted() {
for (let i = 1; i < 13; i++) {
var obj={Id:i}
this.childrenAgeList.push(obj);
if(i<10){
this.adultList.push(obj);
}
if(i<7){
this.childrenList.push({Id:i-1});
}
}
this.getdidaMealType();
this.getdidaBedType();
this.getDiDaPriceSearchList();
this.getDidaHotelDetails();
}
};
</script>
\ No newline at end of file
src/components/Hotel/DiDa/HotelList.vue 0 → 100644
View file @ eb31fcbb
<style scoped>
.page_iisMg ._nav {
margin: 20px 0 0 0;
background-color: #f5f5f5;
}
.page_iisMg ._nav li {
float: left;
font-size: 14px;
color: #666666;
padding: 15px 20px;
cursor: pointer;
position: relative;
background-color: #f1f1f1;
margin-right: 5px;
}
.page_iisMg ._nav li._active {
background-color: #ffffff;
color: #333333;
}
.page_iisMg ._nav li._active::after {
content: "";
width: 20px;
height: 3px;
background-color: #e95252;
display: inline-block;
position: absolute;
bottom: 0;
left: 38%;
}
.page_iisMg .query-box {
padding-bottom: 0;
}
.page_iisMg .iis_info_box {
padding-top: 15px;
}
.page_iisMg .el-date-editor .el-range-separator {
width: 9% !important;
}
.page_iisMg td span.status_Application{
color: #409EFF;
}
.page_iisMg td span.status_Cancle{
color: #909399;
}
.page_iisMg td span.status_Passed{
color: #67C23A;
}
.page_iisMg td span.status_Rejected{
color: #F56C6C;
}
.page_iisMg td span.status_owe{
color: #E6A23C;
}
.page_iisMg td span.status_Recover{
color: #67C23A;
}
.page_iisMg .cursorpointer{
text-decoration: underline;
}
.page_iisMg ._icon_btn i{
width: 30px;
height: 30px;
display: inline-block;
color: white !important;
border-radius: 50%;
text-align: center;
line-height: 30px;
margin-right: 10px;
cursor: pointer;
outline: none;
}
.page_iisMg ._icon_btn i.icon-ico_commodity_defaul{background-color: #F16C3C;}
.page_iisMg ._icon_btn i.icon-ico_commodity_defaul:hover{background-color: #e87c54}
.page_iisMg ._icon_btn i.icon-ico_commodity_defaul:active{background-color: #f76630}
.page_iisMg ._icon_btn i.icon-quxiao1{background-color: #E95252;}
.page_iisMg ._icon_btn i.icon-quxiao1:hover{background-color: #ea6d6d}
.page_iisMg ._icon_btn i.icon-quxiao1:active{background-color:#e42d2d}
.page_iisMg ._icon_btn i.icon-sousuo{background-color: #47BF8C;}
.page_iisMg ._icon_btn i.icon-sousuo:hover{background-color: #66bb97}
.page_iisMg ._icon_btn i.icon-sousuo:active{background-color: #35ab79}
._zhuihui{
display: inline-block;
height: 30px;
width: 30px;
border-radius: 50%;
color: white;
background-color: #e42d2d;
text-align: center;
line-height: 30px;
cursor: pointer;
margin-right: 10px
}
._zhuihui.xiugai{
background-color: #409EFF;
}
</style>
<template>
<div class="page_iisMg">
<div class="query-box">
<div @keyup.enter="resetPageIndex()">
<el-form class="iis_info_box clearfix" label-width="110px">
<el-row>
<el-col :span="4" :gutter="35">
<el-form-item label="国家" >
<el-select v-model="msg.Country" filterable @change="getCityList(msg.Country,'Destination')"
:placeholder="$t('hotel.hotel_province')" clearable @clear="msg.Province='',msg.City=''">
<el-option :key="0" :value="0" :label="$t('pub.pleaseSel')"></el-option>
<el-option v-for="item in provinceList" :key="item.ISOCountryCode" :label="item.CountryName_CN" :value="item.ISOCountryCode"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4" :gutter="35">
<el-form-item label="省份">
<el-select
v-model="msg.DestinationID"
filterable
remote
reserve-keyword
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="loading"><el-option :key="0" :value="0" :label="$t('pub.pleaseSel')"></el-option>
<el-option v-for="item in cityList" :key="item.CityCode" :label="item.CityName_CN" :value="item.CityCode"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8" :gutter="35">
<el-form-item :label="$t('pub.date')">
<el-date-picker v-model='msg.StartDate' value-format="yyyy-MM-dd" type="date" :picker-options="beforeCheck">
</el-date-picker>
<el-date-picker v-model='msg.EndDate' value-format="yyyy-MM-dd" type="date" :picker-options="afterCheck">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="4" :gutter="35">
<el-form-item :label="$t('hotel.hotel')">
<el-input type="" v-model="msg.HotelName" :placeholder="$t('hotel.table_hotelname')"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<ul>
<li>
<button
class="hollowFixedBtn"
@click="resetPageIndex()"
>{{$t('pub.searchBtn')}}</button>
</li>
</ul>
</div>
<table class="singeRowTable" style="border:1px solid #E6E6E6;" cellspacing="0" cellpadding="0">
<tr>
<th >酒店名称
</th>
<th width="180">星级</th>
<th width="180">价格</th>
<th>主题</th>
<th>地址</th>
<!-- <th width="180">{{$t('system.table_operation')}}</th> -->
</tr>
<template v-for="(item, index) in dataList" v-loading="loading">
<tr>
<td class="cursorpointer" @click="goUrlT('HotelDetails', item.hotelId)" >
{{item.hotelName}}
</td>
<td> <el-rate
v-model="item.reviewRating"
disabled
show-score
text-color="#ff9900"
:colors="['orange','orange','orange','orange','orange']"
disabled-void-color="rgb(211 217 225)"
>
</el-rate> </td>
<td ></td>
<td ></td>
<td >{{item.address}}</td>
</tr>
</template>
</table>
<div class="noDataNotice" v-if="dataList.length<1"><i class="iconfont icon-kong"></i> <p>没有找到你需要的数据</p></div>
<div v-if="dataList.length>0">
<el-pagination
background
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
layout="total,prev, pager, next, jumper"
:page-size='msg.pageSize'
:total='total'>
</el-pagination>
</div>
</div>
</template>
<script>
export default {
data() {
return {
active: 1,
RB_Group_Id:'',
companyList:[],
msg: {
//只查询日本
Country: "JP",
DestinationID: '',
City: 0,
//星级
Star: '',
//价格等级
PriceLevel: 0,
MaxPrice: 0,
MinPrice: 0,
HotelName: '',
StartDate:'',
EndDate:'',
pageIndex: 1,
pageSize: 10,
},
productionDate: [],
dataList: [],
loading: false,
isShow: false,
currentPage: 0,
total:0,
//国家 省市 区
provinceList: [],
cityList: [],
district: [],
beforeCheck: {
disabledDate: time => {
if (this.msg.StartDate) {
let endTime = new Date(this.getBeforeDate(-7, new Date().Format("yyyy-MM-dd")));
return time && endTime.getTime() >= time.getTime();
} else {
return false;
}
}
},
afterCheck: {
disabledDate: time => {
if (this.msg.StartDate) {
let startTime = new Date(this.msg.StartDate);
//可以选择当天
return time && time.getTime() < startTime.getTime() - 1 * 24 * 60 * 60 * 1000;
} else {
return false;
}
}
},
};
},
methods: {
remoteMethod(query) {
if (query !== '') {
let msg = {
CountryCode: this.msg.Country,
Type:'Destination',
CityName_CN:query
};
this.apipost(
"dmc_post_GetDiDaCityBaseInfo",
msg,
res => {
this.cityList = res.data.data;
},
);
} else {
this.cityList = [];
}
},
getCityList(ID,Type) {
//根据省份获取城市
let msg = { };
if(Type==="Destination"){
msg = {
CountryCode: ID,
Type:Type
};
this.cityList = [];
}
else {
msg = {
ParentCityCode: ID,
Type:Type
};
this.district=[];
}
this.apipost(
"dmc_post_GetDiDaCityBaseInfo",
msg,
res => {
if(Type==="Destination"){
this.cityList = res.data.data;
}
else {
this.district= res.data.data;
}
},
);
},
getProvinceList(countryId) {
//根据省份获取城市
this.provinceList = [];
this.apipost(
"dmc_post_GetDiDaCountryList",
{},
res => {
this.provinceList = res.data.data;
},
);
},
goUrlT(url,id){
this.$router.push({ name:url,query:{"id":id,"StartDate":this.msg.StartDate,"EndDate":this.msg.EndDate,blank:'y',tab:'道旅酒店详情'}})
},
getPageList: function () {
this.loading = true
this.apipost('dmc_post_GetDiDaHotelPageList', this.msg, res=>{
this.loading = false
if (res.data.resultCode == 1) {
this.total = res.data.data.count;
this.dataList = res.data.data.pageData
}
}, null)
},
handleCurrentChange: function (val) { //翻页
this.msg.pageIndex = val;
this.getPageList();
},
resetPageIndex: function (){ // 重置页码
this.msg.pageIndex=1;
this.currentPage = 1;
this.getPageList()
},
getBranchList(){
this.RB_Group_Id = this.getLocalStorage().RB_Group_id;
this.apipost('admin_get_BranchGetList', {RB_Group_Id:this.RB_Group_Id}, res=>{
if (res.data.resultCode == 1) {
this.companyList=res.data.data;
}
}, null)
}
},
mounted() {
var DateTime = new Date();
DateTime.setDate(DateTime.getDate() + 8);
var year = DateTime.getFullYear();
var month = DateTime.getMonth() + 1;
var day = DateTime.getDate();
this.msg.StartDate= year + "-" +
(month < 10 ? "0" : "") + month + "-" +
(day < 10 ? "0" : "") + day ;
var eDateTime = new Date();
eDateTime.setDate(eDateTime.getDate() + 9);
var eyear = eDateTime.getFullYear();
var emonth = eDateTime.getMonth() + 1;
var eday = eDateTime.getDate();
this.msg.EndDate= eyear + "-" +
(emonth < 10 ? "0" : "") + emonth + "-" +
(eday < 10 ? "0" : "") + eday ;
this.getProvinceList("JP");
this.getPageList();
}
};
</script>
src/components/Hotel/DiDa/HotelSure.vue 0 → 100644
View file @ eb31fcbb
<style scoped>
.hotelCard-img {
width: 228px;
height: 162px;
overflow: hidden;
}
.hotelCard-title {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.hotel-info-item::before {
display: inline;
content: "·";
font-weight: bolder;
margin-right: 4px;
}
.height-320 {
height: 250px;
}
.hotel-details-table {
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;
}
.hotel-details-tableMoblie {
border: 1px solid #dcdcdc;
border-collapse: collapse;
width: 100%;
margin-top: 5px;
}
.hotel-details-tableMoblie .td01 {
padding: 3px 10px;
background: #f7f7f7;
width: 33.33%;
height: 19px;
text-align: center;
}
.hotel-details-tableMoblie .td02 {
padding: 3px 5px;
background: #fafafa;
width: 33.33%;
height: 19px;
text-align: center;
}
.hotel-details-tableMoblie td {
width: 100%;
padding: 10px 20px;
vertical-align: middle;
text-align: center;
border: 1px solid #dcdcdc;
font-size: 14px;
box-sizing: border-box;
}
.HD_hotelComIntroduce {
margin: auto;
height: auto;
border-bottom: 1px solid #dcdcdc;
color: #111111;
}
.HD_hotelComIntroduce span {
display: inline-block;
margin-bottom: 10px;
}
.HD_inTitle {
font-size: 14px;
font-weight: bold;
color: #111111;
margin-bottom: 20px;
}
.HD_ServiceList span {
display: inline-block;
margin: 0 30px 10px 0;
white-space: nowrap;
}
.bg-white {
background: #fff !important;
}
.q-py-lg {
padding-top: 24px;
padding-bottom: 24px;
}
.q-py-lg8 {
padding-top: 8px;
padding-bottom: 8px;
}
.q-py-bottom8 {
padding-bottom: 8px;
}
.column {
flex-direction: column;
}
.row {
display: flex;
flex-wrap: wrap;
}
.q-mb-lg {
margin-bottom: 24px;
}
.justify-between {
justify-content: space-between;
}
.q-position-engine {
margin-top: var(--q-pe-top, 0) !important;
margin-left: var(--q-pe-left, 0) !important;
will-change: auto;
}
.scroll {
overflow: auto;
}
.q-menu {
position: fixed !important;
display: inline-block;
max-width: 95vw;
box-shadow: 0 1px 5px #0003, 0 2px 2px #00000024, 0 3px 1px -2px #0000001f;
background: #fff;
border-radius: 4px;
overflow-y: auto;
overflow-x: hidden;
outline: 0;
max-height: 65vh;
z-index: 6000;
}
.q-pa-md {
padding: 16px;
}
.q-pa-mdlr {
padding: 0px 16px;
}
.rounded-borders {
border-radius: 4px;
}
.wrap {
flex-wrap: wrap;
}
.q-card {
box-shadow: 0 1px 5px #0003, 0 2px 2px #00000024, 0 3px 1px -2px #0000001f;
border-radius: 4px;
vertical-align: top;
background: #fff;
position: relative;
}
.q-card > div:not(:last-child),
.q-card > img:not(:last-child) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.q-card > div:first-child,
.q-card > img:first-child {
border-top: 0;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
.q-card > div {
border-left: 0;
border-right: 0;
box-shadow: none;
}
.q-mr-md {
margin-right: 16px;
}
.no-shadow {
display: flex;
justify-content: flex-start;
}
.el-date-editor .el-range-input {
width: 70px;
}
.el-range-separator {
width: 20px !important;
}
.el-date-editor--daterange.el-input,
.el-date-editor--daterange.el-input__inner,
.el-date-editor--timerange.el-input,
.el-date-editor--timerange.el-input__inner {
width: 202px;
}
.el-input .el-input__inner,
.el-select .el-input {
border-radius: 4px;
height: 32px;
}
.HD_Green {
background-color: green;
}
.text-white {
color: #fff !important;
}
.absolute,
.absolute-full,
.absolute-center,
.absolute-bottom,
.absolute-left,
.absolute-right,
.absolute-top,
.absolute-top-left,
.absolute-top-right,
.absolute-bottom-left,
.absolute-bottom-right {
position: absolute;
}
.HD_Black {
background-color: #000;
}
.q-px-lg {
padding-left: 24px;
padding-right: 24px;
}
.q-pl-lg {
padding-left: 24px;
}
.q-pt-sm {
padding-top: 8px;
}
.q-px-sm {
padding-left: 8px;
padding-right: 8px;
}
.q-pb-md8 {
padding-bottom: 8px;
}
.q-mb-md {
margin-bottom: 16px !important;
}
.text-right {
text-align: right;
}
.q-pt-md {
padding-top: 16px;
}
.text-green {
color: #4caf50 !important;
}
.text-grey-6 {
color: #9e9e9e !important;
}
.text-red {
color: #f44336 !important;
}
.q-focus-helper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
border-radius: inherit;
opacity: 0;
transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1),
opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.q-btn--actionable {
cursor: pointer;
}
.bg-green-6 {
background: #4caf50 !important;
}
.q-separator--horizontal {
display: block;
height: 1px;
}
.el-divider--horizontal {
margin: 0px !important;
}
.order-show {
text-align: center;
color: red;
}
.fz18 {
font-size: 18px;
font-weight: bold;
}
.text-orange-6 {
color: #ff9800 !important;
}
.text-green-6 {
color: #4caf50 !important;
}
.text-weight-bold {
font-weight: 700;
}
.text-grey-9 {
color: #424242 !important;
}
.fz20 {
font-size: 20px;
}
.text-red {
color: #f44336 !important;
}
.text-h5 {
font-size: 1.5rem;
font-weight: 400;
line-height: 2rem;
letter-spacing: normal;
}
.q-ml-md {
margin-left: 16px;
}
.q-px-md {
padding-left: 16px;
padding-right: 16px;
}
.items-center,
.flex-center {
align-items: center;
}
.items-end {
align-items: flex-end;
}
.el-card__body,
.el-main {
padding: 0px !important;
}
.d-pr8 {
padding-right: 8px;
}
</style>
<template>
<div class="q-py-lg">
<div
class="bg-white q-py-lg8 column q-mb-md"
style="max-width: 1366px; min-width: 375px; margin: auto;width:1300px"
>
<div class="row q-px-lg q-py-lg8 row justify-between">
<div
class="row no-wrap items-center q-mt-xs q-pt-sm text-orange-6 text-weight-bold"
style="width:100%;"
>
<el-button
class="bg-orange-6 text-white"
size="sm"
type="warning"
icon="el-icon-user"
circle
></el-button>
<span class="fz18 q-pl-lg" style="margin-top:8px;"
>超过13岁视为成人处理</span
>
</div>
<div
class="row no-wrap items-center text-green-6 q-mt-xs q-pt-sm text-weight-bold"
style="width:100%;"
>
<el-button
class="bg-green-6 text-white"
size="sm"
type="success"
icon="el-icon-document"
circle
></el-button>
<span class="fz18 q-pl-lg" style="margin-top:8px;"
>预定成功后房间将为您保留整晚</span
>
</div>
</div>
</div>
<div
class="bg-white q-py-lg8 column q-mb-md"
style="max-width: 1366px; min-width: 375px; margin: auto;width:1300px"
>
<div class="row q-px-lg q-py-lg8 row justify-between">
<div
class="row no-wrap items-center q-mt-xs q-pt-sm text-red text-weight-bold"
style="width:100%;"
>
<span class="fz18 text-red" style="margin-top:8px;">
{{ sureMsg.HotelName }}</span
>
</div>
</div>
<div class="col q-px-lg ">
<div class="row nowrap">
<i
class="text-grey-13 q-mr-xs el-icon-location-outline"
name="place"
size="xs"
></i>
<span class="col fz14 text-weight-bold text-blick text-grey-6">{{
Address
}}</span>
</div>
</div>
<div style="display: flex;">
<div
v-if="
roomRateDetails.RatePlanList &&
roomRateDetails.RatePlanList.length > 0
"
v-for="(item, index) in roomRateDetails.RatePlanList"
:key="index"
v-loading="loading"
style="width:50%;"
>
<div class="q-pt-xs col q-px-lg ">
<span class="text-grey-6 q-pr-lg">床型</span>
<span class="text-grey-9 q-pr-lg">
{{ getRoomType(item.BedType) }}
</span>
</div>
<div class="q-pt-xs col q-px-lg ">
<span class="text-grey-6 q-pr-lg">餐食</span>
<span class="text-grey-9">
{{ item.BreakfastType == 1 ? "不含早" : "含早" }}
</span>
</div>
<div class="q-pt-xs col q-px-lg ">
<span class="text-grey-6 q-pr-lg">房型</span>
<span class="text-grey-9">
{{ item.RatePlanName }}
</span>
</div>
<div class="q-pt-xs col q-px-lg ">
<span class="text-grey-6 q-pr-lg">报价是否非即时确认</span>
<span class="text-grey-9">
<template v-if="item.IsOnRequest == true">是</template>
<template v-if="item.IsOnRequest == false">否</template>
</span>
</div>
</div>
<div
v-else
class="col q-pa-lg text-center"
style="width:50%;display: flex;"
>
暂无数据
</div>
<div class="col row items-end q-pl-lg" style="width:50%;display: flex;">
<div class="column">
<div class="text-green-6 fz20 text-weight-bold q-pb-sm q-mb-md">
<span>订单总额</span>
</div>
<div>
<div class="row justify-between">
<div
class="q-pt-xs row no-wrap items-center"
v-if="roomRateDetails.TotalSupplement > 0"
>
<span class="text-grey-10">优惠</span>
<span class="text-red fz18 q-pl-xs">{{
roomRateDetails.TotalSupplement
}}</span>
</div>
<div class="q-pt-xs row no-wrap items-center">
<span class="text-grey-10" style="margin-top:4px;"
>实付({{ DanWei }})</span
>
<span class="text-h5 text-red text-weight-bold q-pl-xs">{{
roomRateDetails.TotalPrice
}}</span>
</div>
<div
class="q-pt-xs row items-center"
v-if="sureMsg.DiscountMoney == 0"
>
<span> </span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="bg-white column q-mb-md"
style="max-width: 1366px; min-width: 375px; margin: auto;width:1300px"
>
<div class="row q-py-bottom8 row justify-between">
<div
style="width:100%;background:#e1f5fe!important;font-weight:700;border-radius:4px;height:53px;display:flex;padding-left:10px; align-items: center;"
>
预定信息
</div>
</div>
<div style="padding-bottom: 8px;display: block;">
<div class="q-pt-xs col q-px-lg q-mb-md">
<span class="text-grey-6 q-pr-lg">床型</span>
<span
class="text-grey-9 q-pr-lg"
v-if="
roomRateDetails.RatePlanList &&
roomRateDetails.RatePlanList.length > 0
"
v-for="(item, index) in roomRateDetails.RatePlanList"
:key="index"
v-loading="loading"
>
{{ getRoomType(item.BedType) }}
</span>
</div>
<div class="q-pt-xs col q-px-lg q-mb-md">
<span class="text-grey-6 q-pr-lg">入住人數</span>
<span class="text-grey-9">
<span>成人 {{ auditNum }} 人</span>
<span class="q-pl-lg" v-if="childNum > 0"
>儿童{{ childNum }} 人</span
>
<span class="q-pl-lg" v-if="isBaoChild">不能报儿童</span>
</span>
</div>
<div class="q-pt-xs col q-px-lg q-mb-md">
<div class="row items-center q-mb-md">
<div><span class="text-grey-6 q-pr-lg">入住日期</span></div>
<div class="col row no-wrap q-pl-lg">
<span class="text-grey-9">
<el-date-picker
v-model="params.CheckInDate"
style="width:130px;"
size="small"
value-format="yyyy-MM-dd"
type="date"
:picker-options="beforeCheck"
>
</el-date-picker>
</span>
</div>
<div>
<span class="q-ml-md">{{ checkInWeek }}</span>
</div>
<div>
<span
v-if="
roomRateDetails.roomOptions &&
roomRateDetails.roomOptions.checkIinStartTime
"
>{{ roomRateDetails.roomOptions.checkIinStartTime }}</span
>
</div>
<div><span class="q-ml-sm">之后</span></div>
<div><el-divider class="q-px-sm bg-dark q-px-md"></el-divider></div>
<div>
<span
v-if="
roomRateDetails.roomOptions &&
roomRateDetails.roomOptions.finalCheckInTime
"
>{{ roomRateDetails.roomOptions.finalCheckInTime }}</span
>
</div>
<div>
<el-date-picker
v-model="params.CheckOutDate"
style="width:130px;"
size="small"
value-format="yyyy-MM-dd"
type="date"
:picker-options="afterCheck"
>
</el-date-picker>
</div>
<div>
<span class="q-ml-md">{{ checkOutWeek }}</span>
</div>
<div><span class="q-ml-sm">之后</span></div>
</div>
</div>
<div
v-if="
roomRateDetails.RatePlanList &&
roomRateDetails.RatePlanList.length > 0
"
v-for="(item, index) in roomRateDetails.RatePlanList"
:key="index"
>
<div class="q-pt-xs col q-px-lg q-mb-md">
<span class="text-grey-6 q-pr-lg">房间数量</span>
<span class="text-grey-9"> {{ item.RoomOccupancy.RoomNum }} </span>
<span class="text-grey-9"
><i
class="text-grey-13 q-mr-xs el-icon-warning-outline text-orange-6"
name="place"
size="xs"
></i>
仅剩
<span class="text-orange text-orange-6">{{
item.InventoryCount
}}</span>
间
</span>
</div>
<div class="q-pt-xs col q-px-lg q-mb-md">
<span class="text-grey-6 q-pr-lg d-pr8" style="float:left;"
>房費情況</span
>
<span class="text-grey-9 col row wrap">
<template v-if="item.PriceList && item.PriceList.length > 0">
<el-card
flatv
:key="sindex"
class="q-px-sm q-pt-sm q-pb-md8 d-pr8"
v-for="(subItem, sindex) in item.PriceList"
>
<span class="text-grey-9">
{{ getformatDateStr(subItem.StayDate) }}
<span>{{ item.Currency }}</span>
<span class="relative-position text-red text-weight-bold fz18" style="top: 3px">{{
subItem.Price
}}</span>
<span class="text-grey-6">/晚</span>
</span>
</el-card>
</template>
</span>
</div>
</div>
</div>
</div>
<div
class="bg-white column q-mb-md"
style="max-width: 1366px; min-width: 375px; margin: auto;width:1300px"
>
<div class="row q-py-bottom8 row justify-between">
<div
style="width:100%;background:#e1f5fe!important;font-weight:700;border-radius:4px;height:53px;padding-left:10px; align-items: center;"
>
<span style="float: left; padding-top: 16px; display: block;"
>入住信息</span
>
<span
style="float: right; padding-top: 16px; padding-right:16px; display: block;"
class="text-orange-6"
>
<i
class="text-grey-13 q-mr-xs el-icon-warning-outline"
name="place"
size="xs"
></i
>所填姓名需和入住时所持证件一致</span
>
</div>
</div>
<div class="row q-px-lg q-py-lg8 row justify-between" style="width: 100%; display: block;">
<el-form label-position="left" label-width="80px" class="iis_info_box clearfix"
ref="sureMsg" :rules="rules" :model="sureMsg">
<el-row>
<el-col :gutter="35" style="width:26%;">
<el-form-item label="预订人" prop="guestLastName">
<el-input v-model="sureMsg.guestLastName" placeholder="姓（英文）"></el-input>
</el-form-item>
</el-col>
<el-col :gutter="35" style="width:25%;margin-right:24px;">
<el-form-item label="" prop="guestFirstName">
<el-input v-model="sureMsg.guestFirstName" placeholder="名（英文）"></el-input>
</el-form-item>
</el-col>
<el-col :gutter="35" style="width:30%;">
<el-form-item label="Email" prop="guestEmail">
<el-input v-model="sureMsg.guestEmail" placeholder="Email"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col style="width:49%;":gutter="35">
<el-form-item label="电话" prop="guestPhoneNumber">
<el-input v-model="sureMsg.guestPhoneNumber" placeholder="电话"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col style="width:49%;" :gutter="35">
<el-form-item label="客户需求" >
<el-input v-model="sureMsg.guestRequest" placeholder="客户需求"></el-input>
</el-form-item>
</el-col>
</el-row>
<template v-if="sureMsg.GuestList && sureMsg.GuestList.length > 0" v-for="(item, subIndex) in sureMsg.GuestList" >
<div v-if="item.GuestInfo && item.GuestInfo.length > 0" v-for="(itemguest, numberOfAdultsIndex) in item.GuestInfo" :key="numberOfAdultsIndex">
<el-row>
<el-col :gutter="35" style="width:26%;">
<el-form-item :label='numberOfAdultsIndex==0?"房间"+(subIndex + 1):"" ' prop="LastName">
<el-input v-model="itemguest.LastName" placeholder="姓（英文）"></el-input>
</el-form-item>
</el-col>
<el-col :gutter="35" style="width:25%;margin-right:24px;">
<el-form-item label="" prop="FirstName">
<el-input v-model="itemguest.FirstName" placeholder="名（英文）"></el-input>
</el-form-item>
</el-col>
<el-col :gutter="35" style="width:30%;">
<el-form-item label="" >
<el-input type="number" v-model="itemguest.Age" :min="0" :max="12" placeholder="年龄（儿童必填）" ></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
</template>
<el-row>
<el-col :gutter="35">
<div class="row col-12 text-red q-mb-md">
<div
v-if="
roomRateDetails.CancellationPolicyList &&
roomRateDetails.CancellationPolicyList.length > 0
"
v-for="(item, index) in roomRateDetails.CancellationPolicyList"
:key="index"
>
<span> {{ getformatDateStr(item.FromDate) }} 起取消</span >
<span>({{ DanWei }})-{{ item.Amount }}</span>
</div></div>
</el-col>
</el-row>
</el-form>
</div>
</div>
<div
class="col row q-mb-md"
style="max-width: 1366px; min-width: 375px; margin: auto;width:1300px"
>
<el-button type="primary" style="width:100%;" @click="submitForm('sureMsg')">下单</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isShowTime: true,
isLoginB2B: false,
Verification: "",
CouponIds: "",
CodeLoading: false,
UserCanUseCouponList: [],
CouponList: [],
Address: "", //兑换码
params: {
sort: 1,
displayFrom: 1,
CheckInDate: "",
CheckOutDate: "",
searchroomGroup: [],
ratePlanID: "",
imgUrl: "",
RoomCount: 1,
ChildCount: 0,
AdultCount: 1,
OccupancyDetails: [],
hotelId: 0
},
getParamsMsg: {},
urlParamsMsg: {},
adultList: [], //成人下拉
childrenList: [], //儿童下拉
numberOfAdults: 0,
numberOfChildren: 0,
submLoading: false,
loading: false,
dateRange: "", //当前日期
dateRange2: "", //当前日期
roomRateDetails: {},
DanWei: "",
HotelRoomTypes: [], //散客房间类型
dataList: {},
//确认MSG参数
sureMsg: {
EmployeeIdStr: "",
CheckInDate: "",
RatePlanID: "",
CheckOutDate: "",
RoomCount: "",
guestLastName: "",
guestFirstName: "",
guestAddress: "",
guestPhoneNumber: "",
guestEmail: "",
BookingID: "",
HotelName: "",
HotelPic: "",
GuestList: [],
TotalPrice: 0,
CustomerPayMoney: 0,
DiscountMoney: 0,
OrderSource: 2,
OrderForm: 1,
//备注
guestRequest: "",
hotelId:'',
},
auditNum: 0,
childNum: 0,
isBaoChild: false,
SettlementPrice: 0,
price: 0,
pickerBeginDateBefore: "", //入住时间前可选范围
pickerBeginDateAfter: "", //入住时间后可选范围
RoomTypeList: [], //房间等级
scatteredRoomTypeList: [], //散客房间类型
WeekList: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], //周一至周日
checkInWeek: "", //周一至周日
checkOutWeek: "",
beforeCheck: {
disabledDate: time => {
if (this.params.CheckInDate) {
let endTime = new Date(
this.getBeforeDate(-7, new Date().Format("yyyy-MM-dd"))
);
return time && endTime.getTime() >= time.getTime();
} else {
return false;
}
}
},
afterCheck: {
disabledDate: time => {
if (this.params.CheckInDate) {
let startTime = new Date(this.params.CheckInDate);
//可以选择当天
return (
time &&
time.getTime() < startTime.getTime() - 1 * 24 * 60 * 60 * 1000
);
} else {
return false;
}
}
},
rules: {
guestLastName: [{
required: true,
message: "请输入姓（英文）",
trigger: "blur",
}],
guestFirstName: [{
required: true,
message: "请输入名（英文）",
trigger: "blur",
}],
guestEmail: [{
required: true,
message: "请输入Email",
trigger: "blur",
}],
guestPhoneNumber: [{
required: true,
message: "请输入电话",
trigger: "blur",
}],
// LastName: [{
// required: true,
// message: "请输入姓（英文）",
// trigger: "blur",
// }],
// FirstName: [{
// required: true,
// message: "请输入名（英文）",
// trigger: "blur",
// }],
},
};
},
methods: {
// 提交下单
submitForm(formName) {
this.$refs[formName].validate((valid)=>{
if(valid){
if (this.submLoading) return;
let flag = false;
this.sureMsg.hotelId = this.$route.query.hotelId;
this.sureMsg.RatePlanID = this.$route.query.RatePlanID;
this.sureMsg.CheckInDate = this.params.CheckInDate;
this.sureMsg.EmployeeIdStr =this.getLocalStorage().EmployeeId+"";
this.sureMsg.totalRoomCount = this.params.searchroomGroup.length;
this.sureMsg.CheckOutDate = this.params.CheckOutDate;
//判断选择的人数与入住人数
let Count1 = 0;
this.sureMsg.GuestList.forEach(item => {
if (item.numberOfChildren > 0) {
let ageNum = 0;
item.GuestInfo.forEach(guestItem => {
if (guestItem.Age <= 12) {
ageNum = ageNum + 1;
}
});
if (item.numberOfChildren != ageNum) {
this.Error("儿童数不正确");
}
}
});
this.submLoading = true;
this.apipost("dmc_post_GetDiDaBookingConfirm", this.sureMsg, res => {
this.loading = false;
if (res.data.resultCode == 1) {
this.Success("下单成功");
this.$router.push({ name:"HotelOrderTotal",query:{tab:'散卖酒店订单'}})
}
else{
this.Error(res.data.message);
}
this.submLoading = false;
},
null
);
}
})
},
//通过日期得到周几
getWeek() {
let CheckInDate = new Date(this.params.CheckInDate).getDay();
let CheckOutDate = new Date(this.params.CheckOutDate).getDay();
this.checkInWeek = this.WeekList[CheckInDate];
this.checkOutWeek = this.WeekList[CheckOutDate];
console.log(
"CheckInDate",
CheckInDate + "," + this.params.CheckInDate + "," + this.checkInWeek
);
console.log(
"CheckOutDate",
CheckOutDate + "," + this.params.CheckOutDate + "," + this.checkOutWeek
);
},
//日期格式化
getformatDateStr(value) {
var dt = new Date(value);
let year = dt.getFullYear();
let month = (dt.getMonth() + 1).toString().padStart(2, "0");
let date = (dt.getDate() + 1).toString().padStart(2, "0");
return year + "-" + month + "-" + date;
},
optionsFnStar(cd) {
return (
cd <=
date.formatDate(date.addToDate(new Date(), { days: 9 }), "YYYY/MM/DD")
);
},
optionsFnEnd(cd) {
return (
cd >=
date.formatDate(date.addToDate(new Date(), { days: 9 }), "YYYY/MM/DD")
);
},
dateRangeHandler(e) {
if (qDateProxy.value) qDateProxy.value.hide();
this.initHotel();
},
dateRangeHandler2(e) {
if (qDateProxy2.value) qDateProxy2.value.hide();
this.initHotel();
},
dateRangeHandler3(e) {
if (qDateProxy3.value) qDateProxy3.value.hide();
},
initHotel() {
this.getWeek();
this.loading = true;
this.apipost(
"dmc_post_GetDiDaPriceConfirm",
this.params,
res => {
console.log("dmc_post_GetDiDaPriceConfirm", res);
this.loading = false;
if (res.data.resultCode == 1) {
this.dataList = res.data.data.PriceDetails;
this.roomRateDetails = res.data.data.PriceDetails.HotelList[0];
this.sureMsg.BookingID = res.data.data.PriceDetails.ReferenceNo;
this.sureMsg.checkInTime = res.data.data.PriceDetails.CheckInDate;
this.sureMsg.HotelName = this.roomRateDetails.HotelName;
this.sureMsg.TotalPrice = this.roomRateDetails.TotalPrice;
this.sureMsg.RoomCount = this.roomRateDetails.RatePlanList[0].RoomOccupancy.RoomNum;
this.DanWei =
res.data.data.PriceDetails.HotelList[0].RatePlanList[0].Currency;
if (
Object.prototype.toString.call(this.dataList.HotelList) ==
"[object Object]"
) {
let arr = [];
arr.push(this.dataList.HotelList);
this.dataList.HotelList = arr;
}
this.TotalChildCount = 0;
let rateGrouoLen = 0;
}
},
null
);
},
goShenqing() {
let dom = document.querySelector("#blankLink");
dom.href = `http://${window.location.host}/#/PsSystem/${1}`;
dom.click();
},
//获取道旅床类型列表
getdidaBedType() {
this.apipost(
"dmc_post_GetDidaBedTypeBaseInfo",
this.hotelMsg,
res => {
this.loading = false;
if (res.data.resultCode == 1) {
this.HotelRoomTypes = res.data.data;
}
},
null
);
},
//获取道旅餐食类型
getdidaMealType() {
this.apipost(
"dmc_post_GetDidaMealType",
this.hotelMsg,
res => {
this.loading = false;
if (res.data.resultCode == 1) {
this.HotelMealTypes = res.data.data;
}
},
null
);
},
//获取房型
getRoomType(roomtypeId) {
let roomtypeName = "";
if (roomtypeId > 0) {
this.HotelRoomTypes.forEach(item => {
if (item.ID == roomtypeId) {
roomtypeName = item.Name_CN;
}
});
}
return roomtypeName;
},
getPrice(price) {
return Math.ceil(price);
}
},
created() {
let userInfo = this.getLocalStorage();
this.EmployeeId = userInfo.EmployeeId;
if (this.$route.query.StartDate) {
// this.dateList.push(this.$route.query.StartDate)
this.params.CheckInDate = this.$route.query.StartDate;
}
if (this.$route.query.EndDate) {
// this.dateList.push(this.$route.query.EndDate)
this.params.CheckOutDate = this.$route.query.EndDate;
}
if (this.$route.query.auditNum) {
this.params.AdultCount = this.$route.query.auditNum;
this.auditNum = this.$route.query.auditNum;
}
if (this.$route.query.childNum) {
this.params.childNum = this.$route.query.childNum;
}
if (this.$route.query.searchroomGroup) {
//JSON.parse(JSON.stringify(this.currentEditItemData))
this.params.searchroomGroup = JSON.parse(
decodeURIComponent(this.$route.query.searchroomGroup)
);
}
if (this.$route.query.RatePlanID) {
this.params.ratePlanID = this.$route.query.RatePlanID;
}
if (this.$route.query.hotelId) {
this.params.hotelId = this.$route.query.hotelId;
this.sureMsg.hotelId = this.$route.query.hotelId;
}
if (this.$route.query.Address) {
this.Address = this.$route.query.Address;
}
if (this.params.searchroomGroup && this.params.searchroomGroup != null) {
this.sureMsg.GuestList = [];
this.params.searchroomGroup.forEach((item, index) => {
console.log("item", item);
var guestInfoList = [];
let allprople = item.numberOfAdults + item.numberOfChildren;
for (let i = 1; i <= allprople; i++) {
let obj = {
LastName: "",
FirstName: "",
Age: ""
};
guestInfoList.push(obj);
}
var obj = {
RoomNum: index + 1,
numberOfAdults: item.numberOfAdults,
numberOfChildren: item.numberOfChildren,
GuestInfo: guestInfoList
};
this.sureMsg.GuestList.push(obj);
});
}
},
mounted() {
this.getdidaBedType();
this.initHotel();
}
};
</script>
src/components/TravelManager/TravelList/HotelOrderTotal.vue
View file @ eb31fcbb
......@@ -150,6 +150,15 @@
<div class="flexOne SalesHotelOrder">
<div class="query-box">
<ul>
<li>
<span>
<em>订单来源</em>
<el-select v-model='msg.Source' filterable :placeholder="$t('pub.pleaseSel')">
<el-option v-for="item in ThirdOrderSourceEnumEnumList" :label='item.Name' :value='item.Id' :key='item.Id'>
</el-option>
</el-select>
</span>
</li>
<li>
<span>
<em>{{$t('hotel.hotel_OrderStates')}}</em>
......@@ -159,6 +168,9 @@
</el-select>
</span>
</li>
<li>
<span>
<em>{{$t('sm.company')}}</em>
......@@ -347,8 +359,9 @@
<el-tooltip class="item" effect="dark" :content="$t('sm.daifukuan')" placement="top-start">
<el-button type="primary" icon="iconfont icon-fukuan2" @click="getShouKuan(item)" ></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="$t('sm.exitOrder')" placement="top-start">
<el-button type="info" v-if="item.IsCanOrder == 0" icon="iconfont icon-quxiao1" @click="cancelHTorder(item.ThirdOrderNo)"></el-button>
<el-tooltip class="item" effect="dark" :content="$t('sm.exitOrder')" placement="top-start" v-if="item.IsCanOrder == 0" >
<el-button type="info" v-if="item.Source==2" icon="iconfont icon-quxiao1" @click="cancelHTorder(item.ThirdOrderNo)"></el-button>
<el-button type="info" v-else-if="item.Source==4" icon="iconfont icon-quxiao1" @click="cancelDiDaorder(item)"></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="$t('pub.sureBtn')" placement="top-start">
<el-button type="success" icon="iconfont icon-duigou" v-if="item.IsCanClear == 0" @click="queren(1, item.OrderID)" ></el-button>
......@@ -370,7 +383,7 @@
</td>
</tr>
<tr>
<td colspan="8" style="text-align:left;width:600px">
<td colspan="9" style="text-align:left;width:600px">
<div class="clearfix">
<div class="SH_beizhu" style="">
{{$t('pub.pubRemark')}}：
......@@ -457,6 +470,21 @@
</div>
</el-dialog>
<el-dialog title="取消订单确认" width="400px" :visible.sync="cancelDidaOrderDialog" center :before-close="closeChangeMachie">
<el-form label-width="110px">
<el-form-item label="取消罚金">
{{didaCancelOrderMsg.Amount}}
</el-form-item>
<el-form-item label="币种">
{{didaCancelOrderMsg.Currency}}
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<button class="hollowFixedBtn" @click="cancelDidaOrderDialog=false">{{$t('pub.cancelBtn')}}</button>
<button class="normalBtn" type="primary" @click="querenDidaCancelOrder">{{$t('pub.sureBtn')}}</button>
</div>
</el-dialog>
<el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" layout="total,prev, pager, next, jumper"
:page-size=msg.pageSize :total=total>
</el-pagination>
......@@ -477,7 +505,8 @@ export default {
StartTime:'',
EndTime:'',
CStartTime:'',
CEndTime:''
CEndTime:'',
Source:'4'
},
TCID: '',
GLOrderID: '',
......@@ -491,7 +520,16 @@ export default {
//日元不含税价
totalChargeableRateInfoTaxOut:0
},
didaCancelOrderMsg:{
BookingID:"",
ConfirmID:"",
Currency:"",
Amount:0,
CancelBy:0,
CancelType:""
},
updatePriceDialog:false,
cancelDidaOrderDialog:false,
StartTimeBefore: {
disabledDate: time => {
if (this.msg.EndTime == null) {
......@@ -563,6 +601,7 @@ export default {
//统计快
TotalMsg:[],
searchList: [],
ThirdOrderSourceEnumEnumList:[],
loading2: false,
dialogFormVisible: false,
//员工ID
......@@ -589,6 +628,15 @@ export default {
}
},err => {});
},
getThirdOrderSourceEnumEnumList(){
this.apipost("sellorder_post_GetThirdOrderSourceEnumEnumList",{ },res => {
if (res.data.resultCode == 1) {
this.ThirdOrderSourceEnumEnumList=res.data.data;
}
},err => {});
},
//获取当前信息
getThisMsg(item){
this.updatePriceDialog=true;
......@@ -655,6 +703,37 @@ export default {
});
});
},
querenDidaCancelOrder(){
let userInfo = this.getLocalStorage();
let EmployeeId = userInfo.EmployeeId;
this.didaCancelOrderMsg.CancelBy=EmployeeId,
this.didaCancelOrderMsg.CancelType= 2;
this.$confirm("确认取消订单", this.$t('tips.tips'), {
confirmButtonText: this.$t('pub.sureBtn'),
cancelButtonText: this.$t('pub.cancelBtn'),
type: 'warning'
}).then(() => {
this.apipost('dmc_post_GetDiDaBookingCancelConfirm',this.didaCancelOrderMsg,res=>{
if(res.data.resultCode==1){
this.cancelDidaOrderDialog=false;
this.didaCancelOrderMsg.Amount=0;
this.didaCancelOrderMsg.Currency="";
this.didaCancelOrderMsg.ConfirmID="";
this.didaCancelOrderMsg.BookingID="";
this.Success(res.data.message);
this.getList();
}else{
this.Error(res.data.message);
}
},err=>{})
}).catch(() => {
this.$message({
type: 'info',
message: this.$t('ios.yi') + this.$t('pub.cancelBtn')
});
});
},
goOrderDetails(ID){
this.$router.push({
name: 'OpHotelOrderDetail',
......@@ -759,6 +838,35 @@ export default {
null
);
},
//点击取消道旅操作
cancelDiDaorder(item){
let userInfo = this.getLocalStorage();
let EmployeeId = userInfo.EmployeeId;
let msg ={
BookingID:item.ThirdOrderNo,
CancelBy:EmployeeId,
CancelType:1
}
this.apipost(
"dmc_post_GetDiDaBookingCancel",
msg,
res => {
if (res.data.resultCode == 1) {
console.log("res.data.data",res.data.data);
this.didaCancelOrderMsg.Amount=res.data.data.Amount;
this.didaCancelOrderMsg.BookingID=res.data.data.BookingID;
this.didaCancelOrderMsg.ConfirmID=res.data.data.ConfirmID;
this.didaCancelOrderMsg.Currency=res.data.data.Currency;
this.cancelDidaOrderDialog=true;
} else {
this.Error(res.data.message);
}
},
null
);
},
//点击收款
getShouKuan(obj){
let TCIDARR = obj.TCID ? [obj.TCID] : [];
......@@ -798,6 +906,7 @@ export default {
this.getDepartmentMsg.RB_Branch_Id=userInfo.RB_Branch_id; //公司
this.EmployeeId=userInfo.EmployeeId //员工
this.getCompanyList()
this.getThirdOrderSourceEnumEnumList();
this.getDepartment()
this.getEmployee()
this.getList();
......
src/router/config.js
View file @ eb31fcbb
......@@ -1015,6 +1015,30 @@ export default {
title: '酒店预定订单'
},
},
{
path: '/didaHotelList', //道旅酒店检索
name: 'didaHotelList',
component: resolve => require(['@/components/Hotel/DiDa/HotelList'], resolve),
meta: {
title: '道旅酒店检索'
},
},
{
path: '/HotelDetails', //道旅酒店详情
name: 'HotelDetails',
component: resolve => require(['@/components/Hotel/DiDa/HotelDetails'], resolve),
meta: {
title: '道旅酒店详情'
},
},
{
path: '/HotelSure', //道旅酒店详情
name: 'HotelSure',
component: resolve => require(['@/components/Hotel/DiDa/HotelSure'], resolve),
meta: {
title: '道旅酒店预定'
},
},
{
path: '/CarDealerOrder', //车订单
name: 'CarDealerOrder',
......
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