Vue.js项目实战】从零开始构建一个场地预约支付页面，适合初学者 【Vue.js案例】简单易懂的场地预定系统，带倒计时和支付功能 【Vue入门教程】手把手教你实现一个预约支付页面，代码+教程完整展示

编程语言 2024-11-04 19:08:37 阅读次数: 0

效果图

在这里插入图片描述

博客教程：如何用Vue.js构建一个场地详情支付页面

本教程将带你一步步使用Vue.js构建一个场地详情支付页面，包括倒计时功能、场地信息展示、预订信息展示以及确认支付按钮。这是一个非常实用的新手项目，可以帮助你快速上手Vue的基本概念。

目录

  1. 项目介绍
  2. 项目结构
  3. 步骤一：设置HTML基础结构
  4. 步骤二：添加基本样式
  5. 步骤三：创建Vue实例并初始化数据
  6. 步骤四：实现倒计时功能
  7. 步骤五：实现确认支付功能
  8. 总结

项目介绍

在这个项目中，我们将实现一个简洁的场地预定详情页面，展示预定的场地、时间和价格等信息，并提供倒计时功能以及支付确认按钮。这种页面常用于预约系统和支付系统中，适合初学者练习前端开发。

项目结构

在该项目中，我们将使用Vue的单页面应用结构来组织代码。HTML结构主要由头部信息、倒计时、场地卡片、预定信息展示以及底部的支付按钮组成。CSS则用于控制页面样式，使页面看起来更加美观整洁。

步骤一：设置HTML基础结构

我们首先需要构建HTML页面的基础结构，创建一个#app容器，并在其中添加页面的各个部分。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>场地详情 - Vue 示例</title>
  <script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
</head>
<body>
<div id="app">
  <div class="header">场地详情</div>
  <div class="timer">支付倒计时: {
   
   { countdown }}</div>
  <div class="card">
    <div>网球场B</div>
    <div>富士康科技园</div>
    <div>6人可用 | 开放时间：09:00 - 21:00</div>
    <div>可预定时间: 05.09 - 11.20</div>
    <div class="status">待支付</div>
  </div>
  <div class="info-section" v-for="(value, label) in reservationInfo" :key="label">
    <span>{
   
   { label }}</span>
    <span>{
   
   { value }}</span>
  </div>
  <div class="explanation">
    下单说明：<br>
    a) 下单当天不允许申请退款。<br>
    b) 活动开始前8小时以上申请退款，扣除40%手续费。<br>
    c) 活动开始前4-8小时申请退款，扣除70%手续费。<br>
    d) 活动开始前不足4小时以上申请退款，不予退款。
  </div>
  <div class="footer">
    <div class="total-price">合计 ¥ 200</div>
    <button class="confirm-btn" @click="confirmPayment">确认支付</button>
  </div>
</div>
</body>
</html>

步骤二：添加基本样式

在<style>中添加CSS样式，使页面看起来更加美观。

<style>
  body {
      
      
    font-family: Arial, sans-serif;
    background-color: #f7f8fa;
    margin: 0;
    padding: 0;
  }
  #app {
      
      
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-size: 14px;
  }
  .header {
      
      
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .timer {
      
      
    color: #ff4d4f;
    font-size: 14px;
    text-align: center;
    margin-bottom: 20px;
  }
  .card {
      
      
    background: linear-gradient(120deg, #66ccff, #0099cc);
    color: #fff;
    padding: 20px;
    border-radius: 8px;
    position: relative;
    margin-bottom: 20px;
  }
  .card .status {
      
      
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ffcc00;
    color: #fff;
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 12px;
  }
  .info-section {
      
      
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    color: #666;
    font-size: 14px;
  }
  .info-section:last-child {
      
      
    border-bottom: none;
  }
  .explanation {
      
      
    color: #999;
    font-size: 12px;
    margin-top: 20px;
    line-height: 1.6;
  }
  .footer {
      
      
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
  }
  .total-price {
      
      
    font-size: 18px;
    color: #ff4d4f;
  }
  .confirm-btn {
      
      
    padding: 10px 20px;
    background-color: #ff4d4f;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
  }
  .confirm-btn:hover {
      
      
    background-color: #ff7875;
  }
</style>

步骤三：创建Vue实例并初始化数据

在<script>部分创建Vue实例，初始化倒计时和预定信息数据。

<script>
  new Vue({
      
      
    el: '#app',
    data: {
      
      
      countdown: '01:00:00',  // 初始倒计时时间
      reservationInfo: {
      
      
        "预定人": "张三",
        "手机号码": "13912341234",
        "预定时间": "07/21 星期日 15:00-17:00",
        "总计时段": "120分钟",
        "付款方式": "账户余额"
      }
    }
  });
</script>

步骤四：实现倒计时功能

我们通过setInterval来实现倒计时，并在Vue实例的mounted钩子中启动倒计时。

methods: {
    
    
  startCountdown() {
    
    
    let seconds = 60 * 60;  // 1小时倒计时
    setInterval(() => {
    
    
      if (seconds > 0) {
    
    
        seconds--;
        let hrs = Math.floor(seconds / 3600);
        let mins = Math.floor((seconds % 3600) / 60);
        let secs = seconds % 60;
        this.countdown = `${
      
      hrs.toString().padStart(2, '0')}:${
      
      mins.toString().padStart(2, '0')}:${
      
      secs.toString().padStart(2, '0')}`;
      }
    }, 1000);
  }
}

在mounted()中调用this.startCountdown()来启动倒计时。

步骤五：实现确认支付功能

添加一个简单的支付确认按钮功能，当用户点击“确认支付”按钮时，弹出一个提示框。

methods: {
    
    
  confirmPayment() {
    
    
    alert("支付已确认，感谢您的预定！");
  }
}

总结

在本教程中，我们通过Vue.js构建了一个完整的场地预定支付页面，包含倒计时功能、场地详情展示以及支付确认功能。这个项目适合初学者，通过这个项目可以掌握Vue的数据绑定、事件处理以及组件的创建等基础知识。

完整代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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: #f7f8fa;
      margin: 0;
      padding: 0;
    }
    #app {
      
      
      max-width: 400px;
      margin: 0 auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      font-size: 14px;
    }
    .header {
      
      
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .timer {
      
      
      color: #ff4d4f;
      font-size: 14px;
      text-align: center;
      margin-bottom: 20px;
    }
    .card {
      
      
      background: linear-gradient(120deg, #66ccff, #0099cc);
      color: #fff;
      padding: 20px;
      border-radius: 8px;
      position: relative;
      margin-bottom: 20px;
    }
    .card .status {
      
      
      position: absolute;
      top: 10px;
      right: 10px;
      background-color: #ffcc00;
      color: #fff;
      padding: 5px 10px;
      border-radius: 12px;
      font-size: 12px;
    }
    .info-section {
      
      
      padding: 10px 0;
      border-bottom: 1px solid #f0f0f0;
      display: flex;
      justify-content: space-between;
      color: #666;
      font-size: 14px;
    }
    .info-section:last-child {
      
      
      border-bottom: none;
    }
    .explanation {
      
      
      color: #999;
      font-size: 12px;
      margin-top: 20px;
      line-height: 1.6;
    }
    .footer {
      
      
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
    }
    .total-price {
      
      
      font-size: 18px;
      color: #ff4d4f;
    }
    .confirm-btn {
      
      
      padding: 10px 20px;
      background-color: #ff4d4f;
      color: #fff;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 16px;
    }
    .confirm-btn:hover {
      
      
      background-color: #ff7875;
    }
  </style>
</head>
<body>
<div id="app">
  <!-- Header -->
  <div class="header">场地详情</div>
  
  <!-- Countdown Timer -->
  <div class="timer">支付倒计时: {
   
   { countdown }}</div>
  
  <!-- Venue Card -->
  <div class="card">
    <div>网球场B</div>
    <div>富士康科技园</div>
    <div>6人可用 | 开放时间：09:00 - 21:00</div>
    <div>可预定时间: 05.09 - 11.20</div>
    <div class="status">待支付</div>
  </div>
  
  <!-- Reservation Information -->
  <div class="info-section" v-for="(value, label) in reservationInfo" :key="label">
    <span>{
   
   { label }}</span>
    <span>{
   
   { value }}</span>
  </div>
  
  <!-- Order Explanation -->
  <div class="explanation">
    下单说明：<br>
    a) 下单当天不允许申请退款。<br>
    b) 活动开始前8小时以上申请退款，扣除40%手续费。<br>
    c) 活动开始前4-8小时申请退款，扣除70%手续费。<br>
    d) 活动开始前不足4小时以上申请退款，不予退款。
  </div>
  
  <!-- Footer with Total Price and Confirm Button -->
  <div class="footer">
    <div class="total-price">合计 ¥ 200</div>
    <button class="confirm-btn" @click="confirmPayment">确认支付</button>
  </div>
</div>

<script>
  new Vue({
      
      
    el: '#app',
    data: {
      
      
      countdown: '01:00:00',  // 初始倒计时时间
      reservationInfo: {
      
      
        "预定人": "张三",
        "手机号码": "13912341234",
        "预定时间": "07/21 星期日 15:00-17:00",
        "总计时段": "120分钟",
        "付款方式": "账户余额"
      }
    },
    mounted() {
      
      
      this.startCountdown();
    },
    methods: {
      
      
      startCountdown() {
      
      
        let seconds = 60 * 60;  // 1小时倒计时
        setInterval(() => {
      
      
          if (seconds > 0) {
      
      
            seconds--;
            let hrs = Math.floor(seconds / 3600);
            let mins = Math.floor((seconds % 3600) / 60);
            let secs = seconds % 60;
            this.countdown = `${ 
        hrs.toString().padStart(2, '0')}:${ 
        mins.toString().padStart(2, '0')}:${ 
        secs.toString().padStart(2, '0')}`;
          }
        }, 1000);
      },
      confirmPayment() {
      
      
        alert("支付已确认，感谢您的预定！");
      }
    }
  });
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_22182989/article/details/143495328
今日推荐
周排行
教你如何约女孩子的方式去理解（TCP三次握手与四次挥手）
android按压背景
【量化小讲堂-Python&amp;Pandas系列10】如何判断一个策略的好坏？(附代码)
编程题：利用链表实现栈
盘点47条 Allegro 使用技巧，你都知道吗？
在VMware Workstation中安装CentOS
二叉树的实现
cmake安装jsoncpp
ReactNative开发城市列表页
最全前端学习资源
每日归档
更多
2025-03-20(0)
2025-03-19(0)
2025-03-18(0)
2025-03-17(0)
2025-03-16(0)
2025-03-15(0)
2025-03-14(0)
2025-03-13(0)
2025-03-12(0)
2025-03-11(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022