Tue Mar 11 16:25:00 CST 2025 inscode

src/App.vue

 <script setup>
 import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
+// import TheWelcome from './components/TheWelcome.vue'
+
 </script>
 
 <template>
   <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+    <!-- <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" /> -->
 
     <div class="wrapper">
       <HelloWorld msg="You did it!" />

src/components/HelloWorld.vue

-<script setup>
-defineProps({
-  msg: {
-    type: String,
-    required: true
-  }
-})
-</script>
-
 <template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a target="_blank" href="https://vitejs.dev/">Vite</a> +
-      <a target="_blank" href="https://vuejs.org/">Vue 3</a>.
-    </h3>
+  <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: '20230425123456789'
+        };
+      }, 1000);
+    }
+  }
+};
+</script>
 <style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  top: -10px;
+.payment-success {
+  max-width: 600px;
+  margin: auto;
+  padding: 2em;
+  text-align: center;
 }
-
-h3 {
-  font-size: 1.2rem;
+.payment-success h1,
+.payment-success p {
+  margin-bottom: 1em;
 }
-
-.greetings h1,
-.greetings h3 {
-  text-align: center;
+.payment-success footer {
+  margin-top: 2em;
 }
-
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
+.payment-success footer a {
+  display: block;
+  margin: .5em 0;
 }
 </style>