合并代码

src/components/Hotel/HotelProductManage2.vue

@@ -38,7 +38,7 @@
     </div>
     <div class="hotelProductManage2_calendar">
       <div class="hotelProductManage2_calendarItem" v-for="(item, index) in days" :key="index">
-        <div class="calendarItem_month" @click="calendarShow(item, index)">{{item.date}}</div>
+        <div class="calendarItem_month" title="点击查看详情" @click="calendarShow(item, index)">{{item.date}}</div>
         <div class="hotelproductCkbox">
           <el-checkbox v-model="item.isCked" @change="changeHotelStatus(item,index)">全选</el-checkbox>
         </div>
@@ -52,13 +52,28 @@
           <div>周日</div>
         </div>
         <div class="calendarItem_day">
-            <div  v-for="(subItem, index2) in item.days" :key="index2" :class="subItem.month===item.date?'nowMonth':'otherMonth'">
+          <div v-for="(subItem, index2) in item.days" :key="index2"
+            :class="subItem.month===item.date?'nowMonth':'otherMonth'">
             <div :class="stockColor(item,subItem)"
               :style="subItem.month===item.date&&msg2.DateList.indexOf(subItem.day)!==-1?'border-color: green':''"
               @click="calendarDayOn(item, subItem)">
               {{subItem.date.getDate()}}<br />
+
+              <div class="detailInfo" v-if="subItem.data&&subItem.data.SubList && subItem.data.SubList[0]">
+                <div class="triangle_border_up"></div>
+                <div class="popContent">
+                  <template v-if="subItem.data&&subItem.data.SubList && subItem.data.SubList[0]">
+                    <template v-for="(childItem,childIndex) in subItem.data.SubList">
+                      <div class="popList">
+                        <label>批次：{{childItem.BatchNumber}}</label>
+                        <label>价格：{{childItem.CostPrice}}</label>
+                      </div>
+                    </template>
+                  </template>
+                </div>
+              </div>
               <template v-if="subItem.data&&subItem.data.SubList && subItem.data.SubList[0]">
-                   <template v-for="(childItem,childIndex) in subItem.data.SubList" >
+                <template v-for="(childItem,childIndex) in subItem.data.SubList">
                   <span v-if="childItem.BatchNumber>1"> {{childItem.BatchNumber}} </span>
                 </template>
               </template>
@@ -118,7 +133,8 @@
           </el-col>
           <el-col :span="6">
             <el-form-item label="标准间成本价">
-              <el-input-number v-model="msg2.CostPrice" :precision="2" :min="0"  @keyup.native="checkPrice(msg2,'CostPrice')" maxlength="10"></el-input-number>
+              <el-input-number v-model="msg2.CostPrice" :precision="2" :min="0"
+                @keyup.native="checkPrice(msg2,'CostPrice')" maxlength="10"></el-input-number>
             </el-form-item>
           </el-col>
 
@@ -764,7 +780,7 @@
     },
     methods: {
       //库存类型
-      stockColor: function (item, item2,childItem) {
+      stockColor: function (item, item2, childItem) {
         if (item.date === item2.month && item2.hasOwnProperty('data')) {
           let type = item2.data.SubList[0].InventoryType;
           if (type === 1) {
@@ -860,11 +876,11 @@
         this.calendar.show = true;
       },
       // 获取详情
-      getDetail: function (date,BatchNumber) {
+      getDetail: function (date, BatchNumber) {
         this.apipost('dict_post_HotelOffer_GetHotelPriceInfo', {
           HotelId: this.msg.Hotel,
           Time: date,
-          BatchNumber:BatchNumber
+          BatchNumber: BatchNumber
         }, res => {
           if (res.data.resultCode === 1) {
             let data = res.data.data;
@@ -937,12 +953,12 @@
         }, err => {});
       },
       // 打开编辑窗口
-      goEdit: function (type, date,BatchNumber) {
+      goEdit: function (type, date, BatchNumber) {
         let nowDate = new Date().Format('yyyy-MM-dd');
         this.msg.StartDate = date === undefined ? nowDate : date;
         this.msg.EndDate = date === undefined ? nowDate : date;
         if (type === '2' && date) {
-          this.getDetail(date,BatchNumber);
+          this.getDetail(date, BatchNumber);
         }
         this.editShow = true;
       },
@@ -1163,6 +1179,7 @@
     display: inline-block;
     margin: 0 5px;
     width: 24%;
+    /* width:438px; */
     background-color: #fff;
     border: 1px solid #d1d1d1;
     border-radius: 4px;
@@ -1182,6 +1199,7 @@
     text-align: center;
     font-size: 14px;
     cursor: pointer;
+    text-decoration: underline;
   }
 
   .hotelProductManage2_calendarItem>.calendarItem_week {
@@ -1206,13 +1224,14 @@
     display: flex;
     justify-content: space-around;
     flex-wrap: wrap;
-    padding-bottom:20px;
+    padding-bottom: 20px;
   }
 
   .hotelProductManage2_calendarItem>.calendarItem_day>div {
     display: inline-block;
     padding: 15px 0;
     width: 14.2%;
+    position: relative;
   }
 
   .hotelProductManage2_calendarItem>.calendarItem_day>div>div {
@@ -1500,5 +1519,51 @@
     color: #606266;
     font-size: 14px;
   }
-
+  .popList{
+    font-size: 12px;
+    line-height: 15px;
+    text-align: left;
+  }
+  .hotelProductManage2_calendarItem>.calendarItem_day>.nowMonth:hover .detailInfo{
+    display:block;
+  }
+  .hotelProductManage2 .detailInfo {
+    display: none;
+    position: absolute;
+    left: -52px;
+    top: 50px;
+    z-index: 999;
+  }
+
+  .hotelProductManage2 .triangle_border_up {
+    width: 0;
+    height: 0;
+    border-width: 0 86px 30px;
+    border-style: solid;
+    opacity: 0.75;
+    border-color: transparent transparent rgba(233, 82, 82, 1); /*透明 透明  灰*/
+  }
+  .hotelProductManage2 .detailInfo .popContent{
+    width: 170px;
+    height: 80px;
+    background-color: #e95252;
+    text-align: left;
+    color: #fff;
+    font-size: 12px;
+    margin-top:-2px;
+    overflow: auto;
+    padding-bottom:10px;
+  }
+  .hotelProductManage2 .popList label:first-child{
+    display: inline-block;
+    width: 40%;
+    margin: 10px 0 0 10px;
+    text-align: left;
+  }
+  .hotelProductManage2 .popList label:last-child {
+    display: inline-block;
+    width: 40%;
+    margin: 10px 10px 0 0;
+    text-align: right;
+}
 </style>