基于uniapp的家居类购物小程序项目总结

前言

乐居是一款基于uniapp的家居类购物小程序，总共有20多个页面，写得很累。

项目介绍

项目结构

pages页面

• home -首页

• address -地址页
  • addressDetail -编辑地址页
• category -分类页
  • goodList -商品列表页
• confirmOrder -订单确认页
  • pay -订单支付页
• find -发现页
  • articleDetail -文章详情页
• mine -个人信息页
  • articleCollect -文章收藏页
  • productCollect -商品收藏页
  • cart -购物车页
  • changeInfo -修改个人信息页
  • login -登录页
  • register -注册页
  • order-订单页

需求实现

home页

介绍

home页分为顶部轮播图，四个分类部分，限时活动提示，商品的新品推荐，商品的热门推荐几个部分。

• 轮播图

  • 使用swiper标签循环渲染数据实现

• 商品的新品推荐

  • 使用scroll-view标签实现左右滑动

    

• 其余数据v-for渲染实现

category页

介绍

category页分为四个分类：创意，风格，饰品，灯具。点击跳转至goodList商品列表页。goodList页包含顶部导航栏：新品，销量，价格。

实现

• goodList页面onLoad时接收从category传来的id,调接口查找对应分类的商品列表，渲染在页面上。
• 导航栏点击“新品”时，展示全部商品数据；点击“销量”和“价格”时，分别按销量和价格排序。
  • 给tabbar添加tap事件，每次点击先将排序方式，是否降序，起始页，product列表都设置为初始值；再设置对应的以上参数，重新渲染数据。

下图按价格升序排列：

productDetail页

介绍

在goodList页时，点击单个商品跳转到对应的productDetail商品详情页，productDetail页展示了商品的图片集，价格等数据，同时还可进行收藏，加入购物车，购买。

实现

• 在goodList页点击商品时传递商品id，在productDetail页根据id调接口查询商品信息，展示数据。

• 点击收藏按钮，如果本地没有收藏，则将整条商品数据存储到localStorage；如果本地有收藏，则push进收藏数组里，同时要判断该商品是否已存在，如果已存在再次点击则是取消收藏，使用splice移除该数据。

• 进入页面加载时，需要取出localstorage中的收藏数据渲染。

  • onLoad时，判断本地是否有收藏列表。有则和所有商品数据对比，find出收藏的商品数据，设置对应的状态为true。

• 所有的收藏操作都需要在登录状态下才能操作。使用mixins封装一个检测本地是否有token值的函数，在productDetail页面加载时引入，如果未登录，不执行后面的语句。

• 点击加入购物车时，调addCart接口

• 点击购买，弹出遮罩层，选择对应的商品规格，调生成确认单的接口，然后跳转到订单确认页进行地址的添加和订单支付。

  补充：数组的substring方法，用于提取字符串中介于两个指定下标之间的字符。stringObject.substring(start,stop)。

  返回值是一个新的字符串，该字符串值包含 stringObject 的一个子字符串，其内容是从 start 处到 stop-1 处的所有字符，其长度为 stop减 start。

confirmOrder页

介绍

当在productDetail页直接点击购买，或在mine页的购物车和订单页未付款内点击购买，会跳转到confirmOrder订单确认页。在订单确认也可进行选择地址。之后点击购买跳转到pay页面。

实现

• onLoad时根据传进的orderId调接口获取预订单，将确认单的数据展示在页面上。

• 选择地址时引入了省市区三级联动插件，跳转到address页面。

  • 点击选择添加地址跳转到addressDetail页，选择新地址后返回address页

  • 在address页点击收货地址后back到订单确认页，当前的订单确认页显示选择的新地址

    

• 在confirmOrder页点击继续付款跳转至pay页面，选择对应的付款方式，调支付接口即可完成模拟支付。

find页

介绍

find页包含“精选文章”和“品牌列表”两个模块。在“精选文章”中可点击查看文章详情，也可进行收藏。

实现

• 调接口渲染文章数据显示在页面上。
• 文章收藏。
  • 由于文章数据是多条，所以和商品收藏步骤有些不同。调接口获得文章数据的返回值res后，先循环遍历每条文章数据，动态添加isCollect属性。
  • 点击收藏按钮，查找本地文章收藏，如果本地没有，直接存储；如果本地有，使用find查找是否存在该数据，如果有，再次点击是取消收藏，如果没有，则push进数组，收藏成功。
  • 页面加载时，需要渲染收藏数据。先从本地取出文章收藏，如果存在则循环遍历，将已收藏的文章isCollect设置为true

login页&register页

介绍

登陆之前先进行注册，调取注册接口，传递用户名，手机号头像等数据。注册成功跳转到登录页，传递用户名和密码。

实现

• 注册页需要传递的数据有手机号，密码，用户名，昵称，头像。初始是默认头像，可在注册页点击修改头像。

  • 在H5平台使用uni.chooseImage,成功后将临时路径上传到服务器，再将返回的图片路径展示在页面上。
  • 在小程序端使用uni.chooseMedia

• 在login页输入用户名和密码，调登陆接口，将返回的token值存储到本地，登陆成功后返回个人信息页。

mine页

介绍

mine页包含个人信息，我的订单，商品收藏，文章收藏，购物车等部分。

实现

• 刚进入页面时会通过混入mixin查询本地是否存在token，来判断用户是否登录，未登录会提示用户登录。

• 页面加载时调接口获取用户信息，渲染在页面上。点击设置跳转到changeInfo页面，可修改用户的手机号，昵称，头像等信息。

• 在商品收藏和文章收藏，点击进入收藏页获取数据渲染

• 点击购物车进入cart页面，调接口获取购物车数据渲染，引入第三方插件实现购物车的单选和全选，点击购买进入订单确认页。

• 点击我的订单进入order页面，调接口获取全部订单数据后，在过滤器中根据status判断订单的状态是未付款还是已付款等等。

  

• 点击tab栏传递index实现tab栏的切换

• 待付款页面有“取消订单”和“付款”按钮，已收获页面有“确认收货”按钮。

  • status对应值：

  •                0 ==> 待付款
     *             生成订单后用户可以: 取消订单，付款 
     *             1 ==> 待发货
     *             用户已付款 ==> 等待商家发货
     *             2 ==> 已发货
     *             等待用户收货  此时用户可以进行收货或者退货
     *             此时界面展示两种状态 一种是退货 一种是退货中  根据字段isReturn进行判断 0 退货申请 1 退货中
     *             3 ==> 已完成
     *             4 ==> 已退单
     *             3 和 4 的数据在一起展示
     *             用户收货或退货之后 订单就变成已完成的状态，此时分为两种情况
     *             第一种是订单已完成 
     *             第二种    订单中的商品全部退完 退完之后订单状态自动变更成为已退单的状态
     *             5 ==> 无效订单
    

tips:reduce() 方法对数组中的每个元素按序执行一个提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

arr.reduce((prev,cur,index,arr)=>{ },init)

• arr: 表示将要原数组
• prev:表示上一次调用回调时的返回值，或者初始值init
• cur:表示当前正在处理的数组元素
• index:表示正在处理的数组元素的索引，若提供init值，则索引为0，否则索引为1
• init: 表示初始值