Skip to content

A
Athena
Commit 4d15dfa7 authored by zhengke's avatar zhengke
Browse files
Options

新增

parent a9d4c743
Hide whitespace changes
Inline Side-by-side
Showing with 586 additions and 0 deletions
src/components/Hotel/SupplierView.vue 0 → 100644
View file @ 4d15dfa7
<style>
.Sv_MainContent{
width:990px;
height:auto;
margin:20px auto;
}
.hotel-baseinfo {
border: 1px solid #e5e9f0;
background: #fff;
padding: 20px;
zoom: 1;
color: #8a9ca8;
margin-bottom:10px;
}
.hotel-baseinfo .main-img {
width: 320px;
height: 240px;
line-height: 240px;
float: left;
overflow: hidden;
background: #ddd;
text-align: center;
}
.hotel-baseinfo .main-img img{
width:100%;
height:100%;
}
.hotel-baseinfo img{
vertical-align: middle;
}
.hotel-info{
margin: 0 260px 0 330px;
height: 240px;
width:66%;
overflow: hidden;
}
.hotel-baseinfo .hotel-info h2 {
font-size: 20px;
font-family: "microsoft yahei";
color: #42647f;
}
.hotel-baseinfo .hotel-base{
height: 80px;
overflow: hidden;
position: relative;
}
.hotel-info .el-rate{
display:inline-block;
position: relative;
top:-2px;
}
.hotel-baseinfo .address{
height: 18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size:12px;
margin-top:15px;
}
.hotel-baseinfo .hotel-pics-box {
height: 160px;
overflow: hidden;
}
.clearfix {
zoom: 1;
}
.hotel-baseinfo .hotel-info .hotel-pics li {
float: left;
width: 100px;
height: 75px;
line-height: 75px;
margin: 0 10px 10px 0;
overflow: hidden;
background: #ddd;
}
.hotel-baseinfo .hotel-info .hotel-pics img {
max-width: 100px;
height:100%;
vertical-align: middle;
}
.hotelSearchDiv{
width:100%;
height:90px;
background-color: #fff;
color:#42647f;
}
.HtSearchBtn{
width: 60px;
padding-left: 0;
padding-right: 0;
text-align: center;
color: #fff;
background-color: #63b8f0;
border-color: #34a3ec;
box-shadow: 0 2px 0 #34a3ec;
padding: 6px 2px;
font-size: 12px;
line-height: 1;
border:0;
outline: 0;
margin-left:20px;
border-radius: 3px;
}
.hotelSearchDiv .totalNight{
font-size:12px;
}
.w120{
width:120px!important;
}
.room-item-inner {
/* border-top: 1px solid #e5e9f0; */
zoom: 1;
padding: 10px 25px;
}
.quoted-price-wrapper {
float: right;
width: 130px;
}
.quoted-price {
float: right;
background: #fff;
border: 1px solid #fff;
padding: 8px 10px 7px;
margin-top: -7px;
}
.pi-btn-primary {
color: #fff;
background-color: #63b8f0;
border-color: #34a3ec;
box-shadow: 0 2px 0 #34a3ec;
}
.pi-btn{
display: inline-block;
padding: 10px 1.5em;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 0 solid transparent;
border-radius: 3px;
border: 0;
width: auto;
font-weight: 700;
white-space: nowrap;
text-decoration: none;
user-select: none;
}
.room-price-wrapper {
float: right;
min-width: 140px;
}
.room-price-wrapper .pi-price {
margin: 8px 0 0 0;
font-family: tahoma,verdana;
line-height: 1;
vertical-align: baseline;
color: #ff5741;
font-size:28px;
}
.pi-price i{
font-family: arial;
font-style: normal;
font-weight: 400;
padding-right: 4px;
font-size:18px;
}
.hotelQi{
font-size:12px;
margin-left: 4px;
}
.Hotelroom-info {
overflow: hidden;
zoom: 1;
height: 38px;
}
.htroomType{
font-size: 14px;
margin-right: 10px;
font-weight: 800;
color:#42647f;
}
.htmianji span{
margin-right:20px;
font-size:12px;
color:#42647f;
}
.item-list {
border: 1px solid #e5e9f0;
padding: 10px 10px 0;
background: #fff;
margin-top: 10px;
padding-bottom:10px;
}
.item-table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-bottom: 1px solid #e5e9f0;
font-size:12px;
}
.item-table th {
height: 24px;
background: #e4eaed;
color: #718a9a;
font-weight: 400;
text-align: left;
padding-left: 10px;
}
.item-table .item-seller {
width: 160px;
padding-left:30px;
}
.expanded .room-item-inner {
background: #e4eaed;
}
.item-table td {
vertical-align: middle;
border-top: 1px solid #e5e9f0;
padding: 7px 0 7px 10px;
}
.hotelIntroduce{
width:100%;
height:auto;
font-size:12px;
color:#42647f;
}
.hotel-desc{
padding:20px;
}
.hotel-inner{
margin-top:8px;
line-height: 2;
}
.hotel-desc h3{
font-size:18px;
font-family: "microsoft yahei";
}
.hotel-facility li {
zoom: 1;
border-bottom: 1px dotted #e5e9f0;
padding: 4px 0 6px;
overflow: hidden;
}
.hotel-facility li label {
font-weight: 800;
float: left;
width: 120px;
}
.hotel-facility li div span {
margin-right: 18px;
}
</style>
<template>
<div class="Sv_MainContent" v-if="isShow">
<div class="hotel-baseinfo">
<div class="main-img">
<img :src="dataList[0].ImageList[0]" alt=""/>
</div>
<div class="hotel-info">
<div class="hotel-base">
<h2>
{{dataList[0].RoomName}}
</h2>
<p class="address">
1-21-11, Honjo, Sumida-Ku, Tokyo 130-0004,,上野/浅草/两国地区,东京,东京都,130-0004,日本 , 东京
</p>
</div>
<div class="hotel-pics-box" style="display:none;">
<ul class="hotel-pics clearfix">
<li><img src="../../assets/img/hotel/dongye.png" alt=""></li>
<li><img src="../../assets/img/hotel/dongye.png" alt=""></li>
<li><img src="../../assets/img/hotel/dongye.png" alt=""></li>
<li><img src="../../assets/img/hotel/dongye.png" alt=""></li>
<li><img src="../../assets/img/hotel/dongye.png" alt=""></li>
<li><img src="../../assets/img/hotel/dongye.png" alt=""></li>
<li><img src="../../assets/img/hotel/dongye.png" alt=""></li>
<li><img src="../../assets/img/hotel/dongye.png" alt=""></li>
<li><img src="../../assets/img/hotel/dongye.png" alt=""></li>
<li><img src="../../assets/img/hotel/dongye.png" alt=""></li>
</ul>
</div>
</div>
</div>
<div class="hotelSearchDiv" style="display:none;">
<div>
<el-date-picker size="mini" v-model="msg.CheckInTime" :picker-options="beforeCheck" type="date"
value-format="yyyy-MM-dd" placeholder="入住">
</el-date-picker>
<el-date-picker size="mini" style="margin:0 20px;" v-model="msg.CheckOutTime" :picker-options="afterCheck" type="date"
value-format="yyyy-MM-dd" placeholder="离店">
</el-date-picker>
<span class="totalNight">共5晚</span>
<input type="button" class="HtSearchBtn" @click="getList()" value="重新搜索"/>
</div>
<div style="margin-top:10px;">
<el-select size="mini" class="w120" style="margin-right:15px;" v-model="msg.RoomNum" placeholder="房间数">
<el-option :value="1" label="1间"></el-option>
<el-option :value="2" label="2间"></el-option>
<el-option :value="3" label="3间"></el-option>
<el-option :value="4" label="4间"></el-option>
<el-option :value="5" label="5间"></el-option>
<el-option :value="6" label="6间"></el-option>
<el-option :value="7" label="7间"></el-option>
<el-option :value="8" label="8间"></el-option>
<el-option :value="9" label="9间"></el-option>
<el-option :value="10" label="10间"></el-option>
</el-select>
<el-select size="mini" class="w120" v-model="msg.RoomType" placeholder="房型" style="margin-right:10px;">
<el-option label="不限" :value='0'></el-option>
<el-option :key="item.ID" :value="item.ID" :label="item.Name" v-for="item in roomType"></el-option>
</el-select>
<el-select size="mini" class="w120" v-model="msg.Meals" placeholder="早餐" style="margin-right:10px;">
<el-option label="不限" :value='0'></el-option>
<el-option :key="item.ID" :value="item.ID" :label="item.Name" v-for="item in mealList"></el-option>
</el-select>
<el-select size="mini" class="w120" v-model="msg.BroadBand" placeholder="网络">
<el-option label="不限" :value='0'></el-option>
<el-option :key="item.ID" :value="item.ID" :label="item.Name" v-for="item in interNet"></el-option>
</el-select>
</div>
</div>
<div class="HotelListDiv">
<div class="room-item-wrapper" :class="{'expanded':isExpande}" v-for="(item,index) in dataList" :key="index">
<div class="room-item-inner">
<div class="room-item-baseinfo">
<div class="quoted-price-wrapper">
<button class="pi-btn pi-btn-primary" style="display:none;">报价列表</button>
</div>
<div class="room-price-wrapper">
<div class="pi-price">
<i class="rmb">RMB</i>{{item.ToDayMoney}}
<span class="hotelQi">起</span>
</div>
</div>
<div class="Hotelroom-info">
<p class="htroomType">{{item.RoomTypeName}}</p>
<p class="htmianji">
<span>床型：{{item.BedType}}</span>
<span>面积：{{item.Area}}㎡</span>
<span>楼层：{{item.Floor}}</span>
<span>窗型：{{item.WindoWCut}}</span>
</p>
</div>
</div>
<div class="item-list" v-if="isExpande">
<table cellpadding="0" cellspacing="0" class="item-table">
<thead>
<tr>
<th class="item-seller">卖家</th>
<th style="width:60px;">处理时长</th>
<th style="width:75px;">预定成功率</th>
<th style="width:240px;">预订详情</th>
<th style="width:60px;"></th>
<th style="padding-left:16px;">价格</th>
<th style="width:60px;"></th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>张三</td>
<td>张三</td>
<td>张三</td>
<td>张三</td>
<td>张三</td>
<td>张三</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="hotelIntroduce">
<div class="hotel-desc">
<div>
<h3>酒店介绍</h3>
</div>
<div class="hotel-inner">
{{dataList[0].Description}}
</div>
</div>
<div class="hotel-desc hotel-facility">
<div>
<h3>设施与服务</h3>
</div>
<div class="hotel-inner">
<ul>
<li>
<label>室内设施</label>
<div style="overflow:hidden;">
<span v-for="(item,index) in dataList[0].FacilityList" :key="index">{{item.HName}}</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="hotelIntroduce">
<div class="hotel-desc">
<div>
<h3>酒店政策</h3>
</div>
<div class="hotel-inner">
?东京市从2002年10月起征收住宿税。征税标准根据住宿金额按每人每晚征收，每晚住宿费在1万日元以上每人每晚征收100日元，1.5万日元以上每人每晚征收200日元，部分房价不包含住宿税，需客人另付前台。
</div>
</div>
<div class="hotel-desc hotel-facility">
<div>
<h3>实用数据</h3>
</div>
<div class="hotel-inner">
<ul>
<!-- <li>
<label>客房总数</label>
<div style="overflow:hidden;">
<span>160</span>
</div>
</li> -->
<li>
<label>酒店前台服务时间至</label>
<div style="overflow:hidden;">
<span>{{ServiceTime}}</span>
</div>
</li>
<li>
<label>早到入住时间</label>
<div style="overflow:hidden;">
<span>{{CheckInTime}}</span>
</div>
</li>
<li>
<label>退房时间</label>
<div style="overflow:hidden;">
<span>{{CheckOutTime}}</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
//查询条件
msg:{
pageIndex:1,
pageSize:5,
RoomName:'',
HotelId:'',
RoomType:0,
RoomStatus:0
},
roomType:[],
mealList:[],
interNet:[],
Star:3,
isExpande:false,
isShow:false,
dataList:[],
//前台服务时间
ServiceTime:'',
//入住时间
checkIntime:'',
//退房时间
CheckOutTime:'',
HotelId:'',
beforeCheck: {
disabledDate: time => {
}
},
afterCheck: {
disabledDate: time => {
}
},
};
},
mounted() {
if (this.$route.query.HotelId) {
this.HotelId = this.$route.query.HotelId;
this.msg.HotelId = this.$route.query.HotelId;
}
this.getroomType();
this.getMeal();
this.getInternet();
var day2 = new Date();
day2.setTime(day2.getTime());
var s2 = day2.getFullYear()+"-" + (day2.getMonth()+1) + "-" + day2.getDate();
this.msg.CheckInTime=s2;
//明天的时间
var day3 = new Date();
day3.setTime(day3.getTime()+24*60*60*1000);
var s3 = day3.getFullYear()+"-" + (day3.getMonth()+1) + "-" + day3.getDate();
this.msg.CheckOutTime=s3;
this.getList();
this.getData();
},
created() {
},
methods: {
getExpande(){
this.isExpande = !this.isExpande
},
//获取房型数据
getroomType(){
this.apipost("scm_get_GetSCMHotelRoomTypeEnumCNList",{},res => {
if (res.data.resultCode == 1) {
this.roomType=res.data.data;
} else {
this.Error(res.data.message);
}
},err => {});
},
//获取早餐
getMeal(){
this.apipost("scm_get_GetSCMHotelRoomMealsEnumCNList",{},res => {
if (res.data.resultCode == 1) {
this.mealList=res.data.data;
} else {
this.Error(res.data.message);
}
},err => {});
},
// interNet
//获取宽带
getInternet(){
this.apipost("scm_get_GetSCMHotelRoomWifiEnumCNList",{},res => {
if (res.data.resultCode == 1) {
this.interNet=res.data.data;
} else {
this.Error(res.data.message);
}
},err => {});
},
//获取数据
getList(){
this.apipost("scm_get_GetSCMHotelRoomPageList",this.msg,res => {
if (res.data.resultCode == 1) {
console.log(res,'resssss');
this.isShow=true;
this.dataList=res.data.data.pageData;
} else {
this.Error(res.data.message);
}
},err => {});
},
//获取详情
getData() {
this.apipost("scm_get_GetSCMHotelService", {
SID: this.HotelId
},
res => {
if (res.data.resultCode == 1) {
var tempData = res.data.data;
this.ServiceTime=tempData.ServiceTime;
this.CheckInTime=tempData.CheckInTime;
this.CheckOutTime=tempData.CheckOutTime;
} else {
this.Error(res.data.message);
}
}, null);
},
}
};
</script>
\ No newline at end of file
src/router.js
View file @ 4d15dfa7
......@@ -465,6 +465,16 @@ export default new Router({
title: "酒店支付成功"
}
},
{
path: "/SupplierView",
name: "SupplierView",
component: resolve =>
require(["@/components/Hotel/SupplierView"], resolve),
meta: {
title: "预览"
}
},
// {
// path: "/ticket/Pay/:id",
// name: "Pay",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment