Skip to content

W
wx-school-app
Commit 2f37f99b by 姜雷
Options

改造我的订单

parent f12d52d1
Showing with 331 additions and 333 deletions
src/api/order.ts
......@@ -156,13 +156,9 @@ export type RechargeOrderItem = {
sortNum: number;
};
type RechageResponse = {
data: RechargeOrderItem[];
};
export const fetchRechargeOrders = (
data: RechargeParams,
): Promise<ResponseDataEntity<RechageResponse>> =>
): Promise<ResponseDataEntity<RechargeOrderItem[]>> =>
customerFetch({
url: '/dcxy/app/rechargeOrder/pageAllListRecharge',
data,
......
src/hooks/useRechargePay.ts
......@@ -8,8 +8,8 @@ enum FirstRechargeState {
}
type RechargePayState = {
paywayList: PayConfig[];
payConfigList: PayTypeVo[];
paywayList: PayTypeVo[];
payConfigList: PayConfig[];
isFirstRecharge: FirstRechargeState;
};
......@@ -22,7 +22,10 @@ const reducer = (state: RechargePayState, action: Actions) => {
}
};
const usePaywayList = (areaId: number, customerId: number) => {
const usePaywayList = (
areaId: number,
customerId: number,
): RechargePayState => {
const [state, dispatch] = useReducer(reducer, {
paywayList: [],
payConfigList: [],
......
src/pages/Order/OrderDetail/OrderDetail.tsx
import { ComponentClass } from 'react';
import Taro, { Component, Config } from '@tarojs/taro';
import Taro from '@tarojs/taro';
import { View, Text } from '@tarojs/components';
import OrderTitle from '../components/OrderTitle/OrderTitle';
import OrderInfo from '../components/OrderInfo/OrderInfo';
import './OrderDetail.scss';
import { fetchOrderDetailAndPay } from '../../../api/order';
import { PayType, getPayType } from '../../../utils/payType';
import { getPayType } from '../../../utils/payType';
import { shareHandle } from '@/common/shareMethod';
import { useSelector } from '@tarojs/redux';
import { OrderStoreState } from '../OrderList/store';
type pageProps = {};
type PageState = {
actualMoney: number;
areaId: number;
areaName: string;
consumeType: string;
createAt: string;
customerCellphone: string;
customerId: number;
customerName: string;
deductionBean: number;
deductionMoney: number;
equipmentNum: string;
equipmentPosition: string;
id: number;
operateId: number;
operateName: string;
operationMode: string;
orderName: string;
orderNumber: string;
orderState: string;
outTradeNo: string;
payType: PayType;
payableMoney: number;
serviceId: number;
serviceName: string;
thirdDiscountMoney: number;
thirdTradeNumber: string;
updateDate: string;
};
interface OrderDetail {
props: pageProps;
state: PageState;
}
class OrderDetail extends Component {
config: Config = {
navigationBarTitleText: '订单详情',
};
constructor(props) {
super(props);
this.state = {
actualMoney: 0,
areaId: 0,
areaName: '',
consumeType: '',
createAt: '',
customerCellphone: '',
customerId: 0,
customerName: '',
deductionBean: 0,
deductionMoney: 0,
equipmentNum: '',
equipmentPosition: '',
id: 0,
operateId: 0,
operateName: '',
operationMode: '',
orderName: '',
orderNumber: '',
orderState: '',
outTradeNo: '',
payType: '',
payableMoney: 0,
serviceId: 0,
serviceName: '',
thirdDiscountMoney: 0,
thirdTradeNumber: '',
updateDate: '',
};
}
onShareAppMessage = shareHandle;
const OrderDetail = () => {
const {
actualMoney,
payableMoney,
deductionBean,
payType,
createAt,
thirdTradeNumber,
serviceName,
orderNumber,
areaName,
equipmentNum,
equipmentPosition,
deductionMoney,
thirdDiscountMoney,
} = useSelector(
(state: { OrderList: OrderStoreState }) => state.OrderList.selectedOrder,
);
componentWillMount() {
console.log('preload: ', this.$router.preload);
const data = this.$router.preload;
this.setState({
...data,
});
// this.getDetailInfo(id);
}
const payTypeName = getPayType(payType);
getDetailInfo(id: number) {
return fetchOrderDetailAndPay({
id: id,
})
.then(res => {
this.setState({
...res.data,
});
console.log(res);
})
.catch(err => {
console.log(err);
});
}
render() {
const {
actualMoney,
payableMoney,
deductionBean,
payType,
createAt,
thirdTradeNumber,
serviceName,
orderNumber,
areaName,
equipmentNum,
equipmentPosition,
deductionMoney,
thirdDiscountMoney,
} = this.state;
const payTypeName = getPayType(payType);
return (
<View className='OrderDetail'>
<OrderTitle price={payableMoney} />
<OrderInfo
orderInfo={{
serviceName,
createAt,
orderNumber,
areaName,
equipmentNum,
equipmentPosition,
}}
/>
<View className='OrderDetail-line' />
return (
<View className='OrderDetail'>
<OrderTitle price={payableMoney} />
<OrderInfo
orderInfo={{
serviceName,
createAt,
orderNumber,
areaName,
equipmentNum,
equipmentPosition,
}}
/>
<View className='OrderDetail-line' />
<View className='OrderDetail-payinfo'>
<Text>支付金额</Text>
<Text>{actualMoney.toFixed(2)}</Text>
</View>
{deductionBean ? (
<View className='OrderDetail-payinfo'>
<Text>支付金额</Text>
<Text>{actualMoney.toFixed(2)}</Text>
<Text>{serviceName ? serviceName : ''}豆抵扣</Text>
<Text className='deduction'>{deductionBean.toFixed(2)}</Text>
</View>
{deductionBean ? (
<View className='OrderDetail-payinfo'>
<Text>{serviceName ? serviceName : ''}豆抵扣</Text>
<Text className='deduction'>{deductionBean.toFixed(2)}</Text>
</View>
) : null}
{deductionMoney ? (
<View className='OrderDetail-payinfo'>
<Text>艾米抵扣</Text>
<Text className='deduction'>{deductionMoney.toFixed(2)}</Text>
</View>
) : null}
{thirdDiscountMoney ? (
<View className='OrderDetail-payinfo'>
<Text>三方抵扣</Text>
<Text className='deduction'>{thirdDiscountMoney.toFixed(2)}</Text>
</View>
) : null}
) : null}
{deductionMoney ? (
<View className='OrderDetail-payinfo'>
<Text>支付方式</Text>
<Text>{payTypeName}</Text>
<Text>艾米抵扣</Text>
<Text className='deduction'>{deductionMoney.toFixed(2)}</Text>
</View>
) : null}
{thirdDiscountMoney ? (
<View className='OrderDetail-payinfo'>
<Text>支付时间</Text>
<Text>{createAt}</Text>
<Text>三方抵扣</Text>
<Text className='deduction'>{thirdDiscountMoney.toFixed(2)}</Text>
</View>
{thirdTradeNumber ? (
<View className='OrderDetail-payinfo'>
<Text>交易单号</Text>
<Text>{thirdTradeNumber}</Text>
</View>
) : null}
) : null}
<View className='OrderDetail-payinfo'>
<Text>支付方式</Text>
<Text>{payTypeName}</Text>
</View>
);
}
}
<View className='OrderDetail-payinfo'>
<Text>支付时间</Text>
<Text>{createAt}</Text>
</View>
{thirdTradeNumber ? (
<View className='OrderDetail-payinfo'>
<Text>交易单号</Text>
<Text>{thirdTradeNumber}</Text>
</View>
) : null}
</View>
);
};
OrderDetail.config = {
navigationBarTitleText: '订单详情',
};
OrderDetail.onShareAppMessage = shareHandle;
export default OrderDetail as ComponentClass<pageProps, PageState>;
export default OrderDetail;
src/pages/Order/OrderList/OrderList.tsx
import { ComponentClass } from 'react';
import Taro, { Component, Config, useState } from '@tarojs/taro';
import Taro, { Component, Config, useState, useEffect } from '@tarojs/taro';
import { View, Text, ScrollView } from '@tarojs/components';
import { connect, useSelector } from '@tarojs/redux';
import { connect, useSelector, useDispatch } from '@tarojs/redux';
import OrderItem from '../components/OrderItem/OrderItem';
import './OrderList.scss';
import { fetchAllOrder } from '../../../api/order';
import { fetchAllOrder, RechargeOrderItem } 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 } from './actions';
type PageOwnProps = {};
......@@ -45,62 +47,54 @@ const OrderList = () => {
// }
// }
const onPullDownRefresh = () => {
console.log('in onPullDownRefresh');
this.getAllOrderHandle().then(() => {
Taro.stopPullDownRefresh();
});
};
// const onPullDownRefresh = () => {
// console.log('in onPullDownRefresh');
// this.getAllOrderHandle().then(() => {
// 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 goPayPage = data => {
// this.setState({
// needRefresh: true,
// });
this.$preload({ id: data.id });
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({
url: '/pages/Order/OrderPay/OrderPay',
url: `/pages/Order/OrderPay/OrderPay?id=${data.id}`,
});
};
const goDetail = data => {
const goDetail = (data: Order) => {
dispatch(selectOrder(data));
setNeedRefresh(false);
// this.setState({
// needRefresh: false,
// });
this.$preload(data);
// this.$preload(data);
Taro.navigateTo({
url: '/pages/Order/OrderDetail/OrderDetail',
});
};
// 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);
};
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);
};
useEffect(() => {
if (needRefresh) {
console.log('刷新');
}
}, [needRefresh]);
return (
<View className='OrderList'>
......@@ -120,8 +114,8 @@ const OrderList = () => {
<ScrollView
className='OrderList-Content'
scrollY
onScrollToUpper={() => setConsumenLastId(0)}
onScrollToLower={fetchMoreConsumeOrders}
onScrollToUpper={() => resetConsumeOrders()}
onScrollToLower={() => fetchMoreConsumeOrders()}
upperThreshold={-100}
lowerThreshold={70}
scrollWithAnimation
......@@ -147,8 +141,8 @@ const OrderList = () => {
<ScrollView
className='OrderList-Content'
scrollY
onScrollToUpper={() => setRechargeLastId(0)}
onScrollToLower={fetchMoreRechargeOrders}
onScrollToUpper={() => resetRechargeOrders()}
onScrollToLower={() => fetchMoreRechargeOrders()}
upperThreshold={-100}
lowerThreshold={70}
scrollWithAnimation
......
src/pages/Order/OrderList/actions.ts
import Actions from '../../../types/Store/Actions';
import Order, { AllOrderItem } from '../../../types/Order/Order';
export const TOGGLE_ORDER_STATE = 'TOGGLE_ORDER_STATE';
export const UPDATE_PAY_LIST = 'UPDATE_PAY_LIST';
export const UPDATE_ALL_LIST = 'UPDATE_ALL_LIST';
import { RechargeOrderItem } from '@/api/order';
export const SELECT_ORDER = 'SELECT_ORDER';
export const UPDATE_CONSUME_ORDERS = 'UPDATE_CONSUME_ORDERS';
export const APPEND_CONSUME_ORDERS = 'APPEND_CONSUME_ORDERS';
export const UPDATE_CONSUME_LASTID = 'UPDATE_CONSUME_LASTID';
export const UPDATE_RECHARGE_ORDERS = 'UPDATE_RECHARGE_ORDERS';
export const APPEND_RECHARGE_ORDERS = 'APPEND_RECHARGE_ORDERS';
export const UPDATE_RECHARGE_LASTID = 'UPDATE_RECHARGE_LASTID';
export type UpdateOrderParams<T> = {
lastOrderId?: number;
list: T[];
};
export const toggleOrderState = (state: String): Actions => ({
type: TOGGLE_ORDER_STATE,
export const selectOrder = (state: Order): Actions => ({
type: SELECT_ORDER,
payload: state,
});
export const updatePayOrderList = (
state: UpdateOrderParams<Order>
): Actions => ({
type: UPDATE_PAY_LIST,
export const updateConsumeOrders = (state: AllOrderItem[]): Actions => ({
type: UPDATE_CONSUME_ORDERS,
payload: state,
});
export const updateAllOrderList = (
state: UpdateOrderParams<AllOrderItem>
): Actions => ({
type: UPDATE_ALL_LIST,
export const appendConsumeOrders = (state: AllOrderItem[]): Actions => ({
type: APPEND_CONSUME_ORDERS,
payload: state,
});
export const updateConsumeLastId = (data: number): Actions => ({
type: UPDATE_CONSUME_LASTID,
payload: data,
});
export const updateRechargeOrders = (state: RechargeOrderItem[]): Actions => ({
type: UPDATE_RECHARGE_ORDERS,
payload: state,
});
export const appendRechargeOrders = (state: RechargeOrderItem[]): Actions => ({
type: APPEND_RECHARGE_ORDERS,
payload: state,
});
export const updateRechargeLastId = (data: number): Actions => ({
type: UPDATE_RECHARGE_LASTID,
payload: data,
});
src/pages/Order/OrderList/store.ts
import Actions from '../../../types/Store/Actions';
import Order, { AllOrderItem } from '../../../types/Order/Order';
import {
TOGGLE_ORDER_STATE,
UPDATE_PAY_LIST,
UPDATE_ALL_LIST,
SELECT_ORDER,
UPDATE_CONSUME_ORDERS,
APPEND_CONSUME_ORDERS,
UPDATE_RECHARGE_ORDERS,
APPEND_RECHARGE_ORDERS,
UPDATE_CONSUME_LASTID,
UPDATE_RECHARGE_LASTID,
} from './actions';
import { RechargeOrderItem } from '@/api/order';
export interface OrderStoreState {
orderState: String;
payList: Order[];
allList: AllOrderItem[];
selectedOrder: Order;
consume: {
consumeOrders: AllOrderItem[];
lastOrderId: number;
};
recharge: {
rechargeOrders: RechargeOrderItem[];
lastOrderId: number;
};
}
const initOrder = () => ({
actualMoney: 0,
areaId: 0,
areaName: '',
consumeType: '',
createAt: '',
customerCellphone: '',
customerId: 0,
customerName: '',
deductionBean: 0,
deductionMoney: 0,
equipmentNum: '',
equipmentPosition: '',
id: 0,
operateId: 0,
operateName: '',
operationMode: '',
orderName: '',
orderNumber: '',
orderState: '',
outTradeNo: '',
payType: '',
payableMoney: 0,
serviceId: 0,
serviceName: '',
thirdDiscountMoney: 0,
thirdTradeNumber: '',
updateDate: '',
});
const INITIAL_STATE = {
orderState: 'all',
payList: [],
allList: [],
selectedOrder: initOrder(),
consume: {
consumeOrders: [],
lastOrderId: 0,
},
recharge: {
rechargeOrders: [],
lastOrderId: 0,
},
};
export default function OrderList(
......@@ -23,55 +69,61 @@ export default function OrderList(
actions: Actions,
) {
switch (actions.type) {
case TOGGLE_ORDER_STATE:
case SELECT_ORDER:
return {
...state,
orderState: actions.payload,
selectedOrder: actions.payload,
};
case UPDATE_PAY_LIST:
if (actions.payload.lastOrderId) {
return {
...state,
payList: [...state.payList, ...actions.payload.list],
};
} else {
return {
...state,
payList: actions.payload.list,
};
}
case UPDATE_ALL_LIST:
if (actions.payload.lastOrderId) {
if (actions.payload.list.length) {
let key = actions.payload.list[0].groupName;
let index = state.allList.findIndex(item => item.groupName == key);
if (index > -1) {
return {
...state,
allList: [
...state.allList.slice(0, index),
{
groupName: state.allList[index].groupName,
data: [
...state.allList[index].data,
...actions.payload.list[0].data,
],
},
...actions.payload.list.slice(1),
],
};
}
return {
...state,
allList: [...state.allList, ...actions.payload.list],
};
}
return state;
}
case UPDATE_CONSUME_ORDERS:
return {
...state,
consume: {
...state.consume,
consumeOrders: actions.payload,
},
};
case APPEND_CONSUME_ORDERS:
return {
...state,
consume: {
...state.consume,
consumeOrders: [...state.consume.consumeOrders, ...actions.payload],
},
};
case UPDATE_CONSUME_LASTID:
return {
...state,
consume: {
...state.consume,
lastOrderId: actions.payload,
},
};
case UPDATE_RECHARGE_ORDERS:
return {
...state,
recharge: {
...state.recharge,
rechargeOrders: actions.payload,
},
};
case APPEND_RECHARGE_ORDERS:
return {
...state,
recharge: {
...state.recharge,
rechargeOrders: [
...state.recharge.rechargeOrders,
...actions.payload,
],
},
};
case UPDATE_RECHARGE_LASTID:
return {
...state,
allList: actions.payload.list,
recharge: {
...state.recharge,
lastOrderId: actions.payload,
},
};
default:
return state;
......
src/pages/Order/OrderList/useConsumeOrders.ts
import { useEffect, useReducer } from '@tarojs/taro';
import { useEffect } from '@tarojs/taro';
import { fetchAllOrder } from '@/api/order';
import Actions from '@/types/Store/Actions';
import { AllOrderItem } from '@/types/Order/Order';
import { useSelector, useDispatch } from '@tarojs/redux';
import { OrderStoreState } from './store';
import {
appendConsumeOrders,
updateConsumeOrders,
updateConsumeLastId,
} from './actions';
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, []);
): [AllOrderItem[], () => void, () => void] => {
const state = useSelector(
(state: { OrderList: OrderStoreState }) => state.OrderList.consume,
);
const dispatch = useDispatch();
const fetchData = (
customerId: number,
lastOrderId: number,
......@@ -31,21 +30,34 @@ const useConsumeOrders = (
})
.then(res => {
lastOrderId
? dispatch({ type: 'appendConsumeOrders', payload: res.data })
: dispatch({ type: 'updateConsumeOrders', payload: res.data });
? dispatch(appendConsumeOrders(res.data))
: dispatch(updateConsumeOrders(res.data));
return res.data;
})
.catch(err => {
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;
}
}
dispatch(updateConsumeLastId(0));
};
const resetOrders = () => {
dispatch(updateConsumeLastId(0));
};
useEffect(() => {
console.log('in fetch');
fetchData(customerId, lastOrderId, pageSize);
}, [customerId, lastOrderId, pageSize]);
fetchData(customerId, state.lastOrderId, pageSize);
}, [customerId, state.lastOrderId, pageSize]);
return state;
return [state.consumeOrders, fetchMore, resetOrders];
};
export default useConsumeOrders;
src/pages/Order/OrderList/useRechargeOrders.ts
import { useEffect, useReducer } from '@tarojs/taro';
import { fetchRechargeOrders, RechargeOrderItem } from '@/api/order';
import Actions from '@/types/Store/Actions';
import { useSelector, useDispatch } from '@tarojs/redux';
import { OrderStoreState } from './store';
import {
updateRechargeLastId,
appendRechargeOrders,
updateRechargeOrders,
} from './actions';
const reducer = (state: RechargeOrderItem[], action: Actions) => {
switch (action.type) {
case 'updateRechargeOrders':
return action.payload;
case 'appendRechargeOrders':
return [...state, ...action.payload];
default:
return state;
}
};
const useRechargeOrders = (
customerId: number,
lastOrderId: number,
pageSize: number,
): RechargeOrderItem[] => {
const [state, dispatch] = useReducer(reducer, []);
): [RechargeOrderItem[], () => void, () => void] => {
const state = useSelector(
(state: { OrderList: OrderStoreState }) => state.OrderList.recharge,
);
const dispatch = useDispatch();
const fetchData = (
customerId: number,
lastOrderId: number,
......@@ -30,19 +28,34 @@ const useRechargeOrders = (
})
.then(res => {
lastOrderId
? dispatch({ type: 'appendRechargeOrders', payload: res.data })
: dispatch({ type: 'updateRechargeOrders', payload: res.data });
? dispatch(appendRechargeOrders(res.data))
: dispatch(updateRechargeOrders(res.data));
return res.data;
})
.catch(err => {
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;
}
}
dispatch(updateRechargeLastId(0));
};
const resetOrders = () => {
dispatch(updateRechargeLastId(0));
};
useEffect(() => {
fetchData(customerId, lastOrderId, pageSize);
}, [customerId, lastOrderId, pageSize]);
fetchData(customerId, state.lastOrderId, pageSize);
}, [customerId, state.lastOrderId, pageSize]);
return state;
return [state.rechargeOrders, fetchMore, resetOrders];
};
export default useRechargeOrders;
src/pages/Order/OrderPay/OrderPay.tsx
......@@ -86,8 +86,8 @@ class OrderPay extends Component {
onShareAppMessage = shareHandle;
componentWillMount() {
const data = this.$router.preload;
if (data) {
const data = this.$router.params;
if (data && data.id) {
this.fetchOrder(data.id);
}
}
......
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