小兔鲜儿

生活消费分类信息案例ID：213893

李子杰

2 年经验· 苏州高盾科技有限公司

微信扫码沟通，客服可协助直接对接工程师；如当前档期不合，也可继续推荐相似案例作者。

案例介绍

项目描述：微信小程序应用，商城购物类
负责工作：项目前端开发
技术框架：UniApp、Uni-ui、Vue3、TypeScript
开发工具：Vscode、HBuilder X、Git
模块说明：
一、登录
描述：登录模块分为手机号快捷登录和账号密码登录，手机号快捷登录需要先通过wx.login()获取登陆凭证code，再通过button按钮的@getphonenumber获取到加密的手机号(encryptedData)以及iv，cod e、encryptedData、iv传入接口返回用户信息并保存用户信息后完成登录跳转首页。
二、首页( tabBar页 )
描述：上方为自定义导航栏，导航栏下方有商品轮播图海报、商品分类和推荐、猜你喜欢，商品分类点击对应分类跳转到 tabBar分类页展示对应类型数据，由于tabBar分类页也需要此轮播图海报，猜你喜欢也有多个页面底部展示，所以把他们封装成了公共组件；猜你喜欢组件使用了scroll-view滚动触底可继续加载商品，一次push10条数据。
三、分类( tabBar页 )
描述：顶部复用轮播图海报组件，分类展示为三层循环结构，左侧循环展示大类，点击大类右侧循环展示包含小类以及循环展示小类的部分商品，点击商品跳转商品详情页。
优化：数据多请求较慢，微信开发者工具生成骨架屏，优先加载骨架屏。
四、商品详情
描述：展示商品轮播图、商品简介价格、同类推荐等信息；底部操作栏吸底，操作栏有跳转购物车，客服，加入购物车，立即购买操作；点击加入购物车和立即购买展示商品多规格SKU选择器组件，选完规格后加入购物车或生成待支付订单。 paddingBottom解决。
五、购物车( tabBar页 )
描述：上方展示已加入购物车的商品，下方复用猜你喜欢组件展示；商品数量、选中状态的修改都会条用接口修改，底部全选、总价使用计算属性，用数组的every方法返回全选的选中状态，用数组reduce方法返回总价。
六、我的( tabBar页 )
描述：展示用户头像和订单分类，下方复用猜你喜欢组件；个人信息( 分包 )：个人信息维护页、地址列表维护页；订单( 分包 )：订单类表页以及对应操作按钮、商品支付信息确认页；