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

掘金第一IKUN
903 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第24天，点击查看活动详情。

前言

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

需求分析

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

1650807201.png

可以分为以下几个功能：

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

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

实现逻辑

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

实现代码

import { Text, View } from "@tarojs/components";
import { useState } from "react";
import { AtAvatar } from "taro-ui";
import "./index.scss";
export default function User() {
  const [userInfo, setUserInfo] = useState({ name: "测试名称" });
  const [balanceInfo, setBalanceInfo] = useState({
    redCart: 999.87,
    coupon: 13,
    collect: 25,
    visitCount: 14,
  });
  return (
    <View className="user">
      <View>
        <Text>{userInfo ? userInfo["name"] : "暂无"}</Text>
      </View>
      <View>
        <Text>红包{balanceInfo.redCart}元</Text>
        <Text>优惠券{balanceInfo.coupon}张</Text>
        <Text>收藏{balanceInfo.collect}</Text>
        <Text>足迹{balanceInfo.visitCount}</Text>
      </View>
      <View>
        <Text>我的订单</Text>
        <Text>查看所有订单</Text>
        <View>
          <View className="atavatar">
            <AtAvatar image="https://jdc.jd.com/img/200"></AtAvatar>
            待付款
          </View>
          <View className="atavatar">
            <AtAvatar image="https://jdc.jd.com/img/200"></AtAvatar>
            待发货
          </View>
          <View className="atavatar">
            <AtAvatar image="https://jdc.jd.com/img/200"></AtAvatar>
            待收货
          </View>
          <View className="atavatar">
            <AtAvatar image="https://jdc.jd.com/img/200"></AtAvatar>
            退换/售后
          </View>
        </View>
      </View>
      <View>
        <Text>我的服务</Text>
        <View>
          <View className="atavatar">
            <AtAvatar image="https://jdc.jd.com/img/200"></AtAvatar>
            客户服务
          </View>
          <View className="atavatar">
            <AtAvatar image="https://jdc.jd.com/img/200"></AtAvatar>
            我的钱包
          </View>
          <View className="atavatar">
            <AtAvatar image="https://jdc.jd.com/img/200"></AtAvatar>
            投诉建议
          </View>
          <View className="atavatar">
            <AtAvatar image="https://jdc.jd.com/img/200"></AtAvatar>
            在线客服
          </View>
        </View>
      </View>
    </View>
  );
}

我们最终的效果如下，虽然样式有点丑，但是需要的功能都实现
1650810430(1).png

最后，我们在查看所有订单、待付款、待发货、待收货的view添加click监听事件

我们明天要实现订单列表的逻辑，在我的页面有跳转订单列表的逻辑，我们先定义几个值来确认跳转到订单页面之后，可以只显示对应的订单。
例如我们点击待发货区域时，跳转到订单的页面后，系统自动匹配到订单列表的待发货tab
我们订单的属性为tabKey,下面是对应关系

  • 全部订单：tabKey为空
  • 待付款：tabKey = 1
  • 待发货：tabkey = 2
  • 待收货：tabKey = 3 例如，待收货的跳转为
<View
    className="atavatar"
    onClick={() => {
      Taro.redirectTo({
        url: "/sub-query-pages/order-list/index?tabKey=3",
      });
    }}
    >
    <AtAvatar image="https://jdc.jd.com/img/200"></AtAvatar>
    待收货
</View>

结语

今天我们完成了商城小程序的个人中心页面开发，明天我准备探索确认付款页面的实现。
确认付款页面交互比较复杂，欢迎大家多多关注本系列文章。
在更新完4月更文的活动之后，我们从头开始，从零开始优化我的项目的所有样式和组件,到时候欢迎各位指出不足

avatar
文章
阅读
粉丝