<template>
    <div class="container pcContainer">
        <headB></headB>
        <div class="w12 status-box">
          <div class="flex-box">
            <i class="iconfont icon-chenggong icon-ok"></i>
            <div class="status-right flex">
              <h3>购买成功</h3>
              <p>支付后，我们将在2小时内为您出票！</p>
              <p class="p2">订单号：<span>{{orderNumber}}</span></p>
              <p>总金额：<span>¥{{amount}}</span></p>
              <router-link to="/orderList/all" class="default-btn">查看订单</router-link>
            </div>
          </div>
        </div>
        <footB style="margin-top: 74px"></footB>
    </div>
</template>
<script>
    export default {
        name: '',
        data () {
            return {
              orderNumber : this.$route.params.orderNumber,
              loading:false,
              amount:0
            }
        },
        methods: {
          /**获取订单信息*/
          getOrderInfo(){
            this.loading=true;
            getOrderInfoByOrderNumber({orderNumber:this.orderNumber}).then(data=>{
              if(data.returnCode==200){
                this.amount=parseFloat(data.data.orderActualPrice).toFixed(2);
                this.loading=false;
              }else {
                this.msgAlert(data.returnMsg);
              }
            });
          },
          msgAlert(msg){
            this.$alert('<strong>'+msg+'</strong>', {
              dangerouslyUseHTMLString: true,
              distinguishCancelAndClose: true,
              showClose:false,
              confirmButtonText:'查看订单',
              center:true,
              beforeClose: (action, instance, done) => {
                done();
                location.href="/orderList/all";
              }
            });
          },
        },
        mounted(){
            this.getOrderInfo();
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  @import "status.styl"
</style>
