Commit 696da627 by 姜雷

修改我的订单

parent f4e54789
...@@ -14,11 +14,18 @@ import RechargeItem from '../components/RechargeItem/RechargeItem'; ...@@ -14,11 +14,18 @@ import RechargeItem from '../components/RechargeItem/RechargeItem';
import useRechargeOrders from './useRechargeOrders'; import useRechargeOrders from './useRechargeOrders';
import useConsumeOrders from './useConsumeOrders'; import useConsumeOrders from './useConsumeOrders';
import Order, { AllOrderItem } from '@/types/Order/Order'; import Order, { AllOrderItem } from '@/types/Order/Order';
import { selectOrder } from './actions'; import { selectOrder, updateConsumeOrders } from './actions';
type PageStateProps = {
userinfo: Customer;
};
type PageDispatchProps = {
selectOrder: (entity: Order) => void;
updateConsumeOrders: (entity: AllOrderItem[]) => void;
};
type PageOwnProps = {}; type PageOwnProps = {};
type PageProps = PageOwnProps; type PageProps = PageStateProps & PageDispatchProps & PageOwnProps;
type PageState = { type PageState = {
needRefresh: boolean; needRefresh: boolean;
...@@ -28,24 +35,59 @@ interface OrderList { ...@@ -28,24 +35,59 @@ interface OrderList {
props: PageProps; props: PageProps;
state: PageState; state: PageState;
} }
@connect(
state => ({
userinfo: state.userinfo,
}),
dispatch => ({
selectOrder(data: Order) {
dispatch(selectOrder(data));
},
updateConsumeOrders(data: AllOrderItem[]) {
dispatch(updateConsumeOrders(data));
},
}),
)
class OrderList extends Component {
config: Config = {
navigationBarTitleText: '订单',
enablePullDownRefresh: true,
};
onShareAppMessage = shareHandle;
const OrderList = () => { constructor(props: PageProps) {
// constructor(props: PageProps) { super(props);
// super(props); this.state = {
// this.state = { needRefresh: false,
// needRefresh: false, };
// }; }
// }
// componentWillMount() { // componentWillMount() {
// this.getAllOrderHandle(); // this.getAllOrderHandle();
// } // }
// componentDidShow() { componentDidShow() {
// const { needRefresh } = this.state; const { needRefresh } = this.state;
// if (needRefresh) { const {
userinfo: { customerId },
updateConsumeOrders,
} = this.props;
if (needRefresh) {
fetchAllOrder({
customerId,
pageSize: 10,
})
.then(res => {
updateConsumeOrders(res.data);
})
.catch(err => {
Taro.showToast({
title: err.msg || '请求失败',
icon: 'none',
});
});
// this.getAllOrderHandle(); // this.getAllOrderHandle();
// } }
// } }
// const onPullDownRefresh = () => { // const onPullDownRefresh = () => {
// console.log('in onPullDownRefresh'); // console.log('in onPullDownRefresh');
...@@ -53,48 +95,85 @@ const OrderList = () => { ...@@ -53,48 +95,85 @@ const OrderList = () => {
// Taro.stopPullDownRefresh(); // Taro.stopPullDownRefresh();
// }); // });
// }; // };
const dispatch = useDispatch(); goPayPage = (data: Order) => {
const userinfo = useSelector( const { selectOrder } = this.props;
(state: { userinfo: Customer }) => state.userinfo, // dispatch(selectOrder(data));
); // setNeedRefresh(true);
selectOrder(data);
this.setState({
needRefresh: true,
});
Taro.navigateTo({
url: `/pages/Order/OrderPay/OrderPay?id=${data.id}`,
});
};
goDetail = (data: Order) => {
const { selectOrder } = this.props;
// dispatch(selectOrder(data));
// setNeedRefresh(false);
selectOrder(data);
this.setState({
needRefresh: false,
});
Taro.navigateTo({
url: '/pages/Order/OrderDetail/OrderDetail',
});
};
render() {
const {
userinfo: { customerId },
} = this.props;
const [orderType, setOrderType] = useState(0); // 0 消费,1 充值 const [orderType, setOrderType] = useState(0); // 0 消费,1 充值
const [needRefresh, setNeedRefresh] = useState(false);
const [ const [
consumeOrders, consumeOrders,
fetchMoreConsumeOrders, fetchMoreConsumeOrders,
resetConsumeOrders, resetConsumeOrders,
] = useConsumeOrders(userinfo.customerId, 10); ] = useConsumeOrders(customerId, 10);
// const [consumeScrollTop, setConsumeScrollTop] = useState(0);
// const scrollHandle = e => {
// console.log(e);
// };
const onConsumeScrollToLower = () => {
Taro.showLoading({
title: '',
mask: true,
});
fetchMoreConsumeOrders()
.then(() => {
Taro.hideLoading();
})
.catch(err => {
Taro.hideLoading();
Taro.showToast({
title: err.msg || '请求失败',
icon: 'none',
});
});
};
const [ const [
rechargeOrders, rechargeOrders,
fetchMoreRechargeOrders, fetchMoreRechargeOrders,
resetRechargeOrders, resetRechargeOrders,
] = useRechargeOrders(userinfo.customerId, 10); ] = useRechargeOrders(customerId, 10);
console.log(consumeOrders, rechargeOrders); const onRechargeScrollToLower = () => {
const goPayPage = (data: Order) => { Taro.showLoading({
dispatch(selectOrder(data)); title: '',
setNeedRefresh(true); mask: true,
// this.$preload({ id: data.id }); });
Taro.navigateTo({ fetchMoreRechargeOrders()
url: `/pages/Order/OrderPay/OrderPay?id=${data.id}`, .then(() => {
Taro.hideLoading();
})
.catch(err => {
Taro.hideLoading();
Taro.showToast({
title: err.msg || '请求失败',
icon: 'none',
}); });
};
const goDetail = (data: Order) => {
dispatch(selectOrder(data));
setNeedRefresh(false);
// this.setState({
// needRefresh: false,
// });
// this.$preload(data);
Taro.navigateTo({
url: '/pages/Order/OrderDetail/OrderDetail',
}); });
}; };
useEffect(() => {
if (needRefresh) {
console.log('刷新');
}
}, [needRefresh]);
return ( return (
<View className='OrderList'> <View className='OrderList'>
...@@ -115,7 +194,7 @@ const OrderList = () => { ...@@ -115,7 +194,7 @@ const OrderList = () => {
className='OrderList-Content' className='OrderList-Content'
scrollY scrollY
onScrollToUpper={() => resetConsumeOrders()} onScrollToUpper={() => resetConsumeOrders()}
onScrollToLower={() => fetchMoreConsumeOrders()} onScrollToLower={onConsumeScrollToLower}
upperThreshold={-100} upperThreshold={-100}
lowerThreshold={70} lowerThreshold={70}
scrollWithAnimation scrollWithAnimation
...@@ -123,15 +202,17 @@ const OrderList = () => { ...@@ -123,15 +202,17 @@ const OrderList = () => {
{consumeOrders.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'>{allItem.groupName}</View> <View className='OrderList-GroupName'>
{allItem.groupName}
</View>
{index === 0 && <Text>只保留最近三个月消费订单数据</Text>} {index === 0 && <Text>只保留最近三个月消费订单数据</Text>}
</View> </View>
{allItem.data.map(order => ( {allItem.data.map(order => (
<OrderItem <OrderItem
key={order.id} key={order.id}
data={order} data={order}
onGoDetail={goDetail} onGoDetail={this.goDetail}
onPayHandle={goPayPage} onPayHandle={this.goPayPage}
/> />
))} ))}
</View> </View>
...@@ -142,7 +223,7 @@ const OrderList = () => { ...@@ -142,7 +223,7 @@ const OrderList = () => {
className='OrderList-Content' className='OrderList-Content'
scrollY scrollY
onScrollToUpper={() => resetRechargeOrders()} onScrollToUpper={() => resetRechargeOrders()}
onScrollToLower={() => fetchMoreRechargeOrders()} onScrollToLower={onRechargeScrollToLower}
upperThreshold={-100} upperThreshold={-100}
lowerThreshold={70} lowerThreshold={70}
scrollWithAnimation scrollWithAnimation
...@@ -164,11 +245,7 @@ const OrderList = () => { ...@@ -164,11 +245,7 @@ const OrderList = () => {
)} )}
</View> </View>
); );
}; }
OrderList.config = { }
navigationBarTitleText: '订单',
enablePullDownRefresh: true,
};
OrderList.onShareAppMessage = shareHandle;
export default OrderList; export default OrderList;
...@@ -12,24 +12,20 @@ import { ...@@ -12,24 +12,20 @@ import {
const useConsumeOrders = ( const useConsumeOrders = (
customerId: number, customerId: number,
pageSize: number, pageSize: number,
): [AllOrderItem[], () => void, () => void] => { ): [AllOrderItem[], () => Promise<any>, () => Promise<any>] => {
const state = useSelector( const state = useSelector(
(state: { OrderList: OrderStoreState }) => state.OrderList.consume, (state: { OrderList: OrderStoreState }) => state.OrderList.consume,
); );
const dispatch = useDispatch(); const dispatch = useDispatch();
const fetchData = ( const fetchData = (customerId: number, pageSize: number) =>
customerId: number,
lastOrderId: number,
pageSize: number,
) =>
fetchAllOrder({ fetchAllOrder({
customerId, customerId,
lastOrderId, lastOrderId: state.lastOrderId,
pageSize, pageSize,
}) })
.then(res => { .then(res => {
lastOrderId state.lastOrderId
? dispatch(appendConsumeOrders(res.data)) ? dispatch(appendConsumeOrders(res.data))
: dispatch(updateConsumeOrders(res.data)); : dispatch(updateConsumeOrders(res.data));
return res.data; return res.data;
...@@ -44,18 +40,20 @@ const useConsumeOrders = ( ...@@ -44,18 +40,20 @@ const useConsumeOrders = (
const orderIdx = arr[itemIdx].data.length - 1; const orderIdx = arr[itemIdx].data.length - 1;
if (orderIdx >= 0) { if (orderIdx >= 0) {
dispatch(updateConsumeLastId(arr[itemIdx].data[orderIdx].id)); dispatch(updateConsumeLastId(arr[itemIdx].data[orderIdx].id));
return; return fetchData(customerId, pageSize);
} }
} }
dispatch(updateConsumeLastId(0)); dispatch(updateConsumeLastId(0));
return fetchData(customerId, pageSize);
}; };
const resetOrders = () => { const resetOrders = () => {
dispatch(updateConsumeLastId(0)); dispatch(updateConsumeLastId(0));
return fetchData(customerId, pageSize);
}; };
useEffect(() => { useEffect(() => {
fetchData(customerId, state.lastOrderId, pageSize); fetchData(customerId, pageSize);
}, [customerId, state.lastOrderId, pageSize]); }, [customerId, pageSize]);
return [state.consumeOrders, fetchMore, resetOrders]; return [state.consumeOrders, fetchMore, resetOrders];
}; };
......
...@@ -11,23 +11,19 @@ import { ...@@ -11,23 +11,19 @@ import {
const useRechargeOrders = ( const useRechargeOrders = (
customerId: number, customerId: number,
pageSize: number, pageSize: number,
): [RechargeOrderItem[], () => void, () => void] => { ): [RechargeOrderItem[], () => Promise<any>, () => Promise<any>] => {
const state = useSelector( const state = useSelector(
(state: { OrderList: OrderStoreState }) => state.OrderList.recharge, (state: { OrderList: OrderStoreState }) => state.OrderList.recharge,
); );
const dispatch = useDispatch(); const dispatch = useDispatch();
const fetchData = ( const fetchData = (customerId: number, pageSize: number) =>
customerId: number,
lastOrderId: number,
pageSize: number,
) =>
fetchRechargeOrders({ fetchRechargeOrders({
customerId, customerId,
lastOrderId, lastOrderId: state.lastOrderId,
pageSize, pageSize,
}) })
.then(res => { .then(res => {
lastOrderId state.lastOrderId
? dispatch(appendRechargeOrders(res.data)) ? dispatch(appendRechargeOrders(res.data))
: dispatch(updateRechargeOrders(res.data)); : dispatch(updateRechargeOrders(res.data));
return res.data; return res.data;
...@@ -42,18 +38,20 @@ const useRechargeOrders = ( ...@@ -42,18 +38,20 @@ const useRechargeOrders = (
const orderIdx = arr[itemIdx].data.length - 1; const orderIdx = arr[itemIdx].data.length - 1;
if (orderIdx >= 0) { if (orderIdx >= 0) {
dispatch(updateRechargeLastId(arr[itemIdx].data[orderIdx].id)); dispatch(updateRechargeLastId(arr[itemIdx].data[orderIdx].id));
return; return fetchData(customerId, pageSize);
} }
} }
dispatch(updateRechargeLastId(0)); dispatch(updateRechargeLastId(0));
return fetchData(customerId, pageSize);
}; };
const resetOrders = () => { const resetOrders = () => {
dispatch(updateRechargeLastId(0)); dispatch(updateRechargeLastId(0));
return fetchData(customerId, pageSize);
}; };
useEffect(() => { useEffect(() => {
fetchData(customerId, state.lastOrderId, pageSize); fetchData(customerId, pageSize);
}, [customerId, state.lastOrderId, pageSize]); }, [customerId, pageSize]);
return [state.rechargeOrders, fetchMore, resetOrders]; return [state.rechargeOrders, fetchMore, resetOrders];
}; };
......
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