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 = {
handler?: string;
/** 主键id */
id?: number;
id: number;
/** 操作类型 1入账 2出账 */
operType?: string;
......
src/pages/Order/OrderList/OrderList.tsx
import { ComponentClass } from 'react';
import Taro, { Component, Config, useState } from '@tarojs/taro';
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 './OrderList.scss';
import {
toggleOrderState,
updatePayOrderList,
updateAllOrderList,
UpdateOrderParams,
} from './actions';
import { StoreState } from './store';
import { fetchAllOrder, fetchPayOrder } from '../../../api/order';
import Order, { AllOrderItem } from '../../../types/Order/Order';
import { fetchAllOrder } from '../../../api/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;
userinfo: Customer;
};
type PageDispatchProps = {
toggleOrderState: (state: String) => void;
updatePayOrder: (entity: UpdateOrderParams<Order>) => void;
updateAllOrder: (entity: UpdateOrderParams<AllOrderItem>) => void;
};
import useRechargeOrders from './useRechargeOrders';
import useConsumeOrders from './useConsumeOrders';
type PageOwnProps = {};
type PageProps = PageStateProps & PageDispatchProps & PageOwnProps;
type PageProps = PageOwnProps;
type PageState = {
needRefresh: boolean;
......@@ -44,230 +27,154 @@ interface OrderList {
state: PageState;
}
@connect(
({ OrderList, userinfo }) => ({
orderList: OrderList,
userinfo,
}),
dispatch => ({
toggleOrderState(state: String) {
dispatch(toggleOrderState(state));
},
updatePayOrder(data) {
dispatch(updatePayOrderList(data));
},
updateAllOrder(data) {
dispatch(updateAllOrderList(data));
},
}),
)
class OrderList extends Component {
config: Config = {
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() {
const OrderList = () => {
// constructor(props: PageProps) {
// super(props);
// this.state = {
// needRefresh: false,
// };
// }
// componentWillMount() {
// this.getAllOrderHandle();
// }
// componentDidShow() {
// const { needRefresh } = this.state;
// if (needRefresh) {
// this.getAllOrderHandle();
// }
// }
const onPullDownRefresh = () => {
console.log('in onPullDownRefresh');
this.getAllOrderHandle().then(() => {
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) {
this.setState({
needRefresh: true,
});
const goPayPage = data => {
// this.setState({
// needRefresh: true,
// });
this.$preload({ id: data.id });
Taro.navigateTo({
url: '/pages/Order/OrderPay/OrderPay',
});
}
goDetail(data) {
this.setState({
needRefresh: false,
});
};
const goDetail = data => {
// this.setState({
// needRefresh: false,
// });
this.$preload(data);
Taro.navigateTo({
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 {
orderList: { allList },
userinfo,
} = this.props;
const [orderType, setOrderType] = useState(0); // 0 消费,1 充值
const reChargeOrders = useRechargeOrders(userinfo.customerId, 0, 10);
console.log(reChargeOrders);
const [rechargeLastId, setRechargeLastId] = useState(0);
const rechargeOrders = useRechargeOrders(
userinfo.customerId,
rechargeLastId,
10,
);
const fetchMoreRechargeOrders = () => {
const itemIdx = rechargeOrders.length - 1;
const orderIdx = rechargeOrders[itemIdx].data.length - 1;
setRechargeLastId(rechargeOrders[itemIdx].data[orderIdx].id);
};
return (
<View className='OrderList'>
<View className='Tab'>
<Text
className={`Tab-item ${orderType === 0 ? 'active' : ''}`}
onClick={() => setOrderType(0)}>
消费
</Text>
<Text
className={`Tab-item ${orderType === 1 ? 'active' : ''}`}
onClick={() => setOrderType(1)}>
充值
</Text>
</View>
{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}
/>
))}
return (
<View className='OrderList'>
<View className='Tab'>
<Text
className={`Tab-item ${orderType === 0 ? 'active' : ''}`}
onClick={() => setOrderType(0)}>
消费
</Text>
<Text
className={`Tab-item ${orderType === 1 ? 'active' : ''}`}
onClick={() => setOrderType(1)}>
充值
</Text>
</View>
{orderType === 0 ? (
<ScrollView
className='OrderList-Content'
scrollY
onScrollToUpper={() => setConsumenLastId(0)}
onScrollToLower={fetchMoreConsumeOrders}
upperThreshold={-100}
lowerThreshold={70}
scrollWithAnimation
scrollTop={0}>
{consumeOrders.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>
))}
</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>
{/* {index === 0 && <Text>只保留最近三个月充值订单数据</Text>} */}
{allItem.data.map(order => (
<OrderItem
key={order.id}
data={order}
onGoDetail={goDetail}
onPayHandle={goPayPage}
/>
))}
</View>
))}
</ScrollView>
) : (
<ScrollView
className='OrderList-Content'
scrollY
onScrollToUpper={() => setRechargeLastId(0)}
onScrollToLower={fetchMoreRechargeOrders}
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>
{reChargeItem.data.map(order => (
<RechargeItem key={order.id} data={order} />
))}
{/* {index === 0 && <Text>只保留最近三个月充值订单数据</Text>} */}
</View>
))}
</ScrollView>
)}
</View>
);
}
}
{reChargeItem.data.map(order => (
<RechargeItem key={order.id} data={order} />
))}
</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 {
UPDATE_ALL_LIST,
} from './actions';
export interface StoreState {
export interface OrderStoreState {
orderState: String;
payList: Order[];
allList: AllOrderItem[];
......@@ -19,7 +19,7 @@ const INITIAL_STATE = {
};
export default function OrderList(
state: StoreState = INITIAL_STATE,
state: OrderStoreState = INITIAL_STATE,
actions: Actions,
) {
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) => {
switch (action.type) {
case 'updateRechargeOrders':
return action.payload;
case 'appendRechargeOrders':
return [...state, ...action.payload];
default:
return state;
}
......@@ -28,7 +29,9 @@ const useRechargeOrders = (
pageSize,
})
.then(res => {
dispatch({ type: 'updateRechargeOrders', payload: res.data });
lastOrderId
? dispatch({ type: 'appendRechargeOrders', payload: res.data })
: dispatch({ type: 'updateRechargeOrders', payload: res.data });
return res.data;
})
.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