Play魔盒

此项目是基于uniapp开发的微信小程序，相当于是一个在线购物小程序平台，用户可以根据积攒的魔晶进行兑换商品，也可以直接购买，相较于购物平台App更轻便，此项目是基于微信小程序 + u-view + vue2 + scss + websocket + .WXML + WSXX + Vuex 等技术栈进行开发。

1.登录模块

包含手机号登录和微信登录，手机号登录获取验证码即可登录，后端会通过服务器给我们返回一个token令牌以便后续验证身份访问页面使用，如果没有携带token则会请求失败。同时加了一些判断，必须选择同意协议才可以进行登录，手机登录页面必须输入正确的手机号才能够进行验证码获取，验证码获取60秒内验证码获取被禁用，60秒后重新获取

 2.商城模块

 （1）商城模块可以根据分类进行向后端请求分类信息并渲染页面，也可以根据当前分类进行综合人气分类，同时可以对分类的商品进行价格升序降序排列，点击去购买可以到达指定商品的详情页查看详情，到达详情页面，可以选择数量进行兑换，存取的数量可以通过路由传参，也可以通过存取本地存储，到达提交订单页面，订单页面会根据传送过来的数量和商品id向服务器发送请求，响应获取当前商品的详细信息，然后通过计算价格和数量得到总价并渲染页面

（2）选择兑换方式可以使用魔晶兑换，也可以使用现金支付，点击去支付会返回一个支付宝form表单，由于微信小程序的安全协议这里不能够进行页面渲染，需要新建一个html文件，在body中放入服务器返回的表单，运行至浏览器，就可以跳转支付页面，输入账号密码进行支付，当然这里的账号也是虚拟的，但是到后续上线后会使用真实的接口进行支付。

（3）选择地址有两个模块，如果用户存在收货地址地址并且有默认地址，那么进入页面就会向服务器发送当前用户id，后台会返回当前用户所有的地址并会自动显示默认地址，如果不想使用当前默认地址，可以点击地址会跳转地址选择页面，用户可以点击任意一个地址并自动返回提交页面，此时页面就会出现你点击的收货地址(可以是非默认收货地址)并进行提交订单，如果没有地址或者没有默认地址则会显示请选择收货地址，点击请选择收货地址，会跳转到选择地址页面，选择一个地址即可自动返回订单页面进行提交订单，

（4）同时地址页面有添加地址，编辑地址和删除地址功能，添加地址填入相应的地址信息发送添加请求即可，编辑地址有三级联动选择省市区，也可以编辑默认收货地址，当选择任意一个地址为默认地址之后，会向服务器发送当前地址状态，同时会遍历所有的收货地址，除当前地址其余全部地址状态全部改为非默认进行向服务器发送编辑请求，这样其他的默认地址就会变成非默认地址，只有当前的地址会变成默认地址。

（5）删除地址是根据当前地址对象id向服务器发送删除请求并携带id，这样服务器可以根据传送的地址id在数据库进行相应的删除以达到删除地址的目的。

 

3. 首页模块

首页主要包含商品信息，同时还有抽奖页面可以抽取奖品，商品信息就是进入页面在onLoad生命周期函数中向服务器发送首页商品信息请求，然后通过响应回来的信息，进行文字图片渲染，在抽奖页面是通过生成随机数和多个样式同时设置一个定时器，多长时间生成随机数，可以通过设置随机数的范围来控制中奖概率，比如一共五个奖品，只设置1-5的随机数，那么中奖概率就是100%,每次都可以中取一个奖品，但如果设置1-100的随机数，那么中奖的概率就会缩小到5%,同时生成一个弹窗，来渲染随机数对应商品的信息。表示是否中奖。

4.我的模块

（1）我的模块主要板块是修改个人信息和websocket实时通信来通知平台信息和系统信息，以及订单信息，只要有订单信息产生也就是有form表单返回，跳转页面进行支付就会产生一条订单记录，订单通知就会收到一条通知信息并进行通知，在右上角的指环里就会有小红点，进入点击查阅，未读信息会显示黑色文字，已读信息显示灰色信息，点击之后黑色字体会变为灰色字体，订单通知数量会少一条通知信息，平台通知和系统通知也是如此，我的订单是根据当前用户id来请求获取所有订单信息，里面包含了未发货，已发货，待收货状态，分别有不同的状态id，进入默认显示全部订单，如需查看未发货等其他状态，点击上方tab栏向服务器发送响应状态id请求，进行数据渲染即可。

（2）我的服务包含收货地址，我的盒柜，系统设置，联系客服和关于我们，收货地址，与提交订单模块选择收货地址是一个页面，可以进行添加、编辑、删除等操作，我的盒柜，联系客服，关于我们这些基本上是后台返回的文本和图片，基本上属于静态页面

 （3）系统设置中包含的绑定手机号和修改图像和昵称，这修改头像用到了u-view中的上传文件组件，可以选择图片并以formData形式向服务器发送请求，并可以接收到修改信息成功，修改昵称也是如此，需要注意的是发送请求必须要携带userId也就是用户id，不然服务器不知道你要修改的是哪个用户的个人信息。绑定手机号如果你是通过手机号登录的，则会自动绑定并渲染在这里，如果是微信登录则需要绑定手机号，其就是输入你要绑定的手机号点击获取验证码向服务器发送手机号信息，后台会对手机号进行数据库存储同时返回一个userId，和手机号的信息，以及验证码，后续就可以直接通过当前手机号进行登录。