手把手教你用Vue.js打造简洁的订单详情页面！” “新手友好！用Vue.js和CSS实现订单页面，附完整代码” “快速上手Vue.js：创建一个实用的订单详情页面” “前端新手指南：用Vue.js搭-CSDN博客

本文链接：https://blog.csdn.net/qq_22182989/article/details/142754424

效果图

在这里插入图片描述

一、新建一个 HTML 项目

首先，我们需要创建一个新的 HTML 文件，并命名为 order-details.html。你可以使用任意代码编辑器来完成此操作，比如 VSCode、Sublime Text 或 Notepad++。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>订单详情页面</title>
</head>
<body>

</body>
</html>

二、创建基本结构

在 HTML 文件中，我们将使用 Vue.js 和基本的 HTML 结构来展示订单信息。在 <body> 标签内，添加一个 Vue 实例的容器 <div id="app">。所有的内容和交互元素都将放在这个容器中。

<div id="app">
  <h2>订单详情</h2>
  <div class="container">
    <h2>待支付</h2>
    <p>订单已提交，请尽快完成支付。</p>
    
    <!-- 订单信息 -->
    <div class="order-info">
      <div>
        <p>18:07</p>
        <p>太原南</p>
        <p>G624</p>
      </div>
      <div>
        <p>19:30</p>
        <p>石家庄</p>
        <p>二等座 ￥68</p>
      </div>
    </div>
  </div>
</div>

三、使用 CSS 美化页面

接下来，我们将使用 CSS 美化页面，确保布局、颜色和字体样式与设计稿相符。我们将定义 .container、.order-info 等样式类，并设置字体、背景颜色等。

<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    margin: 0;
  }
  #app {
    background-color: #007AFF;
    color: white;
    padding: 20px;
    min-height: 100vh;
  }
  .container {
    background-color: #ffffff;
    border-radius: 10px;
    color: #333;
    padding: 20px;
    margin-top: 20px;
  }
  .order-info {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    margin-top: 10px;
  }
</style>

四、添加交互功能

在 Vue.js 中添加交互功能非常简单。我们将初始化一个 Vue 实例，并在 data 中定义订单信息。通过绑定数据实现内容的动态显示，并通过按钮实现简单的支付操作。

<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      orders: [
        { time: '18:07', from: '太原南', to: '石家庄', price: 68, train: 'G624' },
        { time: '19:55', from: '石家庄', to: '北京西', price: 128.5, train: 'G4038' }
      ],
      totalPayment: 216.5
    }
  })
</script>

五、完整代码

将所有的 HTML、CSS 和 JavaScript 代码整合在一起，你将得到如下完整的代码。它包含了结构、样式和交互逻辑的实现。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue 测试实例 - 订单详情</title>
  <script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      margin: 0;
    }
    #app {
      background-color: #007AFF;
      color: white;
      padding: 20px;
      min-height: 100vh;
    }
    .container {
      background-color: #ffffff;
      border-radius: 10px;
      color: #333;
      padding: 20px;
      margin-top: 20px;
    }
    .order-info {
      display: flex;
      justify-content: space-between;
      font-size: 18px;
      margin-top: 10px;
    }
    .payment-info {
      color: #FF3B30;
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      margin: 20px 0;
    }
    .pay-btn {
      background-color: #007AFF;
      color: white;
      border: none;
      border-radius: 25px;
      font-size: 18px;
      padding: 10px;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="app">
    <h2>订单详情</h2>
    <div class="container">
      <h2>待支付</h2>
      <p>订单已提交，请尽快完成支付。</p>
      
      <div class="order-info" v-for="order in orders" :key="order.train">
        <div>
          <p>{{ order.time }}</p>
          <p>{{ order.from }}</p>
          <p>{{ order.train }}</p>
        </div>
        <div>
          <p>{{ order.to }}</p>
          <p>二等座 ￥{{ order.price }}</p>
        </div>
      </div>

      <div class="payment-info">
        ￥{{ totalPayment }}
      </div>

      <button class="pay-btn">去支付</button>
    </div>
  </div>
  
  <script>
    new Vue({
      el: '#app',
      data: {
        orders: [
          { time: '18:07', from: '太原南', to: '石家庄', price: 68, train: 'G624' },
          { time: '19:55', from: '石家庄', to: '北京西', price: 128.5, train: 'G4038' }
        ],
        totalPayment: 216.5
      }
    })
  </script>
</body>
</html>