从0到1用云开发+vant组件实现酒店小程序全栈开发（前台+后台），毕设经验分享，避坑指南！【点赞+收藏】
作者：互联网
第一篇：系统介绍及前台功能展示
前言
花了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）彩蛋
我是一个喜欢让用户感受到惊喜的人，所以在我的页面设计了一个小满月，并且以鹅黄色调，希望营造出温暖的感觉。并且在不同时间段点击【月亮】时，会对应跳出当下场景的一些话。
（前台功能就展示完啦！下篇会展示后台功能~）
真幸运这篇文章可以被你看到，一定是特殊的缘分~（还是我标题起的好哈哈哈）,快给我点个赞，啦啦啦！
标签：vant,展示,核销,用云,用户,避坑,订单,点击,活动 来源： https://blog.csdn.net/abcabc22/article/details/106247273