标签：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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。