<style>
    .payBefore_vue{
        width:1200px;
        height:auto;
        margin:auto;
    }
    .payBefore_vue .head{
        padding: 4px 0;
        position: relative;
        height: 40px;
        width:100%;
    }
    .payBefore_vue .icon-jinggao{
        color: #49C0A1;
        font-size: 38px;
        position: absolute;
    }
    .payBefore_content{
        min-height: 380px;
        position: relative;
        margin-top: 15px;
        padding-bottom: 25px;
        padding-top: 16px;
        background: rgba(255, 255, 255, 1);
        -webkit-box-shadow: 0px 4px 38px 0px rgba(107, 107, 107, 0.2);
        box-shadow: 0px 4px 38px 0px rgba(107, 107, 107, 0.2);
    }
    .payBefore_content .ordernum{
        position: relative;
        width: 203px;
        height: 35px;
        line-height: 35px;
        background: #49c0a1;
        font-size: 14px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        padding-left: 16px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin-left: -7px;
        border-right-color: transparent;
    }
    .payBefore_content .triangle_border_left{
        width: 0;
        height: 0;
        border-width: 17px 17px 17px 0;
        border-style: solid;
        border-color: transparent #30a19b transparent transparent;
        position: absolute;
        right: 0;
        top: 0px;
    }
    .PayBefore_Left{
        float:left;
        margin-left:173px;
        width:435px;
        height:150px;
        margin-top:30px;
    }
    .PayBefore_Right{
        float:left;
        margin-left:26px;
        width:349px;
        height:218px;
    }
    .PayBefore_Right img{
        width:100%;
    }
    .PB_img{
        width:54px;
        height:54px;
        float:left;
    }
    .PB_img img{
        width:100%;
    }
    .PB_Detail{
        float:left;
        width:363px;
        font-size:12px;
        color:#333333;
        margin-left:10px;
    }
    .PB_Detail div:first-child{
        font-size:24px;
        font-weight: bold;
        margin-bottom:5px;
    }
    .HP_time{
        color:#EE4454;
        font-weight: bold;
    }
    .HP_zhifu{
        width:70px;
        height:30px;
        background-color: #EE4454;
        color:#fff;
        border: none;
        outline: none;
        cursor: pointer;
        border-radius: 4px;
        margin-top:43px;
    }
</style>

<template>
  <div class="payBefore_vue">
          <!-- 头部 -->
            <div class="head" style="margin-top:20px;">
                <div style="box-sizing:border-box;">
                    <div style="float:left;">
                        <i class="iconfont icon-jinggao"></i>
                        <div style="margin-left:50px">
                            <p style="font-size:14px;font-weight:600">
                            订单提交成功！                         
                            </p>
                            <p style="font-size:12px">请您在
                                <span style="color:#FF680B;">12小时</span>
                                内完成支付，否则订单会自动取消</p>
                        </div>
                    </div>
                    <div style="text-align:center;float:right"> 
                    <span style="font-weight:200;font-size:12px;margin-right:10px;">应付金额</span>
                    <span style="color:#FF680B;font-size:18px;font-weight:bold;">{{TotalPrice}}</span>
                    <span style="font-size:12px;color:#333333">元</span>
                </div>  
            </div>
          </div>
                    
          <div class="payBefore_content" style="margin-bottom:30px;">
              <div class="ordernum">
                  订单号 : {{bookingNumber}}
                  <div class="triangle_border_left"></div>
              </div>
              <div class="clearfix" style="margin-top:45px;">
                  <div class="PayBefore_Left clearfix">
                      <div class="PB_img">
                        <img src="../../assets/img/hotel/smile.png" alt=""/>
                      </div>
                      <div class="PB_Detail">
                        <div>
                            恭喜您下单成功！
                        </div>
                        <div>
                            为了保证您能够顺利下单，请您在<span class="HP_time">12小时</span>内完成付款，如果在此
                            时间内未能完成付款我们将自动取消此订单
                        </div>
                      </div>
                      <div>
                          <input v-if="isShowBtn" type="button" class="HP_zhifu" @click="gotoPay('FreePay')" value="立即支付" />
                          <!-- <input v-if="!isShowBtn" type="button" class="HP_zhifu" @click="gotoPay('HotelHome')" value="返回首页" /> -->
                      </div>
                  </div>
                  <div class="PayBefore_Right">
                      <img src="../../assets/img/hotel/paySuccess.png" alt=""/>
                  </div>
              </div>
          </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //应付总额
      TotalPrice:0,
      //订单号
      bookingNumber:0,
      msgList:'',
      isShowBtn:true,
    };
  },
  created() {
    if(sessionStorage.getItem("FreePay")){
        this.msgList = JSON.parse(sessionStorage.getItem("FreePay"));
        this.TotalPrice=this.msgList.total_fee;
        this.bookingNumber=this.msgList.orderId;
    }
    
  },
  methods: {
      gotoPay(path){
        this.$router.push({
            path:path
        })
      }
  }
};
</script>

<style>

</style>