前言

花了1个半月做了我的毕设——酒店小程序，每天心情都随着bug的调试起伏不定。期间，踩了不少坑，多亏各种经验贴，我才爬了出来。因此，来这里与记录自己的经验，希望给大家提供避坑参考与灵感！所写内容主要包括需求分析，UI设计，技术实现（vant组件的配置与使用、云函数如何写、云存储怎么用、时间戳的处理、各种渲染、页面传值等等）。
当然也是为了抛转引玉，路过的朋友们有好的数据处理方法与功能优化点，欢迎评论留言！

系统介绍

系统包括前台+后台，皆在小程序端实现。通过云开发控制平台以及云函数调用，实现用户角色权限的分配，使用云数据库进行数据的存储。酒店员工在后台只可对所登录账号下的门店信息，进行相应的增删改查，即各个酒店的不同门店信息是独立维护的。由于申请的是个人开发账号，所以无法调用微信支付接口，这里我将用模拟对话弹窗来代替微信支付的操作。

功能展示

本系列前两篇为功能展示，之后将逐步搭建过程。（由于上传gif的大小有限制，所以部分业务流程将分段展示）

前台

通过对目前头部酒店集团酒店小程序的分析，如华住，凯悦等，结合自身的住宿体验，加上在互联网旅游公司的实习经历，我将前台设计为3个tab页——【订房】，【服务】，【我的】。
【订房】：由于订房为最核心以及最基础的功能，所以单独设置，并且将用户进入小程序的默认启动页设置为订房页。
【服务】：将连wifi、点餐、活动报名、旅游信息推荐功能放入服务页，并且需要输入对应的门店号，才可成功进入。
【我的】：包括我的订房、我的点餐、我的活动、致朵友（酒店品牌介绍）

（1）订房

a.搜索与浏览酒店、房间信息

• 点击【搜索酒店】，只有目的城市与住宿日期均不为空，才可成功跳转，否则会对应跳出相应提示。
• 当搜索内容为空时，为了降低用户的失望感，当搜索的目的城市下未开设酒店，我设置了一首诗作为搜索结果作为展示。
  
  b.创建房间订单
• 点击【确认订单】
  若房间数量，到店时间，入住姓名，联系电话均不为空，备注可为空，并且可使用房间数量大于需求房间数，才可成功跳转；
  否则会跳出提示“XXX还未填写哦~” 或 “还剩X间房”；
  

（2）进入服务页及连wifi

• 点击【确定】，只有输入的内容不为空，且是已经存在且正确的门店号，才可成功跳转，否则会跳出对应提示。
• 连接wifi是从csdn上找的一个连接wifi的方法，但是目前暂未成功，之后会贴出代码，希望路过大佬可帮看下~
  

（3）点餐

a.浏览菜品信息

• 为了便于用户点餐，以及分析美团上部分餐饮店的设置后，将菜单分为元气早点、风味主食、甜品/小食、限定饮品这四类
• 用户点击【去结算】，只有购物车的值不为空才可成功跳转，否则会跳出提示。
  
  b.创建菜品订单
• 用户点击【确认订单】，只有备注内容为空，可成功跳转，否则会跳出提示有信息未填。
  

（4）报名活动

这是属于特殊设计的功能。

• 设计这一功能，是为了增加用户粘度，希望与住客建立更多情感上的联系。这个功能强调一种即兴的感觉，所以根据活动的开展日期分类展示，以今日活动，明日活动，全部活动来分类。
• 在今日活动中，为了将活动状态标记清楚，根据不同场景，设置了4种活动标记：已结束，进行中，剩余名额已满，剩余名额X个。
  
• 当活动报名成功后，活动剩余名额会发生变更，再次点击【我要报名】，会跳出“已经报名过”的提示。
  

（5）旅游攻略推荐

因为酒店的用户主要来源于游客和出差的人，因为住宿与旅游是不可分割的，所以还设置了玩乐信息推荐功能。
a.地道美食

b.小众景点

c.私藏攻略

（6）我的订单

在我的订单这里，希望不仅可以起到展示订单的作用，还可以达到一种宣传，告诉用户还有点餐，报名活动功能，因此将房间订单、菜品订单、活动订单拿出来展示。当用户点击进入后，对应展示该用户的相关订单。

a.我的订房
订单分类设置为待使用、已完成，全部

• 在待使用中，展示的是未核销且入住时间大于用户现在手机端时间的订单。限制订单的取消时间，当点击【取消】时，若此时用户手机端的时间在入住日期的18:00前，则可以正常取消；否则跳出超出取消时间的提示。点击【去使用】，跳去订单详情页，订单标记为待使用。
• 在已完成中，展示的是已核销的订单，对应订单标记展示已核销；以及未核销且入住时间小于用户现在手机端时间的订单，对应订单标记展示未核销。
• 在全部中，展示的是所有订单，订单标记是待使用和已完成。

b.我的活动
订单分类设置为待使用、已参加、全部

• 在待使用中，展示的是未核销且活动结束时间大于用户现在手机端时间的订单。支持随时取消活动报名，点击【取消】，跳出一个挽留的对话框。点击【去使用】，跳出活动详情，因为整体活动报名是一种随性的感觉，所以这里的订单详情展示是以弹出层的形式展示。订单标记为待参加。
• 在已参加中，展示的是已核销的订单，对应订单标记展示已核销；以及未核销且活动结束时间小于用户现在手机端时间的订单，对应订单标记展示未核销。
• 在全部中，展示的是所有订单，订单标记是待使用和已参加。
  
• 查看活动详情
  
  c.我的点餐
  订单分类设置为待使用、已完成、全部
• 在待使用中，展示的是未核销的订单。并且，为了减少用户随时取消订单对于已出菜品的影响，减少出现纠纷的情景，未设置取消订单按钮，当然对应在创建菜品订单时也给出了相应订单不可取消的提示。点击【去使用】跳转至订单详情页。
• 在已完成中，展示的是确认已被核销的订单，订单标记只有已完成。
• 在全部中，根据订单的核销状态，订单标记分别展示待使用和已完成。
  

（7）彩蛋

我是一个喜欢让用户感受到惊喜的人，所以在我的页面设计了一个小满月，并且以鹅黄色调，希望营造出温暖的感觉。并且在不同时间段点击【月亮】时，会对应跳出当下场景的一些话。





（前台功能就展示完啦！下篇会展示后台功能~）
真幸运这篇文章可以被你看到，一定是特殊的缘分~（还是我标题起的好哈哈哈）,快给我点个赞，啦啦啦！