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';
import useRechargeOrders from './useRechargeOrders';
import useConsumeOrders from './useConsumeOrders';
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 PageProps = PageOwnProps;
type PageProps = PageStateProps & PageDispatchProps & PageOwnProps;
type PageState = {
needRefresh: boolean;
......@@ -28,24 +35,59 @@ interface OrderList {
props: PageProps;
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) {
// super(props);
// this.state = {
// needRefresh: false,
// };
// }
constructor(props: PageProps) {
super(props);
this.state = {
needRefresh: false,
};
}
// componentWillMount() {
// this.getAllOrderHandle();
// }
// componentDidShow() {
// const { needRefresh } = this.state;
// if (needRefresh) {
// this.getAllOrderHandle();
// }
// }
componentDidShow() {
const { needRefresh } = this.state;
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();
}
}
// const onPullDownRefresh = () => {
// console.log('in onPullDownRefresh');
......@@ -53,122 +95,157 @@ const OrderList = () => {
// Taro.stopPullDownRefresh();
// });
// };
const dispatch = useDispatch();
const userinfo = useSelector(
(state: { userinfo: Customer }) => state.userinfo,
);
const [orderType, setOrderType] = useState(0); // 0 消费,1 充值
const [needRefresh, setNeedRefresh] = useState(false);
const [
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 });
goPayPage = (data: Order) => {
const { selectOrder } = this.props;
// dispatch(selectOrder(data));
// setNeedRefresh(true);
selectOrder(data);
this.setState({
needRefresh: true,
});
Taro.navigateTo({
url: `/pages/Order/OrderPay/OrderPay?id=${data.id}`,
});
};
const goDetail = (data: Order) => {
dispatch(selectOrder(data));
setNeedRefresh(false);
// this.setState({
// needRefresh: false,
// });
// this.$preload(data);
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',
});
};
useEffect(() => {
if (needRefresh) {
console.log('刷新');
}
}, [needRefresh]);
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={() => 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>}
render() {
const {
userinfo: { customerId },
} = this.props;
const [orderType, setOrderType] = useState(0); // 0 消费,1 充值
const [
consumeOrders,
fetchMoreConsumeOrders,
resetConsumeOrders,
] = 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 [
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>
{allItem.data.map(order => (
<OrderItem
key={order.id}
data={order}
onGoDetail={goDetail}
onPayHandle={goPayPage}
/>
))}
</View>
))}
</ScrollView>
) : (
<ScrollView
className='OrderList-Content'
scrollY
onScrollToUpper={() => resetRechargeOrders()}
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}
))}
</ScrollView>
) : (
<ScrollView
className='OrderList-Content'
scrollY
onScrollToUpper={() => resetRechargeOrders()}
onScrollToLower={onRechargeScrollToLower}
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>} */}
</View>
{/* {index === 0 && <Text>只保留最近三个月充值订单数据</Text>} */}
{reChargeItem.data.map(order => (
<RechargeItem key={order.id} data={order} />
))}
</View>
{reChargeItem.data.map(order => (
<RechargeItem key={order.id} data={order} />
))}
</View>
))}
</ScrollView>
)}
</View>
);
};
OrderList.config = {
navigationBarTitleText: '订单',
enablePullDownRefresh: true,
};
OrderList.onShareAppMessage = shareHandle;
))}
</ScrollView>
)}
</View>
);
}
}
export default OrderList;
src/pages/Order/OrderList/useConsumeOrders.ts
......@@ -12,24 +12,20 @@ import {
const useConsumeOrders = (
customerId: number,
pageSize: number,
): [AllOrderItem[], () => void, () => void] => {
): [AllOrderItem[], () => Promise<any>, () => Promise<any>] => {
const state = useSelector(
(state: { OrderList: OrderStoreState }) => state.OrderList.consume,
);
const dispatch = useDispatch();
const fetchData = (
customerId: number,
lastOrderId: number,
pageSize: number,
) =>
const fetchData = (customerId: number, pageSize: number) =>
fetchAllOrder({
customerId,
lastOrderId,
lastOrderId: state.lastOrderId,
pageSize,
})
.then(res => {
lastOrderId
state.lastOrderId
? dispatch(appendConsumeOrders(res.data))
: dispatch(updateConsumeOrders(res.data));
return res.data;
......@@ -44,18 +40,20 @@ const useConsumeOrders = (
const orderIdx = arr[itemIdx].data.length - 1;
if (orderIdx >= 0) {
dispatch(updateConsumeLastId(arr[itemIdx].data[orderIdx].id));
return;
return fetchData(customerId, pageSize);
}
}
dispatch(updateConsumeLastId(0));
return fetchData(customerId, pageSize);
};
const resetOrders = () => {
dispatch(updateConsumeLastId(0));
return fetchData(customerId, pageSize);
};
useEffect(() => {
fetchData(customerId, state.lastOrderId, pageSize);
}, [customerId, state.lastOrderId, pageSize]);
fetchData(customerId, pageSize);
}, [customerId, pageSize]);
return [state.consumeOrders, fetchMore, resetOrders];
};
......
src/pages/Order/OrderList/useRechargeOrders.ts
......@@ -11,23 +11,19 @@ import {
const useRechargeOrders = (
customerId: number,
pageSize: number,
): [RechargeOrderItem[], () => void, () => void] => {
): [RechargeOrderItem[], () => Promise<any>, () => Promise<any>] => {
const state = useSelector(
(state: { OrderList: OrderStoreState }) => state.OrderList.recharge,
);
const dispatch = useDispatch();
const fetchData = (
customerId: number,
lastOrderId: number,
pageSize: number,
) =>
const fetchData = (customerId: number, pageSize: number) =>
fetchRechargeOrders({
customerId,
lastOrderId,
lastOrderId: state.lastOrderId,
pageSize,
})
.then(res => {
lastOrderId
state.lastOrderId
? dispatch(appendRechargeOrders(res.data))
: dispatch(updateRechargeOrders(res.data));
return res.data;
......@@ -42,18 +38,20 @@ const useRechargeOrders = (
const orderIdx = arr[itemIdx].data.length - 1;
if (orderIdx >= 0) {
dispatch(updateRechargeLastId(arr[itemIdx].data[orderIdx].id));
return;
return fetchData(customerId, pageSize);
}
}
dispatch(updateRechargeLastId(0));
return fetchData(customerId, pageSize);
};
const resetOrders = () => {
dispatch(updateRechargeLastId(0));
return fetchData(customerId, pageSize);
};
useEffect(() => {
fetchData(customerId, state.lastOrderId, pageSize);
}, [customerId, state.lastOrderId, pageSize]);
fetchData(customerId, pageSize);
}, [customerId, pageSize]);
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