1. 开发文档
  2. /
  3. 项目简介

《福禄电影：全功能跨端电影购票》

🎬 福禄电影 - 全功能跨端电影购票解决方案

🌟 项目简介

展示1 展示2

福禄电影 是基于现代化前端技术栈构建的开源电影购票应用，提供从影院发现到票务支付的全流程解决方案。支持微信小程序 / H5 / 抖音小程序多端平台，采用模块化架构和React 开发范式，具备高可维护性与跨端适配能力。

🚀 技术栈亮点

技术类别实现方案版本
核心框架Taro (opens new window)v4.09+
UI 组件库NutUI (opens new window)v2.7.8+
状态管理Hox + aHooksv2.1+ / v3.7
开发语言TypeScriptv5.7.2+
多端适配微信 / 抖音小程序、H5

💎 核心功能模块

🎥 电影发现与管理

  • 智能分类浏览：支持热映 / 待映影片分类，按类型、地区、快速筛选。

  • 沉浸式详情页：

    • 影片基础信息（导演、演员、剧情简介）；

    • 预告片播放与演职员表展示；

    • 实时场次查询（日期、时间、影厅信息）。

📍 精准影院定位

  • LBS 地理定位：基于用户当前位置，自动推荐最近影院（支持城市切换）；

  • 影院信息聚合：展示影院地址、距离、影厅优势。

💺 可视化选座系统

  • 座位分布看板：2D 可视化座位图，实时标记座位状态（可选 / 已售 / 锁定）；

  • 智能连座推荐：多人购票时匹配最优连座组合

🎫 全流程票务服务

  • 购票四步曲：场次选择 → 座位锁定 → 订单确认 → 支付完成（支持优惠券抵扣）。

  • 异常处理机制：网络中断时自动回滚座位锁定，订单超时未支付自动释放库存；

  • 订单管理：支持查看历史订单、查看出票码，历史订单可查可导出。

✨ 主题色配置指南

点击查看

🎭外部商户对接文档

点击查看

🔑环境变量配置说明

点击查看

📕项目结构

Taro 项目目录结构

my-fulu-movie-project/
├── config/                  # 构建配置目录
│   ├── dev.js               # 开发环境配置
│   ├── index.js             # 默认配置
│   └── prod.js              # 生产环境配置
│
├── src/                     # 源代码目录
│   ├── app.config.ts        # 全局应用配置
│   ├── app.scss             # 全局样式
│   ├── app.tsx              # 应用入口文件
│   │
│   ├── common/              # 公共资源目录
│   │   ├── assets/          # 公共静态资源
│   │   │   ├── images/      # 公共图片
│   │   │   └── styles/      # 公共样式(如variables.less)
│   │   ├── hook/            # 自定义hooks
│   │   ├── hox/             # 状态管理仓库
│   │   └── utils/           # 基础工具函数
│   │
│   ├── components/          # 公共组件库
│   │   ├── Tabs/            # 标签组件
│   │   │   ├── index.tsx
│   │   │   └── index.module.less
│   │   └── .../             # 其他公共组件
│   │
│   ├── pages/               # 业务页面
│   │   ├── index/           # 首页
│   │   │   ├── components/  # 页面专属组件
│   │   │   │   ├── Banner/  # 轮播组件
│   │   │   │   └── ...      # 其他模块组件
│   │   │   ├── index.config.ts  # 页面配置
│   │   │   ├── index.tsx    # 页面逻辑
│   │   │   └── index.module.less # 页面样式
│   │   │
│   │   └── my/              # "我的"页面
│   │       └── ...          # 类似结构
│   │
│   ├── services/            # 网络服务层
│   │   └── index.ts         # API统一封装(修正后缀)
│   │
│   ├── utils/               # 高级工具库
│   │   ├── auth/            # 认证授权工具
│   │   │   └── silentLogin.ts # 静默登录逻辑
│   │   ├── config/          # 应用配置
│   │   ├── appConfig.ts     # 运行时配置
│   │   ├── enum.ts          # 枚举常量
│   │   └── request.ts       # 网络请求封装
│   │
│   └── types/               # 类型定义
│       └── global.d.ts      # 全局类型
│
├── project.config.json      # 微信小程序配置
├── babel.config.js          # Babel配置
├── tsconfig.json            # TypeScript配置
├── package.json             # 依赖管理
└── .gitignore               # 版本控制忽略