Taro跨端开发探索18——商城小程序个人中心页面开发

前言

昨天我们已经开发完成了购物车页面的开发，商城小程序现在还剩下订单和个人中心的页面开发。其他的页面如：订单详情页、售后页面等页面大家可以按照商品详情页和商品列表页面的逻辑进行开发。

需求分析

首先我们对于今天探索的内容：个人中心进行需求分析
我们可以看到，京喜的个人中心页面如下所示

可以分为以下几个功能：

1. 当前用户信息展示
2. 当前用户的余额核酸账户展示
3. 订单信息与跳转到订单列表
4. 我的服务信息
5. 京东自有逻辑组件
6. “大家都在买”推荐商品列表

在一开始的封装统一的restful接口文章和验证用户是否登录的文章中。我们在个人中心完成了获取当前人用户名的功能，下面我们来实现 2、3、4

实现逻辑

看过我之前文章的读者其实在看到这个页面的时候应该就有了自己的思路。我简单介绍一下实现我的逻辑。
我们将上方要实现的功能放在一个组件中（因为几个比较简单，大部分是作为展示和跳转的工作）。
在用户进入页面的时候请求后端获取订单提示、推荐商品、用户余额的接口。如果用户有待付款的订单就在对应的图标上显示红点，然后在下方根据推荐的商品数据渲染数据。
我们这里暂时没有后端接口，我先将对应的数据写死，最终我的的代码如下

实现代码

import { Text, View } from "@tarojs/component