添加充值功能

src/api/account.ts

+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 {
       'pages/WebPage/WebPage',
       'pages/Shower/Shower',
       'pages/WaterDispenser/WaterDispenser',
+      'pages/Account/Account',
     ],
     window: {
       backgroundTextStyle: 'light',

src/hooks/useAllBeanCount.ts

+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

+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

+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

+.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

+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,15 +30,19 @@
 
   .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;
+    background-color: #eee;
+    .Home-UserBox-content {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      z-index: 0;
+      overflow: hidden;
       .bg {
         height: 390px;
-      &.big {
-        height: 428px;
-      }
       }
       .Home-UserBox-Setting {
         position: absolute;
@@ -75,32 +79,11 @@
         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;
-        align-items: center;
-        margin: 0 5%;
-      }
-      .Home-UserBox-BeanIcon {
-        width: 24px;
-        height: 24px;
-        margin-right: 12px;
-      }
-      .Home-UserBox-BeanCount {
-        font-size: 28px;
-        color: #333;
-      }
     }
     .Home-UserBox-Order {
       position: absolute;
       left: 50%;
-      bottom: 0px;
+      bottom: -40px;
       transform: translate(-50%);
       width: 572px;
       height: 80px;
@@ -109,26 +92,27 @@
       border-radius: 50px;
       display: flex;
       overflow: hidden;
-    }
       .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-UserBox-Order-right {
-      background-color: #375ef1;
-      width: 212px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
       }
-    .Home-UserBox-Order-icon {
-      width: 40px;
-      height: 20px;
     }
   }
 
+  .Home-Service {
+    padding-top: 40px;
     .Home-Service-List {
       display: flex;
       flex-flow: wrap;
@@ -146,6 +130,7 @@
         margin: 20px auto 0;
       }
     }
+  }
   .Home-Announcement {
     position: relative;
     height: 222px;

src/pages/WaterDispenser/WaterDispenser.tsx

@@ -284,11 +284,11 @@ class WaterDispenser extends Component {
       });
   }
 
-  getSelectedEquipment(data: DeviceInfo) {
+  getSelectedEquipment = (data: DeviceInfo) => {
     this.setState({
       deviceInfo: data,
     });
-  }
+  };
 
   waterBeginning() {
     Taro.showLoading();

src/store/reducers.ts

@@ -2,9 +2,11 @@ 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';
 
 export default combineReducers({
   userinfo,
   OrderList,
   Shower: ShowerReducer,
+  serviceList,
 });

src/store/rootReducers/service.ts

+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;
+  }
+}