修改页面 增加支付

src/components/Hotel/HotelHome.vue

@@ -152,21 +152,21 @@
         </div>
           <div class="banner_img" style="margin:0 auto;margin-top:30px;">
               <div class="Ht_dangji">
-                <div class="item">
+                <div class="item" @click="goSearchDetail('大阪府')">
                   <img src="../../assets/img/hotel/daban.png" alt=""/>
                   <div class="line"></div>
                   <div class="Ht_diming">
                       大阪
                   </div>
                 </div>
-                <div class="item">
+                <div class="item" @click="goSearchDetail('东京都')">
                   <img src="../../assets/img/hotel/dongjing.png" alt=""/>
                   <div class="line"></div>
                   <div class="Ht_diming">
                       东京
                   </div>
                 </div>
-                <div class="item">
+                <div class="item" @click="goSearchDetail('京都府')">
                   <img src="../../assets/img/hotel/jingdu.png" alt=""/>
                   <div class="line"></div>
                   <div class="Ht_diming">
@@ -215,33 +215,33 @@
           </div>
           <div class="Ht_hotArea">
             <div class="Ht_hoAreaOne">
-                <img src="../../assets/img/hotel/mgw.png" alt=""/>
+                <img src="../../assets/img/hotel/mgw.png" @click="goSearchDetail('名古屋')" alt=""/>
                 <div>名古屋</div>
             </div>
             <div class="Ht_otherCommon">
-                <img src="../../assets/img/hotel/biefu.png" alt=""/>
+                <img src="../../assets/img/hotel/biefu.png" @click="goSearchDetail('大分县')" alt=""/>
                 <div>别府</div>
             </div>
             <div class="Ht_otherCommon">
-                <img src="../../assets/img/hotel/dongye.png" alt=""/>
+                <img src="../../assets/img/hotel/dongye.png" @click="goSearchDetail('北海道')" alt=""/>
                 <div>洞爷.登别.苫小牧</div>
             </div>
           </div>
           <div class="Ht_hotArea" style="margin-top:3px;">
             <div class="Ht_otherCommon" style="margin-left:0;">
-                <img src="../../assets/img/hotel/shangye.png" alt=""/>
+                <img src="../../assets/img/hotel/shangye.png" @click="goSearchDetail('东京都')" alt=""/>
                 <div>上野.浅草两国</div>
             </div>
             <div class="Ht_otherCommon">
-                <img src="../../assets/img/hotel/shenhu.png" alt=""/>
-                <div>神户.有马.明石头</div>
+                <img src="../../assets/img/hotel/shenhu.png" @click="goSearchDetail('兵库县')" alt=""/>
+                <div>神户.有马.明石</div>
             </div>
             <div class="Ht_otherCommon">
-                <img src="../../assets/img/hotel/xianggen.png" alt=""/>
+                <img src="../../assets/img/hotel/xianggen.png" @click="goSearchDetail('神奈川县')" alt=""/>
                 <div>箱根</div>
             </div>
             <div class="Ht_otherCommon">
-                <img src="../../assets/img/hotel/zhoubian.png" alt=""/>
+                <img src="../../assets/img/hotel/zhoubian.png" @click="goSearchDetail('京都府')" alt=""/>
                 <div>京都站周边</div>
             </div>
           </div>
@@ -324,7 +324,7 @@ export default {
       isShowPop:false,
       pickerOptions0: {
         disabledDate(time) {
-          let today_after7=moment().add(0,'days').format('YYYY-MM-DD');
+          let today_after7=moment().add(8,'days').format('YYYY-MM-DD');
           return time.getTime() < new Date(today_after7).getTime() - 8.64e7;
         }
       },
@@ -340,12 +340,43 @@ export default {
   methods: {
     //查询
     Search() {
-      console.log(this.msg,'msgggg');
+      if(this.msg.place==''){
+        this.Error('请选择目的地');
+        return;
+      }
+      if(this.msg.StartDate==''){
+        this.Error('请选择入住时间');
+        return;
+      }
+      if(this.msg.EndDate==''){
+        this.Error('请选择退房时间');
+        return;
+      }
       this.$router.push({
         path:"/HotelList",
         query:{msg:JSON.stringify(this.msg)}
       })
     },
+    //首页点击跳转
+    goSearchDetail(keywords){
+      let msg = {
+        place:keywords,
+        StartDate:moment().format("YYYY-MM-DD"),
+        EndDate:moment().add(1,'days').format('YYYY-MM-DD'),
+        roomList:[
+          {
+            roomNum:1,
+            numberOfAdults:1,
+            numberOfChildren:0,
+            childAges:0
+          }
+        ],
+      }
+      this.$router.push({
+        path:"/HotelList",
+        query:{msg:JSON.stringify(msg)}
+      })
+    },
     //房间数改变
     getRoomList(roomNum){
       this.isShowPop=true;
@@ -589,6 +620,9 @@ export default {
   width:1200px;
   margin:auto;
 }
+.Ht_hotArea>div{
+  cursor: pointer;
+}
 .Ht_special>div{
   width:240px;
   height:260px;

src/components/Hotel/HotelList.vue

@@ -96,10 +96,10 @@
     }
     .HL_ScList{
         width:100%;
-        height:43px;
+        height:40px;
         display: flex;
         align-items: center;
-        border-bottom:1px solid #DDDDDD;
+        /* border-bottom:1px solid #DDDDDD; */
         position: relative;
     }
     .HL_ScList:last-child{
@@ -107,7 +107,7 @@
     }
     .HL_Screen .HL_ScList span{
         display:inline-block;
-        margin-right:60px;
+        margin-right:20px;
         cursor: pointer;
         padding:4px 8px;
         
@@ -176,7 +176,8 @@
     .clearfix:after {content: "\0020";display: block;height: 0;clear: both;}
     .HL_ListTable{
         float:left;
-        width:840px;
+        /* width:840px; */
+        width:100%;
         border-collapse:collapse;
     }
     .HL_ListTable td{
@@ -205,7 +206,8 @@
         float:left;
         position: relative;
         margin-left:13px;
-        width:605px;
+        /* width:605px; */
+        width:900px;
         height:148px;
     }
     .HL_ListTitle{
@@ -328,7 +330,7 @@
         cursor: pointer;
         color:blue;
         position: absolute;
-        right:55px;
+        right:10px;
         top:14px;
     }
     .HotelList .pagination {
@@ -355,7 +357,10 @@
         color:rgb(239, 242, 247);
     }
     .HL_Maxheight{
-        height:150px!important;
+        height:114px!important;
+    }
+    .HL_Two .icon-img-rili{
+        margin-left:0!important;
     }
 </style>
 
@@ -420,6 +425,7 @@
                         size="small"
                         value-format="yyyy-MM-dd"
                         v-model="msg.arrivalDate"
+                        :picker-options="pickerOptions0"
                         type="date" 
                         placeholder="入住日">
                     </el-date-picker>
@@ -428,6 +434,7 @@
                         size="small"
                         value-format="yyyy-MM-dd"
                         v-model="msg.departureDate"
+                        :picker-options="pickerOptions0"
                         type="date" 
                         placeholder="离店日">
                     </el-date-picker>
@@ -590,7 +597,8 @@
                 <i class="iconfont icon-jiantou-copy"></i> -->
             </div>
             <div class="clearfix" v-loading="loading">
-                <div style="width:838px;float:left;min-height:380px;">
+                <!-- <div style="width:838px;float:left;min-height:380px;"> -->
+                    <div style="width:100%;float:left;min-height:380px;">
                     <table class="HL_ListTable">
                         <tr v-for="item in dataList">
                             <td>
@@ -642,20 +650,22 @@
                         </div>
                     </div>
                 </div>
-                <div class="HL_Map">
+                <div class="HL_Map" style="display:none;">
 
                 </div>
             </div>
         </div>
         <el-pagination v-if="dataList.length>0" class="pagination"
             @current-change="CurrentChange"
+            :current-page.sync="msg.displayFrom"              
             background
-            layout="prev, pager, next"
+            layout="total, prev, pager, next"
             :total="TotalPage">
         </el-pagination>
     </div>
 </template>
 <script>
+import moment from "moment";
 export default {
   data() {
     return {
@@ -892,13 +902,18 @@ export default {
           departureDate:'',
           searchroomGroup:[],
           lowrateBySetCurrency:''
-      }
+      },
+      pickerOptions0: {
+        disabledDate(time) {
+          let today_after7=moment().add(8,'days').format('YYYY-MM-DD');
+          return time.getTime() < new Date(today_after7).getTime() - 8.64e7;
+        }
+      },
     };
   },
   mounted() {
       let msgList = JSON.parse(this.$route.query.msg);
       this.placeKeyWords = msgList.place;
-      console.log(msgList,'msgList');
       this.msg.arrivalDate = msgList.StartDate;
       this.msg.departureDate = msgList.EndDate;
       this.auditNum = msgList.auditNum;
@@ -1011,13 +1026,11 @@ export default {
                 this.msg.searchMealType.push(x.Id);
             }
         })
-        console.log(this.msg,'msg');
         this.loading=true;
         this.dataList = [];
         this.apipost("dmc_post_Get_GetJAPAN_HotelList",this.msg,res => {
             this.loading=false;
             if (res.data.resultCode == 1) {
-                console.log(res,'resssss');
                 this.dataList = res.data.data.hotelSummary;
                 this.dataList.forEach(x=>{
                     x.reviewRating = parseFloat(x.reviewRating);

src/router.js

@@ -412,6 +412,15 @@ export default new Router({
             title: "酒店确认订单"
           }
         },
+        {
+          path: "/HotelPay",
+          name: "HotelPay",
+          component: resolve =>
+          require(["@/components/Hotel/HotelPay"], resolve),
+          meta: {
+            title: "酒店支付"
+          }
+        },
         // {
         //   path: "/ticket/Pay/:id",
         //   name: "Pay",