/hotel-searcher

搜索酒店信息

Primary LanguageJavaScript

酒店搜索

注意

易源这个接口已经无法正常工作了,表示很气愤,现在没有数据也没办法正常展示界面,大家就参照gif图上的内容发挥想象吧(滑稽)

介绍

请求接口为万维易源网的酒店API,链接如下

https://www.showapi.com/api/view/1653

UI使用ant design mobile,使用方式请自行搜索API文档

  实现功能:

  • 设置酒店筛选条件
  • 搜索、显示酒店列表
  • 展示酒店详情页
  • 展示房间列表及详情页
  • 酒店图片浏览
  • 查看酒店定位地图

 

由于酒店api接口中,关于订单的接口有问题,所以没有实现订单相关的功能,请见谅。

 

环境搭建

申请接口

详情在我的million-menus仓库有讲,可前往查看

https://github.com/crow-n/million-menus

 

修改项目参数

将项目克隆至本地后,将 src/request/hotel.js 文件中的 showapi_appidshowapi_sign参数

改为你申请的 appId密钥

 

启动项目

npm install 安装所有模块 npm start 开发环境下启动项目

建议在谷歌浏览器中运行,

虽然项目是自适应的,但还是更建议选择 iphone 6/ 7/ 8 的调试模式,展示效果会更好

 

项目展示

设置筛选条件

   

关键字二级菜单

   

查询到的酒店列表

   

酒店详情页-图片浏览,定位地图

   

酒店详情页-房间列表 及 房间详情页

   

酒店详情页-周边交通景点

 

最后

感谢各位能看到最后,如果觉得本项目做的还不错的,麻烦给个小星星支持一下,有什么问题也可以提出来探讨哦~