admin 管理员组

文章数量: 887007

使用vue编写猫眼、淘票票、美团的智能选座移动客户端 (一)

使用vue编写猫眼、淘票票、美团的智能选座移动客户端 (一)

1. 前言

  • 由于公司需要实现h5端的购票平台,我也是第一次接触vue,所以想留点学习记录下来,不过写着写着发现很难找到体验比较好的选座开源项目,所以干脆一口气写完了一整套,包括后端录入数据,接口和前端展示,以供大家一起讨论完善,项目已经完成,如果觉得有帮助,麻烦给我点个star?
  • 地址 :
    github


    gitee(码云)

2. 项目介绍

3. 座位项目导航

  • 移动端 seat-select

  • 后台控制端 seat-select-controller

  • 数据接口端 seat-select-api

  • 微信小程序 seat-select-wechat

  • 座位JSON结构解析

4. 移动端 seat-select

点击这里demo预览(请使用手机访问)

  • 座位图生成
  • 座位预览图生成
  • 座位留空检测
  • 座位智能选择最优座位算法
  • 自适应影厅大小
  • 座位图左侧导航栏的过道检测
  • 普通座位的选择逻辑
  • 情侣座位的选择逻辑

5.项目截图

微信小程序版本 请使用微信扫描二维码查看demo

以下是H5版本

6. 智能选座示例

以下为多个影厅的智能选座gif图演示

7. 空位检测示例

以下为空位检测逻辑gif图演示

8. 项目依赖组件

该项目引用到的外部常用组件

  1. amfe-flexible

  2. vue-touch

  3. better-scroll

  4. axios

9. 目录结构

.public
├── index.html
└── mock└── seatLove.json(mock数据在这里).src
├── App.vue --(入口组件)
├── assets --(静态文件)
│   ├── images
│   │   └── loading.gif --(加载图片)
│   └── stylus
│       ├── golbal.styl --(全局styl)
│       └── reset.styl --(移动端重写CSS)
├── components --(公用组件)
│   ├── Header.vue --(头部公用组件)
│   └── loading.vue --(载入公用组件)
├── http.js (axios工具类)
├── main.js (vue入口js)
├── pages --(组件目录)
│   └── hallseat
│       ├── HallSeat.vue --(选座父组件)
│       └── component --(选座子组件目录)
│           ├── ConfirmLock.vue --(确认选择组件)
│           ├── PlanDetail.vue --(电影信息组件)
│           ├── QuickSelectTab.vue --(智能选座组件)
│           ├── SeatArea.vue --(座位图生成组件)
│           └── SelectedTab.vue --(已选座展示组件)
└── router.js

10. 讨论

欢迎加群讨论: 3544395

本文标签： 使用vue编写猫眼淘票票美团的智能选座移动客户端 (一)

版权声明：本文标题：使用vue编写猫眼、淘票票、美团的智能选座移动客户端 (一) 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732361889h1535451.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。