Merge branch 'test'

package.json

@@ -31,30 +31,31 @@
     "@tarojs/taro-swan": "1.2.13",
     "@tarojs/taro-tt": "1.2.13",
     "@tarojs/taro-weapp": "1.2.13",
-    "nervjs": "^1.3.9",
+    "crypto-js": "^3.1.9-1",
     "nerv-devtools": "^1.3.9",
+    "nervjs": "^1.3.9",
     "redux": "^4.0.0",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
-    "@types/react": "^16.4.8",
-    "@types/webpack-env": "^1.13.6",
     "@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",
-    "babel-eslint": "^8.2.3",
     "eslint": "^4.19.1",
     "eslint-config-taro": "1.2.13",
-    "eslint-plugin-react": "^7.8.2",
     "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"

project.config.json

@@ -2,7 +2,7 @@
   "miniprogramRoot": "./dist",
   "projectname": "wx-school-app-public",
   "description": "",
-  "appid": "touristappid",
+  "appid": "wx99b75b4bdb31b3c3",
   "setting": {
     "urlCheck": true,
     "es6": false,

src/actions/counter.ts

-import {
-  ADD,
-  MINUS
-} from '../constants/counter'
-
-export const add = () => {
-  return {
-    type: ADD
-  }
-}
-export const minus = () => {
-  return {
-    type: MINUS
-  }
-}
-
-// 异步的action
-export function asyncAdd () {
-  return dispatch => {
-    setTimeout(() => {
-      dispatch(add())
-    }, 2000)
-  }
-}

src/api/Order/pay.ts

+import { baseFetch, ResponseDataEntity } from '..';
+
+type Params = {
+  equipmentNum: string;
+  // 设备编码
+
+  equipmentPos: string;
+  // 设备位置
+
+  payType: string;
+  // 支付方式
+
+  serviceId: number;
+  // 服务id
+
+  smaproCustomerId: number;
+  // 会员id
+
+  smaproPrepayConfigId: number;
+  // 预付配置id
+};
+type ResponseData = {
+  outTradeNo: string;
+  // 商户交易订单号
+
+  payStr: string;
+  // 微信小程序端支付信息
+};
+export const getPayOrder = (
+  entity: Params,
+): Promise<ResponseDataEntity<ResponseData>> =>
+  baseFetch({
+    url: '/smapro/prepay/order/wx/apply/pay',
+    method: 'POST',
+    data: entity,
+  });

src/api/Order/paySuccess.ts

+import { ResponseDataEntity, baseFetch } from '..';
+
+type Params = {
+  orderId: string;
+};
+
+export const paySuccess = (entity: Params): Promise<ResponseDataEntity<null>> =>
+  baseFetch({
+    url: '/smapro/prepay/order/paySuccess',
+    method: 'POST',
+    data: entity,
+  });

src/api/customer.ts

+import { baseFetch, ResponseDataEntity } from '.';
+
+type Params = {
+  /** 登录code */
+  code: string;
+
+  /** 用户昵称 */
+  userName?: string;
+};
+
+export const registerAndLogin = (
+  entity: Params,
+): Promise<ResponseDataEntity<null>> =>
+  baseFetch({
+    url: '/smapro/customer/wxmini/registerandlogin',
+    method: 'POST',
+    data: entity,
+  });

src/api/device.ts

+import { baseFetch, ResponseDataEntity } from '.';
+
+type Params = {
+  customerId: number;
+  equipmentNum: string;
+  serviceId: number;
+};
+type DeviceInfoResponse = {
+  code: string;
+  // 设备编码
+
+  isCurrentUserUsed: number;
+  // 是否当前人使用 1：是，0：否
+
+  isOnline: number;
+  // 是否上线 1：是，0：否
+
+  isUsed: number;
+  // 是否被使用 1：是，0：否
+
+  operatorId: number;
+  // 运营商Id
+
+  operatorName: string;
+  // 运营商名称
+
+  position: string;
+  // 位置名称
+
+  positionId: string;
+  // 位置id
+  rates: RateInfoResponse[];
+};
+type RateInfoResponse = {
+  mark: string;
+  // 费率描述
+
+  name: string;
+  // 费率名称
+};
+type SmaproPrepayConfig = {
+  createAt: string;
+  // 创建时间
+
+  id: number;
+  // 会员id
+
+  isOpen: number;
+  // 是否开启
+
+  operateId: number;
+  // 运营商id
+
+  operateName: string;
+  // 运营商名称
+
+  prepayMoney: number;
+  // 预付金额
+
+  serviceId: number;
+  // 服务类型id
+
+  serviceName: string;
+  // 服务名称
+
+  sortId: number;
+  // 序号
+
+  updateAt: string;
+  // 更新时间
+};
+type ResponseData = {
+  deviceInfoResponse: DeviceInfoResponse;
+  prepayConfigs: SmaproPrepayConfig[];
+};
+
+export const getDeviceConfig = (
+  entity: Params,
+): Promise<ResponseDataEntity<ResponseData>> =>
+  baseFetch({
+    url: '/smapro/prepay/config/wxmini',
+    method: 'POST',
+    data: entity,
+  });

src/api/index.ts

+import Taro, { request } from '@tarojs/taro';
+import store from '../store/index';
+import { BASE_SERVER_URL, LogoutCode, SuccessCode } from '../constants/index';
+
+export type ResponseDataEntity<T> = {
+  code: number;
+  msg: string;
+  data: T;
+  [propName: string]: any;
+};
+
+type ResponseEntity = {
+  data: ResponseDataEntity<any>;
+  [propName: string]: any;
+};
+
+const createFetch = (basePath: string) => {
+  return (entity: request.Param) => {
+    const token = store.getState().userinfo.token;
+    return Taro.request({
+      ...entity,
+      header: token
+        ? {
+            token: token,
+            reqSource: 'wxmini',
+          }
+        : {
+            reqSource: 'wxmini',
+          },
+      url: basePath + entity.url,
+    }).then(({ data }: ResponseEntity) => {
+      if (data.code === SuccessCode) {
+        return data;
+      }
+      if (data.code === LogoutCode) {
+        Taro.redirectTo({
+          url: '/pages/Login/Login',
+        });
+        throw data;
+      }
+      Taro.showToast({
+        title: data.msg || '网络错误',
+        icon: 'none',
+      });
+      throw data;
+    });
+  };
+};
+
+export const baseFetch = createFetch(BASE_SERVER_URL);
+
+export default createFetch;

src/app.tsx

@@ -4,7 +4,7 @@ import { Provider } from '@tarojs/redux';
 
 import Index from './pages/index';
 
-import configStore from './store';
+import store from './store';
 
 import './app.scss';
 
@@ -14,8 +14,6 @@ import './app.scss';
 //   require('nerv-devtools')
 // }
 
-const store = configStore();
-
 class App extends Component {
   /**
    * 指定config的类型声明为: Taro.Config
@@ -26,8 +24,9 @@ class App extends Component {
    */
   config: Config = {
     pages: [
-      'pages/pay/pay',
+      'pages/scanEnter/scanEnter',
       'pages/index/index',
+      'pages/pay/pay',
     ],
     window: {
       backgroundTextStyle: 'light',

src/common/loginAndScan.ts

+import { Component } from '@tarojs/taro';
+import { ComponentClass, ReactElement } from 'react';
+import { connect } from '@tarojs/redux';
+import { UserState, updateUserInfo } from '../store/rootReducers/userinfo';
+import {
+  DeviceState,
+  updateDeviceData,
+  resetDeviceData,
+} from '../store/rootReducers/device';
+import PrepayConfig from '../types/Order/Order';
+import { updatePayData } from '../store/rootReducers/prepayConfig';
+import { Customer } from '../types/Customer/Customer';
+import Taro from '@tarojs/taro';
+import { registerAndLogin } from '../api/customer';
+import { getDeviceConfig } from '../api/device';
+
+type DeviceEntity = {
+  serviceId: number;
+  equipmentNum: string;
+};
+
+export type LoginAndScanExportProps = {
+  loginHandle: () => Promise<void>;
+  scanHandle: () => void;
+  getDeviceEntity: (paramStr: string) => DeviceEntity;
+  getDeviceConfigHandle: ({
+    equipmentNum,
+    serviceId,
+  }: DeviceEntity) => Promise<void>;
+};
+
+type PageStateProps = {
+  userinfo: Customer;
+};
+
+type PageDispatchProps = {
+  updateUserInfo: (e: UserState) => void;
+  updateDeviceData: (e: DeviceState) => void;
+  updatePayData: (e: PrepayConfig[]) => void;
+  resetDeviceData: () => void;
+};
+
+type PageOwnProps = {
+  render: (e: LoginAndScanExportProps) => ReactElement;
+};
+
+interface LoginAndScan {
+  props: PageStateProps & PageDispatchProps & PageOwnProps;
+}
+
+@connect(
+  ({ userinfo }) => ({
+    userinfo,
+  }),
+  dispatch => ({
+    updateUserInfo(data: UserState) {
+      dispatch(updateUserInfo(data));
+    },
+    updateDeviceData(data: DeviceState) {
+      dispatch(updateDeviceData(data));
+    },
+    updatePayData(data: PrepayConfig[]) {
+      dispatch(updatePayData(data));
+    },
+    resetDeviceData() {
+      dispatch(resetDeviceData());
+    },
+  }),
+)
+class LoginAndScan extends Component {
+  loginHandle() {
+    const { updateUserInfo } = this.props;
+
+    return Taro.login().then(res => {
+      const { code } = res;
+      return registerAndLogin({
+        code,
+        // userName: '',
+      }).then(res => {
+        const { token, customerId } = res;
+        updateUserInfo({
+          token,
+          customerId,
+        });
+      });
+    });
+  }
+
+  scanHandle() {
+    Taro.scanCode({
+      onlyFromCamera: true,
+      scanType: ['qrCode'],
+    })
+      .then(res => {
+        console.log(res);
+        const { path, result } = res;
+        if (path) {
+          let queryArr = path.split('?');
+          let queryStr = queryArr.length >= 2 ? queryArr[1] : '';
+          console.log(result, queryArr, queryStr);
+          const entity = this.getDeviceEntity(queryStr);
+          this.getDeviceConfigHandle(entity);
+        } else {
+          Taro.showToast({
+            title: '请扫描正确的小程序',
+            icon: 'none',
+          });
+        }
+      })
+      .catch(err => {
+        console.error(err);
+      });
+  }
+
+  getDeviceConfigHandle({ equipmentNum, serviceId }: DeviceEntity) {
+    Taro.showLoading();
+    const {
+      userinfo,
+      updateDeviceData,
+      updatePayData,
+      resetDeviceData,
+    } = this.props;
+    return getDeviceConfig({
+      customerId: userinfo.customerId,
+      equipmentNum: equipmentNum,
+      serviceId: serviceId,
+    })
+      .then(res => {
+        Taro.hideLoading();
+        console.log(res);
+        const { deviceInfoResponse, prepayConfigs } = res;
+        if (deviceInfoResponse.isUsed) {
+          console.log('设备使用中');
+          return;
+        }
+        if (deviceInfoResponse) {
+          updateDeviceData(deviceInfoResponse);
+        } else {
+          resetDeviceData();
+        }
+        if (prepayConfigs) {
+          updatePayData(prepayConfigs);
+        } else {
+          updatePayData([]);
+        }
+        Taro.navigateTo({
+          url: '/pages/pay/pay',
+        });
+      })
+      .catch(err => {
+        console.error(err);
+        Taro.showToast({
+          title: err.msg || '请扫描正确的设备码',
+          icon: 'none',
+        });
+      });
+  }
+
+  getDeviceEntity(paramStr: string): DeviceEntity {
+    let serviceId = Number(paramStr.slice(0, 2));
+    let equipmentNum = paramStr.slice(2);
+    return {
+      serviceId,
+      equipmentNum,
+    };
+  }
+
+  render() {
+    return this.props.render({
+      loginHandle: this.loginHandle,
+      scanHandle: this.scanHandle,
+      getDeviceEntity: this.getDeviceEntity,
+      getDeviceConfigHandle: this.getDeviceConfigHandle,
+    });
+  }
+}
+
+export default LoginAndScan;

src/constants/counter.ts

-export const ADD = 'ADD'
-export const MINUS = 'MINUS'

src/constants/index.js

+export const SuccessCode = 1000;
+export const LogoutCode = -2;
+export const NotRegisterCode = 1005;
+
+export const BASE_SERVER_URL = 'https://ex-test-dcxy-smapro-app.168cad.top';

src/pages/index/index.scss

 .index {
-  .scan-icon {
-    width: 460px;
-    height: 460px;
-    margin: 238px auto 168px;
-    image {
-      width: 100%;
-      height: 100%;
-    }
-  }
-  .scan-text {
+  padding: 50px 0;
   text-align: center;
-    font-size: 28px;
-    line-height: 52px;
-  }
 }

src/pages/index/index.tsx

 import { ComponentClass } from 'react';
 import Taro, { Component, Config } from '@tarojs/taro';
-import { View, Image, Text } from '@tarojs/components';
-import { connect } from '@tarojs/redux';
+import { View, Image } from '@tarojs/components';
 
-import { add, minus, asyncAdd } from '../../actions/counter';
 import scanIcon from '../../images/icon_s@2x.png';
 
 import './index.scss';
+import { registerAndLogin } from '../../api/customer';
+import { getDeviceConfig } from '../../api/device';
+import { UserState, updateUserInfo } from '../../store/rootReducers/userinfo';
+import { connect } from '@tarojs/redux';
+import { Customer } from '../../types/Customer/Customer';
+import {
+  DeviceState,
+  updateDeviceData,
+  resetDeviceData,
+} from '../../store/rootReducers/device';
+import PrepayConfig from '../../types/Order/Order';
+import { updatePayData } from '../../store/rootReducers/prepayConfig';
 
-// #region 书写注意
-//
-// 目前 typescript 版本还无法在装饰器模式下将 Props 注入到 Taro.Component 中的 props 属性
-// 需要显示声明 connect 的参数类型并通过 interface 的方式指定 Taro.Component 子类的 props
-// 这样才能完成类型检查和 IDE 的自动提示
-// 使用函数模式则无此限制
-// ref: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20796
-//
-// #endregion
+type DeviceEntity = {
+  serviceId: number;
+  equipmentNum: string;
+};
 
 type PageStateProps = {
-  counter: {
-    num: number;
-  };
+  userinfo: Customer;
 };
 
 type PageDispatchProps = {
-  add: () => void;
-  dec: () => void;
-  asyncAdd: () => any;
+  updateUserInfo: (e: UserState) => void;
+  updateDeviceData: (e: DeviceState) => void;
+  updatePayData: (e: PrepayConfig[]) => void;
+  resetDeviceData: () => void;
 };
 
 type PageOwnProps = {};
 
-type PageState = {};
+type PageState = {
+  errorText: string;
+};
 
 type IProps = PageStateProps & PageDispatchProps & PageOwnProps;
 
 interface Index {
   props: IProps;
+  state: PageState;
 }
 
 @connect(
-  ({ counter }) => ({
-    counter,
+  ({ userinfo }) => ({
+    userinfo,
   }),
   dispatch => ({
-    add() {
-      dispatch(add());
+    updateUserInfo(data: UserState) {
+      dispatch(updateUserInfo(data));
+    },
+    updateDeviceData(data: DeviceState) {
+      dispatch(updateDeviceData(data));
     },
-    dec() {
-      dispatch(minus());
+    updatePayData(data: PrepayConfig[]) {
+      dispatch(updatePayData(data));
     },
-    asyncAdd() {
-      dispatch(asyncAdd());
+    resetDeviceData() {
+      dispatch(resetDeviceData());
     },
   }),
 )
 class Index extends Component {
-  /**
-   * 指定config的类型声明为: Taro.Config
-   *
-   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
-   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
-   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
-   */
   config: Config = {
     navigationBarTitleText: '多彩自助服务',
   };
 
-  clickHandle() {
-    Taro.navigateTo({
+  constructor(props) {
+    super(props);
+    this.state = {
+      errorText: '',
+    };
+  }
+
+  componentWillMount() {
+    this.loginHandle().then(() => {
+      let queryArr = Object.keys(this.$router.params);
+      console.log(this.$router.params);
+
+      let scene: string = queryArr.length > 0 ? queryArr[0] : '';
+      console.log('scene:', scene);
+
+      if (scene) {
+        Taro.showLoading();
+        let entity = this.getDeviceEntity(scene);
+        if (entity) {
+          this.getDeviceConfigHandle(entity);
+        }
+      } else {
+        Taro.redirectTo({
+          url: '/pages/scanEnter/scanEnter',
+        });
+      }
+    });
+  }
+
+  getDeviceEntity(paramStr: string): DeviceEntity {
+    let serviceId = Number(paramStr.slice(0, 2));
+    let equipmentNum = paramStr.slice(2);
+    return {
+      serviceId,
+      equipmentNum,
+    };
+  }
+
+  loginHandle() {
+    const { updateUserInfo } = this.props;
+
+    return Taro.login().then(res => {
+      const { code } = res;
+      return registerAndLogin({
+        code,
+        // userName: '',
+      }).then(res => {
+        const { token, customerId } = res;
+        updateUserInfo({
+          token,
+          customerId,
+        });
+      });
+    });
+  }
+
+  scanHandle() {
+    Taro.scanCode({
+      onlyFromCamera: true,
+      scanType: ['qrCode'],
+    })
+      .then(res => {
+        console.log(res);
+        const { path, result } = res;
+        if (path) {
+          let queryArr = path.split('?');
+          let queryStr = queryArr.length >= 2 ? queryArr[1] : '';
+          console.log(result, queryArr, queryStr);
+          const entity = this.getDeviceEntity(queryStr);
+          this.getDeviceConfigHandle(entity);
+        } else {
+          Taro.showToast({
+            title: '请扫描正确的小程序',
+            icon: 'none',
+          });
+          this.setState({
+            errorText: '请扫描正确的小程序',
+          });
+        }
+      })
+      .catch(err => {
+        console.error(err);
+      });
+  }
+
+  getDeviceConfigHandle({ equipmentNum, serviceId }: DeviceEntity) {
+    Taro.showLoading();
+    const {
+      userinfo,
+      updateDeviceData,
+      updatePayData,
+      resetDeviceData,
+    } = this.props;
+    return getDeviceConfig({
+      customerId: userinfo.customerId,
+      equipmentNum: equipmentNum,
+      serviceId: serviceId,
+    })
+      .then(res => {
+        Taro.hideLoading();
+        console.log(res);
+        const { deviceInfoResponse, prepayConfigs } = res;
+        if (deviceInfoResponse.isUsed) {
+          console.log('设备使用中');
+          return;
+        }
+        if (deviceInfoResponse) {
+          updateDeviceData(deviceInfoResponse);
+        } else {
+          resetDeviceData();
+        }
+        if (prepayConfigs) {
+          updatePayData(prepayConfigs);
+        } else {
+          updatePayData([]);
+        }
+        Taro.redirectTo({
           url: '/pages/pay/pay',
         });
+      })
+      .catch(err => {
+        console.error(err);
+        Taro.showToast({
+          title: err.msg || '请扫描正确的设备码',
+          icon: 'none',
+        });
+        this.setState({
+          errorText: err.msg || '请扫描正确的设备码',
+        });
+      });
+  }
+
+  getUserInfoHandle(res) {
+    console.log(res);
+    const { detail } = res;
+    if (detail.userInfo) {
+      // this.scanHandle(detail.userInfo);
+    }
+  }
+
+  clickHandle() {
+    this.scanHandle();
   }
 
   render() {
+    const { errorText } = this.state;
     return (
       <View className='index'>
-        <View className='scan-icon' onClick={this.clickHandle}>
+        {errorText}
+        {/* <Button
+          className='scan-icon'
+          onGetUserInfo={this.getUserInfoHandle}
+          open-type='getUserInfo'>
+          <Image src={scanIcon} />
+        </Button> */}
+        {/* <View className='scan-icon' onClick={this.clickHandle}>
           <Image src={scanIcon} />
         </View>
         <View className='scan-text'>马上扫一扫</View>
-        <View className='scan-text'>使用多彩自助服务</View>
+        <View className='scan-text'>使用多彩自助服务</View> */}
       </View>
     );
   }
 }
 
-// #region 导出注意
-//
-// 经过上面的声明后需要将导出的 Taro.Component 子类修改为子类本身的 props 属性
-// 这样在使用这个子类时 Ts 才不会提示缺少 JSX 类型参数错误
-//
-// #endregion
-
 export default Index as ComponentClass<PageOwnProps, PageState>;

src/pages/pay/pay.scss

@@ -11,6 +11,16 @@
       justify-content: space-between;
       .Pay-info-rate {
         line-height: 40px;
+        .Pay-info-rate-item {
+          display: flex;
+        }
+        .Pay-info-rate-name {
+          margin-right: 5px;
+        }
+        .Pay-info-rate-mark {
+          width: 250px;
+          text-align: right;
+        }
       }
     }
   }

src/pages/pay/pay.tsx

-import { Component, Config } from '@tarojs/taro';
+import Taro, { Component, Config } from '@tarojs/taro';
 import { ComponentClass } from 'react';
-import { View, Text, Button, Input } from '@tarojs/components';
+import { View, Text, Button } from '@tarojs/components';
+import { getPayOrder } from '../../api/Order/pay';
+import { connect } from '@tarojs/redux';
+import { Device } from '../../types/Device/Device';
+import PrepayConfig from '../../types/Order/Order';
+import { Customer } from '../../types/Customer/Customer';
+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 { paySuccess } from '../../api/Order/paySuccess';
+import './pay.scss';
 
+type PageStateProps = {
+  device: Device;
+  prepayConfig: PrepayConfig[];
+  userinfo: Customer;
+};
+
+type PageDispatchProps = {};
+
+type PageState = {
+  payId: undefined | number;
+};
+
+type Iprop = PageStateProps & PageDispatchProps;
+interface Pay {
+  props: Iprop;
+  state: PageState;
+}
+
+@connect(({ device, prepayConfig, userinfo }) => ({
+  device,
+  prepayConfig,
+  userinfo,
+}))
 class Pay extends Component {
   config: Config = {
     navigationBarTitleText: '支付金额',
   };
+  constructor(props) {
+    super(props);
+    this.state = {
+      payId: undefined,
+    };
+  }
+
+  selectPayConfig(id: number) {
+    this.setState({
+      payId: id,
+    });
+  }
+
+  payHandle() {
+    const {
+      device,
+      userinfo: { customerId },
+    } = this.props;
+    const { payId } = this.state;
+    if (payId) {
+      getPayOrder({
+        equipmentNum: device.code,
+        equipmentPos: device.position,
+        payType: '2',
+        serviceId: device.serviceId,
+        smaproCustomerId: customerId,
+        smaproPrepayConfigId: payId,
+      })
+        .then(res => {
+          console.log('res: ', res);
+
+          const { payStr } = res;
+          let key = customerId.toString();
+          while (key.length < 16) {
+            key = key + '0';
+          }
+
+          const payData = JSON.parse(
+            AES.decrypt(payStr, Utf8.parse(key), {
+              mode: ECBmode,
+              padding: PaddingPkcs7,
+            }).toString(Utf8),
+          );
+          console.log('payData:', 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);
+            // paySuccess({ orderId: outTradeNo });
+            // Taro.showLoading({
+            //   title: '设备连接中',
+            //   mask: true,
+            // });
+            Taro.showToast({
+              title: '支付成功！',
+              icon: 'success',
+              mask: true,
+            });
+            setTimeout(() => {
+              Taro.navigateTo({
+                url: '/pages/index/index?', // 需要问号不然回到首页可以取到业务参数
+              });
+            }, 2000);
+          });
+        })
+        .catch(err => {
+          Taro.showToast({
+            title: '发起支付失败!',
+            icon: 'none',
+          });
+          console.error(err);
+        });
+    } else {
+      Taro.showToast({
+        title: '请选择预付金额',
+        icon: 'none',
+      });
+    }
+  }
+
   render() {
+    const { device, prepayConfig } = this.props;
+    const { payId } = this.state;
     return (
       <View className='Pay'>
         <View className='Pay-info'>
           <View className='Pay-info-item'>
             <Text>服务类型</Text>
-            <Text>饮水</Text>
+            <Text>{device.serviceName ? device.serviceName : ''}</Text>
           </View>
           <View className='Pay-info-item'>
             <Text>设备编号</Text>
-            <Text>SN100089078</Text>
+            <Text>{device.code ? device.code : ''}</Text>
           </View>
           <View className='Pay-info-item'>
             <Text>设备位置</Text>
-            <Text>天信苑A幢1栋2302门口</Text>
+            <Text>{device.position}</Text>
           </View>
           <View className='Pay-info-item'>
             <Text>适用费率</Text>
             <View className='Pay-info-rate'>
-              <View>
-                <Text>冷水</Text>
-                <Text>0.02元/100ml</Text>
+              {device.rates.map(item => (
+                <View key={item.name} className='Pay-info-rate-item'>
+                  <Text className='Pay-info-rate-name'>{item.name}</Text>
+                  <Text className='Pay-info-rate-mark'>{item.mark}</Text>
                 </View>
-              <View>
-                <Text>热水</Text>
-                <Text>0.02元/100ml</Text>
+              ))}
+              {/* <View className='Pay-info-rate-item'>
+                <Text className='Pay-info-rate-name'>冷水</Text>
+                <Text className='Pay-info-rate-mark'>0.02元/100ml</Text>
               </View>
+              <View className='Pay-info-rate-item'>
+                <Text className='Pay-info-rate-name'>热水</Text>
+                <Text className='Pay-info-rate-mark'>0.02元/100ml</Text>
+              </View> */}
             </View>
           </View>
         </View>
@@ -40,16 +166,29 @@ class Pay extends Component {
           温馨提示：如本次预付款未全部使用，系统将在使用结束后半小时内自动退还剩余金额，请留意查收！
         </View>
         <View className='Pay-money'>
-          <View className='Pay-money-item seleted'>0.50元</View>
-          <View className='Pay-money-item'>1.00元</View>
+          {prepayConfig &&
+            prepayConfig.length &&
+            prepayConfig.map(payConfig => (
+              <View
+                key={payConfig.id}
+                className={`Pay-money-item ${
+                  payConfig.id == payId ? 'seleted' : ''
+                }`}
+                onClick={() => this.selectPayConfig(payConfig.id)}>
+                {payConfig.prepayMoney}元
+              </View>
+            ))}
+          {/* <View className='Pay-money-item'>1.00元</View>
           <View className='Pay-money-item'>2.00元</View>
           <View className='Pay-money-item'>5.00元</View>
-          <Input className='Pay-money-item' placeholder='输入>0.5数额' />
+          <Input className='Pay-money-item' placeholder='输入>0.5数额' /> */}
         </View>
-        <Button className='Pay-btn'>确定支付</Button>
+        <Button className='Pay-btn' onClick={this.payHandle}>
+          确定支付
+        </Button>
       </View>
     );
   }
 }
 
-export default Pay as ComponentClass;
+export default Pay as ComponentClass<Iprop, PageState>;

src/pages/scanEnter/scanEnter.scss

+.ScanEnter {
+  .scan-icon {
+    position: relative;
+    padding: 0;
+    background-color: #fff;
+    border-color: #fff;
+    width: 460px;
+    height: 460px;
+    margin: 238px auto 168px;
+    border-radius: 50%;
+    box-shadow: #dae2fb 0 0 32px;
+    overflow: hidden;
+    &:active {
+      box-shadow: #6180f4 0 0 32px;
+    }
+    image {
+      position: absolute;
+      background-color: #fff;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 2;
+    }
+  }
+  .scan-text {
+    text-align: center;
+    font-size: 28px;
+    line-height: 52px;
+  }
+}

src/pages/scanEnter/scanEnter.tsx

+import { ComponentClass } from 'react';
+import Taro, { Component, Config } from '@tarojs/taro';
+import { View, Image } from '@tarojs/components';
+
+import scanIcon from '../../images/icon_s@2x.png';
+
+import './scanEnter.scss';
+import { registerAndLogin } from '../../api/customer';
+import { getDeviceConfig } from '../../api/device';
+import { UserState, updateUserInfo } from '../../store/rootReducers/userinfo';
+import { connect } from '@tarojs/redux';
+import { Customer } from '../../types/Customer/Customer';
+import {
+  DeviceState,
+  updateDeviceData,
+  resetDeviceData,
+} from '../../store/rootReducers/device';
+import PrepayConfig from '../../types/Order/Order';
+import { updatePayData } from '../../store/rootReducers/prepayConfig';
+
+type DeviceEntity = {
+  serviceId: number;
+  equipmentNum: string;
+};
+
+type PageStateProps = {
+  userinfo: Customer;
+};
+
+type PageDispatchProps = {
+  updateUserInfo: (e: UserState) => void;
+  updateDeviceData: (e: DeviceState) => void;
+  updatePayData: (e: PrepayConfig[]) => void;
+  resetDeviceData: () => void;
+};
+
+type PageOwnProps = {};
+
+type PageState = {};
+
+type IProps = PageStateProps & PageDispatchProps & PageOwnProps;
+
+interface ScanEnter {
+  props: IProps;
+}
+
+@connect(
+  ({ userinfo }) => ({
+    userinfo,
+  }),
+  dispatch => ({
+    updateUserInfo(data: UserState) {
+      dispatch(updateUserInfo(data));
+    },
+    updateDeviceData(data: DeviceState) {
+      dispatch(updateDeviceData(data));
+    },
+    updatePayData(data: PrepayConfig[]) {
+      dispatch(updatePayData(data));
+    },
+    resetDeviceData() {
+      dispatch(resetDeviceData());
+    },
+  }),
+)
+class ScanEnter extends Component {
+  config: Config = {
+    navigationBarTitleText: '多彩自助服务',
+  };
+
+  componentWillMount() {
+    this.loginHandle().then(() => {
+      // let queryArr = Object.keys(this.$router.params);
+      // console.log(this.$router.params);
+
+      // let scene: string = queryArr.length > 0 ? queryArr[0] : '';
+      // console.log('scene:', scene);
+
+      // if (scene) {
+      //   Taro.showLoading();
+      //   let entity = this.getDeviceEntity(scene);
+      //   if (entity) {
+      //     this.getDeviceConfigHandle(entity);
+      //   }
+      // }
+    });
+  }
+
+  getDeviceEntity(paramStr: string): DeviceEntity {
+    let serviceId = Number(paramStr.slice(0, 2));
+    let equipmentNum = paramStr.slice(2);
+    return {
+      serviceId,
+      equipmentNum,
+    };
+  }
+
+  loginHandle() {
+    const { updateUserInfo } = this.props;
+
+    return Taro.login().then(res => {
+      const { code } = res;
+      return registerAndLogin({
+        code,
+        // userName: '',
+      }).then(res => {
+        const { token, customerId } = res;
+        updateUserInfo({
+          token,
+          customerId,
+        });
+      });
+    });
+  }
+
+  scanHandle() {
+    Taro.scanCode({
+      onlyFromCamera: true,
+      scanType: ['qrCode'],
+    })
+      .then(res => {
+        console.log(res);
+        const { path, result } = res;
+        if (path) {
+          let queryArr = path.split('?');
+          let queryStr = queryArr.length >= 2 ? queryArr[1] : '';
+          console.log(result, queryArr, queryStr);
+          const entity = this.getDeviceEntity(queryStr);
+          this.getDeviceConfigHandle(entity);
+        } else {
+          Taro.showToast({
+            title: '请扫描正确的小程序',
+            icon: 'none',
+          });
+        }
+      })
+      .catch(err => {
+        console.error(err);
+      });
+  }
+
+  getDeviceConfigHandle({ equipmentNum, serviceId }: DeviceEntity) {
+    Taro.showLoading();
+    const {
+      userinfo,
+      updateDeviceData,
+      updatePayData,
+      resetDeviceData,
+    } = this.props;
+    return getDeviceConfig({
+      customerId: userinfo.customerId,
+      equipmentNum: equipmentNum,
+      serviceId: serviceId,
+    })
+      .then(res => {
+        Taro.hideLoading();
+        console.log(res);
+        const { deviceInfoResponse, prepayConfigs } = res;
+        if (deviceInfoResponse.isUsed) {
+          console.log('设备使用中');
+          return;
+        }
+        if (deviceInfoResponse) {
+          updateDeviceData(deviceInfoResponse);
+        } else {
+          resetDeviceData();
+        }
+        if (prepayConfigs) {
+          updatePayData(prepayConfigs);
+        } else {
+          updatePayData([]);
+        }
+        Taro.navigateTo({
+          url: '/pages/pay/pay',
+        });
+      })
+      .catch(err => {
+        console.error(err);
+        Taro.showToast({
+          title: err.msg || '请扫描正确的设备码',
+          icon: 'none',
+        });
+      });
+  }
+
+  getUserInfoHandle(res) {
+    console.log(res);
+    const { detail } = res;
+    if (detail.userInfo) {
+      // this.scanHandle(detail.userInfo);
+    }
+  }
+
+  clickHandle() {
+    this.scanHandle();
+  }
+
+  render() {
+    return (
+      <View className='ScanEnter'>
+        {/* <Button
+          className='scan-icon'
+          onGetUserInfo={this.getUserInfoHandle}
+          open-type='getUserInfo'>
+          <Image src={scanIcon} />
+        </Button> */}
+        <View className='scan-icon' onClick={this.clickHandle}>
+          <Image src={scanIcon} />
+        </View>
+        <View className='scan-text'>马上扫一扫</View>
+        <View className='scan-text'>使用多彩自助服务</View>
+      </View>
+    );
+  }
+}
+
+export default ScanEnter as ComponentClass<PageOwnProps, PageState>;

src/reducers/counter.ts

-import { ADD, MINUS } from '../constants/counter'
-
-const INITIAL_STATE = {
-  num: 0
-}
-
-export default function counter (state = INITIAL_STATE, action) {
-  switch (action.type) {
-    case ADD:
-      return {
-        ...state,
-        num: state.num + 1
-      }
-     case MINUS:
-       return {
-         ...state,
-         num: state.num - 1
-       }
-     default:
-       return state
-  }
-}

src/reducers/index.ts

-import { combineReducers } from 'redux'
-import counter from './counter'
-
-export default combineReducers({
-  counter
-})

src/store/index.ts

-import { createStore, applyMiddleware, compose } from 'redux'
-import thunkMiddleware from 'redux-thunk'
-import rootReducer from '../reducers'
+import { createStore, applyMiddleware, compose } from 'redux';
+import thunkMiddleware from 'redux-thunk';
+import rootReducer from './reducers';
 
 const composeEnhancers =
   typeof window === 'object' &&
-  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
-    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
+  (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+    ? (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
         // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
-    }) : compose
+      })
+    : compose;
 
-const middlewares = [
-  thunkMiddleware
-]
+const middlewares = [thunkMiddleware];
 
 if (process.env.NODE_ENV === 'development') {
-  middlewares.push(require('redux-logger').createLogger())
+  middlewares.push(require('redux-logger').createLogger());
 }
 
 const enhancer = composeEnhancers(
   applyMiddleware(...middlewares),
   // other store enhancers if any
-)
+);
 
-export default function configStore () {
-  const store = createStore(rootReducer, enhancer)
-  return store
-}
+const store = createStore(rootReducer, enhancer);
+
+export default store;

src/store/reducers.ts

+import { combineReducers } from 'redux';
+import userinfo from './rootReducers/userinfo';
+import device from './rootReducers/device';
+import prepayConfig from './rootReducers/prepayConfig';
+
+export default combineReducers({
+  userinfo,
+  device,
+  prepayConfig,
+});

src/store/rootReducers/constants.ts

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

src/store/rootReducers/device.ts

+import Action from '../../types/Store/Actions';
+import { Device } from '../..//types/Device/Device';
+
+export type DeviceState = StoreState<Device>;
+
+export const INITIAL_STATE = {
+  code: '',
+  isCurrentUserUsed: 0,
+  isOnline: 0,
+  isUsed: 0,
+  operatorId: 0,
+  operatorName: '',
+  position: '',
+  positionId: '',
+  rates: [],
+  serviceId: 0,
+  serviceName: '',
+};
+
+export const updateDeviceData = (entity: DeviceState): Action => ({
+  type: 'UPDATE_DEVICE_DATA',
+  payload: entity,
+});
+export const resetDeviceData = (): Action => ({
+  type: 'UPDATE_DEVICE_DATA',
+});
+
+export default function device(
+  state: Device = INITIAL_STATE,
+  actions: Action,
+): Device {
+  switch (actions.type) {
+    case 'UPDATE_DEVICE_DATA':
+      return {
+        ...state,
+        ...actions.payload,
+      };
+    case 'UPDATE_DEVICE_DATA':
+      return {
+        ...INITIAL_STATE,
+      };
+    default:
+      return state;
+  }
+}

src/store/rootReducers/prepayConfig.ts

+import Action from '../../types/Store/Actions';
+import { PrepayConfig } from '../../types/Order/Order';
+
+export const INITIAL_STATE = [];
+
+export const updatePayData = (entity: PrepayConfig[]): Action => ({
+  type: 'UPDATE_PAY_DATA',
+  payload: entity,
+});
+
+export default function prepayConfig(
+  state: PrepayConfig[] = INITIAL_STATE,
+  actions: Action,
+): PrepayConfig[] {
+  switch (actions.type) {
+    case 'UPDATE_PAY_DATA':
+      return [...actions.payload];
+    default:
+      return state;
+  }
+}

src/store/rootReducers/userinfo.ts

+import Action from '../../types/Store/Actions';
+import { Customer } from '../../types/Customer/Customer';
+
+export type UserState = StoreState<Customer & { code: string }>;
+
+export const INITIAL_STATE = {
+  token: '',
+  customerId: 0,
+};
+
+export const updateUserInfo = (entity: UserState): Action => ({
+  type: 'UPDATE_USERINFO',
+  payload: entity,
+});
+
+export default function userinfo(
+  state: Customer = INITIAL_STATE,
+  actions: Action,
+): Customer {
+  switch (actions.type) {
+    case 'UPDATE_USERINFO':
+      return {
+        ...state,
+        ...actions.payload,
+      };
+    default:
+      return state;
+  }
+}

src/types/Customer/Customer.ts

+export type Customer = {
+  token: string;
+  customerId: number;
+};
+
+export type WechatUserInfo = {
+  avatarUrl: string;
+  city: string;
+  country: string;
+  gender: number;
+  language: string;
+  nickName: string;
+  province: string;
+};

src/types/Device/Device.ts

+export type Rate = {
+  mark: string;
+  name: string;
+};
+export type Device = {
+  code: string;
+  isCurrentUserUsed: number;
+  isOnline: number;
+  isUsed: number;
+  operatorId: number;
+  operatorName: string;
+  position: string;
+  positionId: string;
+  rates: Rate[];
+  serviceId: number;
+  serviceName: string;
+};

src/types/Order/Order.ts

+export type PrepayConfig = {
+  createAt: string;
+  // 创建时间
+
+  id: number;
+  // 会员id
+
+  isOpen: number;
+  // 是否开启
+
+  operateId: number;
+  // 运营商id
+
+  operateName: string;
+  // 运营商名称
+
+  prepayMoney: number;
+  // 预付金额
+
+  serviceId: number;
+  // 服务类型id
+
+  serviceName: string;
+  // 服务名称
+
+  sortId: number;
+  // 序号
+
+  updateAt: string;
+  // 更新时间
+};
+
+export default PrepayConfig;

src/types/Store/Actions.ts

+type Actions = {
+  type: String;
+  payload?: any;
+};
+
+export default Actions;

src/types/Store/State.ts

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

yarn.lock

@@ -1874,6 +1874,10 @@ crypto-browserify@^3.11.0:
     randombytes "^2.0.0"
     randomfill "^1.0.3"
 
+crypto-js@^3.1.9-1:
+  version "3.1.9-1"
+  resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-3.1.9-1.tgz#fda19e761fc077e01ffbfdc6e9fdfc59e8806cd8"
+
 css-loader@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-1.0.0.tgz#9f46aaa5ca41dbe31860e3b62b8e23c42916bf56"