完善页面

config-overrides.js

@@ -15,6 +15,7 @@ module.exports = override(
     modifyVars: {
       '@brand-primary': '#ff900d',
       '@brand-primary-tap': '#fac17d',
+      '@button-height': '60 * @hd',
     },
   }),
   addPostcssPlugins([

package.json

 {
-  "name": "wx-school-home",
+  "name": "wx-hair-dryer",
   "version": "0.1.0",
   "private": true,
-  "homepage": "/schoolHome",
+  "homepage": "/hairDryer",
   "dependencies": {
     "antd-mobile": "^2.2.8",
     "axios": "^0.18.0",
+    "jsbarcode": "^3.11.0",
     "react": "^16.8.2",
     "react-dom": "^16.8.2",
     "react-router-dom": "^4.3.1",

src/HOC/wx.js

+import { Component } from 'react';
+import { getWxConfig } from '../api/index';
+import { APP_ID } from '../config/index';
+
+class WxWrap extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      wxDone: false,
+    };
+    this.wxConfigHandle();
+  }
+
+  wxConfigHandle = () => {
+    const wx = window.wx;
+    return new Promise((resolve, reject) => {
+      let url = window.location.href.split('#')[0];
+      const u = navigator.userAgent;
+      const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
+      if (isIOS) {
+        url = window.location.origin + '/';
+      }
+      getWxConfig({
+        url: encodeURIComponent(url),
+      })
+        .then(res => {
+          const data = res.data;
+          wx.config({
+            // debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
+            appId: APP_ID, // 必填，公众号的唯一标识
+            timestamp: data.timestamp, // 必填，生成签名的时间戳
+            nonceStr: data.nonceStr, // 必填，生成签名的随机串
+            signature: data.signature, // 必填，签名
+            jsApiList: ['scanQRCode'], // 必填，需要使用的JS接口列表
+          });
+        })
+        .catch(err => {
+          console.log(err);
+          reject(err);
+        });
+      wx.ready(() => this.wxReadyHandle(resolve));
+      wx.error(reject);
+    });
+  };
+  wxReadyHandle = done => {
+    this.setState({
+      wxDone: true,
+    });
+    done();
+  };
+  render() {
+    const { render } = this.props;
+    return render({ ...this.state, wxConfigHandle: this.wxConfigHandle });
+  }
+}
+
+export default WxWrap;

src/Hooks/wxConfigHandle.js

+import { useState, useEffect } from 'react';
+import { getWxConfig } from '../api/index';
+import { APP_ID } from '../config/index';
+
+function useWxConfig() {
+  const [wxDone, setWxDone] = useState(false);
+
+  function wxConfigHandle() {
+    const wx = window.wx;
+    return new Promise((resolve, reject) => {
+      let url = window.location.href.split('#')[0];
+      const u = navigator.userAgent;
+      const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
+      if (isIOS) {
+        url = window.location.origin + '/';
+      }
+      getWxConfig({
+        url: encodeURIComponent(url),
+      })
+        .then(res => {
+          const data = res.data;
+          wx.config({
+            // debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
+            appId: APP_ID, // 必填，公众号的唯一标识
+            timestamp: data.timestamp, // 必填，生成签名的时间戳
+            nonceStr: data.nonceStr, // 必填，生成签名的随机串
+            signature: data.signature, // 必填，签名
+            jsApiList: ['scanQRCode'], // 必填，需要使用的JS接口列表
+          });
+        })
+        .catch(err => {
+          console.log(err);
+          reject(err);
+        });
+      wx.ready(() => {
+        setWxDone(true);
+        resolve();
+      });
+      wx.error(reject);
+    });
+  }
+
+  useEffect(() => {
+    wxConfigHandle();
+    return () => {
+      setWxDone(false);
+    };
+  }, []);
+
+  return [wxDone, wxConfigHandle];
+}
+
+export default useWxConfig;

src/api/fetch.js

@@ -3,7 +3,7 @@ import config from '../config/index';
 import errorHandle from './errorHandle';
 import store from '../store/index';
 
-const path = config.SERVER_URL + '/dcxy/api/gx/construction';
+const path = config.SERVER_URL + '/dcxy/api/blower/manager/construction';
 // 创建axios实例
 const service = axios.create({
   baseURL: path, // api的base_url
@@ -14,18 +14,24 @@ service.interceptors.request.use(
   conf => {
     let token = store.getToken();
 
-    conf.headers = {
-      ...conf.headers,
-      reqSource: 'wx',
-      token: token ? token : '',
-    };
+    conf.headers = token
+      ? {
+          ...conf.headers,
+          reqSource: 'wx',
+          token: token,
+        }
+      : {
+          ...conf.headers,
+          reqSource: 'wx',
+          token: 'SHOWER-001-867477ecfd6f684b2df2d2b96b2544ca1550546762647',
+        };
     return conf;
   },
   error => {
     // Do something with request error
     console.log(error); // for debug
     Promise.reject(error);
-  }
+  },
 );
 
 // respone拦截器

src/config/index.js

+export const APP_ID = 'wxf5912b79bba23663';
+export const SERVER_URL = 'http://ex-dev-blower-manager.168cad.top';
+
+export default {
+  APP_ID,
+  SERVER_URL,
+};

src/containers/App.js

@@ -18,7 +18,11 @@ function App() {
       <UserInfoContext.Provider
         value={{
           userinfo: userinfo,
-          updateUserInfo: setUserinfo,
+          updateUserInfo: val =>
+            setUserinfo({
+              ...userinfo,
+              ...val,
+            }),
         }}>
         <Route render={props => <NavBar {...props} title={title} />} />
         <Switch>

src/containers/BindEquipment/index.js

@@ -4,7 +4,7 @@ import { Button, Toast } from 'antd-mobile';
 import './style.scss';
 import { getPositions } from '../../api/index';
 import UserInfoContext from '../../context/userinfo-context';
-// import WxWrap from '../../HOC/wx';
+import WxWrap from '../../HOC/wx';
 import scanImg from '../../images/Equipment/scan.png';
 import { filterEmoji } from '../../utils/index';
 
@@ -23,7 +23,6 @@ export class Bindequipment extends React.Component {
   componentWillMount() {
     const { setTitle } = this.props;
     setTitle('输入设备编号');
-    console.log(this.props);
   }
   changeHandle = e => {
     let value = e.target.value.trim();
@@ -43,7 +42,6 @@ export class Bindequipment extends React.Component {
   bindEquipment = () => {
     if (this.validate()) {
       Toast.loading('', 20);
-      console.log(this.props);
       const { history, userinfo, updateUserInfo } = this.props;
       const { deviceCode } = this.state;
       getPositions({
@@ -52,7 +50,7 @@ export class Bindequipment extends React.Component {
       })
         .then(res => {
           Toast.hide();
-          console.log(res);
+          // console.log(res);
           const { barcode, ...data } = res.data;
           if (data.id) {
             updateUserInfo({ barcode, position: { ...data, isBind: true } });
@@ -138,13 +136,18 @@ export class Bindequipment extends React.Component {
 }
 
 export default props => (
-  <UserInfoContext.Consumer>
-    {({ updateUserInfo, userinfo }) => (
-      <Bindequipment
-        {...props}
-        updateUserInfo={updateUserInfo}
-        userinfo={userinfo}
-      />
+  <WxWrap
+    render={state => (
+      <UserInfoContext.Consumer>
+        {({ updateUserInfo, userinfo }) => (
+          <Bindequipment
+            {...props}
+            {...state}
+            updateUserInfo={updateUserInfo}
+            userinfo={userinfo}
+          />
+        )}
+      </UserInfoContext.Consumer>
     )}
-  </UserInfoContext.Consumer>
+  />
 );

src/containers/BindEquipment/style.scss

@@ -5,6 +5,7 @@
   background-position-y: -624px;
   background-color: #fff;
   .inputBox {
+    display: block;
     width: 500px;
     height: 200px;
     margin: 127px auto 0;

src/containers/Equipment/EquipmentTest.js

@@ -3,9 +3,8 @@ import { Toast, Button } from 'antd-mobile';
 import './style.scss';
 import eqIcon from '../../images/Equipment/equip_number_icon@2x.png';
 import testIcon from '../../images/Equipment/test_water_icon@2x.png';
-import checkIcon from '../../images/Equipment/check_water_icon@2x.png';
 import scanImg from '../../images/Equipment/scan.png';
-// import WxWrap from '../../HOC/wx';
+import WxWrap from '../../HOC/wx';
 
 let DeviceCode = '';
 class EquipmentTest extends Component {
@@ -16,7 +15,6 @@ class EquipmentTest extends Component {
   componentWillMount() {
     const { setTitle } = this.props;
     setTitle('功能页');
-    console.log(this.props);
   }
   changeHandle = e => {
     this.setState({
@@ -95,10 +93,7 @@ class EquipmentTest extends Component {
               />
             </span>
           </div>
-          <Button
-            type='primary'
-            className='scan'
-            onClick={this.scanEquipment}>
+          <Button type='primary' className='scan' onClick={this.scanEquipment}>
             <div className='scanicon'>
               <img src={scanImg} alt='' />
             </div>
@@ -106,27 +101,18 @@ class EquipmentTest extends Component {
         </div>
 
         <div className='br8 btnBox testBtnBox'>
-          <div className='boxBs testBoxBs' />
-          <div
-            className='linkItem'
-            onClick={() => this.goPage('/TestWater')}>
+          <div className='linkItem' onClick={() => this.goPage('/TestWater')}>
             <i className='linkIcon'>
               <img src={testIcon} alt='' />
             </i>
             <span>测试放水</span>
           </div>
-          <div
-            className='linkItem'
-            onClick={() => this.goPage('/CheckWater')}>
-            <i className='linkIcon'>
-              <img src={checkIcon} alt='' />
-            </i>
-            <span>校准流量</span>
-          </div>
         </div>
       </div>
     );
   }
 }
 
-export default EquipmentTest;
+export default props => (
+  <WxWrap render={state => <EquipmentTest {...props} {...state} />} />
+);

src/containers/Equipment/index.js

@@ -5,7 +5,6 @@ import './style.scss';
 import eqIcon from '../../images/Equipment/equip_number_icon@2x.png';
 import bindIcon from '../../images/Equipment/link_position_icon@2x.png';
 import testIcon from '../../images/Equipment/test_water_icon@2x.png';
-import checkIcon from '../../images/Equipment/check_water_icon@2x.png';
 import rateIcon from '../../images/Equipment/rate_active_icon@2x.png';
 import UserInfoContext from '../../context/userinfo-context';
 
@@ -17,7 +16,6 @@ export class Index extends React.Component {
   componentWillMount() {
     const { setTitle } = this.props;
     setTitle('功能页');
-    console.log(this.props);
   }
   render() {
     const { deviceCode } = this.props.match.params;
@@ -54,14 +52,6 @@ export class Index extends React.Component {
           </Link>
           <Link
             className='linkItem'
-            to={'/Equipment/' + deviceCode + '/CheckWater'}>
-            <i className='linkIcon'>
-              <img src={checkIcon} alt='' />
-            </i>
-            <span>校准流量</span>
-          </Link>
-          <Link
-            className='linkItem'
             to={'/Equipment/' + deviceCode + '/RateActivity'}>
             <i className='linkIcon'>
               <img src={rateIcon} alt='' />

src/containers/Equipment/style.scss

@@ -38,6 +38,7 @@
   }
   .testBtnBox {
     height: 250px;
+    justify-content: center;
   }
   .boxB,
   .boxBv,

src/containers/EquipmentContent/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Switch, Route } from 'react-router-dom';
 import Equipment from '../Equipment/index';
 import SelectEquipment from '../SelectEquipment';
-// import TestWater from '../TestWater';
+import TestWater from '../TestWater';
 // import CheckWater from '../CheckWater';
 import RateActivity from '../RateActivity';
 import Location from '../Location';
@@ -12,9 +12,6 @@ class EquipmentContetn extends React.Component {
   static propTypes = {
     name: PropTypes.string,
   };
-  constructor(props) {
-    super(props);
-  }
 
   render() {
     const { setTitle } = this.props;
@@ -22,33 +19,24 @@ class EquipmentContetn extends React.Component {
     return (
       <Switch>
         <Route
-          path="/Equipment/:deviceCode"
+          path='/Equipment/:deviceCode'
           exact
           render={props => <Equipment {...props} setTitle={setTitle} />}
         />
         <Route
-          path="/Equipment/:deviceCode/SelectEquipment"
-          render={props => (
-            <SelectEquipment
-              {...props}
-              setTitle={setTitle}
-            />
-          )}
+          path='/Equipment/:deviceCode/SelectEquipment'
+          render={props => <SelectEquipment {...props} setTitle={setTitle} />}
         />
-        {/* <Route
-          path="/Equipment/:deviceCode/TestWater"
+        <Route
+          path='/Equipment/:deviceCode/TestWater'
           render={props => <TestWater {...props} setTitle={setTitle} />}
-        /> */}
-        {/* <Route
-          path="/Equipment/:deviceCode/CheckWater"
-          render={props => <CheckWater {...props} setTitle={setTitle} />}
-        /> */}
+        />
         <Route
-          path="/Equipment/:deviceCode/RateActivity"
+          path='/Equipment/:deviceCode/RateActivity'
           render={props => <RateActivity {...props} setTitle={setTitle} />}
         />
         <Route
-          path="/Equipment/:deviceCode/Location"
+          path='/Equipment/:deviceCode/Location'
           render={props => <Location {...props} setTitle={setTitle} />}
         />
       </Switch>

src/containers/Index/Index.js

@@ -15,6 +15,8 @@ function Index(props) {
       history.replace('/login');
     } else {
       console.log('跳转微信授权接口');
+      const { history } = props;
+      history.replace('/login');
       // const { APP_ID } = config;
       // console.log(APP_ID);
       // let rUrl = encodeURIComponent(window.location.href.split('#')[0]);

src/containers/Location/index.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './style.css';
+import './style.scss';
 import { Toast } from 'antd-mobile';
 import searchIcon from '../../images/Search/default_search_icon@2x.png';
 import { getPositionsList } from '../../api/index';
@@ -91,55 +91,47 @@ export class Location extends React.Component {
   render() {
     const { showToast, localText, localList } = this.state;
     return (
-      <div className={'appContent ' + styles.Location}>
-        <div className={styles.searchBox}>
+      <div className='appContent Location'>
+        <div className='searchBox'>
           <input
-            className={'br8 ' + styles.searchInput}
+            className='br8 searchInput'
             type='text'
             onChange={this.changeHandle}
             placeholder='请输入位置关键词'
           />
-          <span className={styles.searchBtn} onClick={this.searchList}>
-            <i className={styles.searchIcon}>
+          <span className='searchBtn' onClick={this.searchList}>
+            <i className='searchIcon'>
               <img src={searchIcon} alt='' />
             </i>
             搜索
           </span>
         </div>
-        <div className={styles.infoBar}>
+        <div className='infoBar'>
           {localList.map(item => (
             <div
               key={item.firstLetter}
-              className={styles.infoItem}
-              onClick={() => this.showToast(item.firstLetter)}
-            >
+              className='infoItem'
+              onClick={() => this.showToast(item.firstLetter)}>
               {item.firstLetter}
             </div>
           ))}
         </div>
-        <div
-          className={
-            showToast
-              ? styles.show + ' br8 ' + styles.infoToast
-              : 'br8 ' + styles.infoToast
-          }
-        >
+        <div className={showToast ? 'show br8 infoToast' : 'br8 infoToast'}>
           {localText}
         </div>
-        <div className={styles.locationList}>
+        <div className='locationList'>
           {localList.map(area => (
-            <div key={area.firstLetter} className={styles.locationArea}>
-              <div id={area.firstLetter} className={styles.locationTitle}>
+            <div key={area.firstLetter} className='locationArea'>
+              <div id={area.firstLetter} className='locationTitle'>
                 {area.firstLetter}
               </div>
               {area.positions.map((location, index) => (
                 <div
                   key={index}
-                  className={styles.locationItem}
+                  className='locationItem'
                   onClick={() =>
                     this.bindEquipment(location.id, location.position)
-                  }
-                >
+                  }>
                   {location.position}
                 </div>
               ))}

src/containers/Location/style.css → src/containers/Location/style.scss

@@ -2,79 +2,79 @@
   background-color: #fff;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
-}
-.searchBox {
-  height: 90px;
-}
-.searchInput {
-  /* composes: input from '../BindEquipment/style.css'; */
-  margin-top: 18px;
-  margin-left: 40px;
-  width: 440px;
-  height: 56px;
-  border-color: #ff900d;
-}
-.searchBtn {
-  display: inline-block;
-  height: 90px;
-  line-height: 90px;
-  margin-left: 24px;
-  font-size: 30px;
-  color: #ff900d;
-}
-.searchIcon {
-  display: inline-block;
-  width: 30px;
-  height: 30px;
-  margin-right: 10px;
-  vertical-align: middle;
-}
-.infoBar {
-  position: fixed;
-  top: 262px;
-  right: 30px;
-  width: 40px;
-  text-align: center;
-  font-size: 26px;
-  color: #666;
-}
-.infoItem {
-  height: 50px;
-  line-height: 50px;
-}
-.infoToast {
-  position: fixed;
-  width: 180px;
-  height: 180px;
-  line-height: 180px;
-  background-color: rgba(254, 148, 10, 0.4);
-  left: 9999px;
-  top: 480px;
-  margin-left: -90px;
-  text-align: center;
-  font-size: 116px;
-  color: #fff;
-  opacity: 0;
-  transition: opacity 500ms;
-}
-.show {
-  opacity: 1;
-  left: 50%;
-}
-.locationTitle {
-  padding: 0 40px;
-  height: 70px;
-  line-height: 70px;
-  background-color: #ebebeb;
-  font-size: 26px;
-  color: #999;
-}
-.locationItem {
-  width: 530px;
-  line-height: 80px;
-  margin: 0 auto;
-  font-size: 30px;
-  color: #444;
-  border-bottom: 2px solid #ebebeb;
-  word-break: break-all;
+  .searchBox {
+    height: 90px;
+  }
+  .searchInput {
+    /* composes: input from '../BindEquipment/style.css'; */
+    margin-top: 18px;
+    margin-left: 40px;
+    width: 440px;
+    height: 56px;
+    border-color: #ff900d;
+  }
+  .searchBtn {
+    display: inline-block;
+    height: 90px;
+    line-height: 90px;
+    margin-left: 24px;
+    font-size: 30px;
+    color: #ff900d;
+  }
+  .searchIcon {
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    margin-right: 10px;
+    vertical-align: middle;
+  }
+  .infoBar {
+    position: fixed;
+    top: 262px;
+    right: 30px;
+    width: 40px;
+    text-align: center;
+    font-size: 26px;
+    color: #666;
+  }
+  .infoItem {
+    height: 50px;
+    line-height: 50px;
+  }
+  .infoToast {
+    position: fixed;
+    width: 180px;
+    height: 180px;
+    line-height: 180px;
+    background-color: rgba(254, 148, 10, 0.4);
+    left: 9999px;
+    top: 480px;
+    margin-left: -90px;
+    text-align: center;
+    font-size: 116px;
+    color: #fff;
+    opacity: 0;
+    transition: opacity 500ms;
+  }
+  .show {
+    opacity: 1;
+    left: 50%;
+  }
+  .locationTitle {
+    padding: 0 40px;
+    height: 70px;
+    line-height: 70px;
+    background-color: #ebebeb;
+    font-size: 26px;
+    color: #999;
+  }
+  .locationItem {
+    width: 530px;
+    line-height: 80px;
+    margin: 0 auto;
+    font-size: 30px;
+    color: #444;
+    border-bottom: 2px solid #ebebeb;
+    word-break: break-all;
+  }
 }

src/containers/Login/index.js

@@ -83,7 +83,7 @@ export class Index extends React.Component {
       login(entity)
         .then(res => {
           Toast.hide();
-          console.log(res);
+          // console.log(res);
           const data = res.data;
           const { accountCategory } = data;
           const { history } = this.props;

src/containers/NoMatch/index.js

 import React from 'react';
 
-class Index extends React.Component {
-  render() {
-    return <div>404 NoMatch</div>;
-  }
+function NoMatch() {
+  return <div>404 NoMatch</div>;
 }
 
-export default Index;
+export default NoMatch;

src/containers/RateActivity/index.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Toast } from 'antd-mobile';
-import styles from './style.scss';
+import './style.scss';
 import eqIcon from '../../images/Equipment/equip_number_icon@2x.png';
 import rateIcon from '../../images/Rate/rate_detail_icon@2x.png';
 import { fetchRate, activateRate } from '../../api/index';
@@ -15,12 +15,10 @@ export class Index extends React.Component {
     this.state = {
       mode: null,
       type: 1,
-      coldMeasure: '0',
-      coldMoney: '0.00',
-      hotMeasure: '0',
-      hotMoney: '0.00',
-      warmMeasure: '0',
-      warmMoney: '0.00',
+      measure: '0',
+      money: '0.00',
+      startingDuration: '0',
+      startingMoney: '0.00',
     };
   }
 
@@ -32,22 +30,18 @@ export class Index extends React.Component {
       .then(res => {
         console.log(res);
         const {
-          coldMeasure,
-          coldMoney,
-          hotMeasure,
-          hotMoney,
+          measure,
+          money,
+          startingDuration,
+          startingMoney,
           mode,
-          warmMeasure,
-          warmMoney,
           type,
         } = res.data;
         this.setState({
-          coldMeasure,
-          coldMoney: (coldMoney / 100).toFixed(2),
-          hotMeasure,
-          hotMoney: (hotMoney / 100).toFixed(2),
-          warmMeasure,
-          warmMoney: (warmMoney / 100).toFixed(2),
+          measure,
+          money: (money / 100).toFixed(2),
+          startingDuration,
+          startingMoney: (startingMoney / 100).toFixed(2),
           mode,
           type,
         });
@@ -70,119 +64,50 @@ export class Index extends React.Component {
   };
   render() {
     const { deviceCode } = this.props.match.params;
-    const {
-      coldMeasure,
-      coldMoney,
-      hotMeasure,
-      hotMoney,
-      warmMeasure,
-      warmMoney,
-      mode,
-      type,
-    } = this.state;
-
-    let rateTypeText = 'ML|S';
-    if (mode === 1) {
-      rateTypeText = 'ML';
-    }
-    if (mode === 2) {
-      rateTypeText = 'S';
-    }
+    const { measure, money, startingDuration, startingMoney } = this.state;
 
     return (
-      <div className={'appContent ' + styles.RateActivity}>
-        <div className={styles.inputBox}>
-          <i className={styles.inputIcon}>
+      <div className='appContent RateActivity'>
+        <div className='inputBox'>
+          <i className='inputIcon'>
             <img src={eqIcon} alt='' />
           </i>
-          <span className={'ellipsis ' + styles.inputText}>
+          <span className='ellipsis inputText'>
             设备编号：
             {deviceCode}
           </span>
         </div>
-        <div className={styles.inputBox}>
-          <i className={styles.inputIcon}>
+        <div className='inputBox'>
+          <i className='inputIcon'>
             <img src={rateIcon} alt='' />
           </i>
-          <span className={'ellipsis ' + styles.inputText}>费率详情:</span>
+          <span className='ellipsis inputText'>费率详情:</span>
         </div>
-        <div className={styles.rateBox}>
-          {type === 2
-            ? [
-                <div className={styles.rateArea}>
-                  <div className={styles.rateTitle}>
-                    <span className={styles.rateItem}>一路费率价格(元)</span>
-                    <span className={styles.rateItem}>
-                      费率单位({rateTypeText})
-                    </span>
-                  </div>
-                  <div className={styles.line} />
-                  <div className={styles.ratePrice}>
-                    <span className={styles.rateItem}>{coldMoney}</span>
-                    <span className={styles.rateItem}>{coldMeasure}</span>
-                  </div>
-                </div>,
-                <div className={styles.rateArea}>
-                  <div className={styles.rateTitle}>
-                    <span className={styles.rateItem}>二路费率价格(元)</span>
-                    <span className={styles.rateItem}>
-                      费率单位({rateTypeText})
-                    </span>
-                  </div>
-                  <div className={styles.line} />
-                  <div className={styles.ratePrice}>
-                    <span className={styles.rateItem}>{hotMoney}</span>
-                    <span className={styles.rateItem}>{hotMeasure}</span>
-                  </div>
-                </div>,
-                <div className={styles.rateArea}>
-                  <div className={styles.rateTitle}>
-                    <span className={styles.rateItem}>三路费率价格(元)</span>
-                    <span className={styles.rateItem}>
-                      费率单位({rateTypeText})
-                    </span>
-                  </div>
-                  <div className={styles.line} />
-                  <div className={styles.ratePrice}>
-                    <span className={styles.rateItem}>{warmMoney}</span>
-                    <span className={styles.rateItem}>{warmMeasure}</span>
-                  </div>
-                </div>,
-              ]
-            : [
-                <div className={styles.rateArea}>
-                  <div className={styles.rateTitle}>
-                    <span className={styles.rateItem}>冷水费率价格(元)</span>
-                    <span className={styles.rateItem}>
-                      冷水费率单位({rateTypeText})
-                    </span>
-                  </div>
-                  <div className={styles.line} />
-                  <div className={styles.ratePrice}>
-                    <span className={styles.rateItem}>{coldMoney}</span>
-                    <span className={styles.rateItem}>{coldMeasure}</span>
-                  </div>
-                </div>,
-                <div className={styles.rateArea}>
-                  <div className={styles.rateTitle}>
-                    <span className={styles.rateItem}>热水费率价格(元)</span>
-                    <span className={styles.rateItem}>
-                      热水费率单位({rateTypeText})
-                    </span>
-                  </div>
-                  <div className={styles.line} />
-                  <div className={styles.ratePrice}>
-                    <span className={styles.rateItem}>{hotMoney}</span>
-                    <span className={styles.rateItem}>{hotMeasure}</span>
-                  </div>
-                </div>,
-              ]}
+        <div className='rateBox'>
+          <div className='rateArea'>
+            <div className='rateTitle'>
+              <span className='rateItem'>费率价格(元)</span>
+              <span className='rateItem'>费率单位(s)</span>
+            </div>
+            <div className='line' />
+            <div className='ratePrice'>
+              <span className='rateItem'>{money}</span>
+              <span className='rateItem'>{measure}</span>
+            </div>
+          </div>
+          <div className='rateArea'>
+            <div className='rateTitle'>
+              <span className='rateItem'>起步费率价格(元)</span>
+              <span className='rateItem'>起步费率单位(s)</span>
+            </div>
+            <div className='line' />
+            <div className='ratePrice'>
+              <span className='rateItem'>{startingMoney}</span>
+              <span className='rateItem'>{startingDuration}</span>
+            </div>
+          </div>
         </div>
-        <Button
-          type='primary'
-          className={styles.btn}
-          onClick={this.clickHandle}
-        >
+        <Button type='primary' className='btn' onClick={this.clickHandle}>
           激活费率
         </Button>
       </div>

src/containers/RateActivity/style.scss

 .RateActivity {
   background-color: #fff;
   .inputBox {
-    /* composes: inputBox from '../Equipment/style.css'; */
     margin-top: 62px;
     margin-bottom: 62px;
   }
@@ -9,12 +8,8 @@
     margin-bottom: 4px;
   }
   .inputIcon {
-    /* composes: inputIcon from '../Equipment/style.css'; */
     margin-left: 0;
   }
-  .inputText {
-    /* composes: inputText from '../Equipment/style.css'; */
-  }
   .rateBox {
     margin: 0 auto;
     width: 460px;
@@ -50,7 +45,6 @@
     margin-bottom: 0;
   }
   .btn {
-    /* composes: btn from '../BindEquipment/style.css'; */
     width: 500px;
     margin: 90px auto;
     font-size: 30px;

src/containers/SelectEquipment/index.js

@@ -15,7 +15,6 @@ export class SelectEquipment extends React.Component {
   componentWillMount() {
     const { setTitle } = this.props;
     setTitle('绑定解绑设备');
-    console.log(this.props);
   }
   goLocation = () => {
     const { history } = this.props;
@@ -82,8 +81,8 @@ export class SelectEquipment extends React.Component {
     return (
       <div className='appContent SelectEquipment'>
         <div className='List'>
-          <label className='listItem'>
-            <div className='inputBox'>
+          <label className='SE-listItem'>
+            <div className='SE-inputBox'>
               <i className='inputIcon'>
                 <img src={eqIcon} alt='' />
               </i>
@@ -91,15 +90,15 @@ export class SelectEquipment extends React.Component {
             </div>
             <div className='br8 input nobor'>{deviceCode}</div>
           </label>
-          <label className='listItem'>
-            <div className='inputBox'>
+          <label className='SE-listItem'>
+            <div className='SE-inputBox'>
               <i className='inputIcon'>
                 <img src={locationIcon} alt='' />
               </i>
               <span className='ellipsis inputText'>选择安装位置：</span>
             </div>
             {position.isBind ? (
-              <div className={'br8 input'}>{position.position}</div>
+              <div className='br8 input'>{position.position}</div>
             ) : (
               <div className='br8 input autoH' onClick={this.goLocation}>
                 {position.id ? position.position : '点击选择设备安装位置'}

src/containers/SelectEquipment/style.scss

@@ -4,13 +4,13 @@
     width: 500px;
     margin: 126px auto 0;
   }
-  .listItem {
+  .SE-listItem {
     display: block;
   }
-  .listItem:nth-child(1) {
+  .SE-listItem:nth-child(1) {
     margin-bottom: 38px;
   }
-  .inputBox {
+  .SE-inputBox {
     display: flex;
     font-size: 26px;
     height: 28px;
@@ -19,8 +19,12 @@
   .inputIcon {
     width: 24px;
     height: 28px;
+    margin: 0;
     margin-right: 10px;
   }
+  .inputText{
+    line-height: 28px;
+  }
   .input {
     /* composes: input from '../BindEquipment/style.css'; */
     text-indent: 20px;

src/containers/TestWater/index.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import './style.scss';
+import eqIcon from '../../images/Equipment/equip_number_icon@2x.png';
+import UserInfoContext from '../../context/userinfo-context';
+import JsBarcode from 'jsbarcode';
+
+export class Index extends React.Component {
+  static propTypes = {
+    name: PropTypes.string,
+    rateType: PropTypes.number,
+    barcode: PropTypes.string,
+  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      showBig: false,
+    };
+  }
+
+  componentWillMount() {
+    const { setTitle } = this.props;
+    setTitle('测试放水');
+  }
+  componentDidMount() {
+    this.createBarcode();
+  }
+  createBarcode = () => {
+    const { barcode } = this.props;
+    let barStr = `${barcode}1`;
+    let dom = document.getElementById('BarCode');
+
+    JsBarcode(dom, barStr, {
+      margin: 0,
+      height: 300,
+    });
+  };
+  toggleBigBarCode = () => {
+    const { showBig } = this.state;
+    this.setState({
+      showBig: !showBig,
+    });
+  };
+
+  render() {
+    const { deviceCode } = this.props.match.params;
+    const { showBig } = this.state;
+    return (
+      <div className='appContent TestWater'>
+        <div className={showBig ? 'BarCodeBox BarCodeBoxBig' : 'BarCodeBox'}>
+          <div className={showBig ? 'BarCodeImg BarCodeImgBig' : 'BarCodeImg'}>
+            <img id='BarCode' alt='' />
+          </div>
+          <div className='toggleBtn' onClick={this.toggleBigBarCode}>
+            {showBig ? '缩小' : '放大'}
+          </div>
+        </div>
+        <div className='inputBox'>
+          <i className='inputIcon'>
+            <img src={eqIcon} alt='' />
+          </i>
+          <span className='ellipsis inputText'>
+            设备编号：
+            {deviceCode}
+          </span>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default props => (
+  <UserInfoContext.Consumer>
+    {({ userinfo }) => (
+      <Index
+        {...props}
+        rateType={userinfo.position.mode}
+        barcode={userinfo.barcode}
+      />
+    )}
+  </UserInfoContext.Consumer>
+);

src/containers/TestWater/style.scss

+.TestWater {
+  background-color: #fff;
+  .inputBox {
+    margin-top: 62px;
+    margin-bottom: 62px;
+  }
+  .inputIcon {
+    margin-left: 0;
+  }
+  .inputWrap {
+    width: 500px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+  }
+  .input {
+    border: none;
+    font-size: 26px;
+    padding-left: 20px;
+    flex: 1;
+  }
+  .line {
+    width: 2px;
+    height: 60px;
+    background-color: #ebebeb;
+  }
+  .waterText {
+    width: 100px;
+    font-size: 30px;
+    color: #444;
+  }
+  .btn {
+    // composes: btn from '../BindEquipment/style.css';
+    width: 500px;
+    margin: 30px auto;
+  }
+
+  .BarCodeBox {
+    position: relative;
+    width: 100%;
+    height: 221px;
+    background-image: url('../../images/Equipment/tiaoxingma-1.png');
+    background-size: cover;
+    overflow: hidden;
+    transition: all 0.28s;
+  }
+  .BarCodeBoxBig {
+    height: 372.3px;
+    background-image: url('../../images/Equipment/tiaoxingma-2.png');
+  }
+  .BarCodeImg {
+    margin: 22.1px 44.2px 0;
+    width: 551.2px;
+    height: 160.4px;
+    background-color: #fff;
+    overflow: hidden;
+    transition: all 0.28s;
+  }
+  .BarCodeImgBig {
+    margin: 22.1px 22.1px 0;
+    width: 593.3px;
+    height: 309.4px;
+  }
+  .toggleBtn {
+    position: absolute;
+    right: 0;
+    bottom: 2px;
+    width: 69.7px;
+    height: 34px;
+    line-height: 34px;
+    text-indent: 15px;
+    font-size: 18px;
+    color: #fff;
+    background-image: url('../../images//Equipment/矩形-1941---Assistor.png');
+    background-size: cover;
+  }
+}

src/store/index.js

@@ -2,12 +2,12 @@ class Store {
   constructor() {
     this.token = '';
   }
-  static getToken = () => {
+  static getToken() {
     return this.token;
-  };
-  static updateToken = token => {
+  }
+  static updateToken(token) {
     this.token = token;
-  };
+  }
 }
 
 export default Store;

src/styles/index.css

@@ -108,6 +108,7 @@ img {
 .br8 {
   border-radius: 8px;
 }
+
 .listItem {
   display: flex;
   width: 100%;
@@ -120,4 +121,29 @@ img {
 .listInput {
   flex: 1;
   border: none;
-}
+}
\ No newline at end of file
+.inputBox {
+  display: flex;
+  width: 500px;
+  margin: 84px auto 0;
+}
+.input {
+  box-sizing: border-box;
+  flex: 1;
+  height: 80px;
+  line-height: 80px;
+  text-indent: 20px;
+  border: 2px solid #ff900d;
+  word-break: break-all;
+}
+.inputIcon {
+  width: 24px;
+  height: 28px;
+  margin: 26px 10px 0 20px;
+}
+.inputText {
+  font-size: 26px;
+  color: #444;
+  flex: 1;
+  line-height: 80px;
+}