项目介绍
栖舍是一款面向住宿预订场景的微信原生小程序。与常见「按房型下单、入住再分房」的模式不同,它把每一间物理房间做成独立卡片,用户可按房号、楼层、景观与价格直接挑选并预订,让「选房」真正发生在下单之前。
产品定位
栖舍定位为轻量、可演示的住宿预订前端产品,覆盖精品民宿、设计酒店、服务公寓与长租公寓等多元业态。当前以杭州为默认城市,内置多家风格各异的示例酒店,适合作为课程作业、产品原型或交互演示使用。项目纯前端实现,无后端依赖,订单与房态通过本地存储模拟,打开即可体验完整预订链路。
核心特色:单房号独立卡片
传统预订往往只能选「大床房」「双床房」等房型;栖舍则把每一个具体房号(如 301、1208)作为独立商品展示。用户可查看该房的朝向、楼层、设施与营销角标,收藏、浏览记录与评价也均绑定到具体房号,减少「订到的房间和想象不一致」的落差。
主要功能
发现与筛选:首页轮播、分类入口(钟点房 / 日租 / 长租 / 特惠房)、城市切换与搜索;酒店详情支持筛选排序、楼层分区与多选对比。
预订闭环:选房 → 填写入住信息 → 支付确认 → 订单管理;下单占房、退款释房,房态随本地存储实时变化。
会员与营销:优惠券、积分、收藏、浏览历史;特价、秒杀、新人立减、拼团等角标可挂到具体房号。
差异化体验:四家示例酒店分别采用暖木民宿、极简设计、都市公寓、长租生活等主题视觉,强化品牌气质与场景氛围。
技术说明
基于微信原生小程序(WXML / WXSS / JavaScript)开发,页面与组件分层清晰:data/ 存放酒店、房源、订单等模拟数据,components/ 提供房卡、轮播、筛选等可复用组件,utils/ 负责日期、筛选、本地存储等逻辑。使用微信开发者工具导入项目目录即可编译预览,AppID 可用测试号或游客模式。
适用场景
适合需要展示「精准选房」交互的产品演示、教学案例,或作为住宿类小程序的前端脚手架。后续若接入真实接口,只需替换数据层与支付、登录等能力,即可向生产环境演进。