Skip to content

S
SuperMan
Commit 4dc61688 authored by 黄奎's avatar 黄奎
Browse files
Options

样式调整

parent 02a661dd
Show whitespace changes
Inline Side-by-side
Showing with 1337 additions and 1339 deletions
src/components/Hotel/DiDa/HotelList.vue
View file @ 4dc61688
<style scoped>
.side-hotel-map__marker {
.side-hotel-map__marker {
--map-marker-size: 24px;
display: inline-block;
color: #fff;
......@@ -12,51 +10,69 @@
border: 1px solid white;
background: #14808c;
text-align: center;
}
.hotelnamespan {
}
.hotelnamespan {
font-size: 18px;
font-weight: 600;
color: #606266;
height: 26px;
}
.q-pr-lg {
}
.q-pr-lg {
margin-right: 24px;
}
.hotelDiv{
display: inline-flex; cursor: pointer;
}
.hotelname{
}
.hotelDiv {
display: inline-flex;
cursor: pointer;
}
.hotelname {
display: inline-flex;
cursor: pointer;
max-width:83%;
white-space: nowrap; /* 不换行 */
overflow: hidden; white-space: nowrap; /* 隐藏 */
text-overflow: ellipsis; /* 显示为省略号 */
border-bottom:1px solid white;
}
max-width: 83%;
white-space: nowrap;
/* 不换行 */
overflow: hidden;
white-space: nowrap;
/* 隐藏 */
text-overflow: ellipsis;
/* 显示为省略号 */
border-bottom: 1px solid white;
}
.hotelname p{
white-space: nowrap; /* 不换行 */
overflow: hidden; white-space: nowrap; /* 隐藏 */
text-overflow: ellipsis; /* 显示为省略号 */
.hotelname p {
white-space: nowrap;
/* 不换行 */
overflow: hidden;
white-space: nowrap;
/* 隐藏 */
text-overflow: ellipsis;
/* 显示为省略号 */
/* border-bottom:1px solid #606266 ; */
}
.hotelname:hover{
}
.hotelname:hover {
/* text-decoration: underline; */
border-bottom:1px solid #606266 ;
}
.hotel-card-img {
border-bottom: 1px solid #606266;
}
.hotel-card-img {
position: relative;
overflow: hidden;
width: 160px;
height: 150px;
margin-right: 16px;
}
.el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover {
}
.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
margin-bottom: 12px;
}
}
.d12p {
margin-top: 3px;
......@@ -72,7 +88,7 @@
-webkit-box-orient: vertical;
}
.d12p:hover {
.d12p:hover {
color: #999;
}
......@@ -80,19 +96,20 @@
.pic_item {
position: relative;
height: 100%;
}
.pic_item:hover{
}
.pic_item:hover {
cursor: pointer;
}
}
.pic_item h3 {
.pic_item h3 {
position: absolute;
left: 4rem;
bottom: 1rem;
font-size: 50px;
color: white;
font-weight: 900;
font-family:Georgia, 'Times New Roman', Times, serif;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 12px;
line-height: 116%;
display: flex;
......@@ -100,115 +117,118 @@
flex: none;
order: 1;
align-self: stretch;
}
.ant-col {
}
.ant-col {
max-width: 100%;
min-height: 1px;
position: absolute; /* 设置div为绝对定位 */
right: 0; /* 距离右边0像素 */
bottom: 0; /* 距离底部0像素 */
font-size:18px;
}
.nd-price-tag_lg, .nd-price-tag_lg .nd-price-tag__currency {
position: absolute;
/* 设置div为绝对定位 */
right: 0;
/* 距离右边0像素 */
bottom: 0;
/* 距离底部0像素 */
font-size: 18px;
}
.nd-price-tag_lg,
.nd-price-tag_lg .nd-price-tag__currency {
font-size: 16px;
line-height: 24px;
}
.nd-price-tag_lg .nd-price-tag__price {
}
.nd-price-tag_lg .nd-price-tag__price {
font-size: 18px;
line-height: 26px;
font-weight: 700;
}
.nd-price-tag {
}
.nd-price-tag {
font-weight: 400;
color: #f32a4e;
}
.nd-reserve-btn {
}
.nd-reserve-btn {
/* --nd-reserve-btn-color-bg-hover: rgb(20 128 140 / 80%) */
color: #fff;
border-color: #14808c;
background-color: #14808c;
margin-left:24px;
}
.nd-reserve-btn:hover{
background-color:rgb(20 128 140 / 80%);
}
margin-left: 24px;
}
.nd-reserve-btn:hover {
background-color: rgb(20 128 140 / 80%);
}
</style>
<template>
<div class="page_iisMg" >
<div class="flexOne 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="国家" >
<ul>
<li>
<span>
<em>国家</em>
<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-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>
</span>
</li>
<li>
<span>
<em>省份</em>
<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')">
</span>
</li>
<li>
<span>
<em>{{$t('pub.date')}}</em>
<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')">
</span>
</li>
<li>
<span>
<em>{{$t('hotel.hotel')}}</em>
<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>
</span>
</li>
<li>
<button
class="hollowFixedBtn"
@click="resetPageIndex()"
>{{$t('pub.searchBtn')}}</button>
<button class="hollowFixedBtn" @click="resetPageIndex()">{{$t('pub.searchBtn')}}</button>
</li>
</ul>
</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 style="max-width: 1366px; min-width: 375px; margin: auto;width:1300px">
<div v-loading="loading">
<el-card class="box-card" v-for="(item, index) in dataList" :key="index" >
<el-card class="box-card" v-for="(item, index) in dataList" :key="index">
<div class="hotelDiv" style="width:100%;margin-bottom:12px;">
<div style="width:85%;">
<div class="side-hotel-map__marker q-pr-lg"> {{index+1}}</div>
<div class="hotelname " ><p ><span class="hotelnamespan"> {{item.hotelName}}</span> <span style="font-size:12px;color:#606266;margin-left:8px;">{{item.hotelEName}}</span></p></div>
<div class="hotelname ">
<p><span class="hotelnamespan"> {{item.hotelName}}</span> <span
style="font-size:12px;color:#606266;margin-left:8px;">{{item.hotelEName}}</span></p>
</div>
</div>
<div style="width:15%;">
<el-rate v-model="item.reviewRating" disabled :max="getPrice(item.reviewRating)" show-score
text-color="#ff9900" :colors="['orange','orange','orange','orange','orange']"
disabled-void-color="rgb(211 217 225)">
</el-rate>
</div>
<div style="width:15%;"><el-rate
v-model="item.reviewRating"
disabled
:max="getPrice(item.reviewRating)"
show-score
text-color="#ff9900"
:colors="['orange','orange','orange','orange','orange']"
disabled-void-color="rgb(211 217 225)"
>
</el-rate></div>
</div>
<div style="display: inline-flex; width:100%;height:auto;margin-top:12px;">
<!-- 图片 -->
......@@ -227,58 +247,52 @@
<!-- 基本信息 -->
<div style="position: relative; width:100%;">
<div style="width:100%;line-height:26px;">
<p >
<p>
<i class="text-grey-13 q-mr-xs el-icon-location-outline" name="place" size="xs"></i>
{{item.address}}
</p>
<template v-if="item.DescriptionList&&item.DescriptionList.length>0">
<el-popover
placement="top"
width="600"
title="酒店简介"
trigger="click" >
<el-popover placement="top" width="600" title="酒店简介" trigger="click">
<div style="line-height:27px;" v-html="item.DescriptionList[0].HotelDescription_CN"></div>
<div slot="reference" class="d12p" style="line-height:26px;font-size:14px;">
<span class="hotelnamespan" style="float: left;">酒店简介</span>
<div v-html="item.DescriptionList[0].NoHtmlHotelDescription"></div>
</div>
</el-popover>
</template>
</template>
</div>
<div class="ant-col nd-price-tag">
<span class="nd-price-tag__currency nd-price-tag">CNY </span>
<span class="nd-price-tag__price nd-price-tag" style="font-weight: bolder !important;font-size: 20px;">{{item.lowrateBySetCurrency}} </span>
<span class="nd-price-tag__price nd-price-tag"
style="font-weight: bolder !important;font-size: 20px;">{{item.lowrateBySetCurrency}} </span>
<span class="nd-price-tag">起</span>
<el-button round class="nd-reserve-btn" @click="goUrlT('HotelDetails', item.hotelId)" >立即预订</el-button>
<el-button round class="nd-reserve-btn" @click="goUrlT('HotelDetails', item.hotelId)">立即预订</el-button>
</div>
</div>
</div>
</el-card>
</div>
</el-card>
</div>
</div>
<div class="noDataNotice" v-if="dataList.length<1&&loading==false"><i class="iconfont icon-kong"></i>
<p>没有找到你需要的数据</p>
</div>
<div class="noDataNotice" v-if="dataList.length<1&&loading==false"><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 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 {
export default {
data() {
return {
active: 1,
RB_Group_Id:'',
companyList:[],
RB_Group_Id: '',
companyList: [],
msg: {
//只查询日本
Country: "JP",
......@@ -291,18 +305,18 @@ export default {
MaxPrice: 0,
MinPrice: 0,
HotelName: '',
StartDate:'',
EndDate:'',
StartDate: '',
EndDate: '',
pageIndex: 1,
pageSize: 10,
IsSelectImg:1,
IsSelectImg: 1,
},
productionDate: [],
dataList: [],
loading: false,
isShow: false,
currentPage: 0,
total:0,
total: 0,
//国家 省市 区
provinceList: [],
cityList: [],
......@@ -335,8 +349,8 @@ export default {
if (query !== '') {
let msg = {
CountryCode: this.msg.Country,
Type:'Destination',
CityName_CN:query
Type: 'Destination',
CityName_CN: query
};
this.apipost(
"dmc_post_GetDiDaCityBaseInfo",
......@@ -349,54 +363,59 @@ export default {
this.cityList = [];
}
},
getCityList(ID,Type) {
getCityList(ID, Type) {
//根据省份获取城市
let msg = { };
if(Type==="Destination"){
let msg = {};
if (Type === "Destination") {
msg = {
CountryCode: ID,
Type:Type
Type: Type
};
this.cityList = [];
}
else {
} else {
msg = {
ParentCityCode: ID,
Type:Type
Type: Type
};
this.district=[];
this.district = [];
}
this.apipost(
"dmc_post_GetDiDaCityBaseInfo",
msg,
res => {
if(Type==="Destination"){
if (Type === "Destination") {
this.cityList = res.data.data;
}
else {
this.district= res.data.data;
} else {
this.district = res.data.data;
}
},
);
},
getProvinceList(countryId) {
getProvinceList() {
//根据省份获取城市
this.provinceList = [];
this.apipost(
"dmc_post_GetDiDaCountryList",
{},
"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:'道旅酒店详情'}})
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.apipost('dmc_post_GetDiDaHotelPageList', this.msg, res => {
this.loading = false
if (res.data.resultCode == 1) {
this.total = res.data.data.count;
......@@ -408,20 +427,12 @@ export default {
this.msg.pageIndex = val;
this.getPageList();
},
resetPageIndex: function (){ // 重置页码
this.msg.pageIndex=1;
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)
},
getPrice(price) {
return Math.ceil(price);
},
......@@ -432,20 +443,21 @@ export default {
var year = DateTime.getFullYear();
var month = DateTime.getMonth() + 1;
var day = DateTime.getDate();
this.msg.StartDate= year + "-" +
this.msg.StartDate = year + "-" +
(month < 10 ? "0" : "") + month + "-" +
(day < 10 ? "0" : "") + day ;
(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 + "-" +
this.msg.EndDate = eyear + "-" +
(emonth < 10 ? "0" : "") + emonth + "-" +
(eday < 10 ? "0" : "") + eday ;
this.getProvinceList("JP");
(eday < 10 ? "0" : "") + eday;
this.getProvinceList();
this.getPageList();
}
};
};
</script>
src/components/Hotel/DiDa/HotelSure.vue
View file @ 4dc61688
<style scoped>
.hotelCard-img {
.hotelCard-img {
width: 228px;
height: 162px;
overflow: hidden;
}
.hotelCard-title {
}
.hotelCard-title {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.hotel-info-item::before {
}
.hotel-info-item::before {
display: inline;
content: "·";
font-weight: bolder;
margin-right: 4px;
}
.height-320 {
}
.height-320 {
height: 250px;
}
.hotel-details-table {
}
.hotel-details-table {
border: 1px solid #dcdcdc;
border-collapse: collapse;
width: 680px;
}
.hotel-details-table .td01 {
}
.hotel-details-table .td01 {
padding: 3px 15px;
background: #f7f7f7;
width: 226px;
height: 19px;
text-align: center;
}
.hotel-details-table .td02 {
}
.hotel-details-table .td02 {
padding: 3px 15px;
background: #fafafa;
width: 69px;
height: 19px;
text-align: center;
}
.hotel-details-table td {
}
.hotel-details-table td {
width: 439px;
padding: 10px 20px;
vertical-align: middle;
......@@ -46,28 +53,32 @@
border: 1px solid #dcdcdc;
font-size: 14px;
box-sizing: border-box;
}
.hotel-details-tableMoblie {
}
.hotel-details-tableMoblie {
border: 1px solid #dcdcdc;
border-collapse: collapse;
width: 100%;
margin-top: 5px;
}
.hotel-details-tableMoblie .td01 {
}
.hotel-details-tableMoblie .td01 {
padding: 3px 10px;
background: #f7f7f7;
width: 33.33%;
height: 19px;
text-align: center;
}
.hotel-details-tableMoblie .td02 {
}
.hotel-details-tableMoblie .td02 {
padding: 3px 5px;
background: #fafafa;
width: 33.33%;
height: 19px;
text-align: center;
}
.hotel-details-tableMoblie td {
}
.hotel-details-tableMoblie td {
width: 100%;
padding: 10px 20px;
vertical-align: middle;
......@@ -75,66 +86,79 @@
border: 1px solid #dcdcdc;
font-size: 14px;
box-sizing: border-box;
}
.HD_hotelComIntroduce {
}
.HD_hotelComIntroduce {
margin: auto;
height: auto;
border-bottom: 1px solid #dcdcdc;
color: #111111;
}
.HD_hotelComIntroduce span {
}
.HD_hotelComIntroduce span {
display: inline-block;
margin-bottom: 10px;
}
.HD_inTitle {
}
.HD_inTitle {
font-size: 14px;
font-weight: bold;
color: #111111;
margin-bottom: 20px;
}
.HD_ServiceList span {
}
.HD_ServiceList span {
display: inline-block;
margin: 0 30px 10px 0;
white-space: nowrap;
}
.bg-white {
}
.bg-white {
background: #fff !important;
}
.q-py-lg {
}
.q-py-lg {
padding-top: 24px;
padding-bottom: 24px;
}
.q-py-lg8 {
}
.q-py-lg8 {
padding-top: 8px;
padding-bottom: 8px;
}
}
.q-py-bottom8 {
.q-py-bottom8 {
padding-bottom: 8px;
}
.column {
}
.column {
flex-direction: column;
}
.row {
}
.row {
display: flex;
flex-wrap: wrap;
}
.q-mb-lg {
}
.q-mb-lg {
margin-bottom: 24px;
}
.justify-between {
}
.justify-between {
justify-content: space-between;
}
}
.q-position-engine {
.q-position-engine {
margin-top: var(--q-pe-top, 0) !important;
margin-left: var(--q-pe-left, 0) !important;
will-change: auto;
}
.scroll {
}
.scroll {
overflow: auto;
}
.q-menu {
}
.q-menu {
position: fixed !important;
display: inline-block;
max-width: 95vw;
......@@ -146,129 +170,158 @@
outline: 0;
max-height: 65vh;
z-index: 6000;
}
.q-pa-md {
}
.q-pa-md {
padding: 16px;
}
.q-pa-mdlr {
}
.q-pa-mdlr {
padding: 0px 16px;
}
.rounded-borders {
}
.rounded-borders {
border-radius: 4px;
}
.wrap {
}
.wrap {
flex-wrap: wrap;
}
.q-card {
}
.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) {
}
.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 {
}
.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 {
}
.q-card>div {
border-left: 0;
border-right: 0;
box-shadow: none;
}
.q-mr-md {
}
.q-mr-md {
margin-right: 16px;
}
.no-shadow {
}
.no-shadow {
display: flex;
justify-content: flex-start;
}
}
.el-date-editor .el-range-input {
.el-date-editor .el-range-input {
width: 70px;
}
.el-range-separator {
}
.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 {
}
.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 {
}
.el-input .el-input__inner,
.el-select .el-input {
border-radius: 4px;
height: 32px;
}
.HD_Green {
}
.HD_Green {
background-color: green;
}
.text-white {
}
.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 {
}
.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 {
}
.HD_Black {
background-color: #000;
}
.q-px-lg {
}
.q-px-lg {
padding-left: 24px;
padding-right: 24px;
}
.q-pl-lg {
}
.q-pl-lg {
padding-left: 24px;
}
.q-pt-sm {
}
.q-pt-sm {
padding-top: 8px;
}
.q-px-sm {
}
.q-px-sm {
padding-left: 8px;
padding-right: 8px;
}
}
.q-pb-md8 {
.q-pb-md8 {
padding-bottom: 8px;
}
.q-mb-md {
}
.q-mb-md {
margin-bottom: 16px !important;
}
.q-mb-md8 {
margin-bottom:8px !important;
}
.text-right {
}
.q-mb-md8 {
margin-bottom: 8px !important;
}
.text-right {
text-align: right;
}
.q-pt-md {
}
.q-pt-md {
padding-top: 16px;
}
.text-green {
}
.text-green {
color: #4caf50 !important;
}
.text-grey-6 {
}
.text-grey-6 {
color: #9e9e9e !important;
}
.text-red {
}
.text-red {
color: #f44336 !important;
}
.q-focus-helper {
}
.q-focus-helper {
position: absolute;
top: 0;
left: 0;
......@@ -279,156 +332,149 @@
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 {
}
.q-btn--actionable {
cursor: pointer;
}
.bg-green-6 {
}
.bg-green-6 {
background: #4caf50 !important;
}
.q-separator--horizontal {
}
.q-separator--horizontal {
display: block;
height: 1px;
}
.el-divider--horizontal {
}
.el-divider--horizontal {
margin: 0px !important;
}
.order-show {
}
.order-show {
text-align: center;
color: red;
}
.fz18 {
}
.fz18 {
font-size: 18px;
font-weight: bold;
}
.text-orange-6 {
}
.text-orange-6 {
color: #ff9800 !important;
}
.text-green-6 {
}
.text-green-6 {
color: #4caf50 !important;
}
.text-weight-bold {
}
.text-weight-bold {
font-weight: 700;
}
.text-grey-9 {
}
.text-grey-9 {
color: #424242 !important;
}
.fz20 {
}
.fz20 {
font-size: 20px;
}
.text-red {
}
.text-red {
color: #f44336 !important;
}
.text-h5 {
}
.text-h5 {
font-size: 1.5rem;
font-weight: 400;
line-height: 2rem;
letter-spacing: normal;
}
.q-ml-md {
}
.q-ml-md {
margin-left: 6px;
}
.q-px-md {
}
.q-px-md {
padding-left: 16px;
padding-right: 16px;
}
.items-center,
.flex-center {
}
.items-center,
.flex-center {
align-items: center;
}
.items-end {
}
.items-end {
align-items: flex-end;
}
/deep/ .el-card__body, .el-main {
}
/deep/ .el-card__body,
.el-main {
padding: 10px !important;
}
.d-pr8 {
}
.d-pr8 {
padding-right: 8px;
}
}
.table-list tr, td {
.table-list tr,
td {
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
padding:8px;
border-collapse: collapse; /* 移除单元格之间的间隔 */
font-size:12px;
}
.table-list tr:first-child td {
padding: 8px;
border-collapse: collapse;
/* 移除单元格之间的间隔 */
font-size: 12px;
}
.table-list tr:first-child td {
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
padding:8px;
border-collapse: collapse; /* 移除单元格之间的间隔 */
}
padding: 8px;
border-collapse: collapse;
/* 移除单元格之间的间隔 */
}
</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="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 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 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 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
style="width:100%;background:#e1f5fe!important;font-weight:700;border-radius:4px;height:53px;display:flex;padding-left:10px; align-items: center;">
预定信息
</div>
</div>
<template v-if="sureMsg&&sureMsg.BookingID&&sureMsg.BookingID.length>0">
<div class="row q-px-lg row justify-between q-mb-md">
<div
class="row no-wrap items-center q-mt-xs q-pt-sm text-red text-weight-bold"
style="width:100%;"
>
<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">
{{ sureMsg.HotelName }}</span
>
{{ sureMsg.HotelName }}</span>
</div>
</div>
<div style="padding-bottom: 8px;">
<div style="display: flex;">
<div style="display: flex;">
<div class="q-pt-xs col q-px-lg q-mb-md8" style="width:50%;">
<span class="text-grey-6 q-pr-lg"> <i
class="text-grey-13 q-mr-xs el-icon-location-outline"
name="place"
size="xs"
></i>
<span class="text-grey-6 q-pr-lg"> <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>
......@@ -436,59 +482,42 @@
</div>
<div class="q-pt-xs col q-px-lg q-mb-md8" style="width:50%;">
<span class="text-grey-6 q-pr-lg"> <i
style="color:#c0c4cc;"
class="text-grey-13 q-mr-xs el-icon-phone"
name="place"
size="xs"
></i>
<span class="text-grey-6 q-pr-lg"> <i style="color:#c0c4cc;" class="text-grey-13 q-mr-xs el-icon-phone"
name="place" size="xs"></i>
<span class="col fz14 text-weight-bold text-blick text-grey-6">{{ $route.query.tel }}</span>
</span>
</div>
</div>
</div>
</div>
</div>
<div style="display:row;flex-direction:row;padding-bottom:16px;" class="justify-between">
<div style="padding-bottom: 8px;">
<div style="display: flex;">
<div style="display: flex;">
<div class="q-pt-xs col q-px-lg q-mb-md8" style="width:50%;">
<span class="text-grey-6 q-pr-lg">房型</span>
<span class="text-grey-9">
<template v-if=" roomRateDetails.RatePlanList && roomRateDetails.RatePlanList.length > 0 " >
<template v-if=" roomRateDetails.RatePlanList && roomRateDetails.RatePlanList.length > 0 ">
{{ roomRateDetails.RatePlanList[0].RoomName_CN }}
</template>
</span>
</div>
<div class="q-pt-xs col q-px-lg q-mb-md8" style="width:50%;">
<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-loading="loading"
>
<span class="text-grey-9 q-pr-lg"
v-if="roomRateDetails.RatePlanList && roomRateDetails.RatePlanList.length > 0" v-loading="loading">
{{ getRoomType(roomRateDetails.RatePlanList[0].BedType) }}
</span>
</div>
</div>
</div>
<div style="padding-bottom: 8px;">
<div style="display: flex;">
</div>
</div>
<div style="padding-bottom: 8px;">
<div style="display: flex;">
<div class="q-pt-xs col q-px-lg q-mb-md8" style="width:50%;">
<span class="text-grey-6 q-pr-lg">入住日期</span>
<span class="text-grey-9"> {{params.CheckInDate}} <span class="q-ml-md">{{ checkInWeek }}</span>
-
<span > {{params.CheckOutDate}} </span>
<span> {{params.CheckOutDate}} </span>
<span class="q-ml-md">{{ checkOutWeek }}</span>
</span>
</div>
......@@ -496,29 +525,21 @@
<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="childNum > 0">儿童{{ childNum }} 人</span>
<span class="q-pl-lg" v-if="isBaoChild">不能报儿童</span>
</span>
</div>
</div>
</div>
</div>
</div>
<div style="padding-bottom: 8px;">
<div style=" display: flex;">
<div style="width:50%;" 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-md8" >
<div style="width:50%;" 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-md8">
<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-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
......@@ -531,28 +552,25 @@
<div>
<span class="text-grey-6 q-pr-lg">报价是否即时确认</span>
<span class="text-grey-9">
<template v-if=" roomRateDetails.RatePlanList && roomRateDetails.RatePlanList.length > 0 " >
<template v-if=" roomRateDetails.RatePlanList && roomRateDetails.RatePlanList.length > 0 ">
{{ roomRateDetails.RatePlanList[0].IsOnRequest?"否":"是" }}
</template>
</span>
</div>
</div>
</div>
</div>
<div class="q-pt-xs col q-px-lg q-mb-md " >
<span class=" q-pr-lg d-pr8" style="float:left;" >订单总金额</span >
<div class="q-pt-xs col q-px-lg q-mb-md ">
<span class=" q-pr-lg d-pr8" style="float:left;">订单总金额</span>
<span class=" col row wrap text-red" style="font-size:18px;">
( {{DanWei}} ){{roomRateDetails.TotalPrice}}
</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-6 q-pr-lg d-pr8" style="float:left;">房費情況</span>
<span class="text-grey-9 col row wrap">
<template v-if="roomRateDetails.RatePlanList && roomRateDetails.RatePlanList.length > 0">
<table class="table-list" cellspacing="0" >
<table class="table-list" cellspacing="0">
<tr style="background-color: #f1f1f1;">
<td v-for="( itemp, indexp ) in roomRateDetails.RatePlanList[0].PriceList" :key="indexp">
{{getWeekD(itemp.StayDate)}}
......@@ -561,102 +579,72 @@
<tr>
<td v-for="( itemp, indexp ) in roomRateDetails.RatePlanList[0].PriceList" :key="indexp">
<span class="text-red">{{DanWei }} {{itemp.Price}}</span>
<p >
<span :class="itemp.MealAmount>0?'text-green':'' " >
<p>
<span :class="itemp.MealAmount>0?'text-green':'' ">
{{getMealtype(itemp.MealType)}}
<template v-if="itemp.MealAmount>0">
×{{itemp.MealAmount}}份
</template>
</span>
</p>
</td>
</tr>
</table>
</template>
</span>
</div>
</div>
</template>
<template v-else><div style="text-align:center;padding:18px;">暂无数据</div></template>
<template v-else>
<div style="text-align:center;padding:18px;">暂无数据</div>
</template>
</div>
<div
class="bg-white column q-mb-md"
style="max-width: 1366px; min-width: 375px; margin: auto;width:1300px"
>
<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
>
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-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-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-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-form-item label="客户需求">
<el-input v-model="sureMsg.guestRequest" placeholder="客户需求"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item label-width="0px" v-if="sureMsg.GuestList && sureMsg.GuestList.length > 0">
<template v-for="(item, subIndex) in sureMsg.GuestList" >
<template v-for="(item, subIndex) in sureMsg.GuestList">
<div v-for="(itemguest, numberOfAdultsIndex) in item.GuestInfo" :key="subIndex">
<el-row style="margin-bottom:22px">
<el-col :gutter="35" style="width:26%;margin-right:24px;">
......@@ -666,28 +654,22 @@
<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="`GuestList[${subIndex}].GuestInfo[${numberOfAdultsIndex}].FirstName`"
:rules="rules.FirstName" >
:rules="rules.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 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-form-item>
<el-row>
<el-col :gutter="35">
<div class="row col-12 text-red q-mb-md" v-if="
......@@ -701,31 +683,26 @@
</div>
<div v-else>
<p>{{ getformatDateStr(itemCancella.FromDate) }}
<span v-if="index1!=(roomRateDetails.CancellationPolicyList.length-1)">- {{ getformatDateStr(roomRateDetails.CancellationPolicyList[index1+1].FromDate) }} 之间</span>
<span v-if="index1!=(roomRateDetails.CancellationPolicyList.length-1)">-
{{ getformatDateStr(roomRateDetails.CancellationPolicyList[index1+1].FromDate) }} 之间</span>
取消，收费 {{DanWei}}{{getPrice(itemCancella.Amount)}};</p>
</div>
</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" :disabled="submDisabled" style="width:100%;" @click="submitForm('sureMsg')" :loading="submLoading">下单</el-button>
<div class="col row q-mb-md" style="max-width: 1366px; min-width: 375px; margin: auto;width:1300px">
<el-button type="primary" :disabled="submDisabled" style="width:50%; margin:0 auto;" @click="submitForm('sureMsg')"
:loading="submLoading">下单</el-button>
</div>
</div>
</template>
<script>
export default {
export default {
data() {
return {
isShowTime: true,
......@@ -757,16 +734,16 @@ export default {
numberOfAdults: 0,
numberOfChildren: 0,
submLoading: false,
submDisabled:false,
submDisabled: false,
loading: false,
dateRange: "", //当前日期
dateRange2: "", //当前日期
roomRateDetails: {},
DanWei: "",
HotelRoomTypes: [], //散客房间类型
HotelMealTypes:[],//餐型
HotelMealTypes: [], //餐型
dataList: {},
GuestInfo:{
GuestInfo: {
LastName: '',
FirstName: '',
Age: '',
......@@ -794,8 +771,8 @@ export default {
OrderForm: 1,
//备注
guestRequest: "",
hotelId:'',
roomType:0,
hotelId: '',
roomType: 0,
},
auditNum: 0,
childNum: 0,
......@@ -874,18 +851,19 @@ export default {
methods: {
// 提交下单
submitForm(formName) {
this.$refs[formName].validate((valid)=>{
if(valid){
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.EmployeeIdStr = this.getLocalStorage().EmployeeId + "";
this.sureMsg.totalRoomCount = this.params.searchroomGroup.length;
this.sureMsg.RoomCount = this.params.searchroomGroup.length;
this.sureMsg.CheckOutDate = this.params.CheckOutDate;
if(this.roomRateDetails&&this.roomRateDetails.RatePlanList&&this.roomRateDetails.RatePlanList.length>0){
if (this.roomRateDetails && this.roomRateDetails.RatePlanList && this.roomRateDetails.RatePlanList
.length > 0) {
this.sureMsg.roomType = this.roomRateDetails.RatePlanList[0].BedType;
}
......@@ -909,9 +887,13 @@ export default {
this.loading = false;
if (res.data.resultCode == 1) {
this.Success("下单成功");
this.$router.push({ name:"HotelOrderTotal",query:{tab:'散卖酒店订单'}})
this.$router.push({
name: "HotelOrderTotal",
query: {
tab: '散卖酒店订单'
}
else{
})
} else {
this.Error(res.data.message);
}
this.submLoading = false;
......@@ -926,7 +908,7 @@ export default {
//获取道旅餐食类型
getdidaMealType() {
this.apipost('dmc_post_GetDidaMealType', this.hotelMsg, res=>{
this.apipost('dmc_post_GetDidaMealType', this.hotelMsg, res => {
this.loading = false
if (res.data.resultCode == 1) {
this.HotelMealTypes = res.data.data;
......@@ -946,22 +928,21 @@ export default {
return mealtypeName;
},
//日期格式化
getIsCancella(RatePlanCancellationPolicyList,TotalPrice) {
let IsCancel=0;//不可取消
let date2 = new Date();//当前时间
RatePlanCancellationPolicyList.forEach((item,index) => {
var dt = new Date(item.FromDate);//取消时间
if(IsCancel==0){
if (dt > date2 ) {
if(item.Amount==TotalPrice){
IsCancel=1;
}else{
IsCancel=2;
}
getIsCancella(RatePlanCancellationPolicyList, TotalPrice) {
let IsCancel = 0; //不可取消
let date2 = new Date(); //当前时间
RatePlanCancellationPolicyList.forEach((item, index) => {
var dt = new Date(item.FromDate); //取消时间
if (IsCancel == 0) {
if (dt > date2) {
if (item.Amount == TotalPrice) {
IsCancel = 1;
} else {
IsCancel = 2;
}
else{
if(item.Amount!=TotalPrice){
IsCancel=2;
} else {
if (item.Amount != TotalPrice) {
IsCancel = 2;
}
}
}
......@@ -985,7 +966,7 @@ export default {
let year = dt.getFullYear();
let month = (dt.getMonth() + 1).toString().padStart(2, "0");
let date = (dt.getDate() + 1).toString().padStart(2, "0");
return month + "-" + date +"("+this.WeekList[dt.getDay()]+")";
return month + "-" + date + "(" + this.WeekList[dt.getDay()] + ")";
},
//日期格式化
......@@ -993,19 +974,23 @@ export default {
var dt = new Date(value);
let year = dt.getFullYear();
let month = (dt.getMonth() + 1).toString().padStart(2, "0");
let date = (dt.getDate() ).toString().padStart(2, "0");
let date = (dt.getDate()).toString().padStart(2, "0");
return year + "-" + month + "-" + date;
},
optionsFnStar(cd) {
return (
cd <=
date.formatDate(date.addToDate(new Date(), { days: 9 }), "YYYY/MM/DD")
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")
date.formatDate(date.addToDate(new Date(), {
days: 9
}), "YYYY/MM/DD")
);
},
dateRangeHandler(e) {
......@@ -1049,11 +1034,11 @@ export default {
this.TotalChildCount = 0;
let rateGrouoLen = 0;
}
if(this.roomRateDetails&&this.roomRateDetails.RatePlanList&&this.roomRateDetails.RatePlanList.length>0){
this.submDisabled=false;
}
else{
this.submDisabled=true;
if (this.roomRateDetails && this.roomRateDetails.RatePlanList && this.roomRateDetails.RatePlanList
.length > 0) {
this.submDisabled = false;
} else {
this.submDisabled = true;
}
},
null
......@@ -1181,5 +1166,6 @@ export default {
this.getdidaMealType();
this.initHotel();
}
};
};
</script>
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