实战！使用 Vue2 完全还原电商购物订单界面（完整代码+图文详解）前端新手必看！Vue2 实现购物车与订单管理的完整项目教程Vue2+HTML+CSS 实战项目：一步步打造高仿电商订单页面（超详

最新推荐文章于 2024-10-01 17:17:19 发布

南北极之间

最新推荐文章于 2024-10-01 17:17:19 发布

阅读量784

点赞数 4

文章标签：前端 css javascript vue.js html5 css3 电商购物订单界面

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

版权

b站视频演示效果：

效果图：

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>订单详情 - Vue2 实现</title>
  <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
    }
    
    .container {
      width: 375px;
      margin: 0 auto;
      background-color: #fff;
    }
    
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      background-color: #fff;
      border-bottom: 1px solid #ddd;
    }

    .header h1 {
      font-size: 14px;
      font-weight: normal;
    }

    .header img {
      width: 20px;
      height: 20px;
    }

    .search-bar {
      padding: 10px;
      border-bottom: 1px solid #eee;
    }

    .tabs {
      display: flex;
      justify-content: space-around;
      padding: 10px;
      background-color: #fff;
    }

    .tabs span {
      padding: 10px;
      color: #333;
    }

    .active {
      border-bottom: 2px solid red;
    }

    .highlight-section {
      background-color: #fff1e0;
      padding: 10px;
      text-align: center;
    }

    .highlight-section span {
      color: #f40;
    }

    .order-item {
      padding: 15px;
      border-bottom: 1px solid #eee;
    }

    .order-item h2 {
      font-size: 14px;
      margin: 5px 0;
    }

    .order-info {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
    }

    .order-info img {
      width: 60px;
      height: 60px;
      border-radius: 4px;
    }

    .order-info div {
      flex-grow: 1;
      margin-left: 10px;
    }

    .order-price {
      text-align: right;
      color: #f40;
    }

    .btn-group {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
    }

    .btn {
      padding: 8px 12px;
      border: 1px solid #ddd;
      background-color: #fff;
      border-radius: 4px;
      font-size: 14px;
      cursor: pointer;
    }

    .btn:hover {
      background-color: #f5f5f5;
    }

    .shop-recommend {
      padding: 15px;
      display: flex;
      justify-content: space-around;
    }

    .shop-recommend img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }

    .footer {
      padding: 15px;
      background-color: #fff;
      text-align: center;
      border-top: 1px solid #ddd;
    }

    .footer button {
      width: 100%;
      padding: 12px;
      background-color: #ff4e00;
      color: #fff;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;
    }

    .footer button:hover {
      background-color: #ff6700;
    }

    .shop-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .shop-item img {
      width: 60px;
      height: 60px;
      border-radius: 4px;
    }

    .shop-item-info {
      margin-left: 10px;
      flex-grow: 1;
    }

    .price {
      color: #f40;
    }

  </style>
</head>
<body>
  <div id="app" class="container">
    <!-- Header -->
    <div class="header">
      <h1>订单详情</h1>
      <img src="https://via.placeholder.com/20" alt="返回">
    </div>

    <!-- 搜索栏 -->
    <div class="search-bar">
      <input type="text" placeholder="搜索我的订单" style="width: 100%; padding: 8px; border: 1px solid #ddd;">
    </div>

    <!-- Tabs -->
    <div class="tabs">
      <span class="active">全部</span>
      <span>待付款</span>
      <span>待发货</span>
      <span>待收货</span>
      <span>评价</span>
      <span>售后</span>
    </div>

    <!-- Highlight Section -->
    <div class="highlight-section">
      <p>年货节 精选礼盒 跨店每满200减30</p>
      <span>有 4 件可抢首晒</span>
      <a href="#" style="color: #f40;">去逛逛 ></a>
    </div>

    <!-- 订单商品信息 -->
    <div v-for="(order, index) in orders" :key="index" class="order-item">
      <div class="order-info">
        <img :src="order.image" alt="商品图片">
        <div>
          <h2>{{ order.title }}</h2>
          <p>{{ order.description }}</p>
          <p>数量：{{ order.quantity }}</p>
        </div>
        <div class="order-price">
          实付：¥{{ order.price }}
        </div>
      </div>
      <div class="btn-group">
        <button class="btn">催发货</button>
        <button class="btn">修改地址</button>
      </div>
    </div>

    <!-- 推荐店铺 -->
    <div class="shop-recommend">
      <div v-for="(shop, index) in shops" :key="index">
        <img :src="shop.img" alt="店铺图片">
        <p>{{ shop.name }}</p>
      </div>
    </div>

    <!-- Footer -->
    <div class="footer">
      <button @click="confirmOrder">确认收货</button>
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        orders: [
          {
            title: 'CHOWKI 舒适型格品牌订单',
            description: '高级灰 M (105~120斤)',
            quantity: 1,
            price: 280,
            image: 'https://via.placeholder.com/60'
          },
          {
            title: 'W.Amber 羊毛高领毛衫',
            description: '月岩白 M (预售10天)',
            quantity: 1,
            price: 390,
            image: 'https://via.placeholder.com/60'
          }
        ],
        shops: [
          { name: '纯子日用', img: 'https://via.placeholder.com/50' },
          { name: '周琪CHO', img: 'https://via.placeholder.com/50' },
          { name: '西瓜不是瓜', img: 'https://via.placeholder.com/50' }
        ]
      },
      methods: {
        confirmOrder() {
          alert('确认收货功能开发中...');
        }
      }
    });
  </script>
</body>
</html>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

各位同学们：还有啥想看的功能或者特效不？欢迎在评论区留言哦！

本人承接网网站开发，如有需要，欢迎私信咨询！

如果您感觉文章对您有帮助~
那就打赏一下，请笔者喝杯咖啡吧~

给新手学习前端开发的建议：

了解基础知识：
- 学习HTML、CSS和JavaScript的基础知识。它们是前端开发的核心，构成了网页的基本结构和样式，以及交互功能。
- 掌握HTML的标签和语义化，了解CSS的选择器和布局技巧，熟悉JavaScript的基本语法和DOM操作。
实践项目：
- 不要仅仅停留在理论学习上，通过实践项目来巩固和应用所学知识。
- 可以从简单的静态页面开始，逐渐尝试添加交互效果和动态数据。
- 参与开源项目或自己动手创建一个个人网站，将所学知识应用到实际场景中。
学习工具和框架：
- 了解并学习前端开发中常用的工具和框架，如构建工具（Webpack、Gulp等）、版本控制工具（Git）、前端框架（React、Vue、Angular等）。
- 这些工具和框架能够提高开发效率，简化开发流程，是前端开发的重要组成部分。
关注前端趋势：
- 前端开发是一个快速发展的领域，新的技术和工具不断涌现。
- 关注前端社区、博客和会议，了解最新的技术趋势和发展方向，保持学习的热情和动力。
培养解决问题的能力：
- 前端开发常常会遇到各种问题和挑战，学会独立思考和解决问题是非常重要的。
- 遇到问题时，可以先尝试自己解决，通过查阅文档、搜索资料和社区讨论来找到答案。
- 如果实在无法解决，可以向同事或社区求助，但也要学会总结和分享自己的经验和教训。
不断学习和提升：
- 前端开发是一个不断学习和提升的过程，要保持对知识的渴望和追求。
- 可以通过阅读书籍、参加培训、参与开源项目等方式来不断提升自己的技能水平。
- 同时，也要关注自己的职业发展，了解行业的需求和趋势，规划自己的职业道路。
注重代码质量和可维护性：
- 编写高质量的代码是前端开发的基本要求之一。
- 学习并遵循代码规范，使用适当的命名和注释来提高代码的可读性。
- 注重代码的结构和逻辑，避免过度嵌套和复杂的逻辑。
- 考虑代码的可维护性，尽量编写可复用和可扩展的代码。
参与社区和交流：
- 加入前端开发的社区和论坛，与其他开发者进行交流和分享。
- 通过参与社区活动、回答问题、分享经验等方式，不仅可以提升自己的技能水平，还可以结识更多的同行和朋友。