1

src/components/newPersonalCenter/block/model/HotelOrder.vue

@@ -67,6 +67,7 @@
               <td style="text-align:center;">
                 <el-button size="mini"type="danger" v-if="item.OrderStatus!='已取消'"  @click="goPay(item)">立即付款</el-button> 
                 <el-button style="margin: 10px 0 0 0;" v-if="item.OrderStatus!='已取消'" size="mini" @click="canCelHotel(item.ThirdOrderNo)">取消订单</el-button>
+                 <el-button style="margin: 10px 0 0 0;" size="mini" @click="goDetail(item.OrderID)">详情</el-button>
               </td>
             </tr>
           </template>
@@ -134,9 +135,18 @@ export default {
       ? JSON.parse(localStorage.userInfo)
       : "";
     this.getOrderMsg.CustomerId = userInfo.customerId;
+    // this.getOrderMsg.CustomerId = 0
     this.gerOrderList();
   },
   methods: {
+    goDetail(ID){
+      this.$router.push({
+        name: 'OpHotelOrderDetail',
+        query: {
+          ID: ID
+        }
+      })
+    },
     enter: function (t) {
       if (t+1) {
         this.activeRow = t

src/components/newPersonalCenter/block/model/OpHotelOrderDetail.vue

+<style>
+    .HotelSure{
+       width: 1200px;
+      margin: 0px auto;
+      padding: 0 20px 20px 20px;
+      display: flex;
+      background-color: white;
+    }
+    .HS_LeftInfo{
+        display: inline-block;
+        width:792px;
+        height:auto;
+    }
+    .HS_RightList{
+        width:388px;
+        display: inline-block;
+        margin-left:20px;
+        height:auto;
+    }
+    .HS_div1{
+        width:100%;
+        height:190px;
+        border:1px solid #E0E0E0;
+    }
+    .HS_divFirst{
+        margin:32px 0 21px 20px;
+    }
+    .Hs_OneType{
+        color:#2EB000;
+        font-size:18px;
+        font-weight: bold;
+        display: flex;
+        align-items: center;
+    }
+    .HS_divTwo{
+        margin:0 0 21px 20px;
+    }
+    .Hs_OneType img,.HS_divThree img{
+        margin-right:10px;
+    }
+    .HS_divThree{
+        color:#FFA835;
+        font-size:18px;
+        font-weight: bold;
+        margin-left:20px;
+        display: flex;
+        align-items: center;
+    }
+    .HS_div2{
+        width:100%;
+        border:1px solid #E0E0E0;
+        margin:20px 0;
+        overflow: hidden;
+        padding-bottom:20px;
+    }
+    .HS_bookTitle{
+        padding-left:20px;
+        width:100%;
+        background-color: #EDF4FF;
+        color:#111111;
+        font-size:12px;
+        font-weight: bold;
+        height:29px;
+        display: flex;
+        align-items: center;
+        border-bottom:1px solid #E0E0E0;
+    }
+    .HS_div2One{
+        margin:15px 0 0 20px;
+    }
+    .HS2_title{
+        color:#888888!important;
+    }
+    .HS_div2 ul li,.HS_div3 ul li{
+        display: inline-block;
+        margin-right:21px;
+        font-size:12px;
+        color:#111111;
+    }
+    .HS_div3>div:nth-child(2){
+      padding: 20px;
+    }
+    .HS_div3>div:nth-child(2)>div{
+      display: flex;
+      margin-bottom: 15px;
+    }
+    .HS_div3>div:nth-child(2)>div:last-child{ 
+      margin-bottom: 0;
+    }
+    .HS_div3One{
+        margin:15px 0 0 20px;
+        color:#333333;
+    }
+    .HS_Line{
+        width:30px;
+        height:1px;
+        display:inline-block;
+        position: relative;
+        top:-3px;
+        margin-right:10px;
+        border-top:1px solid #111111;
+    }
+    .HS_UpdateDate{
+        width:84px;
+        height:32px;
+        border:1px solid #EE4454;
+        background: #fff;
+        color:#EE4454;
+        outline: none;
+        border-radius: 3px;
+        cursor: pointer;
+    }
+    .HS_roomNum .el-input__inner{
+        height:30px;
+        border:none;
+        border-radius:0;
+        border-bottom:1px solid #DDDDDD;
+    }
+    .HS_fangfei{
+        display: inline-block;
+        width:90px;
+        height:86px;
+        border:1px solid #BBC9DA;
+        background-color: #fff;
+        font-size:14px;
+        margin-right:10px;
+        text-align: center
+    }
+    .HS_fangfei_Top{
+        width:100%;
+        height:32px;
+        margin-bottom:10px;
+        background-color: #F5F7F8;
+        line-height: 32px;
+        color:#666666;
+    }
+    .HS_fangfei span{
+        color:#EE4454;
+    }
+    .HS_div3{
+        width:792px;
+        height:auto; 
+        overflow: hidden;
+        position: relative;
+        border:1px solid #E0E0E0;
+    }
+    .HS_bookTitle span{
+        color:#FFA835;
+        font-size:12px;
+        position: absolute;
+        right:20px;
+    }
+    .HS_bookTitle span i{
+        position: relative;
+        top:1px;
+        margin-right:3px;
+    }
+    .HS_wenhao{
+        position: relative;
+        top: 2px;
+        margin-left: 5px;
+    }
+    .HS_BookMan .el-input__inner{
+        height:30px;
+        border:0;
+        border-radius: 0;
+        border-bottom:1px solid #DDDDDD;
+    }
+    .HS_AreaSelect .el-input__inner{
+        height: 30px;
+        border: none;
+        border-radius: 0;
+        border-bottom: 1px solid #DDDDDD;
+    }
+    .HS_AreaSelect .el-input__icon,.HS_roomNum .el-input__icon{
+        line-height: 0;
+    }
+    .HS_detailAddress .el-input__inner,.HS_Email .el-input__inner{
+        height:40px;
+        border:0;
+        border-radius: 0;
+        border-bottom:1px solid #DDDDDD;
+    }
+    .HS_RightTopImg{
+        width:100%;
+        height:194px;
+    }
+    .HS_RightList img{
+        width:100%;
+        height:100%;
+    }
+    .HS_HotelRight{
+        height:148px;
+        padding:17px 20px 20px 20px;
+        border:1px solid #E0E0E0;
+        border-top:0;
+        color:#666666;
+    }
+    .HS_HtName{
+        color:#EE4454;
+        font-size:21px;
+    }
+    .HS_EnName{
+        font-size:12px;
+        color:#999999;
+        margin:8px 0 19px 0;
+    }
+    .HS_HAddress{
+        font-size:12px;
+        margin:20px 0;
+    }
+    .HS_HAddress img{
+        width:10px;
+        position: relative;
+        top:2px;
+    }
+    .HS_Haohua{
+        font-size:14px;
+        margin-bottom:10px;
+    }
+    .f12{
+        font-size:12px;
+    }
+    .C9{
+        color:#999999;
+        margin-right:20px;
+    }
+    .HS_RoomInfo li{
+        display: block;
+        width:100%;
+        font-size:14px;
+        margin-top:18px;
+    }
+    .HS_RoomInfo li span{
+        display: inline-block;
+    }
+    .HS_RightBtm{
+        width:100%;
+        /* height:160px; */
+        margin-top:20px;
+        overflow: hidden;
+        border:1px solid #E0E0E0;
+    }
+    .HS_RitTop{
+        height:72px;
+        background-color: #EDF4FF;
+        display: flex;
+        padding:0 20px;
+        align-items: center;
+        position: relative;
+    }
+    .HS_RitTop_Left{
+        color:#111111;
+        float:left;
+        font-size:20px;
+        font-weight: 400;
+    }
+    .HS_RitPrice{
+        float:right;
+        font-size:24px;
+        color:#EE4454;
+        font-size:24px;
+        position: absolute;
+        right:20px
+    }
+    .HS_RitPrice i{
+        font-style: normal;
+        margin-right:5px;
+        font-size:14px;
+    }
+    .HS_RitBottom{
+        padding:20px;
+        font-size:14px;
+        color:#111111;
+    }
+    .HS_RitBottom span{
+        display:inline-block;
+    }
+    .HS_btLine{
+        width:245px;
+        height:1px;
+        margin:0 10px;
+        position: relative;
+        top:-3px;
+        border-top:1px dashed #999999;
+    }
+    .HS_btLineTwo{
+        width:204px;
+        height:1px;
+        margin:0 10px;
+        position: relative;
+        top:-3px;
+        border-top:1px dashed #999999;
+    }
+    .HS_RitBottom>div{
+        margin-bottom:15px;
+    }
+    .HD_payBtn{
+        width:100%;
+        height:66px;
+        background-color: #EE4454;
+        color:#fff;
+        outline: none;
+        border:none;
+        cursor: pointer;
+        margin-top:30px;
+        font-size:18px;
+        border-radius: 4px;
+    }
+    .HD_payBtn:hover{
+        opacity: 0.8;
+    }
+    .HS_BookMan .el-input__icon{
+        line-height: 0;
+    }
+    .HS_FFEI:last-child{
+        visibility: hidden;
+    }
+    .cantBaoChild{
+        color:red;
+    }
+    .disBtn{
+        background-color: gray;
+        cursor: default;
+    }
+    .disBtn:hover{
+        opacity: 1;
+    }
+</style>
+
+
+<template>
+    <div class="HotelSure" v-loading="loading">
+        <div class="HS_LeftInfo">
+            <div class="HS_div2">
+                <div class="HS_bookTitle">预订信息</div>
+                <div class="HS_div3One">
+                    <ul>
+                        <li class="HS2_title">订单号</li>
+                        <li>{{details.model.ThirdOrderNo}}</li>
+                    </ul>
+                </div>
+                <div class="HS_div2One">
+                    <ul>
+                        <li class="HS2_title">房型信息</li>
+                        <li>
+                            <div>
+                                <template v-if="details.parmResult.roomType==1">单人</template>
+                                <template v-if="details.parmResult.roomType==2">双人</template>
+                                <template v-if="details.parmResult.roomType==3">双</template>
+                                <template v-if="details.parmResult.roomType==4">三人间</template>
+                                <template v-if="details.parmResult.roomType==5">4床</template>
+                                <template v-if="details.parmResult.roomType==6">日式房间</template>
+                                <template v-if="details.parmResult.roomType==7">和洋室</template>
+                                <template v-if="details.parmResult.roomType==8">半开房</template>
+                                <template v-if="details.parmResult.roomType==9">其他的</template>
+                            </div>
+                        </li>
+                    </ul>
+                </div> 
+                <div class="HS_div2One">
+                    <ul>
+                        <li class="HS2_title">入住日期</li>
+                        <li>
+                            <span>{{details.model.CheckIn.split('T')[0]}}</span>
+                            <div class="HS_Line"></div>
+                            <span>{{details.model.CheckOut.split('T')[0]}}</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="HS_div2One HS_roomNum">
+                    <ul>
+                        <li class="HS2_title">房间数量</li>
+                        <li>
+                            {{details.model.Number}}
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="HS_div3">
+                <div class="HS_bookTitle" >
+                    入住信息<span></span>
+                </div>
+                <div>
+                  <div>
+                    <label class="HS2_title">预订人：</label>
+                    <div>{{details.parmResult.guestLastName + details.parmResult.guestFirstName}}</div>
+                  </div>
+                  <div>
+                    <label class="HS2_title">当前地址：</label>
+                    <div>{{details.parmResultRoomInfo.guestAddress}}</div>
+                  </div>
+                  <div>
+                    <label class="HS2_title">Email：</label>
+                    <div>{{details.parmResultRoomInfo.guestEmail}}</div>
+                  </div>
+                  <div>
+                    <label class="HS2_title">电话：</label>
+                    <div>{{details.parmResultRoomInfo.guestPhoneNumber}}</div>
+                  </div>
+                  <div>
+                    <label class="HS2_title">客户备注：</label>
+                    <div>{{details.model.Remark}}</div>
+                  </div>
+                </div>
+            </div> 
+        </div>
+        <div class="HS_RightList">
+          <div class="HS_RightBtm">
+                <div class="HS_RitTop">
+                    <span class="HS_RitTop_Left">订单总额</span>
+                    <span class="HS_RitPrice">
+                        <i>¥</i>{{details.model.TotalPrice}}
+                    </span>
+                </div>
+            </div>
+            <div class="HS_RightTopImg">
+                <template v-if="details">
+                    <img :src="details.model.HotelPic" alt=""/>
+                </template>
+            </div>
+            <div class="HS_HotelRight">
+                <div class="HS_HtName">{{details.model.HotelName}}</div>
+                <div class="HS_HAddress">
+                    <img src="../../../../assets/img/hotel/redAddress.png" alt=""/>
+                    {{details.parmResult.address}}
+                </div>
+            </div>
+            
+        </div>
+    </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      details: {
+        model:{
+          ThirdOrderNo: ''
+        }
+      },
+      loading: true
+    };
+  },
+  mounted() {
+  },
+  created() {
+    let id = this.$route.query.ID
+    this.loading = true;
+    this.apipost(
+    "dmc_post_Get_GetJAPAN_OrderDetail",
+    {orderId: id},
+    res => {
+      this.loading = false;
+      if (res.data.resultCode == 1) {
+        let data = res.data.data
+        this.details = data
+      } else {
+          this.Error(res.data.message);
+      }
+    })
+  },
+  methods: {
+    
+  }
+};
+</script>

src/router.js

@@ -516,6 +516,15 @@ export default new Router({
             title: "个人中心"
           }
         },
+        {
+          path: "/OpHotelOrderDetail",
+          name: "OpHotelOrderDetail",
+          component: resolve =>
+            require(["@/components/newPersonalCenter/block/model/OpHotelOrderDetail"], resolve),
+          meta: {
+            title: "酒店订单详情"
+          }
+        },
         {
           path: "/IndependentTravel",
           name: "IndependentTravel",