<style>
    .OrderCompleted{
        background-color: #f5f5f5;
        padding-bottom: 20px;
    }
    .OrderCompleted .OC_top{
        width:1090px;
        height:auto;
        font-size:12px;
        margin: auto;
        padding:30px 0;
        position: relative;
    }
    .OrderCompleted .OC_TopLeft{
        width:60px;
        display: inline-block;
        text-align: center;
    }
    .OrderCompleted .O_radius{
        width:26px;
        height:26px;
        background-color: #EE4454;
        border-radius: 50%;
        color:#fff;
        text-align: center;
        line-height: 26px;
        margin:9px auto;
    }
    .OrderCompleted .OC_Line{
        width:1004px;
        height:3px;
        background-color: #EE4454;
        display: inline-block;
        position: relative;
        top:-33px;
        left:-17px;
    }
    .OrderCompleted .OC_TopRight{
        width:60px;
        position: absolute;
        right:0;
        top:30px;
        text-align: center;
    }
    .OrderCompleted .OC_content{
        width:100%;
        height:400px;
        border:1px solid #ECECEC;
        background-color: #fff;
    }
    .OrderCompleted .OC_ConLeft{
        display:inline-block;
        margin:62px 0 0 200px;
        width:378px;
    }
    .OrderCompleted .OC_ConTop img{
        float:left;
    }
    .OrderCompleted .OC_riContent{
        float:left;
        margin-left:20px;
    }
    .OrderCompleted .OC_paySuccsss{
        font-size:24px;
        font-weight: bold;
        color:#333333;
    }
    .OrderCompleted .Order_more{
        color: #EE4454;
        text-decoration: underline;
        cursor: pointer;
    }
    .OrderCompleted .OC_dianhua{
        font-size:12px;
        margin-top:10px;
    }
    .OrderCompleted .OC_btmList{
        width:380px;
        margin-top:63px;
        font-size:12px;
        color:#333333;
    }
    .OrderCompleted .OC_btmList>div{
        width:100%;
        height:40px;
        line-height: 40px;
        border-bottom:1px solid #DDDDDD;
    }
    .OrderCompleted .OC_jishu{
        width:50%;
    }
    .OrderCompleted .OC_jifen{
        display: inline-block;
    }
    .OrderCompleted .OC_backBtn{
        width: 87px;
        height: 28px;
        color: #fff;
        outline: none;
        border: none;
        margin-top:45px;
        background-color: #EE4454;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;
    }
    .OrderCompleted .OC_rightImg{
        display:inline-block;
        width:354px;
        height:289px;
        margin-left:70px;
    }
    .OrderCompleted .OC_rightImg img{
        width:100%;
    }
</style>
<template>
<!-- 积分明细 -->
  <div class="OrderCompleted">
      <div class="w1200">
          <div class="OC_top">
              <div class="OC_TopLeft">
                  <div class="O_radius">1</div>
                  确认订单
              </div>
              <div class="OC_Line"></div>
              <div class="OC_TopRight">
                  <div class="O_radius">2</div>
                  订单完成
              </div>
          </div>
          <div class="OC_content">
              <div class="OC_ConLeft">
                  <div class="OC_ConTop clearfix">
                    <img src="../../assets/img/ticket/icons8-tick-box-96.png" alt=""/>
                    <div class="OC_riContent">
                        <div class="OC_paySuccsss">支付成功！</div>
                        <div class="OC_dianhua">如有任何疑问可致电028-56540254，点击 <span class="Order_more" @click="goUrl('myPointOrder')">查看订单>></span></div>
                    </div>
                  </div>
                  <div class="OC_btmList">
                      <div>
                          <div class="OC_jifen OC_jishu">
                              支付积分：￥{{pay}}
                          </div>
                          <div class="OC_jifen">
                              剩余积分：￥{{residue}}
                          </div>
                      </div>
                      <div>
                          <div class="OC_jifen OC_jishu">
                              订单编号：{{orderNum}}
                          </div>
                          <div class="OC_jifen">
                              下单时间：{{createTime | YMDHMS}}
                          </div>
                      </div>
                  </div>
                  <input type="button" value="返回积分商城" @click="goUrl('IntegralMall')" class="OC_backBtn"/>
              </div>
              <div class="OC_rightImg">
                  <img src="../../assets/img/ticket/back.png" alt=""/>
              </div>
          </div>
      </div>
  </div>
</template>
<script>
export default {
  components: {
    
  },
  props:{},
  data(){
    return{
        createTime:'',
        orderNum:'',
        pay:'',
        residue:''
    }
  },methods: {
    goUrl: function (path) {
      this.$router.push({name: path});
    }
  },mounted() {
    this.createTime = this.$route.query.createTime;
    this.orderNum = this.$route.query.orderNum;
    this.pay = this.$route.query.pay;
    this.residue = this.$route.query.residue;
  }
}
</script>
