<template>
  <div class="payment-success">
    <h1>支付成功！</h1>
    <p>感谢您的支持！</p>
    <section v-if="orderInfo">
      <h3>订单详情</h3>
      <ul>
        <li><strong>订单编号:</strong> {{ orderInfo.orderNumber }}</li>
      </ul>
    </section>
    <footer>
      <router-link to="/">返回首页</router-link>
      <router-link to="/my-orders">查看我的订单</router-link>
    </footer>
  </div>
</template>
<script>
export default {
  name: 'PaymentSuccess',
  data() {
    return {
      orderInfo: null 
    };
  },
  created() {
 
    this.getOrderDetails();
  },
  methods: {
    getOrderDetails() {
   
      setTimeout(() => {
        this.orderInfo = {
          orderNumber: 'con45714354612'
        };
      }, 1000);
    }
  }
};
</script>
<style scoped>
.payment-success {
  max-width: 600px;
  margin: auto;
  padding: 2em;
  text-align: center;
}
h1{
    color:green;
}
.payment-success h1,
.payment-success p {
  margin-bottom: 1em;
}
.payment-success footer {
  margin-top: 2em;
}
.payment-success footer a {
  display: block;
  margin: .5em 0;
}
</style>
