Skip to content

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

Merge branch 'test'

parents 5400ee7f 4fe780bc
Showing with 1805 additions and 774 deletions
package.json
{
"name": "wx-school-app",
"version": "1.0.6",
"private": true,
"description": "",
"scripts": {
"build:weapp": "taro build --type weapp",
"build:swan": "taro build --type swan",
"build:alipay": "taro build --type alipay",
"build:tt": "taro build --type tt",
"build:h5": "taro build --type h5",
"build:rn": "taro build --type rn",
"dev:weapp": "npm run build:weapp -- --watch",
"dev:swan": "npm run build:swan -- --watch",
"dev:alipay": "npm run build:alipay -- --watch",
"dev:tt": "npm run build:tt -- --watch",
"dev:h5": "npm run build:h5 -- --watch",
"dev:rn": "npm run build:rn -- --watch"
},
"author": "",
"license": "MIT",
"dependencies": {
"@tarojs/async-await": "1.2.13",
"@tarojs/components": "1.2.13",
"@tarojs/redux": "1.2.13",
"@tarojs/redux-h5": "1.2.13",
"@tarojs/router": "1.2.13",
"@tarojs/taro": "1.2.13",
"@tarojs/taro-alipay": "1.2.13",
"@tarojs/taro-h5": "1.2.13",
"@tarojs/taro-swan": "1.2.13",
"@tarojs/taro-tt": "1.2.13",
"@tarojs/taro-weapp": "1.2.13",
"crypto-js": "^3.1.9-1",
"jsbarcode": "^3.11.0",
"nerv-devtools": "^1.3.9",
"nervjs": "^1.3.9",
"npm": "^6.8.0",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"wxbarcode": "^1.0.2"
},
"devDependencies": {
"@tarojs/cli": "^1.2.13",
"@tarojs/plugin-babel": "1.2.13",
"@tarojs/plugin-csso": "1.2.13",
"@tarojs/plugin-sass": "1.2.13",
"@tarojs/plugin-uglifyjs": "1.2.13",
"@tarojs/webpack-runner": "1.2.13",
"@types/react": "^16.4.8",
"@types/webpack-env": "^1.13.6",
"babel-eslint": "^8.2.3",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-jsx-stylesheet": "^0.6.5",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"cross-env": "^5.2.0",
"eslint": "^4.19.1",
"eslint-config-taro": "1.2.13",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-react": "^7.8.2",
"eslint-plugin-taro": "1.2.13",
"eslint-plugin-typescript": "^0.12.0",
"typescript": "^3.0.1"
}
"name": "wx-school-app",
"version": "1.0.9",
"private": true,
"description": "",
"scripts": {
"build:weapp": "taro build --type weapp",
"build:swan": "taro build --type swan",
"build:alipay": "taro build --type alipay",
"build:tt": "taro build --type tt",
"build:h5": "taro build --type h5",
"build:rn": "taro build --type rn",
"dev:weapp": "npm run build:weapp -- --watch",
"dev:swan": "npm run build:swan -- --watch",
"dev:alipay": "npm run build:alipay -- --watch",
"dev:tt": "npm run build:tt -- --watch",
"dev:h5": "npm run build:h5 -- --watch",
"dev:rn": "npm run build:rn -- --watch"
},
"author": "",
"license": "MIT",
"dependencies": {
"@tarojs/async-await": "1.3.4",
"@tarojs/components": "1.3.4",
"@tarojs/redux": "1.3.4",
"@tarojs/redux-h5": "1.3.4",
"@tarojs/router": "1.3.4",
"@tarojs/taro": "1.3.4",
"@tarojs/taro-alipay": "1.3.4",
"@tarojs/taro-h5": "1.3.4",
"@tarojs/taro-swan": "1.3.4",
"@tarojs/taro-tt": "1.3.4",
"@tarojs/taro-weapp": "1.3.4",
"crypto-js": "^3.1.9-1",
"jsbarcode": "^3.11.0",
"nerv-devtools": "^1.4.3",
"nervjs": "^1.4.3",
"npm": "^6.8.0",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"wxbarcode": "^1.0.2"
},
"devDependencies": {
"@tarojs/plugin-babel": "1.3.4",
"@tarojs/plugin-csso": "1.3.4",
"@tarojs/plugin-sass": "1.3.4",
"@tarojs/plugin-uglifyjs": "1.3.4",
"@tarojs/webpack-runner": "1.3.4",
"@types/react": "^16.4.8",
"@types/webpack-env": "^1.13.6",
"babel-eslint": "^8.2.3",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-jsx-stylesheet": "^0.6.5",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"cross-env": "^5.2.0",
"eslint": "^4.19.1",
"eslint-config-taro": "1.3.4",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-react": "^7.8.2",
"eslint-plugin-taro": "1.3.4",
"eslint-plugin-typescript": "^0.12.0",
"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 {
/** 会员id */
......@@ -66,3 +67,99 @@ export const confirmPay = (data: ConfirmpayParams) =>
url: '/consumeOrder/confirmPay',
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 = {
deviceCode: string;
......@@ -8,12 +14,15 @@ type ShowerParams = {
export type DeviceInfoResponse = {
code: string;
isOnlyBluetooth: number;
operationMode: OperationMode;
position: string;
};
/**
* 通过设备码获取设备信息
*/
export const fetchShowerInfo = (params: ShowerParams) =>
export const fetchShowerInfo = (
params: ShowerParams,
): Promise<ResponseDataEntity<DeviceInfoResponse>> =>
showerFetch({
url: `/dcxy/api/shower/devices/${params.deviceCode}`,
data: params,
......@@ -46,3 +55,21 @@ export const startShowerEquipment = (params: StartParams) =>
method: 'POST',
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]) {
.blur {
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 {
'pages/WebPage/WebPage',
'pages/Shower/Shower',
'pages/WaterDispenser/WaterDispenser',
'pages/Account/Account',
],
window: {
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 { View, Canvas, Image, Text } from '@tarojs/components';
......@@ -10,19 +10,13 @@ import wxbarcode from 'wxbarcode';
import './BarCode.scss';
import { UserState, updateUserInfo } from '../../store/rootReducers/userinfo';
import { connect } 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 { connect, useSelector } from '@tarojs/redux';
import { Customer } from '../../types/Customer/Customer';
import { refreshCodeBar } from '../../api/customer';
import Order from '@/types/Order/Order';
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 = {
userinfo: Customer;
......@@ -34,25 +28,7 @@ type PageDispatchProps = {
type PageOwnProps = {};
type PageState = {
ScreenBrightness: number;
showPayOrder: 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;
};
......@@ -77,74 +53,14 @@ class BarCode extends Component {
super(props);
this.state = {
ScreenBrightness: 1,
showPayOrder: 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,
};
}
onShareAppMessage = shareHandle;
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();
}
})
.catch(err => {
console.log(err);
});
this.drawBarCode();
console.log('调整亮度');
Taro.getScreenBrightness()
.then(({ value }) => {
......@@ -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() {
const { userinfo } = this.props;
const routeParams = this.$router.params;
......@@ -248,6 +137,7 @@ class BarCode extends Component {
showBig: !showBig,
});
}
refreshCodeBar() {
const { updateUserInfo } = this.props;
refreshCodeBar()
......@@ -268,31 +158,22 @@ class BarCode extends Component {
}
render() {
const { userinfo } = this.props;
const {
showPayOrder,
showBig,
orderInfo,
payInfos,
accounts,
showBackTag,
} = this.state;
const { showBig, showBackTag } = this.state;
const payOrderState = useSelector(
(state: { orderState: PayOrderState }) =>
state.orderState.waitPayOrderState,
);
useEffect(() => {
if (!payOrderState) {
this.drawBarCode();
}
}, [payOrderState]);
return (
<View className='BarCode'>
{showPayOrder && (
<View className='OrderBox'>
<OrderTitle price={orderInfo.payableMoney} />
<OrderInfo orderInfo={orderInfo} />
<OrderPayway
onPayDoneCallback={this.payDoneHandle}
userinfo={userinfo}
accounts={accounts}
orderInfo={orderInfo}
payInfos={payInfos}
/>
</View>
)}
<View className={showPayOrder ? 'blur' : ''}>
<WaitPayOrderComponent />
<View className={payOrderState ? 'blur' : ''}>
{showBackTag && (
<View className='BackTag' onClick={this.goBackPage}>
<Image className='icon' src={CodeIcon} />
......@@ -305,7 +186,7 @@ class BarCode extends Component {
src={RefreshIcon}
onClick={this.refreshCodeBar}
/>
{showPayOrder ? null : (
{payOrderState ? null : (
<View className={`BarCodeImg ${showBig ? 'BarCodeImgBig' : ''}`}>
<Canvas
className={`BarCodeCav ${showBig ? 'show' : ''}`}
......@@ -317,6 +198,7 @@ class BarCode extends Component {
/>
</View>
)}
<View className='toggleBtn' onClick={this.toggleBigBarCode}>
<Image
className={`arricon ${showBig ? 'rever' : ''}`}
......@@ -333,4 +215,4 @@ class BarCode extends Component {
}
}
export default BarCode as ComponentClass<PageOwnProps, PageState>;
export default BarCode;
src/pages/Home/Home.scss
......@@ -30,77 +30,60 @@
.Home-UserBox {
position: relative;
// height: 390px;
padding: 0 0 40px;
margin: 0 32px;
height: 320px;
padding: 0 32px;
// margin: 0 32px;
box-sizing: content-box;
.bg {
height: 390px;
&.big {
height: 428px;
background-color: #eee;
.Home-UserBox-content {
position: relative;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
.bg {
height: 390px;
}
}
.Home-UserBox-Setting {
position: absolute;
right: 28px;
top: 22px;
width: 38px;
height: 38px;
}
.Home-UserBox-info {
padding: 80px 88px 20px 76px;
display: flex;
justify-content: space-between;
color: #333;
}
.Home-UserBox-name {
font-size: 44px;
margin-bottom: 8px;
}
.Home-UserBox-tel {
font-size: 32px;
margin-bottom: 8px;
}
.Home-UserBox-addr {
font-size: 24px;
}
.Home-UserBox-headimg {
width: 100px;
height: 100px;
border-radius: 50%;
border: 10px solid #c8ccfc;
}
.Home-UserBox-line {
width: 620px;
border-top: 1px solid #d7daff;
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%;
.Home-UserBox-Setting {
position: absolute;
right: 28px;
top: 22px;
width: 38px;
height: 38px;
}
.Home-UserBox-info {
padding: 80px 88px 20px 76px;
display: flex;
align-items: center;
margin: 0 5%;
justify-content: space-between;
color: #333;
}
.Home-UserBox-BeanIcon {
width: 24px;
height: 24px;
margin-right: 12px;
.Home-UserBox-name {
font-size: 44px;
margin-bottom: 8px;
}
.Home-UserBox-BeanCount {
font-size: 28px;
color: #333;
.Home-UserBox-tel {
font-size: 32px;
margin-bottom: 8px;
}
.Home-UserBox-addr {
font-size: 24px;
}
.Home-UserBox-headimg {
width: 100px;
height: 100px;
border-radius: 50%;
border: 10px solid #c8ccfc;
}
.Home-UserBox-line {
width: 620px;
border-top: 1px solid #d7daff;
margin: 0 auto;
}
}
.Home-UserBox-Order {
position: absolute;
left: 50%;
bottom: 0px;
bottom: -40px;
transform: translate(-50%);
width: 572px;
height: 80px;
......@@ -109,41 +92,43 @@
border-radius: 50px;
display: flex;
overflow: hidden;
}
.Home-UserBox-Order-text {
flex: 1;
text-align: center;
color: #fff;
font-size: 24px;
}
.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-UserBox-Order-text {
position: relative;
flex: 1;
text-align: center;
color: #fff;
font-size: 24px;
&:first-child::after {
content: ' ';
position: absolute;
height: 44px;
width: 1px;
background-color: #abbcf9;
right: 0;
top: 18px;
}
}
}
}
.Home-Service-List {
display: flex;
flex-flow: wrap;
justify-content: space-between;
.Home-Service {
padding-top: 40px;
.Home-Service-List {
margin-top: 20px;
}
&.normal,
&.block {
padding: 0 32px;
margin: 20px auto;
}
&.big {
width: 686px;
margin: 20px auto 0;
display: flex;
flex-flow: wrap;
justify-content: space-between;
.Home-Service-List {
margin-top: 20px;
}
&.normal,
&.block {
padding: 0 32px;
margin: 20px auto;
}
&.big {
width: 686px;
margin: 20px auto 0;
}
}
}
.Home-Announcement {
......
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.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/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 StoreState {
orderState: String;
payList: Order[];
allList: AllOrderItem[];
export type ConsumeOrderInfo = {
consumeOrders: AllOrderItem[];
lastOrderId: number;
};
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 = {
orderState: '1',
payList: [],
allList: [],
selectedOrder: initOrder(),
consume: {
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(
state: StoreState = INITIAL_STATE,
actions: Actions
state: OrderStoreState = INITIAL_STATE,
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) {
case UPDATE_CONSUME_ORDERS:
if (actions.payload.length) {
let arr = actions.payload;
let lastOrderId = getLastId(arr);
return {
...state,
payList: [...state.payList, ...actions.payload.list],
consume: {
lastOrderId: lastOrderId,
consumeOrders: actions.payload,
},
};
} else {
}
return {
...state,
consume: {
...state.consume,
consumeOrders: actions.payload,
},
};
case APPEND_CONSUME_ORDERS:
if (actions.payload.length) {
let arr = actions.payload;
let lastOrderId = getLastId(arr);
return {
...state,
payList: actions.payload.list,
consume: {
lastOrderId: lastOrderId,
consumeOrders: [...state.consume.consumeOrders, ...actions.payload],
},
};
}
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;
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:
if (actions.payload.length) {
let arr = actions.payload;
let lastOrderId = getLastId(arr);
return {
...state,
recharge: {
lastOrderId: lastOrderId,
rechargeOrders: actions.payload,
},
};
}
return {
...state,
allList: actions.payload.list,
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 {
...state,
recharge: {
...state.recharge,
rechargeOrders: [
...state.recharge.rechargeOrders,
...actions.payload,
],
},
};
case UPDATE_RECHARGE_LASTID:
return {
...state,
recharge: {
...state.recharge,
lastOrderId: actions.payload,
},
};
default:
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 {
onShareAppMessage = shareHandle;
componentWillMount() {
const data = this.$router.preload;
if (data) {
const data = this.$router.params;
if (data && data.id) {
this.fetchOrder(data.id);
}
}
......
src/pages/Order/components/OrderItem/OrderItem.tsx
......@@ -83,7 +83,7 @@ class OrderItem extends Component {
</View>
<View
className={`OrderItem-price ${orderState === '1' ? 'topay' : ''}`}>
￥ {payableMoney}
￥ {payableMoney.toFixed(2)}
</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 {
PageConfigResponse,
} from '@/api/waterDispenser';
import { Customer } from '@/types/Customer/Customer';
import { connect } from '@tarojs/redux';
import { connect, useSelector } from '@tarojs/redux';
import { ComponentClass } from 'react';
import { ResponseDataEntity } from '@/api';
import { CustomerBeanAccountVo, PaymentAndActiveInfo } from '@/api/baseClass';
import Order from '@/types/Order/Order';
import { fetchOrderDetailAndPay, fetchPayOrder } from '@/api/order';
import OrderTitle from '../Order/components/OrderTitle/OrderTitle';
import OrderInfo from '../Order/components/OrderInfo/OrderInfo';
import OrderPayway from '../Order/components/OrderPayway/OrderPayway';
import WaitPayOrderComponent from '@/components/WaitPayOrder/WaitPayOrder';
import { PayOrderState } from '@/store/rootReducers/orderState';
export type DeviceInfo = {
code: string;
......@@ -42,14 +41,6 @@ type PageState = {
useList: DeviceInfo[];
timer: number | null;
showToggleTag: boolean;
showPayOrder: boolean;
accounts: CustomerBeanAccountVo[];
orderInfo: Order;
payInfos: {
paymentAndActiveInfos: PaymentAndActiveInfo[];
paymentConfId: number;
};
};
type IProps = PageStateProps;
......@@ -74,47 +65,10 @@ class WaterDispenser extends Component {
useList: [],
timer: null,
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() {
this.getPayState();
this.getUsedEquipment();
this.fetchPageConfig();
}
......@@ -123,43 +77,6 @@ class WaterDispenser extends Component {
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() {
const { userinfo } = this.props;
fetchPageConfig({
......@@ -284,11 +201,11 @@ class WaterDispenser extends Component {
});
}
getSelectedEquipment(data: DeviceInfo) {
getSelectedEquipment = (data: DeviceInfo) => {
this.setState({
deviceInfo: data,
});
}
};
waterBeginning() {
Taro.showLoading();
......@@ -339,29 +256,16 @@ class WaterDispenser extends Component {
deviceInfo: { code, position },
useList,
showToggleTag,
showPayOrder,
orderInfo,
accounts,
payInfos,
} = this.state;
const { userinfo } = this.props;
const payOrderState = useSelector(
(state: { orderState: PayOrderState }) =>
state.orderState.waitPayOrderState,
);
return (
<View className='WaterDispenser'>
{showPayOrder && (
<View className='OrderBox'>
<OrderTitle price={orderInfo.payableMoney} />
<OrderInfo orderInfo={orderInfo} />
<OrderPayway
onPayDoneCallback={this.payDoneHandle}
userinfo={userinfo}
accounts={accounts}
orderInfo={orderInfo}
payInfos={payInfos}
/>
</View>
)}
<View className={showPayOrder ? 'blur' : ''}>
<WaitPayOrderComponent />
<View className={payOrderState ? 'blur' : ''}>
{showToggleTag && (
<View className='WaterDispenser-tg' onClick={this.toggleCodeState}>
<Image className='icon' src={CodeIcon} />
......
src/store/reducers.ts
......@@ -2,9 +2,13 @@ import { combineReducers } from 'redux';
import userinfo from './rootReducers/userinfo';
import OrderList from '../pages/Order/OrderList/store';
import ShowerReducer from '@/pages/Shower/store';
import serviceList from './rootReducers/service';
import orderState from './rootReducers/orderState';
export default combineReducers({
userinfo,
OrderList,
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 = {
code: string;
isOnlyBluetooth: number;
operationMode: OperationMode;
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