Skip to content

W
wx-school-app
Commit 006468e4 by 姜雷
Options

修改我的订单样式

parent 0f69b4fe
Showing with 281 additions and 133 deletions
src/pages/Order/OrderList/OrderList.scss
page {
padding-top: 80px;
background-color: #eee;
}
.OrderList {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
overflow: hidden;
// height: 100%;
// overflow: hidden;
.Tab {
position: absolute;
position: fixed;
top: 0;
display: flex;
background-color: #fff;
......@@ -14,6 +18,7 @@
line-height: 80px;
text-align: center;
font-size: 30px;
z-index: 1;
.Tab-item {
width: 50%;
color: #999;
......@@ -28,6 +33,10 @@
margin-top: 80px;
background-color: #eee;
}
.OrderList-Wrap {
padding-top: 22px;
background-color: #eee;
}
.OrderList-Group {
margin-bottom: 22px;
.OrderList-GroupTitle {
......
src/pages/Order/OrderList/OrderList.tsx
import { ComponentClass } from 'react';
import Taro, { Component, Config, useState, useEffect } from '@tarojs/taro';
import { View, Text, ScrollView } from '@tarojs/components';
import { connect, useSelector, useDispatch } from '@tarojs/redux';
import { connect, useSelector, useDispatch, useStore } from '@tarojs/redux';
import OrderItem from '../components/OrderItem/OrderItem';
import './OrderList.scss';
import { fetchAllOrder, RechargeOrderItem } from '../../../api/order';
import {
fetchAllOrder,
RechargeOrderItem,
fetchRechargeOrders,
} from '../../../api/order';
import { Customer } from '@/types/Customer/Customer';
import { shareHandle } from '@/common/shareMethod';
import RechargeItem from '../components/RechargeItem/RechargeItem';
import useRechargeOrders from './useRechargeOrders';
import useConsumeOrders from './useConsumeOrders';
import Order, { AllOrderItem } from '@/types/Order/Order';
import { selectOrder, updateConsumeOrders } from './actions';
import {
selectOrder,
updateConsumeOrders,
updateRechargeOrders,
appendConsumeOrders,
appendRechargeOrders,
} from './actions';
import { ConsumeOrderInfo, RechargeOrderInfo, OrderStoreState } from './store';
type PageStateProps = {
userinfo: Customer;
consume: ConsumeOrderInfo;
recharge: RechargeOrderInfo;
};
type PageDispatchProps = {
selectOrder: (entity: Order) => void;
updateConsumeOrders: (entity: AllOrderItem[]) => void;
appendConsumeOrders: (entity: AllOrderItem[]) => void;
updateRechargeOrders: (entity: RechargeOrderItem[]) => void;
appendRechargeOrders: (entity: RechargeOrderItem[]) => void;
};
type PageOwnProps = {};
......@@ -29,6 +43,9 @@ type PageProps = PageStateProps & PageDispatchProps & PageOwnProps;
type PageState = {
needRefresh: boolean;
orderType: number; // 0 消费,1 充值
consumeScrollTop: number;
rechargeScrollTop: number;
};
interface OrderList {
......@@ -36,8 +53,10 @@ interface OrderList {
state: PageState;
}
@connect(
state => ({
(state: { userinfo: Customer; OrderList: OrderStoreState }) => ({
userinfo: state.userinfo,
consume: state.OrderList.consume,
recharge: state.OrderList.recharge,
}),
dispatch => ({
selectOrder(data: Order) {
......@@ -46,6 +65,15 @@ interface OrderList {
updateConsumeOrders(data: AllOrderItem[]) {
dispatch(updateConsumeOrders(data));
},
appendConsumeOrders(data: AllOrderItem[]) {
dispatch(appendConsumeOrders(data));
},
updateRechargeOrders(data: RechargeOrderItem[]) {
dispatch(updateRechargeOrders(data));
},
appendRechargeOrders(data: RechargeOrderItem[]) {
dispatch(appendRechargeOrders(data));
},
}),
)
class OrderList extends Component {
......@@ -59,42 +87,153 @@ class OrderList extends Component {
super(props);
this.state = {
needRefresh: false,
orderType: 0,
consumeScrollTop: 0,
rechargeScrollTop: 0,
};
}
// componentWillMount() {
// this.getAllOrderHandle();
// }
componentWillMount() {
this.fetchConsumeOrders();
this.fetchRechargeOrders();
}
componentDidShow() {
const { needRefresh } = this.state;
if (needRefresh) {
this.fetchConsumeOrders();
}
}
onPullDownRefresh() {
const { orderType } = this.state;
Taro.showLoading({
title: '',
mask: true,
});
if (orderType) {
this.fetchRechargeOrders().then(() => {
Taro.stopPullDownRefresh();
Taro.hideLoading();
});
} else {
this.fetchConsumeOrders().then(() => {
Taro.stopPullDownRefresh();
Taro.hideLoading();
});
}
}
onReachBottom() {
const { orderType } = this.state;
Taro.showLoading({
title: '',
mask: true,
});
if (orderType) {
this.appendRechargeOrders().then(() => {
Taro.stopPullDownRefresh();
Taro.hideLoading();
});
} else {
this.appendConsumeOrders().then(() => {
Taro.stopPullDownRefresh();
Taro.hideLoading();
});
}
}
onPageScroll(e) {
const { orderType } = this.state;
if (orderType) {
this.setState({
rechargeScrollTop: e.scrollTop,
});
} else {
this.setState({
consumeScrollTop: e.scrollTop,
});
}
}
fetchConsumeOrders() {
const {
userinfo: { customerId },
updateConsumeOrders,
} = this.props;
if (needRefresh) {
fetchAllOrder({
customerId,
pageSize: 10,
return fetchAllOrder({
customerId,
pageSize: 10,
})
.then(res => {
updateConsumeOrders(res.data);
})
.then(res => {
updateConsumeOrders(res.data);
})
.catch(err => {
Taro.showToast({
title: err.msg || '请求失败',
icon: 'none',
});
.catch(err => {
Taro.showToast({
title: err.msg || '请求失败',
icon: 'none',
});
// this.getAllOrderHandle();
}
});
}
appendConsumeOrders() {
const {
userinfo: { customerId },
consume: { lastOrderId },
appendConsumeOrders,
} = this.props;
return fetchAllOrder({
customerId,
lastOrderId,
pageSize: 10,
})
.then(res => {
appendConsumeOrders(res.data);
})
.catch(err => {
Taro.showToast({
title: err.msg || '请求失败',
icon: 'none',
});
});
}
fetchRechargeOrders() {
const {
userinfo: { customerId },
updateRechargeOrders,
} = this.props;
return fetchRechargeOrders({
customerId,
pageSize: 10,
})
.then(res => {
updateRechargeOrders(res.data);
})
.catch(err => {
console.log(err);
});
}
appendRechargeOrders() {
const {
userinfo: { customerId },
recharge: { lastOrderId },
appendRechargeOrders,
} = this.props;
return fetchRechargeOrders({
customerId,
lastOrderId,
pageSize: 10,
})
.then(res => {
appendRechargeOrders(res.data);
})
.catch(err => {
Taro.showToast({
title: err.msg || '请求失败',
icon: 'none',
});
});
}
// const onPullDownRefresh = () => {
// console.log('in onPullDownRefresh');
// this.getAllOrderHandle().then(() => {
// Taro.stopPullDownRefresh();
// });
// };
goPayPage = (data: Order) => {
const { selectOrder } = this.props;
// dispatch(selectOrder(data));
......@@ -119,86 +258,51 @@ class OrderList extends Component {
url: '/pages/Order/OrderDetail/OrderDetail',
});
};
setOrderType(type: number) {
this.setState(
{
orderType: type,
},
() => {
const { orderType, consumeScrollTop, rechargeScrollTop } = this.state;
if (orderType) {
Taro.pageScrollTo({
scrollTop: rechargeScrollTop,
duration: 0,
});
} else {
Taro.pageScrollTo({
scrollTop: consumeScrollTop,
duration: 0,
});
}
},
);
}
render() {
const { orderType } = this.state;
const {
userinfo: { customerId },
consume: { consumeOrders },
recharge: { rechargeOrders },
} = 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)}>
onClick={() => this.setOrderType(0)}>
消费
</Text>
<Text
className={`Tab-item ${orderType === 1 ? 'active' : ''}`}
onClick={() => setOrderType(1)}>
onClick={() => this.setOrderType(1)}>
充值
</Text>
</View>
{orderType === 0 ? (
<ScrollView
className='OrderList-Content'
scrollY
onScrollToUpper={() => resetConsumeOrders()}
onScrollToLower={onConsumeScrollToLower}
upperThreshold={-100}
lowerThreshold={70}
scrollWithAnimation
scrollTop={0}>
<View className='OrderList-Wrap'>
{consumeOrders.map((allItem, index) => (
<View key={allItem.groupName} className='OrderList-Group'>
<View className='OrderList-GroupTitle'>
......@@ -217,17 +321,9 @@ class OrderList extends Component {
))}
</View>
))}
</ScrollView>
</View>
) : (
<ScrollView
className='OrderList-Content'
scrollY
onScrollToUpper={() => resetRechargeOrders()}
onScrollToLower={onRechargeScrollToLower}
upperThreshold={-100}
lowerThreshold={70}
scrollWithAnimation
scrollTop={0}>
<View className='OrderList-Wrap'>
{rechargeOrders.map(reChargeItem => (
<View key={reChargeItem.groupName} className='OrderList-Group'>
<View className='OrderList-GroupTitle'>
......@@ -241,7 +337,7 @@ class OrderList extends Component {
))}
</View>
))}
</ScrollView>
</View>
)}
</View>
);
......
src/pages/Order/OrderList/store.ts
......@@ -11,16 +11,20 @@ import {
} from './actions';
import { RechargeOrderItem } from '@/api/order';
export type ConsumeOrderInfo = {
consumeOrders: AllOrderItem[];
lastOrderId: number;
};
export type RechargeOrderInfo = {
rechargeOrders: RechargeOrderItem[];
lastOrderId: number;
};
export interface OrderStoreState {
selectedOrder: Order;
consume: {
consumeOrders: AllOrderItem[];
lastOrderId: number;
};
recharge: {
rechargeOrders: RechargeOrderItem[];
lastOrderId: number;
};
consume: ConsumeOrderInfo;
recharge: RechargeOrderInfo;
}
const initOrder = () => ({
actualMoney: 0,
......@@ -64,6 +68,18 @@ const INITIAL_STATE = {
},
};
const getLastId = (arr): number => {
const itemIdx = arr.length - 1;
if (itemIdx >= 0) {
const orderIdx = arr[itemIdx].data.length - 1;
if (orderIdx >= 0) {
let lastOrderId = arr[itemIdx].data[orderIdx].id;
return lastOrderId;
}
}
return 0;
};
export default function OrderList(
state: OrderStoreState = INITIAL_STATE,
actions: Actions,
......@@ -75,6 +91,17 @@ export default function OrderList(
selectedOrder: actions.payload,
};
case UPDATE_CONSUME_ORDERS:
if (actions.payload.length) {
let arr = actions.payload;
let lastOrderId = getLastId(arr);
return {
...state,
consume: {
lastOrderId: lastOrderId,
consumeOrders: actions.payload,
},
};
}
return {
...state,
consume: {
......@@ -83,6 +110,17 @@ export default function OrderList(
},
};
case APPEND_CONSUME_ORDERS:
if (actions.payload.length) {
let arr = actions.payload;
let lastOrderId = getLastId(arr);
return {
...state,
consume: {
lastOrderId: lastOrderId,
consumeOrders: [...state.consume.consumeOrders, ...actions.payload],
},
};
}
return {
...state,
consume: {
......@@ -99,6 +137,17 @@ export default function OrderList(
},
};
case UPDATE_RECHARGE_ORDERS:
if (actions.payload.length) {
let arr = actions.payload;
let lastOrderId = getLastId(arr);
return {
...state,
recharge: {
lastOrderId: lastOrderId,
rechargeOrders: actions.payload,
},
};
}
return {
...state,
recharge: {
......@@ -107,6 +156,20 @@ export default function OrderList(
},
};
case APPEND_RECHARGE_ORDERS:
if (actions.payload.length) {
let arr = actions.payload;
let lastOrderId = getLastId(arr);
return {
...state,
recharge: {
lastOrderId: lastOrderId,
rechargeOrders: [
...state.recharge.rechargeOrders,
...actions.payload,
],
},
};
}
return {
...state,
recharge: {
......
src/pages/Order/OrderList/useConsumeOrders.ts
......@@ -34,16 +34,6 @@ const useConsumeOrders = (
console.log(err);
});
const fetchMore = () => {
let arr = state.consumeOrders;
const itemIdx = arr.length - 1;
if (itemIdx >= 0) {
const orderIdx = arr[itemIdx].data.length - 1;
if (orderIdx >= 0) {
dispatch(updateConsumeLastId(arr[itemIdx].data[orderIdx].id));
return fetchData(customerId, pageSize);
}
}
dispatch(updateConsumeLastId(0));
return fetchData(customerId, pageSize);
};
const resetOrders = () => {
......
src/pages/Order/OrderList/useRechargeOrders.ts
......@@ -32,16 +32,6 @@ const useRechargeOrders = (
console.log(err);
});
const fetchMore = () => {
let arr = state.rechargeOrders;
const itemIdx = arr.length - 1;
if (itemIdx >= 0) {
const orderIdx = arr[itemIdx].data.length - 1;
if (orderIdx >= 0) {
dispatch(updateRechargeLastId(arr[itemIdx].data[orderIdx].id));
return fetchData(customerId, pageSize);
}
}
dispatch(updateRechargeLastId(0));
return fetchData(customerId, pageSize);
};
const 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