12306 订票小程序

项目简介

这是一个仿12306火车票订票的微信小程序，采用纯前端实现，使用本地Mock数据模拟后端接口。项目完整实现了火车票查询、订票、订单管理、乘车人管理等核心功能，适合作为微信小程序开发学习项目或计算机设计参考。

技术栈

技术	版本/说明
开发框架	微信小程序原生框架
基础库版本	trial (最新试用版)
开发语言	JavaScript (ES6+)
样式语言	WXSS (微信小程序样式)
模板语言	WXML (微信小程序模板)
数据存储	本地Storage持久化
数据模拟	Mock Data (本地模拟数据)

项目特点

• 纯前端实现：无需后端服务器，所有数据使用本地Mock模拟
• 数据持久化：订单数据使用 wx.setStorageSync 本地存储，关闭小程序后数据不丢失
• 完整业务流程：涵盖查票、选座、下单、支付、取消等完整订票流程
• UI仿真度高：界面风格参考12306官方App，红色主题配色

功能模块

1. 首页模块 (pages/index)

• 出发地/目的地选择
• 出发日期选择（日期选择器）
• 出发地与目的地一键交换
• 快捷入口（我的订单、乘车人管理）
• 车次查询入口

2. 车站选择模块 (pages/stationSelect)

• 车站列表展示
• 车站搜索过滤功能
• 支持选择出发站/到达站

3. 车次列表模块 (pages/trainList)

• 根据出发地、目的地、日期查询车次
• 展示车次号、发车时间、到达时间、行程时长
• 展示各席别（二等座、一等座、商务座、硬座、硬卧、软卧）票价及余票数量
• 点击车次进入订单确认页

4. 订单确认模块 (pages/orderConfirm)

• 展示所选车次详细信息
• 添加/选择乘车人
• 为每位乘车人选择席别（二等座/一等座/商务座等）
• 为每位乘车人选择票种（成人票/儿童票）
• 儿童票自动半价计算
• 实时计算订单总价
• 提交订单

5. 订单列表模块 (pages/orderList)

• 展示所有历史订单
• 显示订单状态（待支付/已支付/已取消）
• 点击进入订单详情

6. 订单详情模块 (pages/orderDetail)

• 展示订单完整信息
• 车次信息、乘车人信息、座位号
• 模拟支付功能
• 模拟取消订单功能
• 订单状态实时更新

7. 乘车人管理模块 (pages/passengerManage)

• 乘车人列表展示
• 新增乘车人（姓名、身份证号、类型）
• 编辑乘车人信息
• 删除乘车人
• 从订单确认页跳转时支持多选乘车人

8. 我的模块 (pages/my)

• 用户信息展示（头像、昵称）
• 我的订单入口
• 乘车人管理入口
• 退出登录功能

项目结构

12306-ticket-min/
├── app.js                    # 小程序入口文件，全局数据管理
├── app.json                  # 小程序全局配置（页面路由、TabBar、窗口样式）
├── app.wxss                  # 全局样式文件
├── mockData.js               # Mock数据文件（车站、车次、乘车人、订单数据）
├── project.config.json       # 项目配置文件
├── sitemap.json              # 小程序索引配置
├── images/                   # 图片资源目录
│   ├── arrow.png
│   ├── home.png              # 首页图标
│   ├── home_active.png       # 首页选中图标
│   ├── my.png                # 我的图标
│   ├── my_active.png         # 我的选中图标
│   ├── order.png             # 订单图标
│   ├── people.png            # 乘车人图标
│   ├── switch.png            # 交换图标
│   ├── icon_cancelled.png    # 已取消状态图标
│   ├── icon_paid.png         # 已支付状态图标
│   └── icon_pending.png      # 待支付状态图标
├── pages/                    # 页面目录
│   ├── index/                # 首页
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   ├── stationSelect/        # 车站选择页
│   │   ├── stationSelect.js
│   │   ├── stationSelect.json
│   │   ├── stationSelect.wxml
│   │   └── stationSelect.wxss
│   ├── trainList/            # 车次列表页
│   │   ├── trainList.js
│   │   ├── trainList.json
│   │   ├── trainList.wxml
│   │   └── trainList.wxss
│   ├── orderConfirm/         # 订单确认页
│   │   ├── orderConfirm.js
│   │   ├── orderConfirm.json
│   │   ├── orderConfirm.wxml
│   │   └── orderConfirm.wxss
│   ├── orderList/            # 订单列表页
│   │   ├── orderList.js
│   │   ├── orderList.json
│   │   ├── orderList.wxml
│   │   └── orderList.wxss
│   ├── orderDetail/          # 订单详情页
│   │   ├── orderDetail.js
│   │   ├── orderDetail.json
│   │   ├── orderDetail.wxml
│   │   └── orderDetail.wxss
│   ├── passengerManage/      # 乘车人管理页
│   │   ├── passengerManage.js
│   │   ├── passengerManage.json
│   │   ├── passengerManage.wxml
│   │   └── passengerManage.wxss
│   └── my/                   # 我的页面
│       ├── my.js
│       ├── my.json
│       ├── my.wxml
│       └── my.wxss
└── utils/                    # 工具类目录
    └── util.js               # 日期格式化等工具函数

数据模型

车站数据 (stations)

{
  id: 'S001',      // 车站ID
  name: '北京'     // 车站名称
}

车次数据 (trains)

{
  id: 'T101',                    // 车次ID
  trainNumber: 'G101',           // 车次号
  startStation: '北京',          // 出发站
  endStation: '上海',            // 到达站
  startTime: '07:00',            // 发车时间
  endTime: '12:30',              // 到达时间
  duration: '05小时30分钟',      // 行程时长
  date: '2025-06-20',            // 发车日期
  seats: {                       // 席别信息
    '二等座': { price: 553, count: 100 },
    '一等座': { price: 933, count: 50 },
    '商务座': { price: 1748, count: 20 }
  }
}

乘车人数据 (passengers)

{
  id: 'P001',                    // 乘车人ID
  name: '张三',                  // 姓名
  idCard: '11010119900101123X',  // 身份证号
  type: '成人'                   // 类型：成人/儿童
}

订单数据 (orders)

{
  orderId: 'O202506150001',      // 订单ID
  trainId: 'T101',               // 车次ID
  trainNumber: 'G101',           // 车次号
  startStation: '北京',          // 出发站
  endStation: '上海',            // 到达站
  startTime: '07:00',            // 发车时间
  endTime: '12:30',              // 到达时间
  travelDate: '2025-06-20',      // 出行日期
  passengers: [{                 // 乘车人列表
    id: 'P001',
    name: '张三',
    ticketType: '成人票',
    seatType: '二等座',
    price: 553,
    seatNumber: '03车05A'
  }],
  totalPrice: 553,               // 订单总价
  status: '已支付',              // 订单状态：待支付/已支付/已取消
  createTime: '2025-06-15 10:00:00'  // 创建时间
}

核心业务逻辑

1. 车次查询

// mockData.js
searchTrains: function(startStation, endStation, date) {
  return this.trains.filter(train =>
    train.startStation === startStation &&
    train.endStation === endStation &&
    train.date === date
  );
}

2. 票价计算

• 成人票：原价
• 儿童票：半价（Math.round(price / 2)）

3. 订单创建

• 自动生成订单ID（时间戳）
• 自动生成随机座位号
• 订单默认状态为"待支付"
• 订单数据持久化到本地Storage

4. 数据持久化

// 保存订单到本地
_saveOrders: function() {
  wx.setStorageSync('12306_orders', this._orders);
}

// 从本地加载订单
_initOrders: function() {
  const storedOrders = wx.getStorageSync('12306_orders');
  if (storedOrders) {
    this._orders = storedOrders;
  }
}

页面路由配置

{
  "pages": [
    "pages/index/index", // 首页（默认启动页）
    "pages/trainList/trainList", // 车次列表
    "pages/orderConfirm/orderConfirm", // 订单确认
    "pages/passengerManage/passengerManage", // 乘车人管理
    "pages/my/my", // 我的
    "pages/orderList/orderList", // 订单列表
    "pages/orderDetail/orderDetail", // 订单详情
    "pages/stationSelect/stationSelect" // 车站选择
  ]
}

TabBar配置

{
  "tabBar": {
    "color": "#999",
    "selectedColor": "#CD212F",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的"
      }
    ]
  }
}

运行环境要求

• 微信开发者工具：建议使用最新稳定版
• 基础库版本：2.19.0 及以上
• AppID：wx445c1727641eb032（可替换为自己的AppID）

快速开始

1. 克隆/下载项目

将项目文件夹下载到本地

2. 导入项目

1. 打开微信开发者工具
2. 选择"导入项目"
3. 选择项目目录 12306-ticket-min
4. 填入AppID（可使用测试号或自己的AppID）
5. 点击"导入"

3. 运行项目

导入成功后，项目会自动编译运行，可在模拟器中预览效果

4. 真机调试

点击工具栏"预览"按钮，扫码在手机上体验

预置测试数据

车站

• 北京、上海、广州、深圳、杭州、成都、武汉

车次

车次	路线	时间	日期
G101	北京→上海	07:00-12:30	2025-06-20
D308	北京→上海	08:15-16:00	2025-06-20
G65	上海→北京	09:00-14:30	2025-06-20
K10	广州→上海	10:00-次日06:00	2025-06-20
G123	北京→上海	13:00-18:30	2025-06-21

乘车人

姓名	身份证号	类型
张三	11010119900101123X	成人
李四	320101198505054567	成人
王小明	440101201503037890	儿童

界面预览

项目包含演示视频文件 演示视频.mp4，可查看完整功能演示。

扩展建议

如需进一步完善项目，可考虑以下扩展：

1. 接入真实后端：将Mock数据替换为真实API接口
2. 用户登录系统：接入微信登录，实现真实用户体系
3. 支付功能：接入微信支付，实现真实支付流程
4. 更多车站数据：扩充车站数据库
5. 车次实时查询：接入12306开放API
6. 消息通知：订单状态变更推送通知
7. 历史搜索记录：记录用户搜索历史
8. 常用路线：保存用户常用出行路线

注意事项

1. 本项目为学习演示项目，所有数据均为模拟数据
2. 支付功能为模拟实现，不涉及真实交易
3. 身份证号等敏感信息仅用于演示，请勿使用真实信息
4. 如需发布上线，请替换为自己的AppID并完善相关资质

许可证

本项目仅供学习交流使用，请勿用于商业用途。