分离小程序入口和扫码进入页面

src/app.tsx

@@ -24,6 +24,7 @@ class App extends Component {
    */
   config: Config = {
     pages: [
+      'pages/scanEnter/scanEnter',
       'pages/index/index',
       'pages/pay/pay',
     ],

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/pages/index/index.scss

 .index {
-  .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;
-  }
+  padding: 50px 0;
+  text-align: center;
 }

src/pages/index/index.tsx

@@ -36,12 +36,15 @@ type PageDispatchProps = {
 
 type PageOwnProps = {};
 
-type PageState = {};
+type PageState = {
+  errorText: string;
+};
 
 type IProps = PageStateProps & PageDispatchProps & PageOwnProps;
 
 interface Index {
   props: IProps;
+  state: PageState;
 }
 
 @connect(
@@ -68,20 +71,31 @@ class Index extends Component {
     navigationBarTitleText: '多彩自助服务',
   };
 
+  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',
+        });
       }
     });
   }
@@ -129,9 +143,12 @@ class Index extends Component {
           this.getDeviceConfigHandle(entity);
         } else {
           Taro.showToast({
-            title: '请扫描正确的设备码',
+            title: '请扫描正确的小程序',
             icon: 'none',
           });
+          this.setState({
+            errorText: '请扫描正确的小程序',
+          });
         }
       })
       .catch(err => {
@@ -180,6 +197,9 @@ class Index extends Component {
           title: err.msg || '请扫描正确的设备码',
           icon: 'none',
         });
+        this.setState({
+          errorText: err.msg || '请扫描正确的设备码',
+        });
       });
   }
 
@@ -196,19 +216,21 @@ class Index extends Component {
   }
 
   render() {
+    const { errorText } = this.state;
     return (
       <View className='index'>
+        {errorText}
         {/* <Button
           className='scan-icon'
           onGetUserInfo={this.getUserInfoHandle}
           open-type='getUserInfo'>
           <Image src={scanIcon} />
         </Button> */}
-        <View className='scan-icon' onClick={this.clickHandle}>
+        {/* <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>
     );
   }

src/pages/pay/pay.scss

@@ -18,7 +18,7 @@
           margin-right: 5px;
         }
         .Pay-info-rate-mark {
-          width: 220px;
+          width: 250px;
           text-align: right;
         }
       }

src/pages/pay/pay.tsx

@@ -11,6 +11,7 @@ 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;

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