修改部分样式以及类型问题

global.d.ts

@@ -8,3 +8,7 @@ declare module '*.less';
 declare module '*.scss';
 declare module '*.sass';
 declare module '*.styl';
+
+interface Window {
+  __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: (option) => any;
+}

src/components/Vcode/Vcode.tsx

@@ -76,7 +76,7 @@ class Vcode extends Component {
     }
   }
   closeImageBox() {
-    const ctx = Taro.createCanvasContext('Vcode', this);
+    const ctx = Taro.createCanvasContext('Vcode', this.$scope);
     ctx.setFillStyle('#6180f4');
     ctx.fillRect(0, 0, 73, 38);
     ctx.draw();
@@ -86,7 +86,7 @@ class Vcode extends Component {
   }
 
   renderImg(vcode: number) {
-    const ctx = Taro.createCanvasContext('Vcode', this);
+    const ctx = Taro.createCanvasContext('Vcode', this.$scope);
     ctx.setFillStyle('#6180f4');
     ctx.fillRect(0, 0, 73, 38);
     ctx.font = '26px arial';

src/pages/BarCode/BarCode.tsx

@@ -14,12 +14,12 @@ import OrderInfo from '../Order/components/OrderInfo/OrderInfo';
 import OrderTitle from '../Order/components/OrderTitle/OrderTitle';
 import OrderPayway from '../Order/components/OrderPayway/OrderPayway';
 import {
-  ConsumeOrder,
   PaymentAndActiveInfo,
   CustomerBeanAccountVo,
 } from '../../api/baseClass';
 import { Customer } from '../../types/Customer/Customer';
 import { refreshCodeBar } from '../../api/customer';
+import Order from '@/types/Order/Order';
 
 type PageStateProps = {
   userinfo: Customer;
@@ -34,7 +34,7 @@ type PageState = {
   showPayOrder: boolean;
   showBig: boolean;
   accounts: CustomerBeanAccountVo[];
-  orderInfo: ConsumeOrder;
+  orderInfo: Order;
   payInfos: {
     paymentAndActiveInfos: PaymentAndActiveInfo[];
     paymentConfId: number;
@@ -77,20 +77,20 @@ class BarCode extends Component {
       showBig: false,
       accounts: [],
       orderInfo: {
-        actualMoney: undefined,
-        areaId: undefined,
+        actualMoney: 0,
+        areaId: 0,
         areaName: '',
         consumeType: '',
         createAt: '',
         customerCellphone: '',
-        customerId: undefined,
+        customerId: 0,
         customerName: '',
-        deductionBean: undefined,
-        deductionMoney: undefined,
+        deductionBean: 0,
+        deductionMoney: 0,
         equipmentNum: '',
         equipmentPosition: '',
-        id: undefined,
-        operateId: undefined,
+        id: 0,
+        operateId: 0,
         operateName: '',
         operationMode: '',
         orderName: '',
@@ -98,10 +98,10 @@ class BarCode extends Component {
         orderState: '',
         outTradeNo: '',
         payType: '',
-        payableMoney: undefined,
-        serviceId: undefined,
+        payableMoney: 0,
+        serviceId: 0,
         serviceName: '',
-        thirdDiscountMoney: undefined,
+        thirdDiscountMoney: 0,
         thirdTradeNumber: '',
         updateDate: '',
       },

src/pages/Home/Home.tsx

@@ -24,9 +24,10 @@ import {
 import { fetchBeanCount } from '../../api/bean';
 import { fetchAnn, SectionItem } from '../../api/announcement';
 import { appLogout } from '../../api/customer';
+import { Customer } from '@/types/Customer/Customer';
 
 type PageStateProps = {
-  userinfo: UserState;
+  userinfo: Customer;
 };
 type PageDispatchProps = {
   updateUserInfo: (e: UserState) => void;
@@ -79,7 +80,29 @@ class Home extends Component {
   componentWillMount() {
     this.getInitData();
   }
+
+  componentDidShow() {
+    this.getBeanCountData();
+  }
   getInitData() {
+    this.getBeanCountData();
+    const { userinfo } = this.props;
+    fetchAnn({
+      campusId: userinfo.areaId,
+      customerId: userinfo.customerId,
+    })
+      .then(res => {
+        if (res) {
+          this.setState({
+            annItem: res,
+          });
+        }
+      })
+      .catch(err => {
+        console.error(err);
+      });
+  }
+  getBeanCountData() {
     const { userinfo } = this.props;
     fetchBeanCount({
       id: userinfo.customerId,
@@ -99,20 +122,6 @@ class Home extends Component {
         });
       })
       .catch(console.error);
-    fetchAnn({
-      campusId: userinfo.areaId,
-      customerId: userinfo.customerId,
-    })
-      .then(res => {
-        if (res) {
-          this.setState({
-            annItem: res,
-          });
-        }
-      })
-      .catch(err => {
-        console.error(err);
-      });
   }
 
   goSetting() {

src/pages/Order/OrderList/OrderList.tsx

@@ -15,13 +15,12 @@ import {
 } from './actions';
 import { StoreState } from './store';
 import { fetchAllOrder, fetchPayOrder } from '../../../api/order';
-import { UserState } from '../../../store/rootReducers/userinfo';
-import { ConsumeOrder } from '../../../api/baseClass';
 import Order, { AllOrderItem } from '../../../types/Order/Order';
+import { Customer } from '@/types/Customer/Customer';
 
 type PageStateProps = {
   orderList: StoreState;
-  userinfo: UserState;
+  userinfo: Customer;
 };
 type PageDispatchProps = {
   toggleOrderState: (state: String) => void;
@@ -52,7 +51,7 @@ interface OrderList {
     updateAllOrder(data) {
       dispatch(updateAllOrderList(data));
     },
-  })
+  }),
 )
 class OrderList extends Component {
   config: Config = {
@@ -66,6 +65,10 @@ class OrderList extends Component {
   componentWillMount() {
     this.getPayOrderHandle();
   }
+  componentDidShow() {
+    this.getPayOrderHandle();
+    this.getAllOrderHandle();
+  }
 
   onPullDownRefresh() {
     console.log('in onPullDownRefresh');
@@ -95,7 +98,7 @@ class OrderList extends Component {
         : {
             customerId: userinfo.customerId,
             pageSize: 10,
-          }
+          },
     )
       .then(res => {
         console.log(res);
@@ -119,7 +122,7 @@ class OrderList extends Component {
         : {
             customerId: customerId,
             pageSize: 10,
-          }
+          },
     )
       .then(res => {
         console.log(res);
@@ -187,14 +190,12 @@ class OrderList extends Component {
         <View className='Tab'>
           <Text
             className={`Tab-item ${orderState === '1' ? 'active' : ''}`}
-            onClick={() => this.toggleStateHandle('1')}
-          >
+            onClick={() => this.toggleStateHandle('1')}>
             待付款
           </Text>
           <Text
             className={`Tab-item ${orderState === 'all' ? 'active' : ''}`}
-            onClick={() => this.toggleStateHandle('all')}
-          >
+            onClick={() => this.toggleStateHandle('all')}>
             全部
           </Text>
         </View>
@@ -206,8 +207,7 @@ class OrderList extends Component {
           upperThreshold={-100}
           lowerThreshold={70}
           scrollWithAnimation
-          scrollTop={0}
-        >
+          scrollTop={0}>
           {orderState === '1'
             ? payList.map(order => (
                 <OrderItem

src/pages/Order/OrderPay/OrderPay.tsx

@@ -109,6 +109,7 @@ class OrderPay extends Component {
 
   payDoneHandle() {
     Taro.navigateBack();
+
   }
 
   render() {

src/pages/Order/components/OrderInfo/OrderInfo.scss

-.OrderDetail-info,
-.OrderDetail-payinfo {
+.OrderDetail-info {
   display: flex;
   height: 60px;
   line-height: 60px;
   justify-content: space-between;
   font-size: 28px;
   color: #666;
+  .OrderDetail-info-title {
+    width: 120px;
+  }
+  .OrderDetail-info-content {
+    text-align: right;
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }

src/pages/Order/components/OrderInfo/OrderInfo.tsx

@@ -47,28 +47,32 @@ class OrderInfo extends Component {
     return (
       <View>
         <View className='OrderDetail-info'>
-          <Text>商品说明</Text>
-          <Text>{serviceName ? serviceName : ''}</Text>
+          <Text className='OrderDetail-info-title'>商品说明</Text>
+          <Text className='OrderDetail-info-content'>
+            {serviceName ? serviceName : ''}
+          </Text>
         </View>
         <View className='OrderDetail-info'>
-          <Text>消费时间</Text>
-          <Text>{createAt}</Text>
+          <Text className='OrderDetail-info-title'>消费时间</Text>
+          <Text className='OrderDetail-info-content'>{createAt}</Text>
         </View>
         <View className='OrderDetail-info'>
-          <Text>订单号</Text>
-          <Text>{orderNumber}</Text>
+          <Text className='OrderDetail-info-title'>订单号</Text>
+          <Text className='OrderDetail-info-content'>{orderNumber}</Text>
         </View>
         <View className='OrderDetail-info'>
-          <Text>所属区域</Text>
-          <Text>{areaName}</Text>
+          <Text className='OrderDetail-info-title'>所属区域</Text>
+          <Text className='OrderDetail-info-content'>{areaName}</Text>
         </View>
         <View className='OrderDetail-info'>
-          <Text>设备编号</Text>
-          <Text>{equipmentNum}</Text>
+          <Text className='OrderDetail-info-title'>设备编号</Text>
+          <Text className='OrderDetail-info-content'>{equipmentNum}</Text>
         </View>
         <View className='OrderDetail-info'>
-          <Text>设备位置</Text>
-          <Text>{equipmentPosition ? equipmentPosition : ''}</Text>
+          <Text className='OrderDetail-info-title'>设备位置</Text>
+          <Text className='OrderDetail-info-content'>
+            {equipmentPosition ? equipmentPosition : ''}
+          </Text>
         </View>
       </View>
     );

src/pages/Order/components/OrderPayway/OrderPayway.scss

@@ -19,6 +19,9 @@
       border: 6px solid #c8c8c8;
       border-radius: 50%;
     }
+    .OrderPay-check.disabled {
+      background-color: #c8c8c8;
+    }
     .checked {
       border-color: #ffd506;
       background-color: #ffd506;
@@ -48,7 +51,7 @@
   .OrderPay-DeductionInfo::before {
     content: '';
     position: absolute;
-    top: -12px;
+    top: -10px;
     left: 120px;
     border-bottom: 12px solid #ffe4e4;
     border-left: 11px solid transparent;

src/pages/Order/components/OrderPayway/OrderPayway.tsx

 import Taro, { Component } from '@tarojs/taro';
 import { ComponentClass } from 'react';
 import { Button, View, Image, Text } from '@tarojs/components';
-import { UserState } from '../../../../store/rootReducers/userinfo';
 import {
   PaymentAndActiveInfo,
   CustomerBeanAccountVo,
-  ConsumeOrder,
 } from '../../../../api/baseClass';
 import { confirmPay, fetchDeductionInfo } from '../../../../api/order';
 
@@ -20,11 +18,13 @@ import Utf8 from 'crypto-js/enc-utf8';
 import ECBmode from 'crypto-js/mode-ecb';
 import PaddingPkcs7 from 'crypto-js/pad-pkcs7';
 import { getPayType } from '../../../../utils/payType';
+import Order from '../../../../types/Order/Order';
+import { Customer } from '../../../../types/Customer/Customer';
 
 type PageOwnProps = {
   onPayDoneCallback: () => void;
-  userinfo: UserState;
-  orderInfo: ConsumeOrder;
+  userinfo: Customer;
+  orderInfo: Order;
   accounts: CustomerBeanAccountVo[];
   payInfos: {
     paymentAndActiveInfos: PaymentAndActiveInfo[];
@@ -146,8 +146,10 @@ class OrderPayway extends Component {
     const { payWay } = this.state;
     confirmPay({
       orderId: id,
-      payType: payWay.payType,
-      [payWay.activeId ? 'activeId' : 'notUse']: payWay.activeId,
+      payType: payWay ? payWay.payType : '',
+      [payWay && payWay.activeId ? 'activeId' : 'notUse']: payWay
+        ? payWay.activeId
+        : 0,
       returnUrl: '',
       callType: '3',
       paymentConfId: payInfos.paymentConfId,
@@ -207,9 +209,6 @@ class OrderPayway extends Component {
         item.payType === '7' ||
         item.payType === '8',
     );
-    const payInfo = prePay
-      ? null
-      : payInfoList.find(item => item.payType === payWay.payType);
     const useAmi = accountsInfo && accountsInfo['6'] >= orderInfo.payableMoney;
     const useCom = accountsInfo && accountsInfo['8'] >= orderInfo.payableMoney;
     const useBean = accountsInfo && accountsInfo['7'] >= orderInfo.payableMoney;
@@ -244,9 +243,9 @@ class OrderPayway extends Component {
                   <Image className='OrderPay-icon' src={payWayAimiLogo} />
                   <Text className='OrderPay-text'>
                     {getPayType(payway.payType)}(余额：
-                    {accountsInfo &&
-                      accountsInfo['6'] &&
-                      accountsInfo['6'].toFixed(2)}
+                    {accountsInfo && accountsInfo['6']
+                      ? accountsInfo['6'].toFixed(2)
+                      : '0.00'}
                     )
                   </Text>
                   <View
@@ -254,7 +253,7 @@ class OrderPayway extends Component {
                       payWay && payWay.payType === payway.payType
                         ? 'checked'
                         : ''
-                    }`}
+                    } ${useAmi ? '' : 'disabled'}`}
                   />
                 </View>
               ) : payway.payType === '7' ? (
@@ -264,7 +263,7 @@ class OrderPayway extends Component {
                   onClick={() => this.changePayWay(payway, !useBean)}>
                   <Image className='OrderPay-icon' src={payWayHairLogo} />
                   <Text className='OrderPay-text'>
-                    {getPayType(payway.payType)}(余额：
+                    {orderInfo.serviceName}豆(余额：
                     {accountsInfo && accountsInfo['7']
                       ? accountsInfo['7'].toFixed(2)
                       : '0.00'}
@@ -275,7 +274,7 @@ class OrderPayway extends Component {
                       payWay && payWay.payType === payway.payType
                         ? 'checked'
                         : ''
-                    }`}
+                    } ${useBean ? '' : 'disabled'}`}
                   />
                 </View>
               ) : payway.payType === '8' ? (
@@ -296,7 +295,7 @@ class OrderPayway extends Component {
                       payWay && payWay.payType === payway.payType
                         ? 'checked'
                         : ''
-                    }`}
+                    } ${useCom ? '' : 'disabled'}`}
                   />
                 </View>
               ) : null,

src/store/rootReducers/constants.ts

-type INITIAL_STATE = {
+type ConstantState = {
   APP_ID: string;
 };
 const INITIAL_STATE = {
   APP_ID: 'wxf5912b79bba23663',
 };
 
-export default function counter(state = INITIAL_STATE) {
+export default function counter(state: ConstantState = INITIAL_STATE) {
   return state;
 }

src/store/rootReducers/userinfo.ts

 import Action from '../../types/Store/Actions';
+import { Customer } from '../../types/Customer/Customer';
 
-export type UserState = {
-  login?: boolean;
-  areaId?: number;
-  areaName?: string;
-  birthDay?: string;
-  createAt?: string;
-  createLoginDate?: string;
-  customerHead?: string;
-  customerId?: number;
-  customerName?: string;
-  customerPhone?: string;
-  customerSex?: string;
-  customerType?: string;
-  email?: string;
-  entranceDate?: string;
-  hardwareAccount?: string;
-  hardwarePwd?: string;
-  hardwareState?: string;
-  hardwarelastDate?: string;
-  idBar?: string;
-  idCard?: string;
-  isFirstRecharge?: number;
-  lastLoginDate?: string;
-  loginAccount?: string;
-  loginPwd?: string;
-  loginPwdSalt?: string;
-  loginState?: string;
-  state?: string;
-  studentNo?: string;
-  token?: string;
-  updateAt?: string;
-  updateLoginDate?: string;
-  version?: string;
-};
+export type UserState = StoreState<Customer>;
 
 export const INITIAL_STATE = {
   login: false,
@@ -68,6 +36,7 @@ export const INITIAL_STATE = {
   updateAt: '',
   updateLoginDate: '',
   version: '',
+  wxToken: '',
 };
 
 export const updateUserInfo = (entity: UserState): Action => ({
@@ -76,9 +45,9 @@ export const updateUserInfo = (entity: UserState): Action => ({
 });
 
 export default function userinfo(
-  state: UserState = INITIAL_STATE,
+  state: Customer = INITIAL_STATE,
   actions: Action,
-): UserState {
+): Customer {
   switch (actions.type) {
     case 'UPDATE_USERINFO':
       return {

src/types/Order/Order.ts

@@ -15,6 +15,7 @@ type Order = {
   operateId: number;
   operateName: string;
   operationMode: string;
+  orderName: string;
   orderNumber: string;
   orderState: string;
   outTradeNo: string;

src/types/Store/State.ts

+type StoreState<T> = { [P in keyof T]?: T[P] };

tsconfig.json

@@ -15,16 +15,14 @@
     "sourceMap": true,
     "baseUrl": ".",
     "rootDir": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
     "jsx": "preserve",
     "jsxFactory": "Taro.createElement",
     "allowJs": true,
-    "typeRoots": [
-      "node_modules/@types"
-    ]
+    "typeRoots": ["node_modules/@types"]
   },
-  "exclude": [
-    "node_modules",
-    "dist"
-  ],
+  "exclude": ["node_modules", "dist"],
   "compileOnSave": false
 }