|
|
@@ -43,13 +43,18 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ #map {
|
|
|
+ overflow: hidden;
|
|
|
+ width: 100%;
|
|
|
+ height: 400px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
<template>
|
|
|
<section class="add_hotel">
|
|
|
<el-form label-width="100px" size='small'>
|
|
|
- <!-- 新增 -->
|
|
|
- <el-row v-if='h_status=="add"'>
|
|
|
+ <!-- 新增 编辑-->
|
|
|
+ <el-row v-if='h_status!=="view"'>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="会议名称">
|
|
|
<el-input disabled v-model="form.name"></el-input>
|
|
|
@@ -76,7 +81,7 @@
|
|
|
</el-col>
|
|
|
<el-col :span="10">
|
|
|
<el-form-item label="酒店电话">
|
|
|
- <el-input v-model="form.address" clearable></el-input>
|
|
|
+ <el-input v-model="form.telephone" clearable></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
@@ -84,10 +89,13 @@
|
|
|
<el-input v-model="form.address" clearable></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
+ <el-col :span="10" :offset="1">
|
|
|
+ <el-button type="primary" size="small" @click="dialogVisible=true,initMap()">点击获取位置</el-button>
|
|
|
+ </el-col>
|
|
|
<el-col :span="24">
|
|
|
<el-form-item label="酒店图片" class="hotel_imgs">
|
|
|
<ul class="img_list">
|
|
|
- <li v-for="(item,index) in form.img" :key='index'>
|
|
|
+ <li v-for="(item,index) in form.imgs" :key='index'>
|
|
|
<img :src="item" alt="">
|
|
|
|
|
|
<p class="move"><i @click="left_right(index,-1)"><i class="el-icon-caret-left"></i> 左移</i>
|
|
|
@@ -106,7 +114,7 @@
|
|
|
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
- <el-col :span="24">
|
|
|
+ <el-col :span="24" >
|
|
|
<h2 class="title">填写房型信息</h2>
|
|
|
</el-col>
|
|
|
<el-col :span="24">
|
|
|
@@ -117,28 +125,28 @@
|
|
|
<el-input v-model="item.name" clearable></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="可住人数">
|
|
|
- <el-input v-model="item.number" clearable></el-input>
|
|
|
+ <el-input v-model="item.enable_number" clearable></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="房型数量">
|
|
|
- <el-input v-model="item.amount" clearable></el-input>
|
|
|
+ <el-input v-model="item.room_number" clearable></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="面积">
|
|
|
- <el-input v-model="item.area" clearable></el-input>
|
|
|
+ <el-input v-model="item.room_area" clearable></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="楼层">
|
|
|
- <el-input v-model="item.amount" clearable></el-input>
|
|
|
+ <el-input v-model="item.floor" clearable></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="床型">
|
|
|
- <el-input v-model="item.floor" clearable></el-input>
|
|
|
+ <el-input v-model="item.bed_type" clearable></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="餐食">
|
|
|
- <el-input v-model="item.meal" clearable></el-input>
|
|
|
+ <el-input v-model="item.food_condition" clearable></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="窗户">
|
|
|
- <el-input v-model="item.window" clearable></el-input>
|
|
|
+ <el-input v-model="item.window_condition" clearable></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="房型">
|
|
|
- <el-select v-model="item.mattess" clearable>
|
|
|
+ <el-select v-model="item.room_type" clearable>
|
|
|
<el-option
|
|
|
v-for="(i, idx) in hotel_type"
|
|
|
:key="idx"
|
|
|
@@ -148,12 +156,12 @@
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="房价">
|
|
|
- <el-input v-model="item.price" clearable></el-input>
|
|
|
+ <el-input v-model="item.unit_price" clearable></el-input>
|
|
|
</el-form-item>
|
|
|
<br>
|
|
|
<el-form-item label="酒店图片" class="hotel_imgs">
|
|
|
<ul class="img_list">
|
|
|
- <li v-for="(img,i) in item.img" :key='"img"+i'>
|
|
|
+ <li v-for="(img,i) in item.imgs" :key='"img"+i'>
|
|
|
<img :src="img" alt="">
|
|
|
<p class="move"><i @click="left_right1(i,index,-1)"><i class="el-icon-caret-left"></i> 左移</i>
|
|
|
<i @click="remove1(i,index)" class="el-icon-delete"></i>
|
|
|
@@ -185,7 +193,7 @@
|
|
|
</el-col>
|
|
|
<el-col :span='24' style="text-align:right;padding:10px;">
|
|
|
<el-button size="small" @click="save" type="primary">保存</el-button>
|
|
|
- <el-button size="small" @click="save" type="primary">继续添加酒店</el-button>
|
|
|
+ <el-button size="small" @click="save(1)" type="primary">继续添加酒店</el-button>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<!-- 查看 -->
|
|
|
@@ -202,34 +210,34 @@
|
|
|
</el-col>
|
|
|
<el-col :span="24">
|
|
|
<el-form-item label="酒店地址">
|
|
|
- <el-input disabled v-model="form.name"></el-input>
|
|
|
+ <el-input disabled v-model="form.address"></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="24">
|
|
|
<el-form-item label="酒店电话">
|
|
|
- <el-input disabled v-model="form.name"></el-input>
|
|
|
+ <el-input disabled v-model="form.telephone"></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="24">
|
|
|
<el-form-item label="酒店图片">
|
|
|
<ul class="img_list">
|
|
|
- <li v-for="(img,i) in form.img" :key='"img"+i'>
|
|
|
+ <li v-for="(img,i) in form.imgs" :key='"img"+i'>
|
|
|
<img :src="img" alt="">
|
|
|
</li>
|
|
|
</ul>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
- <el-col :span="24" class="hotel_type">
|
|
|
+ <el-col :span="24" class="hotel_type" v-for='(item,index) in form.rooms' :key='"room"+index'>
|
|
|
<p style="color:#999;padding:10px 33px;">房型1</p>
|
|
|
<el-form-item label="房型名称">
|
|
|
<p style="color:#666;">
|
|
|
- 房型名称：|数量：间|可住人数：人|面积：平方米|
|
|
|
- 楼层：层|床型：|餐食：|窗户：|房型：|房价：
|
|
|
+ 房型名称：{{item.name}}|数量：{{item.room_number}}间|可住人数：{{item.enable_number}}人|面积：{{item.room_area}}平方米|
|
|
|
+ 楼层：{{item.floor}}层|床型：{{item.bed_type}}|餐食：{{item.food_condition}}|窗户：{{item.window_condition}}|房型：{{item.room_type}}|房价：{{item.unit_price}}
|
|
|
</p>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="房型图片">
|
|
|
<ul class="img_list">
|
|
|
- <li v-for="(img,i) in form.img" :key='"img"+i'>
|
|
|
+ <li v-for="(img,i) in item.imgs" :key='"img"+i'>
|
|
|
<img :src="img" alt="">
|
|
|
</li>
|
|
|
</ul>
|
|
|
@@ -241,41 +249,58 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-form>
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ title="地图" :modal='false'
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ width="600px">
|
|
|
+ <el-input @keyup.enter.native="localSearch" placeholder="请输入关键字搜索" v-model="keyword">
|
|
|
+ <el-button @click="localSearch" slot="append" icon="el-icon-search"></el-button>
|
|
|
+ </el-input>
|
|
|
+ <p style="margin:10px 0;" v-if='form.longitude'>经纬：{{form.longitude}} , {{form.latitude}}</p>
|
|
|
+ <div id="map"></div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
|
|
|
+ <el-button size="mini" type="primary" @click="dialogVisible = false">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
</section>
|
|
|
</template>
|
|
|
<script>
|
|
|
export default {
|
|
|
name:'hotel',
|
|
|
props:{
|
|
|
- status:''
|
|
|
+ status:'',
|
|
|
+ cur_id:''
|
|
|
},
|
|
|
data(){
|
|
|
return{
|
|
|
+ dialogVisible:false,
|
|
|
h_status:'view',
|
|
|
organizerList:[],
|
|
|
cityList:[],
|
|
|
form:{
|
|
|
|
|
|
- img:[]
|
|
|
+ imgs:[]
|
|
|
},
|
|
|
//房型
|
|
|
type:[
|
|
|
- {img:[]}
|
|
|
+ {imgs:[]}
|
|
|
],
|
|
|
hotel_type:[
|
|
|
{ name:'单人间',value:1 },
|
|
|
{ name:'一人单住或标间合住',value:2 }
|
|
|
- ]
|
|
|
+ ],
|
|
|
+ local:null,
|
|
|
+ keyword:''
|
|
|
}
|
|
|
},
|
|
|
methods:{
|
|
|
getData() {
|
|
|
- var parm = this.form;
|
|
|
- this.$api.getAllOrganizer().then((res) => {
|
|
|
- this.organizerList = res.data.data;
|
|
|
- });
|
|
|
- this.$api.getCityList().then((res) => {
|
|
|
- this.cityList = res.data.data;
|
|
|
+ this.$api.getHotel({id:this.cur_id}).then((res) => {
|
|
|
+ this.form = res.data.data;
|
|
|
+ this.type=res.data.data.rooms
|
|
|
});
|
|
|
},
|
|
|
//添加房型
|
|
|
@@ -288,28 +313,28 @@ export default {
|
|
|
},
|
|
|
//获取酒店图片列表
|
|
|
imgchange(file, fileList){
|
|
|
- var img=this.form.img;
|
|
|
+ var img=this.form.imgs;
|
|
|
img.push(fileList.response.data)
|
|
|
- this.form.img=img;
|
|
|
+ this.form.imgs=img;
|
|
|
},
|
|
|
//获取酒店房型图片列表
|
|
|
imgchange1(i,file, fileList){
|
|
|
- var img=this.type[i].img;
|
|
|
+ var img=this.type[i].imgs;
|
|
|
img.push(fileList.response.data)
|
|
|
- this.type[i].img=img;
|
|
|
+ this.type[i].imgs=img;
|
|
|
},
|
|
|
remove(index){
|
|
|
- var img=this.form.img;
|
|
|
+ var img=this.form.imgs;
|
|
|
img.splice(index,1);
|
|
|
- this.form.img=img;
|
|
|
+ this.form.imgs=img;
|
|
|
},
|
|
|
remove1(i,index){
|
|
|
- var img=this.type[index].img;
|
|
|
+ var img=this.type[index].imgs;
|
|
|
img.splice(i,1);
|
|
|
- this.type[index].img=img;
|
|
|
+ this.type[index].imgs=img;
|
|
|
},
|
|
|
left_right(index,type){
|
|
|
- var img=this.form.img;
|
|
|
+ var img=this.form.imgs;
|
|
|
let cur=img[index];
|
|
|
if(type == -1){
|
|
|
//左移
|
|
|
@@ -326,10 +351,10 @@ export default {
|
|
|
this.$set(img,index,right);
|
|
|
}
|
|
|
}
|
|
|
- this.form.img=img;
|
|
|
+ this.form.imgs=img;
|
|
|
},
|
|
|
left_right1(i,index,type){
|
|
|
- var h_type=this.type[index],img=h_type.img;
|
|
|
+ var h_type=this.type[index],img=h_type.imgs;
|
|
|
let cur=img[i];
|
|
|
if(type == -1){
|
|
|
//左移
|
|
|
@@ -346,7 +371,7 @@ export default {
|
|
|
this.$set(img,i,right);
|
|
|
}
|
|
|
}
|
|
|
- h_type.img=img;
|
|
|
+ h_type.imgs=img;
|
|
|
this.$set(this.type,index,h_type)
|
|
|
},
|
|
|
//房型移动
|
|
|
@@ -369,19 +394,97 @@ export default {
|
|
|
}
|
|
|
this.type=h_type
|
|
|
},
|
|
|
- save(){
|
|
|
-
|
|
|
+ save(type){
|
|
|
+ var form=this.form;
|
|
|
+ form.rooms=this.type;
|
|
|
+ if(this.h_status == 'add'){
|
|
|
+ this.$api.addHotel(form).then(res=>{
|
|
|
+ if(res.data.code == 0){
|
|
|
+ this.$message({
|
|
|
+ message: '添加成功',
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ if(type==1){
|
|
|
+ this.form={imgs:[]};
|
|
|
+ this.type=[{imgs:[]}];
|
|
|
+ }else{
|
|
|
+ this.$emit('addSuccess')
|
|
|
+ }
|
|
|
+
|
|
|
+ }else{
|
|
|
+ this.$message({
|
|
|
+ message: res.data.message,
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ this.$api.editHotel(form).then(res=>{
|
|
|
+ if(res.data.code == 0){
|
|
|
+ this.$message({
|
|
|
+ message: '修改成功',
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ if(type==1){
|
|
|
+ this.form={imgs:[]};
|
|
|
+ this.type=[{imgs:[]}];
|
|
|
+ }else{
|
|
|
+ this.$emit('addSuccess')
|
|
|
+ }
|
|
|
+
|
|
|
+ }else{
|
|
|
+ this.$message({
|
|
|
+ message: res.data.message,
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ localSearch(){
|
|
|
+ this.local.search(this.keyword);
|
|
|
+ },
|
|
|
+ initMap(){
|
|
|
+ setTimeout(()=>{
|
|
|
+ var map = new BMapGL.Map('map');
|
|
|
+ if(this.form.longitude){
|
|
|
+ map.centerAndZoom(new BMapGL.Point(this.form.longitude, this.form.latitude), 15);
|
|
|
+ }else{
|
|
|
+ map.centerAndZoom(new BMapGL.Point(116.404, 39.928), 15);
|
|
|
+ }
|
|
|
+
|
|
|
+ this.local = new BMapGL.LocalSearch(map, {
|
|
|
+ renderOptions:{map: map}
|
|
|
+ });
|
|
|
+ map.enableScrollWheelZoom(true);
|
|
|
+ map.addEventListener('click', e=> {
|
|
|
+ this.$set(this.form,'longitude',e.latlng.lng)
|
|
|
+ this.$set(this.form,'latitude',e.latlng.lat)
|
|
|
+ let marker = new BMapGL.Marker(new BMapGL.Point(e.latlng.lng, e.latlng.lat));
|
|
|
+ // 在地图上添加点标记
|
|
|
+ map.clearOverlays()
|
|
|
+ map.addOverlay(marker);
|
|
|
+ });
|
|
|
+ },500)
|
|
|
}
|
|
|
},
|
|
|
watch:{
|
|
|
status(curVal,oldVal){
|
|
|
this.h_status=curVal
|
|
|
+ if(curVal!='add'){
|
|
|
+ this.getData();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ cur_id(){
|
|
|
+ this.getData();
|
|
|
}
|
|
|
},
|
|
|
created(){
|
|
|
-
|
|
|
- this.getData();
|
|
|
- this.h_status=this.status
|
|
|
+ this.h_status=this.status;
|
|
|
+ if(this.h_status!='add'){
|
|
|
+ this.getData();
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
