Skip to content

W
wx-school-app
Commit f12d52d1 by 姜雷
Options

改造订单页面

parent 8a561f99
Showing with 195 additions and 234 deletions
src/api/order.ts
...@@ -118,7 +118,7 @@ export type RechargeOrder = { ...@@ -118,7 +118,7 @@ export type RechargeOrder = {
handler?: string; handler?: string;
/** 主键id */ /** 主键id */
id?: number; id: number;
/** 操作类型 1入账 2出账 */ /** 操作类型 1入账 2出账 */
operType?: string; operType?: string;
......
src/pages/Order/OrderList/OrderList.tsx
import { ComponentClass } from 'react'; import { ComponentClass } from 'react';
import Taro, { Component, Config, useState } 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, useSelector } from '@tarojs/redux';
import OrderItem from '../components/OrderItem/OrderItem'; import OrderItem from '../components/OrderItem/OrderItem';
import './OrderList.scss'; import './OrderList.scss';
import { import { fetchAllOrder } from '../../../api/order';
toggleOrderState,
updatePayOrderList,
updateAllOrderList,
UpdateOrderParams,
} from './actions';
import { StoreState } from './store';
import { fetchAllOrder, fetchPayOrder } from '../../../api/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'; import RechargeItem from '../components/RechargeItem/RechargeItem';
import useRechargeOrders from './useRechargeOrders';
type PageStateProps = { import useConsumeOrders from './useConsumeOrders';
orderList: StoreState;
userinfo: Customer;
};
type PageDispatchProps = {
toggleOrderState: (state: String) => void;
updatePayOrder: (entity: UpdateOrderParams<Order>) => void;
updateAllOrder: (entity: UpdateOrderParams<AllOrderItem>) => void;
};
type PageOwnProps = {}; type PageOwnProps = {};
type PageProps = PageStateProps & PageDispatchProps & PageOwnProps; type PageProps = PageOwnProps;
type PageState = { type PageState = {
needRefresh: boolean; needRefresh: boolean;
...@@ -44,230 +27,154 @@ interface OrderList { ...@@ -44,230 +27,154 @@ interface OrderList {
state: PageState; state: PageState;
} }
@connect( const OrderList = () => {
({ OrderList, userinfo }) => ({ // constructor(props: PageProps) {
orderList: OrderList, // super(props);
userinfo, // this.state = {
}), // needRefresh: false,
dispatch => ({ // };
toggleOrderState(state: String) { // }
dispatch(toggleOrderState(state));
}, // componentWillMount() {
updatePayOrder(data) { // this.getAllOrderHandle();
dispatch(updatePayOrderList(data)); // }
}, // componentDidShow() {
updateAllOrder(data) { // const { needRefresh } = this.state;
dispatch(updateAllOrderList(data)); // if (needRefresh) {
}, // this.getAllOrderHandle();
}), // }
) // }
class OrderList extends Component {
config: Config = { const onPullDownRefresh = () => {
navigationBarTitleText: '订单',
enablePullDownRefresh: true,
};
constructor(props: PageProps) {
super(props);
this.state = {
needRefresh: false,
};
}
onShareAppMessage = shareHandle;
componentWillMount() {
this.getPayOrderHandle();
this.getAllOrderHandle();
}
componentDidShow() {
const { needRefresh } = this.state;
if (needRefresh) {
this.getPayOrderHandle();
this.getAllOrderHandle();
}
}
onPullDownRefresh() {
console.log('in onPullDownRefresh'); console.log('in onPullDownRefresh');
this.getAllOrderHandle().then(() => { this.getAllOrderHandle().then(() => {
Taro.stopPullDownRefresh(); Taro.stopPullDownRefresh();
}); });
} };
getPayOrderHandle(lastOrderId?: number) {
const { userinfo, updatePayOrder } = this.props;
return fetchPayOrder(
lastOrderId
? {
customerId: userinfo.customerId,
pageSize: 10,
lastOrderId,
}
: {
customerId: userinfo.customerId,
pageSize: 10,
},
)
.then(res => {
console.log(res);
updatePayOrder({ list: res.data, lastOrderId: lastOrderId });
})
.catch(console.error);
}
getAllOrderHandle(lastOrderId?: number) {
const {
userinfo: { customerId },
updateAllOrder,
} = this.props;
return fetchAllOrder(
lastOrderId
? {
customerId: customerId,
pageSize: 10,
lastOrderId,
}
: {
customerId: customerId,
pageSize: 10,
},
)
.then(res => {
console.log(res);
updateAllOrder({ list: res.data, lastOrderId: lastOrderId });
})
.catch(console.error);
}
goPayPage(data) { const goPayPage = data => {
this.setState({ // this.setState({
needRefresh: true, // needRefresh: true,
}); // });
this.$preload({ id: data.id }); this.$preload({ id: data.id });
Taro.navigateTo({ Taro.navigateTo({
url: '/pages/Order/OrderPay/OrderPay', url: '/pages/Order/OrderPay/OrderPay',
}); });
} };
goDetail(data) { const goDetail = data => {
this.setState({ // this.setState({
needRefresh: false, // needRefresh: false,
}); // });
this.$preload(data); this.$preload(data);
Taro.navigateTo({ Taro.navigateTo({
url: '/pages/Order/OrderDetail/OrderDetail', url: '/pages/Order/OrderDetail/OrderDetail',
}); });
} };
toggleStateHandle(type: string) {
const {
toggleOrderState,
orderList: { payList, allList },
} = this.props;
if (type === '1' && payList.length === 0) {
this.getPayOrderHandle();
}
if (type === 'all' && allList.length === 0) {
this.getAllOrderHandle();
}
toggleOrderState(type);
}
refreshList() {
console.log('in refreshList');
// Taro.startPullDownRefresh({
// success: this.onPullDownRefresh,
// });
}
fetchMoreList() {
const {
orderList: { allList },
} = this.props;
const itemIdx = allList.length - 1;
const orderIdx = allList[itemIdx].data.length - 1;
console.log(itemIdx, orderIdx);
this.getAllOrderHandle(allList[itemIdx].data[orderIdx].id); // const { allList } = useSelector(
} // (state: { OrderList: OrderStoreState }) => state.OrderList,
// );
const userinfo = useSelector(
(state: { userinfo: Customer }) => state.userinfo,
);
const [orderType, setOrderType] = useState(0); // 0 消费,1 充值
const [consumenLastId, setConsumenLastId] = useState(0);
const consumeOrders = useConsumeOrders(
userinfo.customerId,
consumenLastId,
10,
);
const fetchMoreConsumeOrders = () => {
const itemIdx = consumeOrders.length - 1;
const orderIdx = consumeOrders[itemIdx].data.length - 1;
setConsumenLastId(consumeOrders[itemIdx].data[orderIdx].id);
};
render() { const [rechargeLastId, setRechargeLastId] = useState(0);
const { const rechargeOrders = useRechargeOrders(
orderList: { allList }, userinfo.customerId,
userinfo, rechargeLastId,
} = this.props; 10,
const [orderType, setOrderType] = useState(0); // 0 消费,1 充值 );
const reChargeOrders = useRechargeOrders(userinfo.customerId, 0, 10); const fetchMoreRechargeOrders = () => {
console.log(reChargeOrders); const itemIdx = rechargeOrders.length - 1;
const orderIdx = rechargeOrders[itemIdx].data.length - 1;
setRechargeLastId(rechargeOrders[itemIdx].data[orderIdx].id);
};
return ( return (
<View className='OrderList'> <View className='OrderList'>
<View className='Tab'> <View className='Tab'>
<Text <Text
className={`Tab-item ${orderType === 0 ? 'active' : ''}`} className={`Tab-item ${orderType === 0 ? 'active' : ''}`}
onClick={() => setOrderType(0)}> onClick={() => setOrderType(0)}>
消费 消费
</Text> </Text>
<Text <Text
className={`Tab-item ${orderType === 1 ? 'active' : ''}`} className={`Tab-item ${orderType === 1 ? 'active' : ''}`}
onClick={() => setOrderType(1)}> onClick={() => setOrderType(1)}>
充值 充值
</Text> </Text>
</View> </View>
{orderType === 0 ? ( {orderType === 0 ? (
<ScrollView <ScrollView
className='OrderList-Content' className='OrderList-Content'
scrollY scrollY
onScrollToUpper={this.refreshList} onScrollToUpper={() => setConsumenLastId(0)}
onScrollToLower={this.fetchMoreList} onScrollToLower={fetchMoreConsumeOrders}
upperThreshold={-100} upperThreshold={-100}
lowerThreshold={70} lowerThreshold={70}
scrollWithAnimation scrollWithAnimation
scrollTop={0}> scrollTop={0}>
{allList.map((allItem, index) => ( {consumeOrders.map((allItem, index) => (
<View key={allItem.groupName} className='OrderList-Group'> <View key={allItem.groupName} className='OrderList-Group'>
<View className='OrderList-GroupTitle'> <View className='OrderList-GroupTitle'>
<View className='OrderList-GroupName'> <View className='OrderList-GroupName'>{allItem.groupName}</View>
{allItem.groupName} {index === 0 && <Text>只保留最近三个月消费订单数据</Text>}
</View>
{index === 0 && <Text>只保留最近三个月消费订单数据</Text>}
</View>
{allItem.data.map(order => (
<OrderItem
key={order.id}
data={order}
onGoDetail={this.goDetail}
onPayHandle={this.goPayPage}
/>
))}
</View> </View>
))} {allItem.data.map(order => (
</ScrollView> <OrderItem
) : ( key={order.id}
<ScrollView data={order}
className='OrderList-Content' onGoDetail={goDetail}
scrollY onPayHandle={goPayPage}
onScrollToUpper={this.refreshList} />
onScrollToLower={this.fetchMoreList} ))}
upperThreshold={-100} </View>
lowerThreshold={70} ))}
scrollWithAnimation </ScrollView>
scrollTop={0}> ) : (
{reChargeOrders.map(reChargeItem => ( <ScrollView
<View key={reChargeItem.groupName} className='OrderList-Group'> className='OrderList-Content'
<View className='OrderList-GroupTitle'> scrollY
<View className='OrderList-GroupName'> onScrollToUpper={() => setRechargeLastId(0)}
{reChargeItem.groupName} onScrollToLower={fetchMoreRechargeOrders}
</View> upperThreshold={-100}
{/* {index === 0 && <Text>只保留最近三个月充值订单数据</Text>} */} 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>
{reChargeItem.data.map(order => ( {/* {index === 0 && <Text>只保留最近三个月充值订单数据</Text>} */}
<RechargeItem key={order.id} data={order} />
))}
</View> </View>
))} {reChargeItem.data.map(order => (
</ScrollView> <RechargeItem key={order.id} data={order} />
)} ))}
</View> </View>
); ))}
} </ScrollView>
} )}
</View>
);
};
OrderList.config = {
navigationBarTitleText: '订单',
enablePullDownRefresh: true,
};
OrderList.onShareAppMessage = shareHandle;
export default OrderList as ComponentClass<PageOwnProps>; export default OrderList;
src/pages/Order/OrderList/store.ts
...@@ -6,7 +6,7 @@ import { ...@@ -6,7 +6,7 @@ import {
UPDATE_ALL_LIST, UPDATE_ALL_LIST,
} from './actions'; } from './actions';
export interface StoreState { export interface OrderStoreState {
orderState: String; orderState: String;
payList: Order[]; payList: Order[];
allList: AllOrderItem[]; allList: AllOrderItem[];
...@@ -19,7 +19,7 @@ const INITIAL_STATE = { ...@@ -19,7 +19,7 @@ const INITIAL_STATE = {
}; };
export default function OrderList( export default function OrderList(
state: StoreState = INITIAL_STATE, state: OrderStoreState = INITIAL_STATE,
actions: Actions, actions: Actions,
) { ) {
switch (actions.type) { switch (actions.type) {
......
src/pages/Order/OrderList/useConsumeOrders.ts 0 → 100644
import { useEffect, useReducer } from '@tarojs/taro';
import { fetchAllOrder } from '@/api/order';
import Actions from '@/types/Store/Actions';
import { AllOrderItem } from '@/types/Order/Order';
const reducer = (state: AllOrderItem[], action: Actions) => {
switch (action.type) {
case 'updateConsumeOrders':
return action.payload;
case 'appendConsumeOrders':
return [...state, ...action.payload];
default:
return state;
}
};
const useConsumeOrders = (
customerId: number,
lastOrderId: number,
pageSize: number,
): AllOrderItem[] => {
const [state, dispatch] = useReducer(reducer, []);
const fetchData = (
customerId: number,
lastOrderId: number,
pageSize: number,
) =>
fetchAllOrder({
customerId,
lastOrderId,
pageSize,
})
.then(res => {
lastOrderId
? dispatch({ type: 'appendConsumeOrders', payload: res.data })
: dispatch({ type: 'updateConsumeOrders', payload: res.data });
return res.data;
})
.catch(err => {
console.log(err);
});
useEffect(() => {
console.log('in fetch');
fetchData(customerId, lastOrderId, pageSize);
}, [customerId, lastOrderId, pageSize]);
return state;
};
export default useConsumeOrders;
src/hooks/useRechargeOrders.ts → src/pages/Order/OrderList/useRechargeOrders.ts
...@@ -6,7 +6,8 @@ const reducer = (state: RechargeOrderItem[], action: Actions) => { ...@@ -6,7 +6,8 @@ const reducer = (state: RechargeOrderItem[], action: Actions) => {
switch (action.type) { switch (action.type) {
case 'updateRechargeOrders': case 'updateRechargeOrders':
return action.payload; return action.payload;
case 'appendRechargeOrders':
return [...state, ...action.payload];
default: default:
return state; return state;
} }
...@@ -28,7 +29,9 @@ const useRechargeOrders = ( ...@@ -28,7 +29,9 @@ const useRechargeOrders = (
pageSize, pageSize,
}) })
.then(res => { .then(res => {
dispatch({ type: 'updateRechargeOrders', payload: res.data }); lastOrderId
? dispatch({ type: 'appendRechargeOrders', payload: res.data })
: dispatch({ type: 'updateRechargeOrders', payload: res.data });
return res.data; return res.data;
}) })
.catch(err => { .catch(err => {
......
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