Skip to content

W
wx-school-app
Commit 27eee281 by 姜雷
Options

Merge branch 'test'

parents 5400ee7f 4fe780bc
Showing with 1639 additions and 608 deletions
package.json
{ {
"name": "wx-school-app", "name": "wx-school-app",
"version": "1.0.6", "version": "1.0.9",
"private": true, "private": true,
"description": "", "description": "",
"scripts": { "scripts": {
...@@ -20,21 +20,21 @@ ...@@ -20,21 +20,21 @@
"author": "", "author": "",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@tarojs/async-await": "1.2.13", "@tarojs/async-await": "1.3.4",
"@tarojs/components": "1.2.13", "@tarojs/components": "1.3.4",
"@tarojs/redux": "1.2.13", "@tarojs/redux": "1.3.4",
"@tarojs/redux-h5": "1.2.13", "@tarojs/redux-h5": "1.3.4",
"@tarojs/router": "1.2.13", "@tarojs/router": "1.3.4",
"@tarojs/taro": "1.2.13", "@tarojs/taro": "1.3.4",
"@tarojs/taro-alipay": "1.2.13", "@tarojs/taro-alipay": "1.3.4",
"@tarojs/taro-h5": "1.2.13", "@tarojs/taro-h5": "1.3.4",
"@tarojs/taro-swan": "1.2.13", "@tarojs/taro-swan": "1.3.4",
"@tarojs/taro-tt": "1.2.13", "@tarojs/taro-tt": "1.3.4",
"@tarojs/taro-weapp": "1.2.13", "@tarojs/taro-weapp": "1.3.4",
"crypto-js": "^3.1.9-1", "crypto-js": "^3.1.9-1",
"jsbarcode": "^3.11.0", "jsbarcode": "^3.11.0",
"nerv-devtools": "^1.3.9", "nerv-devtools": "^1.4.3",
"nervjs": "^1.3.9", "nervjs": "^1.4.3",
"npm": "^6.8.0", "npm": "^6.8.0",
"redux": "^4.0.0", "redux": "^4.0.0",
"redux-logger": "^3.0.6", "redux-logger": "^3.0.6",
...@@ -42,12 +42,11 @@ ...@@ -42,12 +42,11 @@
"wxbarcode": "^1.0.2" "wxbarcode": "^1.0.2"
}, },
"devDependencies": { "devDependencies": {
"@tarojs/cli": "^1.2.13", "@tarojs/plugin-babel": "1.3.4",
"@tarojs/plugin-babel": "1.2.13", "@tarojs/plugin-csso": "1.3.4",
"@tarojs/plugin-csso": "1.2.13", "@tarojs/plugin-sass": "1.3.4",
"@tarojs/plugin-sass": "1.2.13", "@tarojs/plugin-uglifyjs": "1.3.4",
"@tarojs/plugin-uglifyjs": "1.2.13", "@tarojs/webpack-runner": "1.3.4",
"@tarojs/webpack-runner": "1.2.13",
"@types/react": "^16.4.8", "@types/react": "^16.4.8",
"@types/webpack-env": "^1.13.6", "@types/webpack-env": "^1.13.6",
"babel-eslint": "^8.2.3", "babel-eslint": "^8.2.3",
...@@ -58,10 +57,10 @@ ...@@ -58,10 +57,10 @@
"babel-preset-env": "^1.6.1", "babel-preset-env": "^1.6.1",
"cross-env": "^5.2.0", "cross-env": "^5.2.0",
"eslint": "^4.19.1", "eslint": "^4.19.1",
"eslint-config-taro": "1.2.13", "eslint-config-taro": "1.3.4",
"eslint-plugin-import": "^2.12.0", "eslint-plugin-import": "^2.12.0",
"eslint-plugin-react": "^7.8.2", "eslint-plugin-react": "^7.8.2",
"eslint-plugin-taro": "1.2.13", "eslint-plugin-taro": "1.3.4",
"eslint-plugin-typescript": "^0.12.0", "eslint-plugin-typescript": "^0.12.0",
"typescript": "^3.0.1" "typescript": "^3.0.1"
} }
......
src/api/account.ts 0 → 100644
import { ResponseDataEntity, baseFetch, customerFetch } from './index';
import { number } from 'prop-types';
export type PayConfigParams = {
areaId: number;
customerId: number;
};
export type PayTypeVo = {
/** id */
id: number;
/** name */
name: string;
};
export type PayConfig = {
id: number;
giveId: number; //赠送服务id
giveMoney: number; // 赠送金额
giveName: string; // 赠送服务名称
rechargeMoney: number; // 充值金额
};
type PayConfigResponse = {
isFirstRecharge: number;
listPayList: PayTypeVo[];
listRechargeConfDetail: PayConfig[];
};
export const fetchPayConfig = (
params: PayConfigParams,
): Promise<ResponseDataEntity<PayConfigResponse>> =>
baseFetch({
url: '/dcxy/api/paymentAndActiveConf/getRechargeConf',
data: params,
});
type RechargeOrderParams = {
customerId: number;
id: number;
isFirstRecharge: number;
rechargeType: string;
};
export const rechargeOrder = (
params: RechargeOrderParams,
): Promise<{
canCall: number;
code: number;
msg: string;
outTradeNo: string;
payStr: string;
}> =>
customerFetch({
url: '/dcxy/app/rechargeOrder/rechargeOrder/smallProPay',
method: 'POST',
data: params,
});
type CreditInfo = {
amount: number;
areaId: number;
operateId: number;
showType: string;
};
export const fetchCreditDeposites = (params: {
areaId: number;
}): Promise<ResponseDataEntity<CreditInfo>> =>
baseFetch({
url: '/dcxy/api/creditDeposits',
data: params,
});
export const fetchOperationMode = (params: {
areaId: number;
}): Promise<
ResponseDataEntity<{
mode: string;
}>
> =>
baseFetch({
url: '/dcxy/api/operationModeConf',
data: params,
});
src/api/order.ts
import { customerFetch } from './index'; import { customerFetch, ResponseDataEntity } from './index';
import Order from '@/types/Order/Order';
export class Params { export class Params {
/** 会员id */ /** 会员id */
...@@ -66,3 +67,99 @@ export const confirmPay = (data: ConfirmpayParams) => ...@@ -66,3 +67,99 @@ export const confirmPay = (data: ConfirmpayParams) =>
url: '/consumeOrder/confirmPay', url: '/consumeOrder/confirmPay',
data: data, data: data,
}); });
type RechargeParams = {
customerId: number;
lastOrderId?: number;
pageSize?: number;
};
export type RechargeOrder = {
/** 充值金额 */
actualAmount: number;
/** 充值后金额 */
afterAmount?: number;
/** 区域id */
areaId: number;
/** 区域名称 */
areaName: string;
/** 充值前金额 */
beforeAmount?: number;
/** 业务类型 APP充值=01 后台充值=02 后台退款=03 割接数据=04 后台平账记录=05 */
businessType?: string;
/** 订单完成时间 */
completeAt?: string;
/** 充值时间 */
createAt?: string;
/** 会员帐号 */
customerId: number;
/** 会员名称 */
customerName: string;
/** 会员手机 */
customerPhone: string;
/** 失败原因 */
failReason?: string;
/** 充值赠送豆数量 */
giveMoney?: number;
/** 操作人 */
handler?: string;
/** 主键id */
id: number;
/** 操作类型 1入账 2出账 */
operType?: string;
/** 运营商Id */
operateId: number;
/** 运营商名称 */
operateName: string;
/** 订单号 (xx：线下,wx：微信支付,zfb：支付宝)+年月日时分秒随机数5位 */
orderNum: string;
/** 订单状态(1:waitingPay待付款、2:paying支付中、3:success支付成功、4:failure支付失败 */
orderState?: string;
/** 支付类型(1:线下支付 2：微信支付 3 ：支付宝支付 4:京东支付 5:招行一网通支付 6:艾米币 7:专用豆 8通用豆) */
payType?: string;
rechargeRemark: string;
/** 充值赠送服务id */
serviceId?: number;
/** 充值赠送服务名称 */
serviceName?: string;
/** 更新时间 */
updateAt?: string;
};
export type RechargeOrderItem = {
data: RechargeOrder[];
groupName: string;
sortNum: number;
};
export const fetchRechargeOrders = (
data: RechargeParams,
): Promise<ResponseDataEntity<RechargeOrderItem[]>> =>
customerFetch({
url: '/dcxy/app/rechargeOrder/pageAllListRecharge',
data,
});
src/api/shower.ts
import { showerFetch } from './index'; import { showerFetch, ResponseDataEntity } from './index';
export enum OperationMode {
beanFirst = 1,
aimiFirst = 2,
onlyAimi = 3,
}
type ShowerParams = { type ShowerParams = {
deviceCode: string; deviceCode: string;
...@@ -8,12 +14,15 @@ type ShowerParams = { ...@@ -8,12 +14,15 @@ type ShowerParams = {
export type DeviceInfoResponse = { export type DeviceInfoResponse = {
code: string; code: string;
isOnlyBluetooth: number; isOnlyBluetooth: number;
operationMode: OperationMode;
position: string; position: string;
}; };
/** /**
* 通过设备码获取设备信息 * 通过设备码获取设备信息
*/ */
export const fetchShowerInfo = (params: ShowerParams) => export const fetchShowerInfo = (
params: ShowerParams,
): Promise<ResponseDataEntity<DeviceInfoResponse>> =>
showerFetch({ showerFetch({
url: `/dcxy/api/shower/devices/${params.deviceCode}`, url: `/dcxy/api/shower/devices/${params.deviceCode}`,
data: params, data: params,
...@@ -46,3 +55,21 @@ export const startShowerEquipment = (params: StartParams) => ...@@ -46,3 +55,21 @@ export const startShowerEquipment = (params: StartParams) =>
method: 'POST', method: 'POST',
data: params, data: params,
}); });
type ControllerParams = {
customerId: number;
campusId: number;
};
type ControllerResponse = {
beanAmount: number;
money: number;
thresholdPrompt: string;
thresholdValue: number;
};
export const getShowerController = (
params: ControllerParams,
): Promise<ResponseDataEntity<ControllerResponse>> =>
showerFetch({
url: '/dcxy/api/shower/controllerConfigs',
data: params,
});
src/app.scss
...@@ -103,13 +103,3 @@ button[disabled]:not([type]) { ...@@ -103,13 +103,3 @@ button[disabled]:not([type]) {
.blur { .blur {
filter: blur(10px); filter: blur(10px);
} }
.OrderBox {
box-sizing: border-box;
position: absolute;
top: 0;
width: 100%;
height: 100%;
padding: 0 32px;
z-index: 100;
background-color: rgba(255, 255, 255, 0.5);
}
src/app.tsx
...@@ -41,6 +41,7 @@ class App extends Component { ...@@ -41,6 +41,7 @@ class App extends Component {
'pages/WebPage/WebPage', 'pages/WebPage/WebPage',
'pages/Shower/Shower', 'pages/Shower/Shower',
'pages/WaterDispenser/WaterDispenser', 'pages/WaterDispenser/WaterDispenser',
'pages/Account/Account',
], ],
window: { window: {
backgroundTextStyle: 'light', backgroundTextStyle: 'light',
......
src/components/WaitPayOrder/WaitPayOrder.scss 0 → 100644
.OrderBox {
box-sizing: border-box;
position: absolute;
top: 0;
width: 100%;
height: 100%;
padding: 0 32px;
z-index: 100;
background-color: rgba(255, 255, 255, 0.5);
}
src/components/WaitPayOrder/WaitPayOrder.tsx 0 → 100644
import './WaitPayOrder.scss';
import { View } from '@tarojs/components';
import OrderTitle from '@/pages/Order/components/OrderTitle/OrderTitle';
import OrderInfo from '@/pages/Order/components/OrderInfo/OrderInfo';
import OrderPayway from '@/pages/Order/components/OrderPayway/OrderPayway';
import useWaitPayOrderState from '@/hooks/useWaitPayOrderState';
import { useSelector, useDispatch } from '@tarojs/redux';
import { Customer } from '@/types/Customer/Customer';
import { updateOrderState } from '@/store/rootReducers/orderState';
import { PayOrderState } from '@/store/rootReducers/orderState';
const WaitPayOrderComponent = () => {
const dispatch = useDispatch();
const userinfo = useSelector(
(state: { userinfo: Customer }) => state.userinfo,
);
const payOrderState = useSelector(
(state: { orderState: PayOrderState }) =>
state.orderState.waitPayOrderState,
);
const { payInfos, accountList, orderInfo } = useWaitPayOrderState(
userinfo.customerId,
);
const payDoneHandle = () => {
dispatch(updateOrderState(false));
};
return payOrderState ? (
<View className='OrderBox'>
<OrderTitle price={orderInfo.payableMoney} />
<OrderInfo orderInfo={orderInfo} />
<OrderPayway
onPayDoneCallback={payDoneHandle}
userinfo={userinfo}
accounts={accountList}
orderInfo={orderInfo}
payInfos={payInfos}
/>
</View>
) : null;
};
export default WaitPayOrderComponent;
src/hooks/useAllBeanCount.ts 0 → 100644
import { useEffect, useState } from '@tarojs/taro';
import { fetchBeanCount } from '@/api/bean';
import { CustomerBeanAccountVo } from '@/api/baseClass';
import { Service } from '@/api/home';
import { Customer } from '@/types/Customer/Customer';
export enum BeanType {
aimi = 'aimi',
common = 'common',
shower = 'shower',
hairDryer = 'hairDryer',
water = 'water',
}
type BeanAccount = {
money: number;
serviceId: string;
};
let initBeanList: BeanAccount[] = [];
const useAllBeanCount = (
userinfo: Customer,
serviceList: Service[],
): [
BeanAccount[],
(
customerId: number,
areaId: number,
customerPhone: string,
) => Promise<CustomerBeanAccountVo[]>
] => {
const [filterBeanList, setFilterBeanList] = useState(initBeanList);
const getFilterBeanList = (
beanAccount: CustomerBeanAccountVo[],
): BeanAccount[] => {
let aimiItem = beanAccount.find(item => item.serviceId === '0');
let cfItem = beanAccount.find(
item => item.serviceId === '4' || item.serviceId === '12',
);
let xyItem = beanAccount.find(
item => item.serviceId === '5' || item.serviceId === '10',
);
let ysItem = beanAccount.find(
item =>
item.serviceId === '3' ||
item.serviceId === '11' ||
item.serviceId === '9',
);
// let commonItem = beanAccount.find(item => item.serviceId === '1');
let beanMap = {
[BeanType.aimi]: aimiItem ? aimiItem.money : 0,
// [BeanType.common]: commonItem ? commonItem.money : 0,
};
for (let index = 0; index < serviceList.length; index++) {
const service = serviceList[index];
if (
service.serviceId === 3 ||
service.serviceId === 11 ||
service.serviceId === 9
) {
beanMap[BeanType.water] = ysItem ? ysItem.money : 0;
} else if (service.serviceId === 4 || service.serviceId === 12) {
beanMap[BeanType.hairDryer] = cfItem ? cfItem.money : 0;
} else if (service.serviceId === 5 || service.serviceId === 10) {
beanMap[BeanType.shower] = xyItem ? xyItem.money : 0;
}
}
let arr: BeanAccount[] = Object.keys(beanMap).map(k => ({
serviceId: k,
money: beanMap[k],
}));
return arr;
};
const fetchDate = (
customerId: number,
areaId: number,
customerPhone: string,
) =>
fetchBeanCount({
id: customerId,
areaId: areaId,
customerPhone: customerPhone,
serviceIdList: [],
})
.then(res => {
const data = res.data;
let list = getFilterBeanList(data);
setFilterBeanList(list);
return data;
})
.catch(err => {
console.log(err);
throw err;
});
useEffect(() => {
fetchDate(userinfo.customerId, userinfo.areaId, userinfo.customerPhone);
}, [userinfo.customerId, userinfo.areaId, userinfo.customerPhone]);
return [filterBeanList, fetchDate];
};
export default useAllBeanCount;
src/hooks/useCreditDeposits.ts 0 → 100644
import { fetchCreditDeposites, fetchOperationMode } from '@/api/account';
import { useEffect, useReducer } from '@tarojs/taro';
import Actions from '@/types/Store/Actions';
type CreditDepositsState = {
amount: number; // 金额
areaId: number; // 区域id
operateId: number; // 运营商id
showType: string; //展示类型 1授信额度 2保证金
};
const reducer = (state: CreditDepositsState, action: Actions) => {
switch (action.type) {
case 'updateCreditInfo':
return action.payload;
default:
return state;
}
};
const initState = {
amount: 0,
areaId: 0,
operateId: 0,
showType: '',
};
const useCreditDeposits = (areaId: number): CreditDepositsState => {
const [state, dispatch] = useReducer(reducer, initState);
useEffect(() => {
fetchOperationMode({
areaId: areaId,
}).then(res => {
if (res.data.mode === '1' || res.data.mode === '2') {
fetchCreditDeposites({
areaId: areaId,
}).then(res => {
if (res.data) {
dispatch({ type: 'updateCreditInfo', payload: res.data });
}
});
}
});
}, [areaId]);
return state;
};
export default useCreditDeposits;
src/hooks/useRechargePay.ts 0 → 100644
import { useEffect, useReducer } from '@tarojs/taro';
import { fetchPayConfig, PayConfig, PayTypeVo } from '@/api/account';
import Actions from '@/types/Store/Actions';
enum FirstRechargeState {
isFirstRecharge = 1,
notFirstRecharge = 0,
}
type RechargePayState = {
paywayList: PayTypeVo[];
payConfigList: PayConfig[];
isFirstRecharge: FirstRechargeState;
};
const reducer = (state: RechargePayState, action: Actions) => {
switch (action.type) {
case 'updateRechargeInfo':
return action.payload;
default:
return state;
}
};
const usePaywayList = (
areaId: number,
customerId: number,
): RechargePayState => {
const [state, dispatch] = useReducer(reducer, {
paywayList: [],
payConfigList: [],
isFirstRecharge: 0,
});
const fetchDate = (areaId: number, customerId: number) => {
fetchPayConfig({
areaId,
customerId,
})
.then(res => {
console.log(res);
const {
isFirstRecharge,
listPayList,
listRechargeConfDetail,
} = res.data;
dispatch({
type: 'updateRechargeInfo',
payload: {
isFirstRecharge,
payConfigList: listRechargeConfDetail,
paywayList: listPayList,
},
});
})
.catch(console.error);
};
useEffect(() => {
fetchDate(areaId, customerId);
}, [areaId, customerId]);
return state;
};
export default usePaywayList;
src/hooks/useWaitPayOrderState.ts 0 → 100644
import { useEffect, useReducer } from '@tarojs/taro';
import { fetchPayOrder, fetchOrderDetailAndPay } from '@/api/order';
import { PaymentAndActiveInfo, CustomerBeanAccountVo } from '@/api/baseClass';
import Order from '@/types/Order/Order';
import Actions from '@/types/Store/Actions';
import { useDispatch } from '@tarojs/redux';
import { updateOrderState } from '@/store/rootReducers/orderState';
type PayOrderData = {
accountList: CustomerBeanAccountVo[];
orderInfo: Order;
payInfos: {
paymentAndActiveInfos: PaymentAndActiveInfo[];
paymentConfId: number;
};
};
const initPayOrderData = {
accountList: [],
orderInfo: {
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: '',
},
payInfos: {
paymentAndActiveInfos: [],
paymentConfId: 0,
},
};
const reducer = (state: PayOrderData, action: Actions) => {
switch (action.type) {
case 'updateOrderData':
return {
...state,
...action.payload,
};
default:
return state;
}
};
const useWaitPayOrderState = (customerId: number): PayOrderData => {
const [state, dispatch] = useReducer(reducer, initPayOrderData);
const dispatchAction = useDispatch();
useEffect(() => {
fetchPayOrder({
customerId: customerId,
})
.then(res => {
if (res.data.length) {
dispatchAction(updateOrderState(true));
fetchOrderDetailAndPay({ id: res.data[0].id })
.then(({ accounts, orderInfo, payInfos }) => {
dispatch({
type: 'updateOrderData',
payload: {
accountList: accounts,
orderInfo: orderInfo,
payInfos: payInfos,
},
});
})
.catch(err => {
console.log(err);
});
}
})
.catch(err => {
console.log(err);
});
}, [customerId]);
return state;
};
export default useWaitPayOrderState;
src/pages/Account/Account.scss 0 → 100644
.Account {
.Account-Card-warp {
padding: 40px 32px;
border-bottom: 1px solid #eee;
.Account-Card {
position: relative;
height: 360px;
.Account-Card-money {
padding: 60px 80px 36px;
color: #fff;
display: flex;
.Account-Card-label {
font-size: 24px;
margin-bottom: 16px;
}
.Account-Card-num {
font-size: 44px;
}
.Account-Card-Aimi {
width: 248px;
}
.Account-Card-credit {
position: relative;
padding-left: 66px;
&::after {
content: ' ';
position: absolute;
top: 46px;
left: 0;
height: 40px;
border-right: 1px solid #b5bffa;
}
}
}
.Account-line {
border-bottom: 1px solid #b5bffa;
margin: 0 40px;
}
.Account-Card-Bean {
padding: 30px 40px 0;
display: flex;
flex-flow: wrap;
font-size: 24px;
color: #fff;
.Account-Card-BeanItem {
width: 40%;
display: flex;
align-items: center;
margin: 0 5% 16px;
.Account-Card-BeanIcon {
width: 24px;
height: 24px;
margin-right: 16px;
}
.Account-Card-BeanCount {
width: 105px;
font-size: 28px;
}
}
}
}
}
.Account-Money {
padding: 60px 32px 20px;
display: flex;
// justify-content: space-between;
flex-wrap: wrap;
.Account-Money-Item {
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
width: 218px;
height: 160px;
text-align: center;
border: 4px solid #e6ebfd;
border-radius: 24px;
margin-bottom: 20px;
margin-right: 15px;
font-size: 32px;
&:nth-child(3n + 3) {
margin-right: 0;
}
&.selected {
background-color: #6180f4;
border-color: #6180f4;
color: #fff;
}
.giveText {
font-size: 24px;
}
}
}
.Account-Payway {
padding: 0 32px;
.Account-Payway-Item {
display: flex;
align-items: center;
.Account-Payway-Item-icon {
width: 56px;
height: 56px;
margin-right: 20px;
}
.Account-Payway-Item-name {
flex: 1;
}
.Account-Payway-Item-state {
width: 40px;
height: 40px;
margin-right: 18px;
}
}
}
.Account-Paybtn {
margin: 60px 32px 40px;
}
}
src/pages/Account/Account.tsx 0 → 100644
import './Account.scss';
import AccountCardBg from '../../images/account/bg_zhanghu@2x.png';
import TBeanIcon from '../../images/home/icon_tongyongdou@2x.png';
import HBeanIcon from '../../images/home/icon_chuifengdou@2x.png';
import WBeanIcon from '../../images/home/ic_yinshui@2x.png';
import SBeanIcon from '../../images/home/ic_xiyu@2x.png';
import WechatIcon from '../../images/payway/img_wechat@2x.png';
import PaySelectedIcon from '../../images/payway/pc_sel_icon@2x.png';
import radioIcon from '../../images/login/pc_nor_icon@2x.png';
import { View, Button, Image, Text } from '@tarojs/components';
import Taro, { useState } from '@tarojs/taro';
import { useSelector } from '@tarojs/redux';
import { Customer } from '@/types/Customer/Customer';
import { Service } from '@/api/home';
import useRechargePay from '@/hooks/useRechargePay';
import useAllBeanCount, { BeanType } from '@/hooks/useAllBeanCount';
import { rechargeOrder } from '@/api/account';
import AES from 'crypto-js/aes';
import Utf8 from 'crypto-js/enc-utf8';
import ECBmode from 'crypto-js/mode-ecb';
import PaddingPkcs7 from 'crypto-js/pad-pkcs7';
import useCreditDeposits from '@/hooks/useCreditDeposits';
enum PaywayCode {
wx = 2,
}
export const AccountComponent = () => {
const [payConfigId, setPayConfigId] = useState(0);
const [paywayId, setPaywayId] = useState(PaywayCode.wx);
const userinfo = useSelector(
(state: { userinfo: Customer }) => state.userinfo,
);
const serviceList = useSelector(
(state: { serviceList: Service[] }) => state.serviceList,
);
const { paywayList, payConfigList, isFirstRecharge } = useRechargePay(
userinfo.areaId,
userinfo.customerId,
);
const [filterBeanList, fetchNewBeanList] = useAllBeanCount(
userinfo,
serviceList,
);
const creditInfo = useCreditDeposits(userinfo.areaId);
const clickPayBtn = () => {
if (!payConfigId) {
Taro.showToast({
title: '请选择充值金额',
icon: 'none',
});
return;
}
if (!paywayId) {
Taro.showToast({
title: '请选择支付方式',
icon: 'none',
});
return;
}
let preAimiItem = filterBeanList.find(
item => item.serviceId === BeanType.aimi,
);
let preAimi = preAimiItem ? preAimiItem.money : 0;
console.log('in recharge: preAimi', preAimiItem, preAimi);
rechargeOrder({
id: payConfigId,
customerId: userinfo.customerId,
isFirstRecharge: isFirstRecharge,
rechargeType: paywayId.toString(),
})
.then(res => {
const { canCall, payStr } = res;
console.log(res);
if (canCall) {
if (payStr) {
const key = userinfo.customerId.toString().padEnd(16, '0');
const payData = JSON.parse(
AES.decrypt(payStr, Utf8.parse(key), {
mode: ECBmode,
padding: PaddingPkcs7,
}).toString(Utf8),
);
console.log(payData);
Taro.requestPayment({
timeStamp: payData.msg.timeStamp.toString(),
nonceStr: payData.msg.nonceStr,
package: payData.msg.package,
signType: payData.msg.signType,
paySign: payData.msg.paySign,
})
.then(res => {
console.log(res);
fetchNewBeanList(
userinfo.customerId,
userinfo.areaId,
userinfo.customerPhone,
)
.then(beanAccount => {
let aimiItem = beanAccount.find(
item => item.serviceId === '0',
);
console.log(aimiItem, preAimi);
if (aimiItem && aimiItem.money === preAimi) {
Taro.showModal({
title: '提示',
content:
'由于网络原因，本次充值可能延迟到账，请稍后查看余额',
});
}
})
.catch(console.error);
})
.catch(err => {
Taro.showToast({
title: err.msg || '发起支付失败',
icon: 'none',
});
});
}
} else {
Taro.showToast({
title: res.msg,
icon: 'none',
});
}
})
.catch(err => {
Taro.showToast({
title: err.msg || '呼起失败！',
icon: 'none',
});
});
};
return (
<View className='Account'>
<View className='Account-Card-warp'>
<View className='Account-Card'>
<Image className='bg' src={AccountCardBg} />
<View className='Account-Card-money'>
<View className='Account-Card-Aimi'>
<View className='Account-Card-label'>艾米余额</View>
{filterBeanList.length &&
filterBeanList.map(beanItem =>
beanItem.serviceId === BeanType.aimi ? (
<View key={beanItem.serviceId} className='Account-Card-num'>
{beanItem.money.toFixed(2)}
</View>
) : null,
)}
</View>
{creditInfo.showType && (
<View className='Account-Card-credit'>
<View className='Account-Card-label'>
{creditInfo.showType == '1' ? '我的授信' : '我的保证金'}
</View>
<View className='Account-Card-num'>
{creditInfo.amount.toFixed(2)}
</View>
</View>
)}
</View>
<View className='Account-line' />
<View className='Account-Card-Bean'>
{filterBeanList.length &&
filterBeanList.map(beanItem =>
beanItem.serviceId === BeanType.common ? (
<View
key={beanItem.serviceId}
className='Account-Card-BeanItem'>
<Image className='Account-Card-BeanIcon' src={TBeanIcon} />
<Text>通用豆：</Text>
<Text className='Account-Card-BeanCount'>
{beanItem.money ? beanItem.money.toFixed(2) : '0.00'}
</Text>
</View>
) : beanItem.serviceId === BeanType.water ? (
<View
key={beanItem.serviceId}
className='Account-Card-BeanItem'>
<Image className='Account-Card-BeanIcon' src={WBeanIcon} />
<Text>饮水豆：</Text>
<Text className='Account-Card-BeanCount'>
{beanItem.money ? beanItem.money.toFixed(2) : '0.00'}
</Text>
</View>
) : beanItem.serviceId === BeanType.hairDryer ? (
<View
key={beanItem.serviceId}
className='Account-Card-BeanItem'>
<Image className='Account-Card-BeanIcon' src={HBeanIcon} />
<Text>吹风豆：</Text>
<Text className='Account-Card-BeanCount'>
{beanItem.money ? beanItem.money.toFixed(2) : '0.00'}
</Text>
</View>
) : beanItem.serviceId === BeanType.shower ? (
<View
key={beanItem.serviceId}
className='Account-Card-BeanItem'>
<Image className='Account-Card-BeanIcon' src={SBeanIcon} />
<Text>洗浴豆：</Text>
<Text className='Account-Card-BeanCount'>
{beanItem.money ? beanItem.money.toFixed(2) : '0.00'}
</Text>
</View>
) : null,
)}
</View>
</View>
</View>
<View className='Account-Money'>
{payConfigList.map(item => (
<View
key={item.id}
className={`Account-Money-Item ${
payConfigId === item.id ? 'selected' : ''
}`}
onClick={() => setPayConfigId(item.id)}>
<View>{item.rechargeMoney.toFixed(2)}元</View>
{item.giveId && (
<View className='giveText'>
送{item.giveName}
{item.giveMoney}个
</View>
)}
</View>
))}
</View>
<View className='Account-Payway'>
{paywayList.map(item =>
item.id === 2 ? (
<View
key={item.id}
className='Account-Payway-Item'
onClick={() => setPaywayId(item.id)}>
<Image className='Account-Payway-Item-icon' src={WechatIcon} />
<View className='Account-Payway-Item-name'>{item.name}</View>
{paywayId === item.id ? (
<Image
className='Account-Payway-Item-state'
src={PaySelectedIcon}
/>
) : (
<Image className='Account-Payway-Item-state' src={radioIcon} />
)}
</View>
) : null,
)}
</View>
<Button className='Account-Paybtn' onClick={clickPayBtn}>
确定充值
</Button>
</View>
);
};
src/pages/BarCode/BarCode.tsx
import Taro, { Component } from '@tarojs/taro'; import Taro, { Component, useEffect } from '@tarojs/taro';
import { ComponentClass } from 'react'; import { ComponentClass } from 'react';
import { View, Canvas, Image, Text } from '@tarojs/components'; import { View, Canvas, Image, Text } from '@tarojs/components';
...@@ -10,19 +10,13 @@ import wxbarcode from 'wxbarcode'; ...@@ -10,19 +10,13 @@ import wxbarcode from 'wxbarcode';
import './BarCode.scss'; import './BarCode.scss';
import { UserState, updateUserInfo } from '../../store/rootReducers/userinfo'; import { UserState, updateUserInfo } from '../../store/rootReducers/userinfo';
import { connect } from '@tarojs/redux'; import { connect, useSelector } from '@tarojs/redux';
import { fetchPayOrder, fetchOrderDetailAndPay } from '../../api/order';
import OrderInfo from '../Order/components/OrderInfo/OrderInfo';
import OrderTitle from '../Order/components/OrderTitle/OrderTitle';
import OrderPayway from '../Order/components/OrderPayway/OrderPayway';
import {
PaymentAndActiveInfo,
CustomerBeanAccountVo,
} from '../../api/baseClass';
import { Customer } from '../../types/Customer/Customer'; import { Customer } from '../../types/Customer/Customer';
import { refreshCodeBar } from '../../api/customer'; import { refreshCodeBar } from '../../api/customer';
import Order from '@/types/Order/Order';
import { shareHandle } from '@/common/shareMethod'; import { shareHandle } from '@/common/shareMethod';
import { PayOrderState } from '@/store/rootReducers/orderState';
import WaitPayOrderComponent from '@/components/WaitPayOrder/WaitPayOrder';
import widthWaitPayOrderComponent from '@/components/WaitPayOrder/WaitPayOrder';
type PageStateProps = { type PageStateProps = {
userinfo: Customer; userinfo: Customer;
...@@ -34,25 +28,7 @@ type PageDispatchProps = { ...@@ -34,25 +28,7 @@ type PageDispatchProps = {
type PageOwnProps = {}; type PageOwnProps = {};
type PageState = { type PageState = {
ScreenBrightness: number; ScreenBrightness: number;
showPayOrder: boolean;
showBig: boolean; showBig: boolean;
accounts: CustomerBeanAccountVo[];
orderInfo: Order;
payInfos: {
paymentAndActiveInfos: PaymentAndActiveInfo[];
paymentConfId: number;
};
deductionInfos: {
amiAccount: number;
beanAccount: number;
deductionMoney: number;
deductionType: string;
orderMoney: number;
payMoney: number;
payType: string;
remainAccount: number;
titlePerfix: string;
};
showBackTag: boolean; showBackTag: boolean;
}; };
...@@ -77,74 +53,14 @@ class BarCode extends Component { ...@@ -77,74 +53,14 @@ class BarCode extends Component {
super(props); super(props);
this.state = { this.state = {
ScreenBrightness: 1, ScreenBrightness: 1,
showPayOrder: false,
showBig: false, showBig: false,
accounts: [],
orderInfo: {
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: '',
},
payInfos: {
paymentAndActiveInfos: [],
paymentConfId: 0,
},
deductionInfos: {
amiAccount: 0,
beanAccount: 0,
deductionMoney: 0,
deductionType: '',
orderMoney: 0,
payMoney: 0,
payType: '',
remainAccount: 0,
titlePerfix: '',
},
showBackTag: false, showBackTag: false,
}; };
} }
onShareAppMessage = shareHandle; onShareAppMessage = shareHandle;
componentWillMount() { componentWillMount() {
const { userinfo } = this.props;
fetchPayOrder({
customerId: userinfo.customerId,
})
.then(res => {
if (res.data.length) {
this.fetchOrder(res.data[0].id);
this.setState({ showPayOrder: true });
} else {
this.drawBarCode(); this.drawBarCode();
}
})
.catch(err => {
console.log(err);
});
console.log('调整亮度'); console.log('调整亮度');
Taro.getScreenBrightness() Taro.getScreenBrightness()
.then(({ value }) => { .then(({ value }) => {
...@@ -194,33 +110,6 @@ class BarCode extends Component { ...@@ -194,33 +110,6 @@ class BarCode extends Component {
} }
} }
fetchOrder(id: number) {
return fetchOrderDetailAndPay({
id,
})
.then(res => {
const { accounts, orderInfo, payInfos } = res;
this.setState({
accounts: accounts,
orderInfo: orderInfo,
payInfos: payInfos,
});
})
.catch(err => {
console.log(err);
});
}
payDoneHandle() {
this.setState(
{
showPayOrder: false,
},
() => {
this.drawBarCode();
},
);
}
drawBarCode() { drawBarCode() {
const { userinfo } = this.props; const { userinfo } = this.props;
const routeParams = this.$router.params; const routeParams = this.$router.params;
...@@ -248,6 +137,7 @@ class BarCode extends Component { ...@@ -248,6 +137,7 @@ class BarCode extends Component {
showBig: !showBig, showBig: !showBig,
}); });
} }
refreshCodeBar() { refreshCodeBar() {
const { updateUserInfo } = this.props; const { updateUserInfo } = this.props;
refreshCodeBar() refreshCodeBar()
...@@ -268,31 +158,22 @@ class BarCode extends Component { ...@@ -268,31 +158,22 @@ class BarCode extends Component {
} }
render() { render() {
const { userinfo } = this.props; const { showBig, showBackTag } = this.state;
const { const payOrderState = useSelector(
showPayOrder, (state: { orderState: PayOrderState }) =>
showBig, state.orderState.waitPayOrderState,
orderInfo, );
payInfos,
accounts, useEffect(() => {
showBackTag, if (!payOrderState) {
} = this.state; this.drawBarCode();
}
}, [payOrderState]);
return ( return (
<View className='BarCode'> <View className='BarCode'>
{showPayOrder && ( <WaitPayOrderComponent />
<View className='OrderBox'> <View className={payOrderState ? 'blur' : ''}>
<OrderTitle price={orderInfo.payableMoney} />
<OrderInfo orderInfo={orderInfo} />
<OrderPayway
onPayDoneCallback={this.payDoneHandle}
userinfo={userinfo}
accounts={accounts}
orderInfo={orderInfo}
payInfos={payInfos}
/>
</View>
)}
<View className={showPayOrder ? 'blur' : ''}>
{showBackTag && ( {showBackTag && (
<View className='BackTag' onClick={this.goBackPage}> <View className='BackTag' onClick={this.goBackPage}>
<Image className='icon' src={CodeIcon} /> <Image className='icon' src={CodeIcon} />
...@@ -305,7 +186,7 @@ class BarCode extends Component { ...@@ -305,7 +186,7 @@ class BarCode extends Component {
src={RefreshIcon} src={RefreshIcon}
onClick={this.refreshCodeBar} onClick={this.refreshCodeBar}
/> />
{showPayOrder ? null : ( {payOrderState ? null : (
<View className={`BarCodeImg ${showBig ? 'BarCodeImgBig' : ''}`}> <View className={`BarCodeImg ${showBig ? 'BarCodeImgBig' : ''}`}>
<Canvas <Canvas
className={`BarCodeCav ${showBig ? 'show' : ''}`} className={`BarCodeCav ${showBig ? 'show' : ''}`}
...@@ -317,6 +198,7 @@ class BarCode extends Component { ...@@ -317,6 +198,7 @@ class BarCode extends Component {
/> />
</View> </View>
)} )}
<View className='toggleBtn' onClick={this.toggleBigBarCode}> <View className='toggleBtn' onClick={this.toggleBigBarCode}>
<Image <Image
className={`arricon ${showBig ? 'rever' : ''}`} className={`arricon ${showBig ? 'rever' : ''}`}
...@@ -333,4 +215,4 @@ class BarCode extends Component { ...@@ -333,4 +215,4 @@ class BarCode extends Component {
} }
} }
export default BarCode as ComponentClass<PageOwnProps, PageState>; export default BarCode;
src/pages/Home/Home.scss
...@@ -30,15 +30,19 @@ ...@@ -30,15 +30,19 @@
.Home-UserBox { .Home-UserBox {
position: relative; position: relative;
// height: 390px; height: 320px;
padding: 0 0 40px; padding: 0 32px;
margin: 0 32px; // margin: 0 32px;
box-sizing: content-box; box-sizing: content-box;
background-color: #eee;
.Home-UserBox-content {
position: relative;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
.bg { .bg {
height: 390px; height: 390px;
&.big {
height: 428px;
}
} }
.Home-UserBox-Setting { .Home-UserBox-Setting {
position: absolute; position: absolute;
...@@ -75,32 +79,11 @@ ...@@ -75,32 +79,11 @@
border-top: 1px solid #d7daff; border-top: 1px solid #d7daff;
margin: 0 auto; margin: 0 auto;
} }
.Home-UserBox-Bean {
padding: 32px 40px 70px;
display: flex;
flex-flow: wrap;
font-size: 24px;
color: #666;
.Home-UserBox-BeanItem {
width: 40%;
display: flex;
align-items: center;
margin: 0 5%;
}
.Home-UserBox-BeanIcon {
width: 24px;
height: 24px;
margin-right: 12px;
}
.Home-UserBox-BeanCount {
font-size: 28px;
color: #333;
}
} }
.Home-UserBox-Order { .Home-UserBox-Order {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 0px; bottom: -40px;
transform: translate(-50%); transform: translate(-50%);
width: 572px; width: 572px;
height: 80px; height: 80px;
...@@ -109,26 +92,27 @@ ...@@ -109,26 +92,27 @@
border-radius: 50px; border-radius: 50px;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
}
.Home-UserBox-Order-text { .Home-UserBox-Order-text {
position: relative;
flex: 1; flex: 1;
text-align: center; text-align: center;
color: #fff; color: #fff;
font-size: 24px; font-size: 24px;
&:first-child::after {
content: ' ';
position: absolute;
height: 44px;
width: 1px;
background-color: #abbcf9;
right: 0;
top: 18px;
} }
.Home-UserBox-Order-right {
background-color: #375ef1;
width: 212px;
display: flex;
justify-content: center;
align-items: center;
} }
.Home-UserBox-Order-icon {
width: 40px;
height: 20px;
} }
} }
.Home-Service {
padding-top: 40px;
.Home-Service-List { .Home-Service-List {
display: flex; display: flex;
flex-flow: wrap; flex-flow: wrap;
...@@ -146,6 +130,7 @@ ...@@ -146,6 +130,7 @@
margin: 20px auto 0; margin: 20px auto 0;
} }
} }
}
.Home-Announcement { .Home-Announcement {
position: relative; position: relative;
height: 222px; height: 222px;
......
src/pages/Order/OrderDetail/OrderDetail.tsx
import { ComponentClass } from 'react'; import Taro from '@tarojs/taro';
import Taro, { Component, Config } from '@tarojs/taro';
import { View, Text } from '@tarojs/components'; import { View, Text } from '@tarojs/components';
import OrderTitle from '../components/OrderTitle/OrderTitle'; import OrderTitle from '../components/OrderTitle/OrderTitle';
import OrderInfo from '../components/OrderInfo/OrderInfo'; import OrderInfo from '../components/OrderInfo/OrderInfo';
import './OrderDetail.scss'; import './OrderDetail.scss';
import { fetchOrderDetailAndPay } from '../../../api/order'; import { getPayType } from '../../../utils/payType';
import { PayType, getPayType } from '../../../utils/payType';
import { shareHandle } from '@/common/shareMethod'; import { shareHandle } from '@/common/shareMethod';
import { useSelector } from '@tarojs/redux';
import { OrderStoreState } from '../OrderList/store';
type pageProps = {}; const OrderDetail = () => {
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;
componentWillMount() {
console.log('preload: ', this.$router.preload);
const data = this.$router.preload;
this.setState({
...data,
});
// this.getDetailInfo(id);
}
getDetailInfo(id: number) {
return fetchOrderDetailAndPay({
id: id,
})
.then(res => {
this.setState({
...res.data,
});
console.log(res);
})
.catch(err => {
console.log(err);
});
}
render() {
const { const {
actualMoney, actualMoney,
payableMoney, payableMoney,
...@@ -121,8 +25,12 @@ class OrderDetail extends Component { ...@@ -121,8 +25,12 @@ class OrderDetail extends Component {
equipmentPosition, equipmentPosition,
deductionMoney, deductionMoney,
thirdDiscountMoney, thirdDiscountMoney,
} = this.state; } = useSelector(
(state: { OrderList: OrderStoreState }) => state.OrderList.selectedOrder,
);
const payTypeName = getPayType(payType); const payTypeName = getPayType(payType);
return ( return (
<View className='OrderDetail'> <View className='OrderDetail'>
<OrderTitle price={payableMoney} /> <OrderTitle price={payableMoney} />
...@@ -176,7 +84,10 @@ class OrderDetail extends Component { ...@@ -176,7 +84,10 @@ class OrderDetail extends Component {
) : null} ) : null}
</View> </View>
); );
} };
} OrderDetail.config = {
navigationBarTitleText: '订单详情',
};
OrderDetail.onShareAppMessage = shareHandle;
export default OrderDetail as ComponentClass<pageProps, PageState>; export default OrderDetail;
src/pages/Order/OrderList/OrderList.scss
page {
padding-top: 80px;
background-color: #eee;
}
.OrderList { .OrderList {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 100%; // height: 100%;
overflow: hidden; // overflow: hidden;
.Tab { .Tab {
position: absolute; position: fixed;
top: 0; top: 0;
display: flex; display: flex;
background-color: #fff; background-color: #fff;
...@@ -14,6 +18,7 @@ ...@@ -14,6 +18,7 @@
line-height: 80px; line-height: 80px;
text-align: center; text-align: center;
font-size: 30px; font-size: 30px;
z-index: 1;
.Tab-item { .Tab-item {
width: 50%; width: 50%;
color: #999; color: #999;
...@@ -28,6 +33,10 @@ ...@@ -28,6 +33,10 @@
margin-top: 80px; margin-top: 80px;
background-color: #eee; background-color: #eee;
} }
.OrderList-Wrap {
padding-top: 22px;
background-color: #eee;
}
.OrderList-Group { .OrderList-Group {
margin-bottom: 22px; margin-bottom: 22px;
.OrderList-GroupTitle { .OrderList-GroupTitle {
......
src/pages/Order/OrderList/actions.ts
import Actions from '../../../types/Store/Actions'; import Actions from '../../../types/Store/Actions';
import Order, { AllOrderItem } from '../../../types/Order/Order'; import Order, { AllOrderItem } from '../../../types/Order/Order';
export const TOGGLE_ORDER_STATE = 'TOGGLE_ORDER_STATE'; import { RechargeOrderItem } from '@/api/order';
export const UPDATE_PAY_LIST = 'UPDATE_PAY_LIST'; export const SELECT_ORDER = 'SELECT_ORDER';
export const UPDATE_ALL_LIST = 'UPDATE_ALL_LIST'; 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> = { export type UpdateOrderParams<T> = {
lastOrderId?: number; lastOrderId?: number;
list: T[]; list: T[];
}; };
export const toggleOrderState = (state: String): Actions => ({ export const selectOrder = (state: Order): Actions => ({
type: TOGGLE_ORDER_STATE, type: SELECT_ORDER,
payload: state, payload: state,
}); });
export const updatePayOrderList = ( export const updateConsumeOrders = (state: AllOrderItem[]): Actions => ({
state: UpdateOrderParams<Order> type: UPDATE_CONSUME_ORDERS,
): Actions => ({
type: UPDATE_PAY_LIST,
payload: state, payload: state,
}); });
export const updateAllOrderList = ( export const appendConsumeOrders = (state: AllOrderItem[]): Actions => ({
state: UpdateOrderParams<AllOrderItem> type: APPEND_CONSUME_ORDERS,
): Actions => ({
type: UPDATE_ALL_LIST,
payload: state, 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 Actions from '../../../types/Store/Actions';
import Order, { AllOrderItem } from '../../../types/Order/Order'; import Order, { AllOrderItem } from '../../../types/Order/Order';
import { import {
TOGGLE_ORDER_STATE, SELECT_ORDER,
UPDATE_PAY_LIST, UPDATE_CONSUME_ORDERS,
UPDATE_ALL_LIST, APPEND_CONSUME_ORDERS,
UPDATE_RECHARGE_ORDERS,
APPEND_RECHARGE_ORDERS,
UPDATE_CONSUME_LASTID,
UPDATE_RECHARGE_LASTID,
} from './actions'; } from './actions';
import { RechargeOrderItem } from '@/api/order';
export interface StoreState { export type ConsumeOrderInfo = {
orderState: String; consumeOrders: AllOrderItem[];
payList: Order[]; lastOrderId: number;
allList: AllOrderItem[]; };
export type RechargeOrderInfo = {
rechargeOrders: RechargeOrderItem[];
lastOrderId: number;
};
export interface OrderStoreState {
selectedOrder: Order;
consume: ConsumeOrderInfo;
recharge: RechargeOrderInfo;
} }
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 = { const INITIAL_STATE = {
orderState: '1', selectedOrder: initOrder(),
payList: [], consume: {
allList: [], consumeOrders: [],
lastOrderId: 0,
},
recharge: {
rechargeOrders: [],
lastOrderId: 0,
},
};
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( export default function OrderList(
state: StoreState = INITIAL_STATE, state: OrderStoreState = INITIAL_STATE,
actions: Actions actions: Actions,
) { ) {
switch (actions.type) { switch (actions.type) {
case TOGGLE_ORDER_STATE: case SELECT_ORDER:
return { return {
...state, ...state,
orderState: actions.payload, selectedOrder: actions.payload,
}; };
case UPDATE_PAY_LIST: case UPDATE_CONSUME_ORDERS:
if (actions.payload.lastOrderId) { if (actions.payload.length) {
let arr = actions.payload;
let lastOrderId = getLastId(arr);
return { return {
...state, ...state,
payList: [...state.payList, ...actions.payload.list], consume: {
lastOrderId: lastOrderId,
consumeOrders: actions.payload,
},
}; };
} else { }
return { return {
...state, ...state,
payList: actions.payload.list, consume: {
...state.consume,
consumeOrders: actions.payload,
},
}; };
} case APPEND_CONSUME_ORDERS:
case UPDATE_ALL_LIST: if (actions.payload.length) {
if (actions.payload.lastOrderId) { let arr = actions.payload;
if (actions.payload.list.length) { let lastOrderId = getLastId(arr);
let key = actions.payload.list[0].groupName;
let index = state.allList.findIndex(item => item.groupName == key);
if (index > -1) {
return { return {
...state, ...state,
allList: [ consume: {
...state.allList.slice(0, index), lastOrderId: lastOrderId,
{ consumeOrders: [...state.consume.consumeOrders, ...actions.payload],
groupName: state.allList[index].groupName,
data: [
...state.allList[index].data,
...actions.payload.list[0].data,
],
}, },
...actions.payload.list.slice(1),
],
}; };
} }
return { return {
...state, ...state,
allList: [...state.allList, ...actions.payload.list], 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:
if (actions.payload.length) {
let arr = actions.payload;
let lastOrderId = getLastId(arr);
return {
...state,
recharge: {
lastOrderId: lastOrderId,
rechargeOrders: actions.payload,
},
}; };
} }
return state; return {
...state,
recharge: {
...state.recharge,
rechargeOrders: actions.payload,
},
};
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 { return {
...state, ...state,
allList: actions.payload.list, recharge: {
...state.recharge,
rechargeOrders: [
...state.recharge.rechargeOrders,
...actions.payload,
],
},
};
case UPDATE_RECHARGE_LASTID:
return {
...state,
recharge: {
...state.recharge,
lastOrderId: actions.payload,
},
}; };
default: default:
return state; return state;
......
src/pages/Order/OrderList/useConsumeOrders.ts 0 → 100644
import { useEffect } from '@tarojs/taro';
import { fetchAllOrder } from '@/api/order';
import { AllOrderItem } from '@/types/Order/Order';
import { useSelector, useDispatch } from '@tarojs/redux';
import { OrderStoreState } from './store';
import {
appendConsumeOrders,
updateConsumeOrders,
updateConsumeLastId,
} from './actions';
const useConsumeOrders = (
customerId: number,
pageSize: number,
): [AllOrderItem[], () => Promise<any>, () => Promise<any>] => {
const state = useSelector(
(state: { OrderList: OrderStoreState }) => state.OrderList.consume,
);
const dispatch = useDispatch();
const fetchData = (customerId: number, pageSize: number) =>
fetchAllOrder({
customerId,
lastOrderId: state.lastOrderId,
pageSize,
})
.then(res => {
state.lastOrderId
? dispatch(appendConsumeOrders(res.data))
: dispatch(updateConsumeOrders(res.data));
return res.data;
})
.catch(err => {
console.log(err);
});
const fetchMore = () => {
return fetchData(customerId, pageSize);
};
const resetOrders = () => {
dispatch(updateConsumeLastId(0));
return fetchData(customerId, pageSize);
};
useEffect(() => {
fetchData(customerId, pageSize);
}, [customerId, pageSize]);
return [state.consumeOrders, fetchMore, resetOrders];
};
export default useConsumeOrders;
src/pages/Order/OrderList/useRechargeOrders.ts 0 → 100644
import { useEffect, useReducer } from '@tarojs/taro';
import { fetchRechargeOrders, RechargeOrderItem } from '@/api/order';
import { useSelector, useDispatch } from '@tarojs/redux';
import { OrderStoreState } from './store';
import {
updateRechargeLastId,
appendRechargeOrders,
updateRechargeOrders,
} from './actions';
const useRechargeOrders = (
customerId: number,
pageSize: number,
): [RechargeOrderItem[], () => Promise<any>, () => Promise<any>] => {
const state = useSelector(
(state: { OrderList: OrderStoreState }) => state.OrderList.recharge,
);
const dispatch = useDispatch();
const fetchData = (customerId: number, pageSize: number) =>
fetchRechargeOrders({
customerId,
lastOrderId: state.lastOrderId,
pageSize,
})
.then(res => {
state.lastOrderId
? dispatch(appendRechargeOrders(res.data))
: dispatch(updateRechargeOrders(res.data));
return res.data;
})
.catch(err => {
console.log(err);
});
const fetchMore = () => {
return fetchData(customerId, pageSize);
};
const resetOrders = () => {
dispatch(updateRechargeLastId(0));
return fetchData(customerId, pageSize);
};
useEffect(() => {
fetchData(customerId, pageSize);
}, [customerId, pageSize]);
return [state.rechargeOrders, fetchMore, resetOrders];
};
export default useRechargeOrders;
src/pages/Order/OrderPay/OrderPay.tsx
...@@ -86,8 +86,8 @@ class OrderPay extends Component { ...@@ -86,8 +86,8 @@ class OrderPay extends Component {
onShareAppMessage = shareHandle; onShareAppMessage = shareHandle;
componentWillMount() { componentWillMount() {
const data = this.$router.preload; const data = this.$router.params;
if (data) { if (data && data.id) {
this.fetchOrder(data.id); this.fetchOrder(data.id);
} }
} }
......
src/pages/Order/components/OrderItem/OrderItem.tsx
...@@ -83,7 +83,7 @@ class OrderItem extends Component { ...@@ -83,7 +83,7 @@ class OrderItem extends Component {
</View> </View>
<View <View
className={`OrderItem-price ${orderState === '1' ? 'topay' : ''}`}> className={`OrderItem-price ${orderState === '1' ? 'topay' : ''}`}>
￥ {payableMoney} ￥ {payableMoney.toFixed(2)}
</View> </View>
</View> </View>
); );
......
src/pages/Order/components/RechargeItem/RechargeItem.scss 0 → 100644
.RechargeItem {
position: relative;
box-sizing: border-box;
width: 702px;
margin: 20px auto;
background-color: #fff;
border-radius: 8px;
padding: 19px 26px 15px;
font-size: 26px;
.RechargeItem-text {
height: 54px;
line-height: 54px;
}
.RechargeItem-price {
position: absolute;
top: 18px;
right: 26px;
font-size: 36px;
}
.RechargeItem-price.topay {
color: #ff4e4e;
}
.RechargeItem-toPay {
position: absolute;
top: 66px;
right: 26px;
font-size: 24px;
color: #6180f4;
}
.RechargeItem-payDone {
position: absolute;
width: 102px;
height: 94px;
right: 10px;
bottom: 10px;
}
}
src/pages/Order/components/RechargeItem/RechargeItem.tsx 0 → 100644
import Taro from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components';
import payDoneImg from '../../../../images/order/dingdan_yiwancheng_img@2x.png';
import './RechargeItem.scss';
import { RechargeOrder } from '@/api/order';
const RechargeItem = (props: { data: RechargeOrder }) => {
const {
data: { createAt, rechargeRemark, actualAmount, orderNum },
} = props;
return (
<View className='RechargeItem'>
<View className='RechargeItem-text'>
<Text>充值说明：</Text>
<Text>{rechargeRemark}</Text>
</View>
<View className='RechargeItem-text'>
<Text>充值时间：</Text>
<Text>{createAt}</Text>
<Image className='RechargeItem-payDone' src={payDoneImg} />
</View>
<View className='RechargeItem-text'>
<Text>订单编号：</Text>
<Text>{orderNum}</Text>
</View>
<View
className={`RechargeItem-price ${actualAmount >= 0 ? 'topay' : ''}`}>
￥ {actualAmount.toFixed(2)}
</View>
</View>
);
};
RechargeItem.defaultProps = {
data: {
actualAmount: 0,
afterAmount: 0,
areaId: 0,
areaName: '',
beforeAmount: 0,
businessType: '',
completeAt: '',
createAt: '',
customerId: 0,
customerName: '',
customerPhone: '',
failReason: '',
giveMoney: 0,
handler: '',
id: 0,
operType: '',
operateId: 0,
operateName: '',
orderNum: '',
orderState: '',
payType: '',
rechargeRemark: '',
serviceName: '',
updateAt: '',
},
};
export default RechargeItem;
src/pages/WaterDispenser/WaterDispenser.tsx
...@@ -18,15 +18,14 @@ import { ...@@ -18,15 +18,14 @@ import {
PageConfigResponse, PageConfigResponse,
} from '@/api/waterDispenser'; } from '@/api/waterDispenser';
import { Customer } from '@/types/Customer/Customer'; import { Customer } from '@/types/Customer/Customer';
import { connect } from '@tarojs/redux'; import { connect, useSelector } from '@tarojs/redux';
import { ComponentClass } from 'react'; import { ComponentClass } from 'react';
import { ResponseDataEntity } from '@/api'; import { ResponseDataEntity } from '@/api';
import { CustomerBeanAccountVo, PaymentAndActiveInfo } from '@/api/baseClass'; import { CustomerBeanAccountVo, PaymentAndActiveInfo } from '@/api/baseClass';
import Order from '@/types/Order/Order'; import Order from '@/types/Order/Order';
import { fetchOrderDetailAndPay, fetchPayOrder } from '@/api/order'; import { fetchOrderDetailAndPay, fetchPayOrder } from '@/api/order';
import OrderTitle from '../Order/components/OrderTitle/OrderTitle'; import WaitPayOrderComponent from '@/components/WaitPayOrder/WaitPayOrder';
import OrderInfo from '../Order/components/OrderInfo/OrderInfo'; import { PayOrderState } from '@/store/rootReducers/orderState';
import OrderPayway from '../Order/components/OrderPayway/OrderPayway';
export type DeviceInfo = { export type DeviceInfo = {
code: string; code: string;
...@@ -42,14 +41,6 @@ type PageState = { ...@@ -42,14 +41,6 @@ type PageState = {
useList: DeviceInfo[]; useList: DeviceInfo[];
timer: number | null; timer: number | null;
showToggleTag: boolean; showToggleTag: boolean;
showPayOrder: boolean;
accounts: CustomerBeanAccountVo[];
orderInfo: Order;
payInfos: {
paymentAndActiveInfos: PaymentAndActiveInfo[];
paymentConfId: number;
};
}; };
type IProps = PageStateProps; type IProps = PageStateProps;
...@@ -74,47 +65,10 @@ class WaterDispenser extends Component { ...@@ -74,47 +65,10 @@ class WaterDispenser extends Component {
useList: [], useList: [],
timer: null, timer: null,
showToggleTag: false, showToggleTag: false,
showPayOrder: false,
accounts: [],
orderInfo: {
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: '',
},
payInfos: {
paymentAndActiveInfos: [],
paymentConfId: 0,
},
}; };
} }
componentWillMount() { componentWillMount() {
this.getPayState();
this.getUsedEquipment(); this.getUsedEquipment();
this.fetchPageConfig(); this.fetchPageConfig();
} }
...@@ -123,43 +77,6 @@ class WaterDispenser extends Component { ...@@ -123,43 +77,6 @@ class WaterDispenser extends Component {
this.clearTimer(); this.clearTimer();
} }
getPayState() {
const { userinfo } = this.props;
fetchPayOrder({
customerId: userinfo.customerId,
})
.then(res => {
if (res.data.length) {
this.fetchOrder(res.data[0].id);
this.setState({ showPayOrder: true });
}
})
.catch(err => {
console.log(err);
});
}
fetchOrder(id: number) {
return fetchOrderDetailAndPay({
id,
})
.then(res => {
const { accounts, orderInfo, payInfos } = res;
this.setState({
accounts: accounts,
orderInfo: orderInfo,
payInfos: payInfos,
});
})
.catch(err => {
console.log(err);
});
}
payDoneHandle() {
this.setState({
showPayOrder: false,
});
}
fetchPageConfig() { fetchPageConfig() {
const { userinfo } = this.props; const { userinfo } = this.props;
fetchPageConfig({ fetchPageConfig({
...@@ -284,11 +201,11 @@ class WaterDispenser extends Component { ...@@ -284,11 +201,11 @@ class WaterDispenser extends Component {
}); });
} }
getSelectedEquipment(data: DeviceInfo) { getSelectedEquipment = (data: DeviceInfo) => {
this.setState({ this.setState({
deviceInfo: data, deviceInfo: data,
}); });
} };
waterBeginning() { waterBeginning() {
Taro.showLoading(); Taro.showLoading();
...@@ -339,29 +256,16 @@ class WaterDispenser extends Component { ...@@ -339,29 +256,16 @@ class WaterDispenser extends Component {
deviceInfo: { code, position }, deviceInfo: { code, position },
useList, useList,
showToggleTag, showToggleTag,
showPayOrder,
orderInfo,
accounts,
payInfos,
} = this.state; } = this.state;
const { userinfo } = this.props; const payOrderState = useSelector(
(state: { orderState: PayOrderState }) =>
state.orderState.waitPayOrderState,
);
return ( return (
<View className='WaterDispenser'> <View className='WaterDispenser'>
{showPayOrder && ( <WaitPayOrderComponent />
<View className='OrderBox'> <View className={payOrderState ? 'blur' : ''}>
<OrderTitle price={orderInfo.payableMoney} />
<OrderInfo orderInfo={orderInfo} />
<OrderPayway
onPayDoneCallback={this.payDoneHandle}
userinfo={userinfo}
accounts={accounts}
orderInfo={orderInfo}
payInfos={payInfos}
/>
</View>
)}
<View className={showPayOrder ? 'blur' : ''}>
{showToggleTag && ( {showToggleTag && (
<View className='WaterDispenser-tg' onClick={this.toggleCodeState}> <View className='WaterDispenser-tg' onClick={this.toggleCodeState}>
<Image className='icon' src={CodeIcon} /> <Image className='icon' src={CodeIcon} />
......
src/store/reducers.ts
...@@ -2,9 +2,13 @@ import { combineReducers } from 'redux'; ...@@ -2,9 +2,13 @@ import { combineReducers } from 'redux';
import userinfo from './rootReducers/userinfo'; import userinfo from './rootReducers/userinfo';
import OrderList from '../pages/Order/OrderList/store'; import OrderList from '../pages/Order/OrderList/store';
import ShowerReducer from '@/pages/Shower/store'; import ShowerReducer from '@/pages/Shower/store';
import serviceList from './rootReducers/service';
import orderState from './rootReducers/orderState';
export default combineReducers({ export default combineReducers({
userinfo, userinfo,
OrderList, OrderList,
Shower: ShowerReducer, Shower: ShowerReducer,
serviceList,
orderState,
}); });
src/store/rootReducers/orderState.ts 0 → 100644
import Actions from '@/types/Store/Actions';
export type PayOrderState = {
waitPayOrderState: boolean;
};
const INITIAL_STATE = {
waitPayOrderState: false,
};
export const updateOrderState = (state: boolean): Actions => ({
type: 'UPDATE_ORDER_STATE',
payload: state,
});
export default function orderState(
state: PayOrderState = INITIAL_STATE,
action: Actions,
) {
switch (action.type) {
case 'UPDATE_ORDER_STATE':
return { ...state, waitPayOrderState: action.payload };
default:
return state;
}
}
src/store/rootReducers/service.ts 0 → 100644
import Action from '../../types/Store/Actions';
import { Service } from '@/api/home';
const INITIAL_STATE: Service[] = [];
export type ServiceState = StoreState<{ list: Service[] }>;
export const updateServiceList = (entity: Service[]): Action => ({
type: 'UPDATE_SERVICE_LIST',
payload: entity,
});
export default function serviceList(
state: Service[] = INITIAL_STATE,
actions: Action,
): Service[] {
switch (actions.type) {
case 'UPDATE_SERVICE_LIST':
return actions.payload;
default:
return state;
}
}
src/types/Shower/Shower.ts
import { OperationMode } from '@/api/shower';
export type BluetoothDevice = { export type BluetoothDevice = {
code: string; code: string;
isOnlyBluetooth: number; isOnlyBluetooth: number;
operationMode: OperationMode;
position: string; position: string;
}; };
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