Commit 8a561f99 by 姜雷

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

parent a0eb0070
import { customerFetch } from './index'; import { customerFetch, ResponseDataEntity } from './index';
import Order from '@/types/Order/Order';
export class Params { export class Params {
/** 会员id */ /** 会员id */
...@@ -66,3 +67,103 @@ export const confirmPay = (data: ConfirmpayParams) => ...@@ -66,3 +67,103 @@ export const confirmPay = (data: ConfirmpayParams) =>
url: '/consumeOrder/confirmPay', url: '/consumeOrder/confirmPay',
data: data, 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,
});
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;
import { ComponentClass } from 'react'; 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 { View, Text, ScrollView } from '@tarojs/components';
import { connect } from '@tarojs/redux'; import { connect } from '@tarojs/redux';
...@@ -18,6 +18,8 @@ import { fetchAllOrder, fetchPayOrder } from '../../../api/order'; ...@@ -18,6 +18,8 @@ import { fetchAllOrder, fetchPayOrder } from '../../../api/order';
import Order, { AllOrderItem } from '../../../types/Order/Order'; import Order, { AllOrderItem } from '../../../types/Order/Order';
import { Customer } from '@/types/Customer/Customer'; import { Customer } from '@/types/Customer/Customer';
import { shareHandle } from '@/common/shareMethod'; import { shareHandle } from '@/common/shareMethod';
import useRechargeOrders from '@/hooks/useRechargeOrders';
import RechargeItem from '../components/RechargeItem/RechargeItem';
type PageStateProps = { type PageStateProps = {
orderList: StoreState; orderList: StoreState;
...@@ -86,18 +88,9 @@ class OrderList extends Component { ...@@ -86,18 +88,9 @@ class OrderList extends Component {
onPullDownRefresh() { onPullDownRefresh() {
console.log('in onPullDownRefresh'); console.log('in onPullDownRefresh');
const { this.getAllOrderHandle().then(() => {
orderList: { orderState }, Taro.stopPullDownRefresh();
} = this.props; });
if (orderState === '1') {
this.getPayOrderHandle().then(() => {
Taro.stopPullDownRefresh();
});
} else {
this.getAllOrderHandle().then(() => {
Taro.stopPullDownRefresh();
});
}
} }
getPayOrderHandle(lastOrderId?: number) { getPayOrderHandle(lastOrderId?: number) {
...@@ -186,76 +179,92 @@ class OrderList extends Component { ...@@ -186,76 +179,92 @@ class OrderList extends Component {
} }
fetchMoreList() { fetchMoreList() {
const { const {
orderList: { orderState, payList, allList }, orderList: { allList },
} = this.props; } = this.props;
console.log('in moreList ' + orderState); const itemIdx = allList.length - 1;
if (orderState === '1') { const orderIdx = allList[itemIdx].data.length - 1;
this.getPayOrderHandle(payList[payList.length - 1].id); console.log(itemIdx, orderIdx);
} else {
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() { render() {
const { const {
orderList: { orderState, payList, allList }, orderList: { allList },
userinfo,
} = this.props; } = this.props;
const [orderType, setOrderType] = useState(0); // 0 消费,1 充值
const reChargeOrders = useRechargeOrders(userinfo.customerId, 0, 10);
console.log(reChargeOrders);
return ( return (
<View className='OrderList'> <View className='OrderList'>
<View className='Tab'> <View className='Tab'>
<Text <Text
className={`Tab-item ${orderState === '1' ? 'active' : ''}`} className={`Tab-item ${orderType === 0 ? 'active' : ''}`}
onClick={() => this.toggleStateHandle('1')}> onClick={() => setOrderType(0)}>
待付款 消费
</Text> </Text>
<Text <Text
className={`Tab-item ${orderState === 'all' ? 'active' : ''}`} className={`Tab-item ${orderType === 1 ? 'active' : ''}`}
onClick={() => this.toggleStateHandle('all')}> onClick={() => setOrderType(1)}>
全部 充值
</Text> </Text>
</View> </View>
<ScrollView {orderType === 0 ? (
className='OrderList-Content' <ScrollView
scrollY className='OrderList-Content'
onScrollToUpper={this.refreshList} scrollY
onScrollToLower={this.fetchMoreList} onScrollToUpper={this.refreshList}
upperThreshold={-100} onScrollToLower={this.fetchMoreList}
lowerThreshold={70} upperThreshold={-100}
scrollWithAnimation lowerThreshold={70}
scrollTop={0}> scrollWithAnimation
{orderState === '1' scrollTop={0}>
? payList.map(order => ( {allList.map((allItem, index) => (
<OrderItem <View key={allItem.groupName} className='OrderList-Group'>
key={order.id} <View className='OrderList-GroupTitle'>
data={order} <View className='OrderList-GroupName'>
onGoDetail={this.goDetail} {allItem.groupName}
onPayHandle={this.goPayPage} </View>
/> {index === 0 && <Text>只保留最近三个月消费订单数据</Text>}
)) </View>
: allList.map((allItem, index) => ( {allItem.data.map(order => (
<View key={allItem.groupName} className='OrderList-Group'> <OrderItem
<View className='OrderList-GroupTitle'> key={order.id}
<View className='OrderList-GroupName'> data={order}
{allItem.groupName} onGoDetail={this.goDetail}
</View> onPayHandle={this.goPayPage}
{index === 0 && <Text>只保留最近三个月消费订单数据</Text>} />
))}
</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> </View>
{allItem.data.map(order => ( {/* {index === 0 && <Text>只保留最近三个月充值订单数据</Text>} */}
<OrderItem
key={order.id}
data={order}
onGoDetail={this.goDetail}
onPayHandle={this.goPayPage}
/>
))}
</View> </View>
))} {reChargeItem.data.map(order => (
</ScrollView> <RechargeItem key={order.id} data={order} />
))}
</View>
))}
</ScrollView>
)}
</View> </View>
); );
} }
......
...@@ -13,14 +13,14 @@ export interface StoreState { ...@@ -13,14 +13,14 @@ export interface StoreState {
} }
const INITIAL_STATE = { const INITIAL_STATE = {
orderState: '1', orderState: 'all',
payList: [], payList: [],
allList: [], allList: [],
}; };
export default function OrderList( export default function OrderList(
state: StoreState = INITIAL_STATE, state: StoreState = INITIAL_STATE,
actions: Actions actions: Actions,
) { ) {
switch (actions.type) { switch (actions.type) {
case TOGGLE_ORDER_STATE: case TOGGLE_ORDER_STATE:
......
.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;
}
}
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;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment