新增组件

src/components/commonPage/comCheckHotel.vue

+<style>
+    .comCheckHotel{
+        padding-bottom:20px;
+        border-bottom:1px solid #d1d1d1;
+    }
+    .comCheckHotel>div{
+        float:left;
+        width:120px;
+        border-right:1px solid #d1d1d1;
+        height:200px;
+        overflow: auto
+    }
+    .comCheckHotel>div:last-child{
+        width:230px;
+        border:none;
+    }
+    .comCk_list{
+        cursor: pointer;
+        padding:0 20px;
+        margin:0 15px 5px 0;
+    }
+    .cm_Inventory{
+        margin-left:20px;
+        color:red;
+        display: inline-block;
+    }
+    .cm_hotelTitle{
+        width:100%;
+        text-align: center;
+        margin-bottom:20px;
+        border-bottom: 1px solid #d1d1d1;
+        padding:0 20px 10px 20px;
+    }
+    .com_SaveBtn{
+        margin:10px 20px 0 45%;
+    }
+    .ckedList{
+        background-color: #E95252;
+        color:#fff;
+    }
+</style>
+
+<template>
+    <div>
+        <div class="cm_hotelTitle">酒店信息</div>
+        <div class="clearfix comCheckHotel">
+            <div>
+                <div class="comCk_list" v-for="(item,index) in dataList" :class="{'ckedList':ckindexOne==index}" @click="getCityList(item),ckindexOne=index">
+                    {{item.ProvinceName}}
+                </div>
+            </div>
+            <div>
+                <div class="comCk_list" v-for="(item,index) in cityList" :class="{'ckedList':ckindexTwo==index}" @click="getHotelList(item),ckindexTwo=index">
+                    {{item.CityName}}
+                </div>
+            </div>
+            <div>
+                <div class="comCk_list" v-for="item in HotelList">
+                    <input type="checkbox" v-model="item.isChecked" @click="getCheck(item)" style=""/>
+                    {{item.Name}}<span class="cm_Inventory">{{item.Inventory}}</span>
+                </div>
+            </div>
+        </div>
+        <input type="button" class="normalBtn com_SaveBtn" @click="sendCkedHotel()" value="保存"/>
+    </div>
+</template>
+<script>
+export default {
+//   props:["sDate"],
+  data() {
+    return {
+        dataList:[],
+        cityList:[],
+        HotelList:[],
+        ckindexOne:-1,
+        ckindexTwo:-1,  
+        ID:0,
+        HotelName:''      
+    };
+  },
+  methods: {
+      getCheckHotel(sDate){
+        this.$forceUpdate();
+        this.apipost('hotel_post_GetHasStockHotelList_V2', {
+          //1-只查询有库存的酒店
+          IsMoreThanZero: 0,
+          Country: "651",
+          IsAllHotel: 1,
+          sDate: sDate
+        }, res => {
+          if (res.data.resultCode == 1) {
+              this.dataList = res.data.data;
+              this.dataList.forEach(x=>{
+                  x.cityList.forEach(y=>{
+                      y.HotelList.forEach(z=>{
+                          z.isChecked=false;
+                      })
+                  })
+              })
+              console.log(this.dataList,'子组件');
+          } else {
+              this.Error(res.data.message)
+          }
+        }, err => {})
+      },
+      getCityList(item){
+          this.cityList = item.cityList;
+          this.HotelList = [];
+      },
+      getHotelList(item){
+          this.HotelList = item.HotelList;
+      },
+      getCheck(item){
+          this.HotelList.forEach(x=>{
+                x.isChecked = false;
+          })
+          item.isChecked = !item.isChecked;
+          this.$forceUpdate();
+      },
+      //向父组件传递选中酒店
+      sendCkedHotel(){
+          console.log(this.dataList,'重选');
+        this.dataList.forEach(x=>{
+            x.cityList.forEach(y=>{
+                y.HotelList.forEach(z=>{
+                    if(z.isChecked){
+                        this.ID = z.ID;
+                        this.HotelName = z.Name;
+                    }
+                })
+            })
+        })
+        this.$emit("childHotel", this.ID,this.HotelName);
+      }
+  },
+  mounted(){
+
+  }
+};
+</script>