Skip to content

W
wx-school-app
Commit 606e0ffe by 姜雷
Options

添加充值功能

parent 62afc42b
Showing with 826 additions and 388 deletions
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,
});
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/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[], (userinfo: Customer) => void] => {
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 === '0');
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 = (userinfo: Customer) => {
fetchBeanCount({
id: userinfo.customerId,
areaId: userinfo.areaId,
customerPhone: userinfo.customerPhone,
serviceIdList: [],
})
.then(res => {
const data = res.data;
let list = getFilterBeanList(data);
setFilterBeanList(list);
})
.catch(console.error);
};
useEffect(() => {
fetchDate(userinfo);
}, [userinfo]);
return [filterBeanList, fetchDate];
};
export default useAllBeanCount;
src/hooks/useRechargePay.ts 0 → 100644
import { useState, useEffect } from '@tarojs/taro';
import { fetchPayConfig, PayConfig, PayTypeVo } from '@/api/account';
let initPayConfigList: PayConfig[] = [];
let initPaywayList: PayTypeVo[] = [];
const usePaywayList = (areaId: number, customerId: number) => {
const [paywayList, setPaywayList] = useState(initPaywayList);
const [payConfigList, setPayConfigList] = useState(initPayConfigList);
const [isFirstRecharge, setIsFirstRecharge] = useState(0);
const fetchDate = (areaId: number, customerId: number) => {
fetchPayConfig({
areaId,
customerId,
})
.then(res => {
console.log(res);
const {
isFirstRecharge,
listPayList,
listRechargeConfDetail,
} = res.data;
setPayConfigList(listRechargeConfDetail);
setPaywayList(listPayList);
setIsFirstRecharge(isFirstRecharge);
})
.catch(console.error);
};
useEffect(() => {
fetchDate(areaId, customerId);
}, [areaId, customerId]);
return {
isFirstRecharge,
paywayList,
payConfigList,
};
};
export default usePaywayList;
src/hooks/useWaitPayOrderState.ts 0 → 100644
import { Customer } from '@/types/Customer/Customer';
import { useEffect, useState } from '@tarojs/taro';
import { fetchPayOrder, fetchOrderDetailAndPay } from '@/api/order';
const useWaitPayOrderState = (userinfo: Customer) => {
const [payOrderState, setPayOrderState] = useState(false);
const [accountList, setAccountList] = useState([]);
const [orderInfo, setOrderInfo] = useState(null);
const [payInfos, setPayInfos] = useState(null);
useEffect(() => {
fetchPayOrder({
customerId: userinfo.customerId,
})
.then(res => {
if (res.data.length) {
fetchOrderDetailAndPay({ id: res.data[0].id })
.then(({ accounts, orderInfo, payInfos }) => {
setAccountList(accounts);
setOrderInfo(orderInfo);
setPayInfos(payInfos);
})
.catch(err => {
console.log(err);
});
setPayOrderState(true);
}
})
.catch(err => {
console.log(err);
});
}, [userinfo]);
return {
payOrderState,
accountList,
orderInfo,
payInfos,
};
};
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-Aimi {
padding: 60px 80px 36px;
color: #fff;
.Account-Card-Aimi-label {
font-size: 24px;
margin-bottom: 16px;
}
.Account-Card-Aimi-num {
font-size: 44px;
}
}
.Account-line {
width: 252px;
border-bottom: 1px solid #b5bffa;
margin-left: 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 {
box-sizing: border-box;
width: 218px;
height: 160px;
line-height: 160px;
text-align: center;
border: 4px solid #e6ebfd;
border-radius: 24px;
margin-bottom: 20px;
&.selected {
background-color: #6180f4;
border-color: #6180f4;
color: #fff;
}
}
}
.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 0;
}
}
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';
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 clickPayBtn = () => {
if (!payConfigId) {
Taro.showToast({
title: '请选择充值金额',
icon: 'none',
});
return;
}
if (!paywayId) {
Taro.showToast({
title: '请选择支付方式',
icon: 'none',
});
return;
}
console.log('in recharge');
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);
})
.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-Aimi'>
<View className='Account-Card-Aimi-label'>艾米余额</View>
{filterBeanList.length &&
filterBeanList.map(beanItem =>
beanItem.serviceId === BeanType.aimi ? (
<View
key={beanItem.serviceId}
className='Account-Card-Aimi-num'>
{beanItem.money.toFixed(2)}
</View>
) : null,
)}
</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)}>
{item.rechargeMoney.toFixed(2)}元
</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/Home/Home.scss
...@@ -30,77 +30,60 @@ ...@@ -30,77 +30,60 @@
.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;
.bg { background-color: #eee;
height: 390px; .Home-UserBox-content {
&.big { position: relative;
height: 428px; width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
.bg {
height: 390px;
} }
} .Home-UserBox-Setting {
.Home-UserBox-Setting { position: absolute;
position: absolute; right: 28px;
right: 28px; top: 22px;
top: 22px; width: 38px;
width: 38px; height: 38px;
height: 38px; }
} .Home-UserBox-info {
.Home-UserBox-info { padding: 80px 88px 20px 76px;
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%;
display: flex; display: flex;
align-items: center; justify-content: space-between;
margin: 0 5%; color: #333;
} }
.Home-UserBox-BeanIcon { .Home-UserBox-name {
width: 24px; font-size: 44px;
height: 24px; margin-bottom: 8px;
margin-right: 12px;
} }
.Home-UserBox-BeanCount { .Home-UserBox-tel {
font-size: 28px; font-size: 32px;
color: #333; 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 { .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,41 +92,43 @@ ...@@ -109,41 +92,43 @@
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 {
.Home-UserBox-Order-right { content: ' ';
background-color: #375ef1; position: absolute;
width: 212px; height: 44px;
display: flex; width: 1px;
justify-content: center; background-color: #abbcf9;
align-items: center; right: 0;
} top: 18px;
.Home-UserBox-Order-icon { }
width: 40px; }
height: 20px;
} }
} }
.Home-Service-List { .Home-Service {
display: flex; padding-top: 40px;
flex-flow: wrap;
justify-content: space-between;
.Home-Service-List { .Home-Service-List {
margin-top: 20px; display: flex;
} flex-flow: wrap;
&.normal, justify-content: space-between;
&.block { .Home-Service-List {
padding: 0 32px; margin-top: 20px;
margin: 20px auto; }
} &.normal,
&.big { &.block {
width: 686px; padding: 0 32px;
margin: 20px auto 0; margin: 20px auto;
}
&.big {
width: 686px;
margin: 20px auto 0;
}
} }
} }
.Home-Announcement { .Home-Announcement {
......
src/pages/Home/Home.tsx
import { ComponentClass } from 'react'; import { ComponentClass } from 'react';
import Taro, { Component } from '@tarojs/taro'; import Taro, { Component, Config } from '@tarojs/taro';
import { View, Image, Text } from '@tarojs/components'; import { View, Image, Text } from '@tarojs/components';
import UserBoxBg from '../../images/home/img_bg@2x.png'; import UserBoxBg from '../../images/home/img_bg@2x.png';
import ArrowIcon from '../../images/home/icon_dingdan@2x.png';
import AnnouncementBg from '../../images/home/img_gonggao_bg@2x.png'; import AnnouncementBg from '../../images/home/img_gonggao_bg@2x.png';
import MoreIcon from '../../images/home/icon_more_right@2x.png'; import MoreIcon from '../../images/home/icon_more_right@2x.png';
import SettingIcon from '../../images/home/icon_shezhi@2x.png'; import SettingIcon from '../../images/home/icon_shezhi@2x.png';
import AimiIcon from '../../images/home/ic_aimi@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 UserHeaderM from '../../images/home/img_boy_touxiang@2x.png'; import UserHeaderM from '../../images/home/img_boy_touxiang@2x.png';
import UserHeaderF from '../../images/home/img_girl_touxiang@2x.png'; import UserHeaderF from '../../images/home/img_girl_touxiang@2x.png';
import WaterIconNormal from '../../images/menu/ic_zizhu@2x.png'; import WaterIconNormal from '../../images/menu/ic_zizhu@2x.png';
...@@ -33,7 +29,6 @@ import { ...@@ -33,7 +29,6 @@ import {
updateUserInfo, updateUserInfo,
INITIAL_STATE as userINitState, INITIAL_STATE as userINitState,
} from '../../store/rootReducers/userinfo'; } from '../../store/rootReducers/userinfo';
import { fetchBeanCount } from '../../api/bean';
import { fetchAnn, SectionItem } from '../../api/announcement'; import { fetchAnn, SectionItem } from '../../api/announcement';
import { appLogout } from '../../api/customer'; import { appLogout } from '../../api/customer';
import { Customer } from '@/types/Customer/Customer'; import { Customer } from '@/types/Customer/Customer';
...@@ -42,19 +37,15 @@ import { fetchAreaService, ServiceTypeParams, Service } from '@/api/home'; ...@@ -42,19 +37,15 @@ import { fetchAreaService, ServiceTypeParams, Service } from '@/api/home';
import MenuIconNormal from '@/components/MenuIcon/normal/MenuIconNormal'; import MenuIconNormal from '@/components/MenuIcon/normal/MenuIconNormal';
import MenuIconBlock from '@/components/MenuIcon/block/MenuIconBlock'; import MenuIconBlock from '@/components/MenuIcon/block/MenuIconBlock';
import MenuIconBig from '@/components/MenuIcon/big/MenuIconBig'; import MenuIconBig from '@/components/MenuIcon/big/MenuIconBig';
import { updateServiceList } from '@/store/rootReducers/service';
enum BeanType {
aimi = 'aimi',
shower = 'shower',
hairDryer = 'hairDryer',
water = 'water',
}
type PageStateProps = { type PageStateProps = {
userinfo: Customer; userinfo: Customer;
serviceList: Service[];
}; };
type PageDispatchProps = { type PageDispatchProps = {
updateUserInfo: (e: UserState) => void; updateUserInfo: (e: UserState) => void;
updateServiceList: (e: Service[]) => void;
}; };
type BeanAccount = { type BeanAccount = {
...@@ -66,7 +57,6 @@ type PageState = { ...@@ -66,7 +57,6 @@ type PageState = {
barMenuVisiable: boolean; barMenuVisiable: boolean;
beanAccount: BeanAccount[]; beanAccount: BeanAccount[];
annItem: SectionItem; annItem: SectionItem;
serviceList: Service[];
filterBeanList: BeanAccount[]; filterBeanList: BeanAccount[];
}; };
type IProps = PageStateProps & PageDispatchProps; type IProps = PageStateProps & PageDispatchProps;
...@@ -76,22 +66,29 @@ interface Home { ...@@ -76,22 +66,29 @@ interface Home {
state: PageState; state: PageState;
} }
@connect( @connect(
({ userinfo }) => ({ ({ userinfo, serviceList }) => ({
userinfo, userinfo,
serviceList,
}), }),
dispatch => ({ dispatch => ({
updateUserInfo(entity: UserState) { updateUserInfo(entity: UserState) {
dispatch(updateUserInfo(entity)); dispatch(updateUserInfo(entity));
}, },
updateServiceList(entity: Service[]) {
dispatch(updateServiceList(entity));
},
}), }),
) )
class Home extends Component { class Home extends Component {
config: Config = {
navigationBarBackgroundColor: '#eee',
};
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
barMenuVisiable: false, barMenuVisiable: false,
beanAccount: [], beanAccount: [],
serviceList: [],
filterBeanList: [], filterBeanList: [],
annItem: { annItem: {
id: 0, id: 0,
...@@ -118,59 +115,22 @@ class Home extends Component { ...@@ -118,59 +115,22 @@ class Home extends Component {
this.getInitData(); this.getInitData();
} }
getInitData() { getInitData() {
this.getBeanCountData();
this.getServiceList(); this.getServiceList();
this.getAnn(); this.getAnn();
} }
getServiceList() { getServiceList() {
const { userinfo } = this.props; const { userinfo, updateServiceList } = this.props;
if (userinfo.areaId) { if (userinfo.areaId) {
fetchAreaService({ fetchAreaService({
areaId: userinfo.areaId, areaId: userinfo.areaId,
type: ServiceTypeParams.wechatAppV, type: ServiceTypeParams.wechatAppV,
}).then(res => { }).then(res => {
console.log(res); updateServiceList(res.data);
this.setState(
{
serviceList: res.data,
},
() => {
const { beanAccount } = this.state;
if (beanAccount && beanAccount.length) {
this.getFilterBeanList();
}
},
);
}); });
} }
} }
getBeanCountData() {
const { userinfo } = this.props;
fetchBeanCount({
id: userinfo.customerId,
areaId: userinfo.areaId,
customerPhone: userinfo.customerPhone,
serviceIdList: [],
})
.then(res => {
const data = res.data;
this.setState(
{
beanAccount: data,
},
() => {
const { serviceList } = this.state;
if (serviceList && serviceList.length) {
this.getFilterBeanList();
}
},
);
})
.catch(console.error);
}
getAnn() { getAnn() {
const { userinfo } = this.props; const { userinfo } = this.props;
fetchAnn({ fetchAnn({
...@@ -189,47 +149,6 @@ class Home extends Component { ...@@ -189,47 +149,6 @@ class Home extends Component {
}); });
} }
getFilterBeanList() {
const { beanAccount, serviceList } = this.state;
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 beanMap = {
[BeanType.aimi]: aimiItem ? aimiItem.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],
}));
this.setState({
filterBeanList: arr,
});
}
goSetting() { goSetting() {
Taro.navigateTo({ Taro.navigateTo({
url: '/pages/UserSetting/UserSetting', url: '/pages/UserSetting/UserSetting',
...@@ -252,7 +171,11 @@ class Home extends Component { ...@@ -252,7 +171,11 @@ class Home extends Component {
url: '/pages/Order/OrderList/OrderList', url: '/pages/Order/OrderList/OrderList',
}); });
} }
goAccount() {
Taro.navigateTo({
url: '/pages/Account/Account',
});
}
goBarCode(serviceId: number) { goBarCode(serviceId: number) {
Taro.navigateTo({ Taro.navigateTo({
url: `/pages/BarCode/BarCode?serviceId=${serviceId}`, url: `/pages/BarCode/BarCode?serviceId=${serviceId}`,
...@@ -271,11 +194,11 @@ class Home extends Component { ...@@ -271,11 +194,11 @@ class Home extends Component {
}); });
} }
toggleBarMenu() { toggleBarMenu = () => {
this.setState(({ barMenuVisiable }: PageState) => ({ this.setState(({ barMenuVisiable }: PageState) => ({
barMenuVisiable: !barMenuVisiable, barMenuVisiable: !barMenuVisiable,
})); }));
} };
logoutHandle() { logoutHandle() {
const { updateUserInfo } = this.props; const { updateUserInfo } = this.props;
appLogout() appLogout()
...@@ -299,13 +222,9 @@ class Home extends Component { ...@@ -299,13 +222,9 @@ class Home extends Component {
} }
render() { render() {
const { userinfo } = this.props; const { userinfo, serviceList } = this.props;
const { const { annItem, barMenuVisiable } = this.state;
annItem,
barMenuVisiable,
serviceList,
filterBeanList,
} = this.state;
return ( return (
<View className='Home'> <View className='Home'>
{barMenuVisiable ? ( {barMenuVisiable ? (
...@@ -320,200 +239,158 @@ class Home extends Component { ...@@ -320,200 +239,158 @@ class Home extends Component {
</View> </View>
) : null} ) : null}
<View className='Home-UserBox'> <View className='Home-UserBox'>
<Image <View className='Home-UserBox-content'>
className='Home-UserBox-Setting' <Image
src={SettingIcon} className='Home-UserBox-Setting'
onClick={this.toggleBarMenu} src={SettingIcon}
/> onClick={this.toggleBarMenu}
<Image />
className={`bg ${serviceList.length >= 2 ? 'big' : ''}`} <Image className='bg' src={UserBoxBg} />
src={UserBoxBg} <View className='Home-UserBox-info'>
/> <View className='Home-UserBox-other'>
<View className='Home-UserBox-info'> <View className='Home-UserBox-name'>
<View className='Home-UserBox-other'> {userinfo.customerName}
<View className='Home-UserBox-name'>{userinfo.customerName}</View> </View>
<View className='Home-UserBox-tel'> <View className='Home-UserBox-tel'>
{this.formatePhone(userinfo.customerPhone)} {this.formatePhone(userinfo.customerPhone)}
</View>
<View className='Home-UserBox-addr'>{userinfo.areaName}</View>
</View> </View>
<View className='Home-UserBox-addr'>{userinfo.areaName}</View> {userinfo.customerSex === '2' ? (
</View> <Image
{userinfo.customerSex === '2' ? ( className='Home-UserBox-headimg'
<Image src={UserHeaderF}
className='Home-UserBox-headimg' onClick={this.goSetting}
src={UserHeaderF} />
onClick={this.goSetting} ) : (
/> <Image
) : ( className='Home-UserBox-headimg'
<Image src={UserHeaderM}
className='Home-UserBox-headimg' onClick={this.goSetting}
src={UserHeaderM} />
onClick={this.goSetting}
/>
)}
</View>
<View className='Home-UserBox-line' />
<View className='Home-UserBox-Bean'>
{filterBeanList &&
filterBeanList.length &&
filterBeanList.map(beanItem =>
beanItem.serviceId === BeanType.aimi ? (
<View className='Home-UserBox-BeanItem'>
<Image className='Home-UserBox-BeanIcon' src={AimiIcon} />
<Text>艾米：</Text>
<Text className='Home-UserBox-BeanCount'>
{beanItem.money ? beanItem.money.toFixed(2) : '0.00'}
</Text>
</View>
) : beanItem.serviceId === BeanType.water ? (
<View
key={beanItem.serviceId}
className='Home-UserBox-BeanItem'>
<Image className='Home-UserBox-BeanIcon' src={WBeanIcon} />
<Text>饮水豆：</Text>
<Text className='Home-UserBox-BeanCount'>
{beanItem.money ? beanItem.money.toFixed(2) : '0.00'}
</Text>
</View>
) : beanItem.serviceId === BeanType.hairDryer ? (
<View
key={beanItem.serviceId}
className='Home-UserBox-BeanItem'>
<Image className='Home-UserBox-BeanIcon' src={HBeanIcon} />
<Text>吹风豆：</Text>
<Text className='Home-UserBox-BeanCount'>
{beanItem.money ? beanItem.money.toFixed(2) : '0.00'}
</Text>
</View>
) : beanItem.serviceId === BeanType.shower ? (
<View
key={beanItem.serviceId}
className='Home-UserBox-BeanItem'>
<Image className='Home-UserBox-BeanIcon' src={SBeanIcon} />
<Text>洗浴豆：</Text>
<Text className='Home-UserBox-BeanCount'>
{beanItem.money ? beanItem.money.toFixed(2) : '0.00'}
</Text>
</View>
) : null,
)} )}
</View>
</View> </View>
<View className='Home-UserBox-Order'> <View className='Home-UserBox-Order'>
<Text className='Home-UserBox-Order-text'>我的订单</Text> <Text className='Home-UserBox-Order-text' onClick={this.goOrder}>
<View className='Home-UserBox-Order-right' onClick={this.goOrder}> 我的订单
<Image className='Home-UserBox-Order-icon' src={ArrowIcon} /> </Text>
</View> <Text className='Home-UserBox-Order-text' onClick={this.goAccount}>
账户
</Text>
</View> </View>
</View> </View>
<View className='Home-Service'>
{serviceList.length && serviceList.length <= 2 ? ( {serviceList.length && serviceList.length <= 2 ? (
<View className='Home-Service-List big'> <View className='Home-Service-List big'>
{serviceList.map(service => {serviceList.map(service =>
service.serviceId === 3 || service.serviceId === 11 ? ( service.serviceId === 3 || service.serviceId === 11 ? (
<MenuIconBig <MenuIconBig
key={service.serviceId} key={service.serviceId}
icon={WaterIconBig} icon={WaterIconBig}
text={''} text={''}
side='right' side='right'
onClick={() => this.goBarCode(service.serviceId)} onClick={() => this.goBarCode(service.serviceId)}
/> />
) : service.serviceId === 4 || service.serviceId === 12 ? ( ) : service.serviceId === 4 || service.serviceId === 12 ? (
<MenuIconBig <MenuIconBig
ex-class='hairDryer' ex-class='hairDryer'
key={service.serviceId} key={service.serviceId}
icon={DryerIconBig} icon={DryerIconBig}
text={service.serviceName} text={service.serviceName}
side='right' side='right'
onClick={() => this.goBarCode(service.serviceId)} onClick={() => this.goBarCode(service.serviceId)}
/> />
) : service.serviceId === 5 || service.serviceId === 10 ? ( ) : service.serviceId === 5 || service.serviceId === 10 ? (
<MenuIconBig <MenuIconBig
key={service.serviceId} key={service.serviceId}
icon={ShowerIconBig} icon={ShowerIconBig}
text={service.serviceName} text={service.serviceName}
side='left' side='left'
onClick={this.goShower} onClick={this.goShower}
/> />
) : service.serviceId === 9 ? ( ) : service.serviceId === 9 ? (
<MenuIconBig <MenuIconBig
key={service.serviceId} key={service.serviceId}
icon={DispenserIconBig} icon={DispenserIconBig}
text={''} text={''}
side='left' side='left'
onClick={this.goDispenser} onClick={this.goDispenser}
/> />
) : null, ) : null,
)} )}
</View> </View>
) : serviceList.length && serviceList.length == 3 ? ( ) : serviceList.length && serviceList.length == 3 ? (
<View className='Home-Service-List block'> <View className='Home-Service-List block'>
{serviceList.map(service => {serviceList.map(service =>
service.serviceId === 3 || service.serviceId === 11 ? ( service.serviceId === 3 || service.serviceId === 11 ? (
<MenuIconBlock <MenuIconBlock
key={service.serviceId} key={service.serviceId}
icon={WaterIconBlock} icon={WaterIconBlock}
text={service.serviceName} text={service.serviceName}
onClick={() => this.goBarCode(service.serviceId)} onClick={() => this.goBarCode(service.serviceId)}
/> />
) : service.serviceId === 4 || service.serviceId === 12 ? ( ) : service.serviceId === 4 || service.serviceId === 12 ? (
<MenuIconBlock <MenuIconBlock
key={service.serviceId} key={service.serviceId}
icon={DryerIconBlock} icon={DryerIconBlock}
text={service.serviceName} text={service.serviceName}
onClick={() => this.goBarCode(service.serviceId)} onClick={() => this.goBarCode(service.serviceId)}
/> />
) : service.serviceId === 5 || service.serviceId === 10 ? ( ) : service.serviceId === 5 || service.serviceId === 10 ? (
<MenuIconBlock <MenuIconBlock
key={service.serviceId} key={service.serviceId}
icon={ShowerIconBlock} icon={ShowerIconBlock}
text={service.serviceName} text={service.serviceName}
onClick={this.goShower} onClick={this.goShower}
/> />
) : service.serviceId === 9 ? ( ) : service.serviceId === 9 ? (
<MenuIconBlock <MenuIconBlock
key={service.serviceId} key={service.serviceId}
icon={DispenserIconBlock} icon={DispenserIconBlock}
text={service.serviceName} text={service.serviceName}
onClick={this.goDispenser} onClick={this.goDispenser}
/> />
) : null, ) : null,
)} )}
</View> </View>
) : serviceList.length && serviceList.length >= 4 ? ( ) : serviceList.length && serviceList.length >= 4 ? (
<View className='Home-Service-List normal'> <View className='Home-Service-List normal'>
{serviceList.map(service => {serviceList.map(service =>
service.serviceId === 3 || service.serviceId === 11 ? ( service.serviceId === 3 || service.serviceId === 11 ? (
<MenuIconNormal <MenuIconNormal
key={service.serviceId} key={service.serviceId}
icon={WaterIconNormal} icon={WaterIconNormal}
text={service.serviceName} text={service.serviceName}
onClick={() => this.goBarCode(service.serviceId)} onClick={() => this.goBarCode(service.serviceId)}
/> />
) : service.serviceId === 4 || service.serviceId === 12 ? ( ) : service.serviceId === 4 || service.serviceId === 12 ? (
<MenuIconNormal <MenuIconNormal
key={service.serviceId} key={service.serviceId}
icon={DryerIconNormal} icon={DryerIconNormal}
text={service.serviceName} text={service.serviceName}
onClick={() => this.goBarCode(service.serviceId)} onClick={() => this.goBarCode(service.serviceId)}
/> />
) : service.serviceId === 5 || service.serviceId === 10 ? ( ) : service.serviceId === 5 || service.serviceId === 10 ? (
<MenuIconNormal <MenuIconNormal
key={service.serviceId} key={service.serviceId}
icon={ShowerIconNormal} icon={ShowerIconNormal}
text={service.serviceName} text={service.serviceName}
onClick={this.goShower} onClick={this.goShower}
/> />
) : service.serviceId === 9 ? ( ) : service.serviceId === 9 ? (
<MenuIconNormal <MenuIconNormal
key={service.serviceId} key={service.serviceId}
icon={DispenserIconNormal} icon={DispenserIconNormal}
text={service.serviceName} text={service.serviceName}
onClick={this.goDispenser} onClick={this.goDispenser}
/> />
) : null, ) : null,
)} )}
</View> </View>
) : null} ) : null}
</View>
{annItem.id ? ( {annItem.id ? (
<View className='Home-Announcement'> <View className='Home-Announcement'>
......
src/pages/WaterDispenser/WaterDispenser.tsx
...@@ -284,11 +284,11 @@ class WaterDispenser extends Component { ...@@ -284,11 +284,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();
......
src/store/reducers.ts
...@@ -2,9 +2,11 @@ import { combineReducers } from 'redux'; ...@@ -2,9 +2,11 @@ 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';
export default combineReducers({ export default combineReducers({
userinfo, userinfo,
OrderList, OrderList,
Shower: ShowerReducer, Shower: ShowerReducer,
serviceList,
}); });
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;
}
}
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