修改订单页面,添加充值订单显示

src/api/order.ts

-import { customerFetch } from './index';
+import { customerFetch, ResponseDataEntity } from './index';
+import Order from '@/types/Order/Order';
 
 export class Params {
   /** 会员id */
@@ -66,3 +67,103 @@ export const confirmPay = (data: ConfirmpayParams) =>
     url: '/consumeOrder/confirmPay',
     data: data,
   });
+
+type RechargeParams = {
+  customerId: number;
+  lastOrderId?: number;
+  pageSize?: number;
+};
+
+export type RechargeOrder = {
+  /** 充值金额 */
+  actualAmount: number;
+
+  /** 充值后金额 */
+  afterAmount?: number;
+
+  /** 区域id */
+  areaId: number;
+
+  /** 区域名称 */
+  areaName: string;
+
+  /** 充值前金额 */
+  beforeAmount?: number;
+
+  /** 业务类型 APP充值=01  后台充值=02 后台退款=03 割接数据=04 后台平账记录=05 */
+  businessType?: string;
+
+  /** 订单完成时间 */
+  completeAt?: string;
+
+  /** 充值时间 */
+  createAt?: string;
+
+  /** 会员帐号 */
+  customerId: number;
+
+  /** 会员名称 */
+  customerName: string;
+
+  /** 会员手机 */
+  customerPhone: string;
+
+  /** 失败原因 */
+  failReason?: string;
+
+  /** 充值赠送豆数量 */
+  giveMoney?: number;
+
+  /** 操作人 */
+  handler?: string;
+
+  /** 主键id */
+  id?: number;
+
+  /** 操作类型 1入账 2出账 */
+  operType?: string;
+
+  /** 运营商Id */
+  operateId: number;
+
+  /** 运营商名称 */
+  operateName: string;
+
+  /** 订单号 (xx：线下,wx：微信支付,zfb：支付宝)+年月日时分秒随机数5位 */
+  orderNum: string;
+
+  /** 订单状态(1:waitingPay待付款、2:paying支付中、3:success支付成功、4:failure支付失败 */
+  orderState?: string;
+
+  /** 支付类型(1:线下支付 2：微信支付 3 ：支付宝支付 4:京东支付 5:招行一网通支付 6:艾米币 7:专用豆 8通用豆) */
+  payType?: string;
+
+  rechargeRemark: string;
+
+  /** 充值赠送服务id */
+  serviceId?: number;
+
+  /** 充值赠送服务名称 */
+  serviceName?: string;
+
+  /** 更新时间 */
+  updateAt?: string;
+};
+
+export type RechargeOrderItem = {
+  data: RechargeOrder[];
+  groupName: string;
+  sortNum: number;
+};
+
+type RechageResponse = {
+  data: RechargeOrderItem[];
+};
+
+export const fetchRechargeOrders = (
+  data: RechargeParams,
+): Promise<ResponseDataEntity<RechageResponse>> =>
+  customerFetch({
+    url: '/dcxy/app/rechargeOrder/pageAllListRecharge',
+    data,
+  });

src/hooks/useRechargeOrders.ts

+import { useEffect, useReducer } from '@tarojs/taro';
+import { fetchRechargeOrders, RechargeOrderItem } from '@/api/order';
+import Actions from '@/types/Store/Actions';
+
+const reducer = (state: RechargeOrderItem[], action: Actions) => {
+  switch (action.type) {
+    case 'updateRechargeOrders':
+      return action.payload;
+
+    default:
+      return state;
+  }
+};
+const useRechargeOrders = (
+  customerId: number,
+  lastOrderId: number,
+  pageSize: number,
+): RechargeOrderItem[] => {
+  const [state, dispatch] = useReducer(reducer, []);
+  const fetchData = (
+    customerId: number,
+    lastOrderId: number,
+    pageSize: number,
+  ) =>
+    fetchRechargeOrders({
+      customerId,
+      lastOrderId,
+      pageSize,
+    })
+      .then(res => {
+        dispatch({ type: 'updateRechargeOrders', payload: res.data });
+        return res.data;
+      })
+      .catch(err => {
+        console.log(err);
+      });
+
+  useEffect(() => {
+    fetchData(customerId, lastOrderId, pageSize);
+  }, [customerId, lastOrderId, pageSize]);
+
+  return state;
+};
+
+export default useRechargeOrders;

src/pages/Order/OrderList/OrderList.tsx

 import { ComponentClass } from 'react';
-import Taro, { Component, Config } from '@tarojs/taro';
+import Taro, { Component, Config, useState } from '@tarojs/taro';
 import { View, Text, ScrollView } from '@tarojs/components';
 import { connect } from '@tarojs/redux';
 
@@ -18,6 +18,8 @@ import { fetchAllOrder, fetchPayOrder } from '../../../api/order';
 import Order, { AllOrderItem } from '../../../types/Order/Order';
 import { Customer } from '@/types/Customer/Customer';
 import { shareHandle } from '@/common/shareMethod';
+import useRechargeOrders from '@/hooks/useRechargeOrders';
+import RechargeItem from '../components/RechargeItem/RechargeItem';
 
 type PageStateProps = {
   orderList: StoreState;
@@ -86,18 +88,9 @@ class OrderList extends Component {
 
   onPullDownRefresh() {
     console.log('in onPullDownRefresh');
-    const {
-      orderList: { orderState },
-    } = this.props;
-    if (orderState === '1') {
-      this.getPayOrderHandle().then(() => {
-        Taro.stopPullDownRefresh();
-      });
-    } else {
-      this.getAllOrderHandle().then(() => {
-        Taro.stopPullDownRefresh();
-      });
-    }
+    this.getAllOrderHandle().then(() => {
+      Taro.stopPullDownRefresh();
+    });
   }
 
   getPayOrderHandle(lastOrderId?: number) {
@@ -186,76 +179,92 @@ class OrderList extends Component {
   }
   fetchMoreList() {
     const {
-      orderList: { orderState, payList, allList },
+      orderList: { allList },
     } = this.props;
-    console.log('in moreList ' + orderState);
-    if (orderState === '1') {
-      this.getPayOrderHandle(payList[payList.length - 1].id);
-    } else {
-      const itemIdx = allList.length - 1;
-      const orderIdx = allList[itemIdx].data.length - 1;
-      console.log(itemIdx, orderIdx);
+    const itemIdx = allList.length - 1;
+    const orderIdx = allList[itemIdx].data.length - 1;
+    console.log(itemIdx, orderIdx);
 
-      this.getAllOrderHandle(allList[itemIdx].data[orderIdx].id);
-    }
+    this.getAllOrderHandle(allList[itemIdx].data[orderIdx].id);
   }
 
   render() {
     const {
-      orderList: { orderState, payList, allList },
+      orderList: { allList },
+      userinfo,
     } = this.props;
+    const [orderType, setOrderType] = useState(0); // 0 消费,1 充值
+    const reChargeOrders = useRechargeOrders(userinfo.customerId, 0, 10);
+    console.log(reChargeOrders);
 
     return (
       <View className='OrderList'>
         <View className='Tab'>
           <Text
-            className={`Tab-item ${orderState === '1' ? 'active' : ''}`}
-            onClick={() => this.toggleStateHandle('1')}>
-            待付款
+            className={`Tab-item ${orderType === 0 ? 'active' : ''}`}
+            onClick={() => setOrderType(0)}>
+            消费
           </Text>
           <Text
-            className={`Tab-item ${orderState === 'all' ? 'active' : ''}`}
-            onClick={() => this.toggleStateHandle('all')}>
-            全部
+            className={`Tab-item ${orderType === 1 ? 'active' : ''}`}
+            onClick={() => setOrderType(1)}>
+            充值
           </Text>
         </View>
-        <ScrollView
-          className='OrderList-Content'
-          scrollY
-          onScrollToUpper={this.refreshList}
-          onScrollToLower={this.fetchMoreList}
-          upperThreshold={-100}
-          lowerThreshold={70}
-          scrollWithAnimation
-          scrollTop={0}>
-          {orderState === '1'
-            ? payList.map(order => (
-                <OrderItem
-                  key={order.id}
-                  data={order}
-                  onGoDetail={this.goDetail}
-                  onPayHandle={this.goPayPage}
-                />
-              ))
-            : allList.map((allItem, index) => (
-                <View key={allItem.groupName} className='OrderList-Group'>
-                  <View className='OrderList-GroupTitle'>
-                    <View className='OrderList-GroupName'>
-                      {allItem.groupName}
-                    </View>
-                    {index === 0 && <Text>只保留最近三个月消费订单数据</Text>}
+        {orderType === 0 ? (
+          <ScrollView
+            className='OrderList-Content'
+            scrollY
+            onScrollToUpper={this.refreshList}
+            onScrollToLower={this.fetchMoreList}
+            upperThreshold={-100}
+            lowerThreshold={70}
+            scrollWithAnimation
+            scrollTop={0}>
+            {allList.map((allItem, index) => (
+              <View key={allItem.groupName} className='OrderList-Group'>
+                <View className='OrderList-GroupTitle'>
+                  <View className='OrderList-GroupName'>
+                    {allItem.groupName}
+                  </View>
+                  {index === 0 && <Text>只保留最近三个月消费订单数据</Text>}
+                </View>
+                {allItem.data.map(order => (
+                  <OrderItem
+                    key={order.id}
+                    data={order}
+                    onGoDetail={this.goDetail}
+                    onPayHandle={this.goPayPage}
+                  />
+                ))}
+              </View>
+            ))}
+          </ScrollView>
+        ) : (
+          <ScrollView
+            className='OrderList-Content'
+            scrollY
+            onScrollToUpper={this.refreshList}
+            onScrollToLower={this.fetchMoreList}
+            upperThreshold={-100}
+            lowerThreshold={70}
+            scrollWithAnimation
+            scrollTop={0}>
+            {reChargeOrders.map(reChargeItem => (
+              <View key={reChargeItem.groupName} className='OrderList-Group'>
+                <View className='OrderList-GroupTitle'>
+                  <View className='OrderList-GroupName'>
+                    {reChargeItem.groupName}
                   </View>
-                  {allItem.data.map(order => (
-                    <OrderItem
-                      key={order.id}
-                      data={order}
-                      onGoDetail={this.goDetail}
-                      onPayHandle={this.goPayPage}
-                    />
-                  ))}
+                  {/* {index === 0 && <Text>只保留最近三个月充值订单数据</Text>} */}
                 </View>
-              ))}
-        </ScrollView>
+                {reChargeItem.data.map(order => (
+                  <RechargeItem key={order.id} data={order} />
+                ))}
+              </View>
+            ))}
+          </ScrollView>
+        )}
       </View>
     );
   }

src/pages/Order/OrderList/store.ts

@@ -13,14 +13,14 @@ export interface StoreState {
 }
 
 const INITIAL_STATE = {
-  orderState: '1',
+  orderState: 'all',
   payList: [],
   allList: [],
 };
 
 export default function OrderList(
   state: StoreState = INITIAL_STATE,
-  actions: Actions
+  actions: Actions,
 ) {
   switch (actions.type) {
     case TOGGLE_ORDER_STATE:

src/pages/Order/components/RechargeItem/RechargeItem.scss

+.RechargeItem {
+  position: relative;
+  box-sizing: border-box;
+  width: 702px;
+  margin: 20px auto;
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 19px 26px 15px;
+  font-size: 26px;
+  .RechargeItem-text {
+    height: 54px;
+    line-height: 54px;
+  }
+  .RechargeItem-price {
+    position: absolute;
+    top: 18px;
+    right: 26px;
+    font-size: 36px;
+  }
+  .RechargeItem-price.topay {
+    color: #ff4e4e;
+  }
+  .RechargeItem-toPay {
+    position: absolute;
+    top: 66px;
+    right: 26px;
+    font-size: 24px;
+    color: #6180f4;
+  }
+  .RechargeItem-payDone {
+    position: absolute;
+    width: 102px;
+    height: 94px;
+    right: 10px;
+    bottom: 10px;
+  }
+}

src/pages/Order/components/RechargeItem/RechargeItem.tsx

+import Taro from '@tarojs/taro';
+import { View, Text, Image } from '@tarojs/components';
+import payDoneImg from '../../../../images/order/dingdan_yiwancheng_img@2x.png';
+import './RechargeItem.scss';
+import { RechargeOrder } from '@/api/order';
+
+const RechargeItem = (props: { data: RechargeOrder }) => {
+  const {
+    data: { createAt, rechargeRemark, actualAmount, orderNum },
+  } = props;
+
+  return (
+    <View className='RechargeItem'>
+      <View className='RechargeItem-text'>
+        <Text>充值说明：</Text>
+        <Text>{rechargeRemark}</Text>
+      </View>
+      <View className='RechargeItem-text'>
+        <Text>充值时间：</Text>
+        <Text>{createAt}</Text>
+        <Image className='RechargeItem-payDone' src={payDoneImg} />
+      </View>
+      <View className='RechargeItem-text'>
+        <Text>订单编号：</Text>
+        <Text>{orderNum}</Text>
+      </View>
+      <View
+        className={`RechargeItem-price ${actualAmount >= 0 ? 'topay' : ''}`}>
+        ￥ {actualAmount}
+      </View>
+    </View>
+  );
+};
+
+RechargeItem.defaultProps = {
+  data: {
+    actualAmount: 0,
+    afterAmount: 0,
+    areaId: 0,
+    areaName: '',
+    beforeAmount: 0,
+    businessType: '',
+    completeAt: '',
+    createAt: '',
+    customerId: 0,
+    customerName: '',
+    customerPhone: '',
+    failReason: '',
+    giveMoney: 0,
+    handler: '',
+    id: 0,
+    operType: '',
+    operateId: 0,
+    operateName: '',
+    orderNum: '',
+    orderState: '',
+    payType: '',
+    rechargeRemark: '',
+    serviceName: '',
+    updateAt: '',
+  },
+};
+
+export default RechargeItem;