第12课：订单管理

布满荆棘的人生 2022-12-09 11:48 283阅读 0赞

知识点：

*  订单列表
 *  订单详情

### 添加订单列表 ###

订单列表是每个涉及到购买的 App 都会有的东西，这里就将开发一个功能比较全面的订单列表，订单一般涉及到几个状态的订单列表，订单的几个操作、状态变更，有的还会涉及到物流信息。

首先要添加一个第三方的库 npm install --save react-native-scrollable-tab-view。在个人中心把订单的跳转加上去，这里使用的是之前留的一个方法，可以直接使用。

![enter image description here][]

使用 tab 滚动的默认组件来显示头部的 tab 标签，这里可以给 tab 标签自定义一些样式，依然是将列表的每一项都自定义为一个共享的组件 OrderList。

//导入第三方组件
    import ScrollableTabView, { DefaultTabBar } from 'react-native-scrollable-tab-view'

这里可以把所有的方法都放在组件的 props 上，组件内部使用 this.props 就可以拿到传入的参数，这里为了方便管理把渲染列表放在方法里统一加公共的 props。

{/*列表tab*/}
    <ScrollableTabView
        initialPage={0}
        tabBarBackgroundColor="#fff"
        tabBarInactiveTextColor="#858385"
        tabBarActiveTextColor="#252426"
        tabBarUnderlineStyle={
       { backgroundColor: '#e86d78', height: px(4) }}
        renderTabBar={() => <DefaultTabBar />}>
        {this.renderList("待支付")}
        {this.renderList("待收货")}
        {this.renderList("已完成")}
        {this.renderList("已退货")}
    </ScrollableTabView>

renderList(title) {
      return <OrderList tabLabel={title} navigation={this.props.navigation} />
    }

![3f5a0790-28d5-11e8-af87-dd375eb9daa2][]

在列表组件中我们获取属于该状态的订单列表，这里使用一个假的数据来代替，记得在获取失败或者列表为空的时候给空列表添加一个没有订单的时候的显示文字，这里也是为了区别刚进入页面和请求结果为空两种状态。

//获取第一页的数据
    refresh() {
      this.pageIndex = 0;
      let list = [];
      try {
          for (let index = 0; index < 10; index++) {
              let expressList = [];
              list.push({
                  orderNo: index + 'no',
                  id: index,
                  orderStatusNm: this.props.tabLabel,
                  payableAmount: (120 + index) + ".00",
                  expressList: expressList,
              })
          }
      } catch (e) {
          toast(e.message)
      }
      if (list.length === 0) {
          //设置空列表的文字
          this.state.empty = "暂无订单"
      }
      this.setState({ list, empty: this.state.empty })
    }

再来做一个单项的组件，这里将所有块级内容都做成一个组件，在后面使用的时候会比较方便管理，订单详情页也方便调用统一的样式。

![enter image description here][enter image description here 1]

最后就是产品的组件了，这里我将产品竖着排列了，有需要的可以将产品横排，甚至可以分单个显示的样式和多个列表的样式。

![enter image description here][enter image description here 2]

最后来看看效果，这个界面就是使用假数据呈现的最终结果。

![624a6a50-29df-11e8-99e1-afadbd4b1092][]

我们把点击跳转到订单详情页加上。如果业务需要也可以把支付加在这里，只需要在点击支付的时候调起微信支付即可，这里有一个小技巧，如果支付或者其他操作成功了可以直接修改数据的状态，让数据的状态转化为真实的状态，没必要去直接刷新整个列表。

goDetail(orderNo) { 
       this.props.navigation.navigate('OrderDetail', {
            orderNo: orderNo
        });
    }

### 订单详情页 ###

在点击订单列表的时候跳转到详情页，这里新建一个详情页并加入到路由中，/src/order/detail.js：

![enter image description here][enter image description here 3]

根据样式开发一个相应的渲染内容，这里包括订单号以及下单时间、商品信息、订单支付金额、订单操作按钮几个部分。

![f6b902d0-29f0-11e8-ab7b-759e74634a02][]

使用 RN 提供的 Clipboard 可以简单的将字符串复制到剪贴板里。

//复制订单号
    copy(str) {
        Clipboard.setString(str);
        toast('复制成功');
    }

这里使用订单的支付逻辑完成支付参数的获取，随后调起微信客户端支付。

//支付
    async pay() {
       //请求下单
        //await reqest.post('/saleOrderApp/payOrder.do')
        let isInstalled = await isWXAppInstalled();
        if (!isInstalled) {
            toast('没有安装微信');
            return;
        }
        //调起微信
        // let res = await wxPay(data.paydata);
    }

我们将之前做好的 dialog 组件放入渲染方法中，在单击取消按钮的时候弹出取消操作的再确认层。

//取消订单
    cancel() { 
        this.refs.dialog.alert(null,"是否取消订单?",{
            txt:"放弃操作",
        },{
            txt:"取消订单",click:()=>{
                //request.post()
                toast('取消成功')
            }
        });
    }

电商中订单是一个很重要的部分，在之前的基础上可能还会有物流信息、退换货操作、疑难解答等几种形式的存在。在具体的开发中记得共用统一的组件，这样在修改样式的时候能够更简单方便，某些都会使用的方法也可以统一放在一个 API 文件中管理。

到这里基本的界面开发已经到一段落了，后面会讲一些在开发完 App 之后需要做的事情。

[enter image description here]: /images/20221123/17ebf626f3d747cbacf49536676f37af.png
[3f5a0790-28d5-11e8-af87-dd375eb9daa2]: /images/20221123/6388b9782d3a44eb9a895c87371a2da5.png
[enter image description here 1]: /images/20221123/7ca1f64a0e3540a78bf6b549007888be.png
[enter image description here 2]: /images/20221123/bfbeacefcab0416d83ad33d7d413e365.png
[624a6a50-29df-11e8-99e1-afadbd4b1092]: /images/20221123/9e9b87fa25474fddb377548579e86a8c.png
[enter image description here 3]: /images/20221123/0dd5995970b24b15bb6f233c9fec9c84.png
[f6b902d0-29f0-11e8-ab7b-759e74634a02]: /images/20221123/787b51f25a5740778805f74f1a2fea86.png