supermarkpp/src/components/hotel.vue

<style lang='scss'>
    .add_hotel{
        max-height: 70vh;
        overflow: auto;
        .title{
            font-size: 18px;
            font-weight: 400;
            margin-bottom: 20px;
            // padding-left: 30px;
            color: #333;
        }
        .hotel_type{
            border: 1px solid #d9d9d9;
            padding: 20px 0;
            margin-bottom: 10px;
            .el-input{
                width: 130px;
            }
        }
        .img_list{
            li{
                display: inline-block;
                min-width: 140px;
                height: 100px;
                margin: 10px;
                position: relative;
                overflow: hidden;
                img{
                    height: 100%;
                }
                .el-icon-delete{
                    color: red;
                    font-size: 18px;
                    cursor: pointer;
                }
                .move{
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    text-align: center;
                    background: rgba(0, 0, 0, 0.527);
                    color: #fff;
                    cursor: pointer;
                }
            }
        }
        .el-upload--picture-card{
            width: 100px;
            height: 100px;
            line-height: 110px;
        }
        #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!=="view"'>
                <el-col :span="12">
                    <el-form-item label="会议名称" >
                        <el-input disabled v-model="huiyi_name"></el-input>
                    </el-form-item>
                </el-col>                
                <el-col :span="10">
                   <el-form-item label="选择历史酒店">
                        <el-select placeholder="请选择酒店" @change="id=h_id,getData()" v-model="h_id" clearable filterable>
                            <el-option
                                v-for="(item, index) in organizerList"
                                :key="index"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>      
                             
                </el-col>
                <el-col :span="24"><h2 class="title">填写酒店信息</h2>      </el-col>
                <el-col :span="12">
                    <el-form-item label="酒店名称" required>
                        <el-input  v-model="form.name" clearable></el-input>
                    </el-form-item>
                </el-col> 
                <el-col :span="10">
                    <el-form-item label="酒店电话" required>
                        <el-input  v-model="form.telephone" clearable></el-input>
                    </el-form-item>
                </el-col> 
                <el-col :span="12">
                    <el-form-item label="酒店地址" required>
                        <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="酒店图片" required class="hotel_imgs">
                            <ul class="img_list">
                                <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>
                                    &nbsp;&nbsp;<i @click="remove(index)" class="el-icon-delete"></i>&nbsp;&nbsp;
                                    <i @click="left_right(index,1)">右移<i class="el-icon-caret-right"></i> </i></p>
                                </li>
                                <li>
                                    <el-upload  :on-success='imgchange'   style="height:100px;"
                                        action="/api/admin/uploadfile" :show-file-list='false'
                                        list-type="picture-card">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                    <span style='font-size:12px;color:#999999;'>建议图片尺寸为：210*160</span>
                                </li>
                            </ul>
                            
                    </el-form-item>
                </el-col>     
                <el-col :span="24" >
                    <h2 class="title">填写房型信息 </h2>                   
                </el-col>
                <el-col :span="24">
                    <el-row v-for='(item,index) in type' :key='index'>
                        <el-col :span="20" class="hotel_type" >
                            <el-form :inline='true' label-width="70px" size="small">
                                <el-form-item label="房型名称">
                                    <el-input  v-model="item.name" clearable></el-input>
                                </el-form-item>
                                <el-form-item label="可住人数">
                                    <el-input  v-model="item.enable_number" clearable></el-input>
                                </el-form-item>
                                <el-form-item label="房型数量">
                                    <el-input  v-model="item.room_number" clearable></el-input>
                                </el-form-item>
                                <el-form-item label="面积">
                                    <el-input   v-model="item.room_area" clearable></el-input>
                                </el-form-item>
                                <el-form-item label="楼层">
                                    <el-input   v-model="item.floor" clearable></el-input>
                                </el-form-item>
                                <el-form-item label="床型">
                                    <el-input   v-model="item.bed_type" clearable></el-input>
                                </el-form-item>
                                <el-form-item label="餐食">
                                    <el-input   v-model="item.food_condition" clearable></el-input>
                                </el-form-item>
                                <el-form-item label="窗户">
                                    <el-input   v-model="item.window_condition" clearable></el-input>
                                </el-form-item>
                                <el-form-item label="房型">
                                    <el-select v-model="item.room_type" clearable>
                                        <el-option
                                            v-for="(i, idx) in hotel_type"
                                            :key="idx"
                                            :label="i.name"
                                            :value="i.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="房价">
                                    <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.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>
                                            &nbsp;&nbsp;<i @click="remove1(i,index)" class="el-icon-delete"></i>&nbsp;&nbsp;
                                            <i @click="left_right1(i,index,1)">右移<i class="el-icon-caret-right"></i> </i></p>
                                        </li>
                                        <li>
                                            <el-upload   
                                                    :on-success="(res,file)=>{imgchange1(index,res,file)}"
                                                    action="/api/admin/uploadfile" :show-file-list='false'
                                                    list-type="picture-card" >
                                                    <i class="el-icon-plus"></i>
                                            </el-upload>
                                        </li>
                                    </ul>
                                    
                                    <!-- <span style='font-size:12px;color:#999999;'>建议图片尺寸为：210*160</span> -->
                                </el-form-item>
                            </el-form>               
                        </el-col>
                        <el-col :span="3" :offset='1'>
                            <el-button @click="up_down(index,1)" size="mini" plain type="primary" icon='el-icon-top'></el-button><br><br>
                            <el-button @click="up_down(index,-1)" size="mini" plain  type="primary" icon='el-icon-bottom'></el-button><br><br>
                            <el-button @click="del(index)" size="mini" plain  type="danger" icon='el-icon-delete'></el-button>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span='24'>
                    <el-button @click="add_type" type="info" plain>添加房型</el-button>
                </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(1)" type="primary">继续添加酒店</el-button>
                </el-col>
            </el-row>
            <!-- 查看 -->
            <el-row v-if='h_status=="view"'>
                <el-col :span="24">
                    <el-form-item label="会议名称">
                        <el-input disabled v-model="form.name"></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-form-item>
                </el-col>  
                <el-col :span="24">
                    <el-form-item label="酒店地址">
                        <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.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.imgs" :key='"img"+i'>
                                <img :src="img" alt="">
                            </li>
                        </ul>
                    </el-form-item>
                </el-col>   
                <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 item.imgs" :key='"img"+i'>
                                <img :src="img" alt="">
                            </li>
                        </ul>
                    </el-form-item>
                    <el-form-item label-width="30px">
                        已经预定：{{item.order}}  &nbsp;&nbsp;剩余：{{item.surplus_number}}
                        <el-button @click="view(form.id,item.id)" size="big" type="text">查看报名老师</el-button>
                    </el-form-item>
                </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:'',
        cur_id:'',  //酒店ID
        huiyi_id:'', //会议ID
        huiyi_name:''
    },
    data(){
        return{
            id:'',
            h_id:'',
            dialogVisible:false,
            h_status:'view',
            organizerList:[],
            cityList:[],
            form:{
                
                imgs:[]
            },
            //房型
            type:[
                {imgs:[]}
            ],
            hotel_type:[
                { name:'单人间',value:1 },
                { name:'一人单住或标间合住',value:2 }
            ],
            local:null,
            keyword:'',
        }
    },
    methods:{
        view(hid,rid){
            this.$emit('view',{hotel_id:hid,room_id:rid})
        },
        getList(){
            this.$api.getHotelList().then(res=>{
                this.organizerList=res.data.data.list;
            })
        },
        getData() {
            this.$api.getHotel({id:this.id}).then((res) => {
                if(res.data.data){
                    this.form = res.data.data;
                    this.type=res.data.data.rooms
                }
                
            });
        },
        //添加房型
        add_type(){
            this.type.push({imgs:[]})
        },
        //删除
        del(index){
            this.type.splice(index,1)
        },
        //获取酒店图片列表
        imgchange(file, fileList){
            var img=this.form.imgs;
            img.push(fileList.response.data)
            this.form.imgs=img;
        },
        //获取酒店房型图片列表
        imgchange1(i,file, fileList){
            var img=this.type[i].imgs;
            img.push(fileList.response.data)
            this.type[i].imgs=img;
        },
        remove(index){
            var img=this.form.imgs;
            img.splice(index,1);
            this.form.imgs=img;
        },
        remove1(i,index){
            var img=this.type[index].imgs;
            img.splice(i,1);
            this.type[index].imgs=img;
        },
        left_right(index,type){
            var img=this.form.imgs;
            let cur=img[index];
            if(type == -1){
                //左移
                if(index>0){
                    let left= img[index-1];
                    this.$set(img,index-1,cur);
                    this.$set(img,index,left);
                }
            }else{
                //右移
                if(index<img.length-1){
                    let right= img[index+1];
                    this.$set(img,index+1,cur);
                    this.$set(img,index,right);
                }
            }
            this.form.imgs=img;
        },
        left_right1(i,index,type){
            var h_type=this.type[index],img=h_type.imgs;
            let cur=img[i];
            if(type == -1){
                //左移
                if(i>0){
                    let left= img[i-1];
                    this.$set(img,i-1,cur);
                    this.$set(img,i,left);
                }
            }else{
                //右移
                if(i<img.length-1){
                    let right= img[i+1];
                    this.$set(img,i+1,cur);
                    this.$set(img,i,right);
                }
            }
            h_type.imgs=img;
            this.$set(this.type,index,h_type)
        },
        //房型移动
        up_down(index,type){
            var h_type=this.type,cur=h_type[index];
            if(type == 1){
                //上移
                if(index>0){
                    let left= h_type[index-1];
                    this.$set(h_type,index-1,cur);
                    this.$set(h_type,index,left);
                }
            }else{
                //下移
                if(index<h_type.length-1){
                    let right= h_type[index+1];
                    this.$set(h_type,index+1,cur);
                    this.$set(h_type,index,right);
                }
            }
            this.type=h_type
        },
        save(type){
            var form=this.form;
            form.rooms=this.type;
            if(!form.name){
                this.$message({
                    message: '请输入酒店名称',
                    type: 'error'
                })
                return
            }
            if(!form.telphone){
                this.$message({
                    message: '请输入酒店电话',
                    type: 'error'
                })
                return
            }
            if(!form.address){
                this.$message({
                    message: '请输入酒店地址',
                    type: 'error'
                })
                return
            }
            if(form.imgs.length<=0){
                this.$message({
                    message: '请上传酒店图片',
                    type: 'error'
                })
                return
            }
            if(!form.longitude||!form.latitude){
                this.$message({
                    message: '请获取酒店位置',
                    type: 'error'
                })
                return
            }
            //会议添加酒店
            if(this.h_status == 'bind'){
                form.conference_id=this.huiyi_id;
                this.$api.addConferenceHotel(form).then(res=>{
                    if(res.data.code == 0){
                        this.$message({
                                    message: '添加成功',
                                    type: 'success'
                        })
                        this.form={imgs:[]};
                        this.type=[{imgs:[]}];
                        this.h_id='';
                        if(type!=1){
                                this.$emit('addSuccess')
                        }
                    }else{
                        this.$message({
                                    message: res.data.message,
                                    type: 'error'
                        })
                    }
                })
            }
            //添加酒店
            if(this.h_status == 'add'){
                this.$api.addHotel(form).then(res=>{
                    if(res.data.code == 0){
                        this.$message({
                                    message: '添加成功',
                                    type: 'success'
                        })
                        this.form={imgs:[]};
                        this.type=[{imgs:[]}];
                        this.h_id='';
                        if(type!=1){
                                this.$emit('addSuccess')
                        }
                    }else{
                        this.$message({
                                    message: res.data.message,
                                    type: 'error'
                        })
                    }
                })
            }
            if(this.h_status == 'edit'){
                this.$api.editHotel(form).then(res=>{
                    if(res.data.code == 0){
                        this.$message({
                                    message: '修改成功',
                                    type: 'success'
                        })
                        this.form={imgs:[]};
                        this.type=[{imgs:[]}];
                        this.h_id='';
                        if(type!=1){
                                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){
            //类型变化，下拉框id清空，添加时：数据清空，修改时：获取数据
            this.h_status=curVal
            this.h_id='';
            this.getList()
            if(curVal!='add' && curVal!='bind'){
                this.getData();
            }
            if(curVal=='add'){
                this.form={imgs:[]};
                this.type=[{imgs:[]}];
            }
        },
        cur_id(curVal){
            //id变化时，赋值给id
            this.id=curVal;
            this.getData();
            this.getList()
        }
    },
    created(){
        this.$api.getHotelList().then(res=>{
                this.organizerList=res.data.data.list;
        })
        this.h_status=this.status;
        this.id=this.cur_id;
        if(this.h_status!='add'&&this.h_status!='bind'){
                this.getData();
        }
    }
}
</script>