Vue2 订单页面实例：超实用、初学者友好，完整代码详解从零开始：用 Vue2 构建现代订单提交页面（含详细源代码）Vue2 实战教程：如何构建一个真实世界的订单页面（附完整代码）一篇搞定！Vue2

于 2024-10-01 14:38:30 发布
阅读量92 收藏 2
点赞数 2
文章标签： 前端 vue.js javascript html 订单详情页 app订单页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22182989/article/details/142670619
版权

b站视频演示效果：

效果图：

完整代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>填写订单 - 联系人管理</title>
  <!-- 引入 Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <style>
    /* 样式部分 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      padding: 0 10px;
    }
    .container {
      width: 100%;
      max-width: 400px;
      margin: auto;
      background-color: white;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      padding: 20px;
    }
    .header {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
      text-align: center;
    }
    .info {
      font-size: 14px;
      margin-bottom: 15px;
      color: #666;
    }
    .section {
      margin-bottom: 20px;
    }
    .section-title {
      font-size: 16px;
      margin-bottom: 10px;
    }
    .passenger {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #ddd;
    }
    .passenger-info {
      font-size: 14px;
    }
    .passenger-buttons {
      display: flex;
      gap: 5px;
    }
    .insurance-option {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      align-items: center;
    }
    .total {
      font-size: 22px;
      color: #ff6700;
      margin-bottom: 10px;
      text-align: right;
    }
    .btn {
      padding: 5px 10px;
      background-color: #28a745;
      color: white;
      border: none;
      border-radius: 3px;
      cursor: pointer;
      font-size: 14px;
    }
    .btn:hover {
      background-color: #218838;
    }
    .btn-danger {
      background-color: #dc3545;
    }
    .btn-danger:hover {
      background-color: #c82333;
    }
    .btn-primary {
      background-color: #007bff;
    }
    .btn-primary:hover {
      background-color: #0069d9;
    }
    .btn-block {
      width: 100%;
      padding: 15px;
      font-size: 16px;
    }
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.5);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .modal {
      background-color: white;
      padding: 20px;
      width: 90%;
      max-width: 400px;
      border-radius: 5px;
    }
    .modal-header {
      font-size: 18px;
      margin-bottom: 15px;
    }
    .modal-body {
      margin-bottom: 15px;
    }
    .modal-footer {
      text-align: right;
    }
    .modal-footer .btn {
      margin-left: 10px;
    }
    .form-group {
      margin-bottom: 15px;
    }
    .form-group label {
      display: block;
      font-size: 14px;
      margin-bottom: 5px;
    }
    .form-group input {
      width: 100%;
      padding: 8px;
      font-size: 14px;
      border: 1px solid #ccc;
      border-radius: 3px;
    }
    .agreement {
      margin-bottom: 15px;
    }
    .agreement input[type="checkbox"] {
      margin-right: 5px;
    }
    .agreement a {
      color: #007bff;
      text-decoration: none;
    }
    .agreement a:hover {
      text-decoration: underline;
    }
    /* 解决“我已阅读并同意”不换行的问题 */
    .agreement label {
      display: block;
    }
  </style>
</head>
<body>
  <div id="app" class="container">
    <!-- Header Section -->
    <div class="header">填写订单</div>

    <!-- Travel Info -->
    <div class="info">
      中转 深圳—兰州 9月22日 周五<br>
      成人¥700 + 优享礼包¥84 + 基建燃油¥160
    </div>

    <!-- Passenger Section -->
    <div class="section">
      <div class="section-title">乘机人</div>
      <div v-for="(passenger, index) in passengers" :key="index" class="passenger">
        <div class="passenger-info">
          <p>{{ passenger.name }}</p>
          <p>身份证 {{ passenger.idCard }}</p>
          <p>手机号 {{ passenger.phone }}</p>
        </div>
        <div class="passenger-buttons">
          <button class="btn btn-primary" @click="editPassenger(passenger, index)">编辑</button>
          <button class="btn btn-danger" @click="deletePassenger(index)">删除</button>
        </div>
      </div>
      <button class="btn btn-primary" style="margin-top: 10px;" @click="addPassenger">新增乘机人</button>
    </div>

    <!-- Insurance Section -->
    <div class="section">
      <div class="section-title">守护每个家庭幸福</div>
      <div v-for="insurance in insurances" :key="insurance.id" class="insurance-option">
        <label>
          <input type="radio" :value="insurance.id" v-model="selectedInsurance">
          {{ insurance.name }} (¥{{ insurance.price }})
        </label>
      </div>
    </div>

    <!-- Agreement -->
    <div class="section agreement">
      <label>
        <input type="checkbox" v-model="agreed">
        我已阅读并同意
        <a href="#">《机票预订协议》</a>、
        <a href="#">《锂电池及危险品须知》</a>、
        <a href="#">《国内运输总条件》</a>
      </label>
    </div>

    <!-- Total Price -->
    <div class="total">总额 ¥{{ totalPrice }}</div>

    <!-- Submit Button -->
    <button class="btn btn-block" @click="submitOrder">提交订单</button>

    <!-- Modal for Add/Edit Passenger -->
    <div v-if="showModal" class="modal-overlay">
      <div class="modal">
        <div class="modal-header">{{ modalTitle }}</div>
        <div class="modal-body">
          <div class="form-group">
            <label>姓名</label>
            <input type="text" v-model="formData.name">
          </div>
          <div class="form-group">
            <label>身份证号</label>
            <input type="text" v-model="formData.idCard">
          </div>
          <div class="form-group">
            <label>手机号</label>
            <input type="text" v-model="formData.phone">
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn" @click="closeModal">取消</button>
          <button class="btn btn-primary" @click="savePassenger">保存</button>
        </div>
      </div>
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        selectedInsurance: null,
        agreed: false,
        showModal: false,
        modalTitle: '',
        formData: {
          name: '',
          idCard: '',
          phone: ''
        },
        editingIndex: null,
        insurances: [
          { id: 1, name: '行李丢失险', price: 10 },
          { id: 2, name: '国内旅行险', price: 48 }
        ],
        passengers: [
          {
            name: '赵维东',
            idCard: '620421199308175836',
            phone: '17610845836'
          }
        ]
      },
      computed: {
        totalPrice() {
          const basePrice = 929;
          const insurancePrice = this.insurances.find(ins => ins.id === this.selectedInsurance)?.price || 0;
          return basePrice + insurancePrice;
        }
      },
      methods: {
        addPassenger() {
          this.modalTitle = '新增乘机人';
          this.formData = { name: '', idCard: '', phone: '' };
          this.editingIndex = null;
          this.showModal = true;
        },
        editPassenger(passenger, index) {
          this.modalTitle = '编辑乘机人';
          this.formData = { ...passenger };
          this.editingIndex = index;
          this.showModal = true;
        },
        savePassenger() {
          if (this.formData.name && this.formData.idCard && this.formData.phone) {
            if (this.editingIndex !== null) {
              // 编辑乘机人
              this.passengers.splice(this.editingIndex, 1, { ...this.formData });
            } else {
              // 新增乘机人
              this.passengers.push({ ...this.formData });
            }
            this.closeModal();
          } else {
            alert('请完整填写乘机人信息');
          }
        },
        deletePassenger(index) {
          if (confirm('确定要删除这个乘机人吗？')) {
            this.passengers.splice(index, 1);
          }
        },
        closeModal() {
          this.showModal = false;
        },
        submitOrder() {
          if (!this.agreed) {
            alert('请同意协议后再提交订单');
          } else if (this.passengers.length === 0) {
            alert('请添加乘机人信息');
          } else {
            alert('订单已提交');
          }
        }
      }
    });
  </script>
</body>
</html>

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

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

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

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

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

  1. 了解基础知识：

    • 学习HTML、CSS和JavaScript的基础知识。它们是前端开发的核心，构成了网页的基本结构和样式，以及交互功能。
    • 掌握HTML的标签和语义化，了解CSS的选择器和布局技巧，熟悉JavaScript的基本语法和DOM操作。

  2. 实践项目：

    • 不要仅仅停留在理论学习上，通过实践项目来巩固和应用所学知识。
    • 可以从简单的静态页面开始，逐渐尝试添加交互效果和动态数据。
    • 参与开源项目或自己动手创建一个个人网站，将所学知识应用到实际场景中。

  3. 学习工具和框架：

    • 了解并学习前端开发中常用的工具和框架，如构建工具（Webpack、Gulp等）、版本控制工具（Git）、前端框架（React、Vue、Angular等）。
    • 这些工具和框架能够提高开发效率，简化开发流程，是前端开发的重要组成部分。

  4. 关注前端趋势：

    • 前端开发是一个快速发展的领域，新的技术和工具不断涌现。
    • 关注前端社区、博客和会议，了解最新的技术趋势和发展方向，保持学习的热情和动力。

  5. 培养解决问题的能力：

    • 前端开发常常会遇到各种问题和挑战，学会独立思考和解决问题是非常重要的。
    • 遇到问题时，可以先尝试自己解决，通过查阅文档、搜索资料和社区讨论来找到答案。
    • 如果实在无法解决，可以向同事或社区求助，但也要学会总结和分享自己的经验和教训。

  6. 不断学习和提升：

    • 前端开发是一个不断学习和提升的过程，要保持对知识的渴望和追求。
    • 可以通过阅读书籍、参加培训、参与开源项目等方式来不断提升自己的技能水平。
    • 同时，也要关注自己的职业发展，了解行业的需求和趋势，规划自己的职业道路。

  7. 注重代码质量和可维护性：

    • 编写高质量的代码是前端开发的基本要求之一。
    • 学习并遵循代码规范，使用适当的命名和注释来提高代码的可读性。
    • 注重代码的结构和逻辑，避免过度嵌套和复杂的逻辑。
    • 考虑代码的可维护性，尽量编写可复用和可扩展的代码。

  8. 参与社区和交流：

    • 加入前端开发的社区和论坛，与其他开发者进行交流和分享。
    • 通过参与社区活动、回答问题、分享经验等方式，不仅可以提升自己的技能水平，还可以结识更多的同行和朋友。

总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。

加油吧！

南北极之间
关注
Vue安装、实例与初始化详解
官方推荐
12-26 2万+
Vue安装、实例与初始化详解；"Vue安装"；"Vue实例"；"Vue初始化"
Vue入门(初学者也能学会)
rousongxiaobei_的博客
08-02 516
1.Vue框架核心2.MVVM模式3.Vue起步1.Model:负责数据存储2.View:负责页面展示3.ViewModel:负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示。
Web项目开发的全方位指南：从零基础立项到项目部署上线流程剖析（全文2W字）
猫头虎：授渔优于赠鱼，兴趣引领智慧，探索之乐尤显珍贵。商务合作：Libin9iOak，共赴知识与乐趣的探索之旅！
02-27 4351
在本篇技术博客中，我们将深入探讨Web项目开发的整体流程，从选择项目模板或自行搭建，到最终的部署和持续集成。本文将为您提供一站式指南，无论您是编程新手还是资深开发者，都能轻松掌握Web项目的开发。涵盖内容包括代码规范、构建工具选择、SPA与MPA、前端框架与UI库选择、目录结构规划、脚手架搭建、版本控制、代码编写、组件化开发、测试、构建、部署、持续集成、服务器清理以及错误收集等关键环节。
《Vue入门到精通》最强Vue教程，附带经典案例，万字详解，干货十足！
热门推荐
abraham_ly的博客
03-21 1万+
目录：一、前言二、Vue是什么？1、简介2、发展史3、为什么要学习Vue？4、jQuery、javascript、Vue的区别5、Vue框架构造三、Vue的使用1、Vue环境搭建2、插值表达式3、指令（Directives）1、什么是指令2、指令API1、v-cloak 解决插值闪动2、v-text 填充纯文本3、v-html ：填充HTML片段4、v-pre 填充原始信息5、v-once 只编译一次6、v-model 双向数据绑定7、v-on 事件绑定8、v-bind 属性绑定9、v-if 分支结构v-i
一套史诗级版vue详解!
SYJ的博客
07-31 1364
史诗级版vue详解！如果你是老师直接可以拿这篇文讲课,如果你是学生从入门到精通你的vue,如果你是开发者可以学学里面的精髓 快快收藏吧！
项目脚手架VueCLI2&3
zhoubangbang1的博客
04-19 375
项目脚手架VueCLI2&3VueCLI简介 VueCLI官方文档地址：https://cli.vuejs.org/zh/VueCLI（Vue Command-Line Interface ）致力于快速构建基于webpack的vue初始化项目。Vue CLI具有以下核心功能Vue CLI封装了了完整的静态资源模块化打包方案Vue CLI提供了本地的热加载调试服务Vue CLI还提供了预处理，文件转译，自动化测试和静态检测等功能Vue CLI提供了快速开始零配置的原型开发VueCLI与webpack之
Vue 3最新力作 Vue.js 3企业级应用开发实战
老卫的技术站
03-21 3254
《Vue.js 3企业级应用开发实战》一书由电子工业出版社出版，已经于2022年1月出版上市。近日拿到了样书，第一时间希望与读者朋友们分享下这本书里面的内容。 这本书的背景 近期拿到了样书，迫不及待的对新书做了浏览。同时也做了拆书与导读。 聊下为啥要写这本书。 Vue.js是近些年广受关注的前端框架。Vue.js已经具备了商业项目开发的必备条件，如语法精炼、优雅而简洁、代码的可读性高、成熟的组件模块化等等，当然，还有商业项目开发最为看重的与第三方控件的结合能力。正是这些能力，确保了“后浪”Vue
vue入门基础教程之经验总结篇（小白入门必备）|建议收藏
zhulin1028的博客
10-05 3459
VUE vue组件的三个API：prop、event、slot prop 定义了这个组件有哪些可配置的属性，组件的核心功能也都是它来确定的。 组件里定义的prop都是单向数据流，只能通过父级组件对齐进行修改，组件本身不能修改props的值，只能修改定义在data里的数据，非要修改，也是通过后面介绍的自定义事件通知父级，由父级来修改； 在子组件定义prop是，使用了camelCase的命名法，由于html特性不区分大小写。camelCase的prop用于特性时，会转为短横线隔开(比如availab
《Vue.js+Spring Boot全栈开发实战》简介
老卫的技术站
09-30 1328
Vue.js技术是目前前端框架组件化开发最为火热的技术之一，而Spring Boot则是在Java领域知名度最高的企业级开发框架。业界将这两者技术整合进行全栈开发，不失为一种流行的开发方式。笔者撰写过包括《Vue.js 3企业级应用开发实战》《Spring Boot 企业级应用开发实战》等在内的有关Vue.js和Spring Boot方面的专著，但将Vue.js和Spring Boot进行整合论述尚属首次。
详解vue项目构建与实战
08-30
Vue.js 是一款流行的前端框架，以其轻量级、高性能和易上手的特性深受开发者喜爱。...无论是选择使用vue-cli快速搭建项目，还是从零开始自定义构建，重要的是理解每个步骤背后的原理，这样在遇到问题时才能迎刃而解。
vue实例和开发教程
11-14
通过以上知识点的学习，可以全面掌握 Vue.js 的核心技术和开发流程，无论是从零开始的新手还是希望进一步提高技能的开发者，都能从中受益。此外，还可以进一步探索 Vue.js 的高级特性，如服务端渲染、TypeScript ...
Vue.js入门教程.pdf
06-18
通过上述步骤和知识点的详细介绍，读者可以全面了解如何从零开始安装并使用Vue.js，以及Vue.js的基本使用方法和概念。这对于初学者来说是非常宝贵的资源，能够帮助他们快速入门并开始实践Vue.js项目。
day01
JiangMeiXue的博客
09-25 246
目录。
登录功能开发 P167重点
最新发布
2303_81204446的博客
09-30 123
前端无法识别controller方法，因此存在Dispa什么的。Claims：jwt中的第二部分。
Web认识 -- 第一课
ZxVSaccount的博客
09-30 698
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
Webpack 打包后文件过大，如何优化？
官方推荐
09-30 1709
Webpack 打包后文件过大，如何优化？
前端规范工程-2：JS代码规范（Prettier + ESLint）
Vinca@的博客
09-26 693
Prettier 主要关注代码的格式，而 ESLint 则关注代码的质量和规范。结合使用这两个工具，可以极大地提高代码的可读性和维护性，同时减少潜在的错误和不一致性。
前端面试经验总结2(经典问题篇)
rita_0567的博客
09-28 855
因为计算机技术的快速发展，所以程序员如果不能保持对技术的持续性学习，会更容易的被淘汰，我从来不觉得程序员是一个轻松的职业，但是程序员是我最热爱的职业，我做好了充足的准备让自己能够长期在前端行业深耕。既要扩充自己的知识宽度，同时又不要一味的追求学习的东西越多越来，今天学两天这个，明天学两天那个，工作中又没有得到使用的话，很快也都会忘记的。了解，贵公司主要是在xxx行业从事xxx业务，贵公司所处的行业是我非常看好的，我感觉贵公司的氛围我很喜欢，比如xxxx。遇到了哪些挑战，我如何在不利的条件下成长起来的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南北极之间

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值