Skip to content

W
wx-school-app
Commit 696da627 by 姜雷
Options

修改我的订单

parent f4e54789
Showing with 215 additions and 142 deletions
src/pages/Order/OrderList/OrderList.tsx
...@@ -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 {
// this.getAllOrderHandle(); 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();
}
}
// const onPullDownRefresh = () => { // const onPullDownRefresh = () => {
// console.log('in onPullDownRefresh'); // console.log('in onPullDownRefresh');
...@@ -53,122 +95,157 @@ const OrderList = () => { ...@@ -53,122 +95,157 @@ 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);
const [orderType, setOrderType] = useState(0); // 0 消费,1 充值 selectOrder(data);
const [needRefresh, setNeedRefresh] = useState(false); this.setState({
const [ needRefresh: true,
consumeOrders, });
fetchMoreConsumeOrders,
resetConsumeOrders,
] = useConsumeOrders(userinfo.customerId, 10);
const [
rechargeOrders,
fetchMoreRechargeOrders,
resetRechargeOrders,
] = useRechargeOrders(userinfo.customerId, 10);
console.log(consumeOrders, rechargeOrders);
const goPayPage = (data: Order) => {
dispatch(selectOrder(data));
setNeedRefresh(true);
// this.$preload({ id: data.id });
Taro.navigateTo({ Taro.navigateTo({
url: `/pages/Order/OrderPay/OrderPay?id=${data.id}`, url: `/pages/Order/OrderPay/OrderPay?id=${data.id}`,
}); });
}; };
const goDetail = (data: Order) => { goDetail = (data: Order) => {
dispatch(selectOrder(data)); const { selectOrder } = this.props;
setNeedRefresh(false); // dispatch(selectOrder(data));
// this.setState({ // setNeedRefresh(false);
// needRefresh: false, selectOrder(data);
// }); this.setState({
// this.$preload(data); needRefresh: false,
});
Taro.navigateTo({ Taro.navigateTo({
url: '/pages/Order/OrderDetail/OrderDetail', url: '/pages/Order/OrderDetail/OrderDetail',
}); });
}; };
useEffect(() => {
if (needRefresh) {
console.log('刷新');
}
}, [needRefresh]);
return ( render() {
<View className='OrderList'> const {
<View className='Tab'> userinfo: { customerId },
<Text } = this.props;
className={`Tab-item ${orderType === 0 ? 'active' : ''}`} const [orderType, setOrderType] = useState(0); // 0 消费,1 充值
onClick={() => setOrderType(0)}> const [
消费 consumeOrders,
</Text> fetchMoreConsumeOrders,
<Text resetConsumeOrders,
className={`Tab-item ${orderType === 1 ? 'active' : ''}`} ] = useConsumeOrders(customerId, 10);
onClick={() => setOrderType(1)}> // const [consumeScrollTop, setConsumeScrollTop] = useState(0);
充值 // const scrollHandle = e => {
</Text> // console.log(e);
</View> // };
{orderType === 0 ? ( const onConsumeScrollToLower = () => {
<ScrollView Taro.showLoading({
className='OrderList-Content' title: '',
scrollY mask: true,
onScrollToUpper={() => resetConsumeOrders()} });
onScrollToLower={() => fetchMoreConsumeOrders()} fetchMoreConsumeOrders()
upperThreshold={-100} .then(() => {
lowerThreshold={70} Taro.hideLoading();
scrollWithAnimation })
scrollTop={0}> .catch(err => {
{consumeOrders.map((allItem, index) => ( Taro.hideLoading();
<View key={allItem.groupName} className='OrderList-Group'> Taro.showToast({
<View className='OrderList-GroupTitle'> title: err.msg || '请求失败',
<View className='OrderList-GroupName'>{allItem.groupName}</View> icon: 'none',
{index === 0 && <Text>只保留最近三个月消费订单数据</Text>} });
});
};
const [
rechargeOrders,
fetchMoreRechargeOrders,
resetRechargeOrders,
] = useRechargeOrders(customerId, 10);
const onRechargeScrollToLower = () => {
Taro.showLoading({
title: '',
mask: true,
});
fetchMoreRechargeOrders()
.then(() => {
Taro.hideLoading();
})
.catch(err => {
Taro.hideLoading();
Taro.showToast({
title: err.msg || '请求失败',
icon: 'none',
});
});
};
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={() => resetConsumeOrders()}
onScrollToLower={onConsumeScrollToLower}
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>
{allItem.data.map(order => (
<OrderItem
key={order.id}
data={order}
onGoDetail={this.goDetail}
onPayHandle={this.goPayPage}
/>
))}
</View> </View>
{allItem.data.map(order => ( ))}
<OrderItem </ScrollView>
key={order.id} ) : (
data={order} <ScrollView
onGoDetail={goDetail} className='OrderList-Content'
onPayHandle={goPayPage} scrollY
/> onScrollToUpper={() => resetRechargeOrders()}
))} onScrollToLower={onRechargeScrollToLower}
</View> upperThreshold={-100}
))} lowerThreshold={70}
</ScrollView> scrollWithAnimation
) : ( scrollTop={0}>
<ScrollView {rechargeOrders.map(reChargeItem => (
className='OrderList-Content' <View key={reChargeItem.groupName} className='OrderList-Group'>
scrollY <View className='OrderList-GroupTitle'>
onScrollToUpper={() => resetRechargeOrders()} <View className='OrderList-GroupName'>
onScrollToLower={() => fetchMoreRechargeOrders()} {reChargeItem.groupName}
upperThreshold={-100} </View>
lowerThreshold={70} {/* {index === 0 && <Text>只保留最近三个月充值订单数据</Text>} */}
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>
{/* {index === 0 && <Text>只保留最近三个月充值订单数据</Text>} */} {reChargeItem.data.map(order => (
<RechargeItem key={order.id} data={order} />
))}
</View> </View>
{reChargeItem.data.map(order => ( ))}
<RechargeItem key={order.id} data={order} /> </ScrollView>
))} )}
</View> </View>
))} );
</ScrollView> }
)} }
</View>
);
};
OrderList.config = {
navigationBarTitleText: '订单',
enablePullDownRefresh: true,
};
OrderList.onShareAppMessage = shareHandle;
export default OrderList; export default OrderList;
src/pages/Order/OrderList/useConsumeOrders.ts
...@@ -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];
}; };
......
src/pages/Order/OrderList/useRechargeOrders.ts
...@@ -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