微信小程序之美容商城

如果有用，记得点赞关注我哦

结果图：

在微信公众号新白者回复美容商城即可领取源码

一、作品设计

主要功能包括：首页中的主题选择和预约功能、技师中的搜索功能和预约服务项目和技师、我的页面中的添加地址和信息的功能。
主要页面有首页、技师、我的页面，如图所示：

流程图如下：

二、功能模块设计

美容商城主要包括三个页面：首页、技师、我的页面。
1、首页
包括推荐、美甲、美容、美发、美睫五个模块，可以选择要美容的项目然后进行预约，然后选择日期和时间，填写留言信息，预约成功。首页顶部运用了轮播图，顶部五个分类运用了条件渲染： wx:for，在页面中加入了点击事件，运用了bindscrolltolower属性，出发事件为当滚动到底部或者右部时触发，图片展示是通过image中的scr来指定所要加载的地址图片。当在首页点击预约时，页面将会跳转到预顶页面填写信息。
2、技师
包括搜索栏，在搜索栏中可以选择主题，然后需要修改地址的也需要选择，当地址和主题选好后就会有相应的推荐和距离自己有多远，选择完技师后就会进入技师详情页，然后就可以选择服务内容，预约之后就会跳转到预定页面，通过url地址跳转，在上方运用了搜索功能中的下拉菜单进行美甲，美容，美发，美睫搜索相关内容，进行到相应的页面跳转，通过数组casArray进行存储数据，通过遍历数组的索引进行获取，通过wx.navigateTo来跳转，下面内容栏通过scroll-view滚动视图来实现，添加bindscrolltolower中的loadMore属性来进行实现，内容的排版通过三个view来进行滑动。
3、我的
显示个人信息，包括昵称、姓名、电话、地址管理，在我的页面可以添加地址。
点击添加地址跳转到edit_addr页面进行姓名，电话，验证码，省，市，地址编辑保存，在省市中运用到了下拉列表的属性，通过bindcityPickerChange点击事件进行提交，验证码是通过预约电话的id号进行
获取到信息。在我的主页面中可以通过image图片里面的scr属性进行获取头像的信息图片，在右侧的昵称，姓名，电话，是通过调用userData里面的信息值存放在data.js中。