完成壁挂饮水

src/api/index.ts

@@ -9,6 +9,7 @@ import {
   OLD_BASE_SERVER_URL,
   SHOWER_APP_URL,
   SMPRO_URL,
+  GX_URL,
 } from '../constants/index';
 
 export type ResponseDataEntity<T> = {
@@ -64,5 +65,6 @@ export const customerFetch = createFetch(CUSTOMER_SERVER_URL);
 export const schoolMainFetch = createFetch(SCHOOL_MAIN_URL);
 export const showerFetch = createFetch(SHOWER_APP_URL);
 export const smaproFetch = createFetch(SMPRO_URL);
+export const gxFetch = createFetch(GX_URL);
 
 export default createFetch;

src/api/waterDispenser.ts

+import { gxFetch, ResponseDataEntity } from '.';
+
+class Params {
+  /** 消费者id，必填项 */
+  customerId: string;
+  /** 校区id，必填项 */
+  campusId: number;
+}
+export class DeviceInfoResponse {
+  /** 设备编码 */
+  code = '';
+
+  /** 是否当前人使用 1：是，0：否 */
+  isCurrentUserUsed = undefined;
+
+  /** 是否上线 1：是，0：否 */
+  isOnline = undefined;
+
+  /** 是否被使用 1：是，0：否 */
+  isUsed = undefined;
+
+  /** 运营商Id */
+  operatorId = undefined;
+
+  /** 运营商名称 */
+  operatorName = '';
+
+  /** 位置名称 */
+  position = '';
+
+  /** 位置id */
+  positionId = '';
+
+  /** 费率信息 */
+  rates = [];
+
+  /** 服务Id */
+  serviceId = undefined;
+
+  /** 服务名称 */
+  serviceName = '';
+}
+export const getUsedEquipment = (params: Params) =>
+  gxFetch({
+    url: '/dcxy/api/gx/devices/lastUsedByCurrentUser',
+    data: params,
+  });
+export const getUsingEquipment = (params: { customerId: string }) =>
+  gxFetch({
+    url: '/dcxy/api/gx/devices/inuseByCurrentUser',
+    data: params,
+  });
+export const waterBeginning = (params: {
+  deviceCode: string;
+  campusId: number;
+  customerId: number;
+  customerName: string;
+  customerPhone: string;
+}) =>
+  gxFetch({
+    url: `/dcxy/api/gx/devices/${params.deviceCode}/beginning`,
+    method: 'POST',
+    data: params,
+  });
+export const fetchWaterEquipmentInfo = (params: {
+  deviceCode: string;
+  customerId: string;
+  campusId: number;
+}) =>
+  gxFetch({
+    url: `/dcxy/api/gx/devices/${params.deviceCode}`,
+    data: params,
+  });

src/app.tsx

@@ -24,7 +24,6 @@ class App extends Component {
    */
   config: Config = {
     pages: [
-      'pages/WaterDispenser/WaterDispenser',
       'pages/index/index',
       'pages/Home/Home',
       'pages/Order/OrderPay/OrderPay',
@@ -41,6 +40,7 @@ class App extends Component {
       'pages/Content/Content',
       'pages/WebPage/WebPage',
       'pages/Shower/Shower',
+      'pages/WaterDispenser/WaterDispenser',
     ],
     window: {
       backgroundTextStyle: 'light',

src/components/DeviceInfo/DeviceInfo.tsx

@@ -40,7 +40,9 @@ class DeviceInfo extends Component {
               </View>
               <View className='equipment-item'>
                 <Text className='equipment-label'>设备位置：</Text>
-                <Text className='equipment-value'>{position}</Text>
+                {position ? (
+                  <Text className='equipment-value'>{position}</Text>
+                ) : null}
               </View>
             </View>
           ) : (

src/components/MenuIcon/big/MenuIconBig.scss

 .MenuIconBig {
   position: relative;
   display: flex;
-  width: 746px;
-  height: 224px;
-  margin: 0 2px;
+  width: 686px;
+  height: 164px;
+  margin: 0 auto 20px;
   align-items: center;
   .bg {
     position: absolute;
-    width: 100%;
-    height: 100%;
+    left: 0;
+    top: 0;
+    width: 746px;
+    height: 224px;
     z-index: -1;
+    transform: translate(-30px, -18px);
+  }
+  &.left {
+    .text-box {
+      margin-left: 114px;
+    }
+  }
+  &.right {
+    .text-box {
+      position: absolute;
+      right: 114px;
+    }
   }
   .text {
     color: #fff;
-    margin-left: 50px;
+    font-size: 32px;
+    margin-right: 20px;
   }
-  .arrow{
+  .arrow {
     width: 15px;
     height: 23px;
   }

src/components/MenuIcon/big/MenuIconBig.tsx

 import './MenuIconBig.scss';
+import ArrowIcon from '../../../images/home/icon_chuifeng_right@2x.png';
 import { Component } from '@tarojs/taro';
 import { View, Image, Text } from '@tarojs/components';
+import { ComponentClass } from 'react';
 
 type PageOwnProps = {
   onClick: () => void;
   icon: string;
   text: string;
+  side: string;
 };
 
 interface MenuIconBig {
   props: PageOwnProps;
 }
 class MenuIconBig extends Component {
+  static externalClasses = ['ex-class'];
+  static defaultProps = {
+    text: '',
+    side: 'left',
+  };
+
   render() {
-    const { icon, text, onClick } = this.props;
+    const { icon, text, onClick, side } = this.props;
     return (
-      <View className='MenuIconBig' onClick={onClick}>
+      <View className={`MenuIconBig ${side} ex-class`} onClick={onClick}>
         <Image className='bg' src={icon} />
-        <Text className='text'>{text}</Text>
+        {text ? (
+          <View className='text-box'>
+            <Text className='text'>{text}</Text>
+            <Image className='arrow' src={ArrowIcon} />
+          </View>
+        ) : null}
       </View>
     );
   }
 }
 
-export default MenuIconBig;
+export default MenuIconBig as ComponentClass<PageOwnProps>;

src/components/MenuIcon/block/MenuIconBlock.scss

@@ -3,16 +3,17 @@
   width: 218px;
   height: 162px;
   overflow: hidden;
-  .bg{
+  .bg {
     position: absolute;
-    width: 100%;
-    height: 100%;
+    width: 278px;
+    height: 224px;
     z-index: -1;
+    transform: translate(-30px, -18px);
   }
   .text {
     display: block;
     margin-top: 50px;
-    margin-left: 40px;
+    margin-left: 18px;
     font-size: 24px;
     color: #fff;
   }

src/components/MenuIcon/block/MenuIconBlock.tsx

 import './MenuIconBlock.scss';
 import { Component } from '@tarojs/taro';
 import { View, Image, Text } from '@tarojs/components';
+import { ComponentClass } from 'react';
 
 type PageOwnProps = {
   icon: string;
@@ -23,4 +24,4 @@ class MenuIconBlock extends Component {
   }
 }
 
-export default MenuIconBlock;
+export default MenuIconBlock as ComponentClass<PageOwnProps>;

src/components/MenuIcon/normal/MenuIconNormal.tsx

 import './MenuIconNormal.scss';
 import { Component } from '@tarojs/taro';
 import { View, Image, Text } from '@tarojs/components';
+import { ComponentClass } from 'react';
 
 type PageOwnProps = {
   icon: string;
@@ -23,4 +24,4 @@ class MenuIconNormal extends Component<PageOwnProps> {
   }
 }
 
-export default MenuIconNormal;
+export default MenuIconNormal as ComponentClass<PageOwnProps>;

src/constants/index.js

@@ -13,3 +13,4 @@ export const ANN_LINK_URL = 'https://ex-dev-wx.168cad.top/announcement/';
 export const SHOWER_APP_URL = 'http://192.168.3.55:8888';
 export const SOCKET_URL = 'ws://192.168.3.55:20003/ws';
 export const SMPRO_URL = 'https://ex-dev-dcxy-smapro-app.168cad.top';
+export const GX_URL = 'http://ex-dev-gx-app-server.168cad.top';

src/pages/BarCode/BarCode.scss

@@ -2,6 +2,31 @@ page {
   background-color: #eee;
 }
 .BarCode {
+  position: relative;
+  .BackTag {
+    position: absolute;
+    right: 0;
+    top: 354px;
+    width: 40px;
+    height: 140px;
+    background-color: rgba($color: #000000, $alpha: 0.7);
+    border-radius: 8px 0 0 8px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .icon {
+      width: 22px;
+      height: 18px;
+      margin-bottom: 10px;
+    }
+    .text {
+      width: 22px;
+      font-size: 22px;
+      line-height: 22px;
+      color: #fff;
+    }
+  }
   .OrderBox {
     box-sizing: border-box;
     position: absolute;

src/pages/BarCode/BarCode.tsx

 import Taro, { Component } from '@tarojs/taro';
 import { ComponentClass } from 'react';
-import { View, Canvas, Image } from '@tarojs/components';
+import { View, Canvas, Image, Text } from '@tarojs/components';
 
 import RefreshIcon from '../../images/barcode/pic_shuaxin@2x.png';
 import ArrIcon from '../../images/barcode/icon_fangda@2x.png';
+import CodeIcon from '../../images/water/nocode@2x.png';
 
 import wxbarcode from 'wxbarcode';
 
@@ -52,6 +53,7 @@ type PageState = {
     remainAccount: number;
     titlePerfix: string;
   };
+  showBackTag: boolean;
 };
 
 type IProps = PageStateProps & PageOwnProps & PageDispatchProps;
@@ -122,6 +124,7 @@ class BarCode extends Component {
         remainAccount: 0,
         titlePerfix: '',
       },
+      showBackTag: false,
     };
   }
   onShareAppMessage = shareHandle;
@@ -159,6 +162,7 @@ class BarCode extends Component {
           value: 1,
         });
       });
+    this.checkShowBackTag();
   }
 
   componentWillUnmount() {
@@ -171,6 +175,25 @@ class BarCode extends Component {
     });
   }
 
+  checkShowBackTag() {
+    let params = this.$router.params;
+    console.log(params);
+    if (params && params.backPage) {
+      this.setState({
+        showBackTag: true,
+      });
+    }
+  }
+
+  goBackPage() {
+    let params = this.$router.params;
+    if (params && params.backPage) {
+      Taro.redirectTo({
+        url: decodeURIComponent(params.backPage),
+      });
+    }
+  }
+
   fetchOrder(id: number) {
     return fetchOrderDetailAndPay({
       id,
@@ -236,9 +259,23 @@ class BarCode extends Component {
 
   render() {
     const { userinfo } = this.props;
-    const { showPayOrder, showBig, orderInfo, payInfos, accounts } = this.state;
+    const {
+      showPayOrder,
+      showBig,
+      orderInfo,
+      payInfos,
+      accounts,
+      showBackTag,
+    } = this.state;
     return (
       <View className='BarCode'>
+        {showBackTag && (
+          <View className='BackTag' onClick={this.goBackPage}>
+            <Image className='icon' src={CodeIcon} />
+            <Text className='text'>隐藏条码</Text>
+          </View>
+        )}
+
         {showPayOrder && (
           <View className='OrderBox'>
             <OrderTitle price={orderInfo.payableMoney} />

src/pages/Home/Home.scss

@@ -44,102 +44,107 @@
       width: 38px;
       height: 38px;
     }
-  }
-  .Home-UserBox-info {
-    padding: 80px 88px 20px 76px;
-    display: flex;
-    justify-content: space-between;
-    color: #333;
-  }
-  .Home-UserBox-name {
-    font-size: 44px;
-    margin-bottom: 8px;
-  }
-  .Home-UserBox-tel {
-    font-size: 32px;
-    margin-bottom: 8px;
-  }
-  .Home-UserBox-addr {
-    font-size: 24px;
-  }
-  .Home-UserBox-headimg {
-    width: 100px;
-    height: 100px;
-    border-radius: 50%;
-    border: 10px solid #c8ccfc;
-  }
-  .Home-UserBox-line {
-    width: 620px;
-    border-top: 1px solid #d7daff;
-    margin: 0 auto;
-  }
-  .Home-UserBox-Bean {
-    padding: 32px 40px 0;
-    display: flex;
-    justify-content: space-around;
-    font-size: 24px;
-    color: #666;
-    .Home-UserBox-BeanItem {
+    .Home-UserBox-info {
+      padding: 80px 88px 20px 76px;
       display: flex;
-      align-items: center;
+      justify-content: space-between;
+      color: #333;
     }
-    .Home-UserBox-BeanIcon {
-      width: 24px;
-      height: 24px;
-      margin-right: 12px;
+    .Home-UserBox-name {
+      font-size: 44px;
+      margin-bottom: 8px;
     }
-    .Home-UserBox-BeanCount {
-      font-size: 28px;
-      color: #333;
+    .Home-UserBox-tel {
+      font-size: 32px;
+      margin-bottom: 8px;
+    }
+    .Home-UserBox-addr {
+      font-size: 24px;
+    }
+    .Home-UserBox-headimg {
+      width: 100px;
+      height: 100px;
+      border-radius: 50%;
+      border: 10px solid #c8ccfc;
+    }
+    .Home-UserBox-line {
+      width: 620px;
+      border-top: 1px solid #d7daff;
+      margin: 0 auto;
+    }
+    .Home-UserBox-Bean {
+      padding: 32px 40px 0;
+      display: flex;
+      justify-content: space-around;
+      font-size: 24px;
+      color: #666;
+      .Home-UserBox-BeanItem {
+        display: flex;
+        align-items: center;
+      }
+      .Home-UserBox-BeanIcon {
+        width: 24px;
+        height: 24px;
+        margin-right: 12px;
+      }
+      .Home-UserBox-BeanCount {
+        font-size: 28px;
+        color: #333;
+      }
+    }
+    .Home-UserBox-Order {
+      position: absolute;
+      left: 50%;
+      bottom: 0px;
+      transform: translate(-50%);
+      width: 572px;
+      height: 80px;
+      line-height: 80px;
+      background-color: #6180f4;
+      border-radius: 50px;
+      display: flex;
+      overflow: hidden;
+    }
+    .Home-UserBox-Order-text {
+      flex: 1;
+      text-align: center;
+      color: #fff;
+      font-size: 24px;
+    }
+    .Home-UserBox-Order-right {
+      background-color: #375ef1;
+      width: 212px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .Home-UserBox-Order-icon {
+      width: 40px;
+      height: 20px;
     }
   }
-  .Home-UserBox-Order {
-    position: absolute;
-    left: 50%;
-    bottom: 0px;
-    transform: translate(-50%);
-    width: 572px;
-    height: 80px;
-    line-height: 80px;
-    background-color: #6180f4;
-    border-radius: 50px;
-    display: flex;
-    overflow: hidden;
-  }
-  .Home-UserBox-Order-text {
-    flex: 1;
-    text-align: center;
-    color: #fff;
-    font-size: 24px;
-  }
-  .Home-UserBox-Order-right {
-    background-color: #375ef1;
-    width: 212px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .Home-UserBox-Order-icon {
-    width: 40px;
-    height: 20px;
-  }
+
   .Home-Service-List {
     display: flex;
     flex-flow: wrap;
     justify-content: space-between;
+    .Home-Service-List {
+      margin-top: 20px;
+    }
     &.normal,
     &.block {
       padding: 0 32px;
       margin: 20px auto;
     }
     &.big {
-      margin-top: 20px;
+      width: 686px;
+      margin: 20px auto 0;
     }
   }
   .Home-Announcement {
     position: relative;
     height: 222px;
-    margin: 0 32px 40px;
+    margin: 20px 32px 40px;
     .Home-Announcement-title {
       display: flex;
       justify-content: space-between;

src/pages/Home/Home.tsx

@@ -69,7 +69,7 @@ interface Home {
     updateUserInfo(entity: UserState) {
       dispatch(updateUserInfo(entity));
     },
-  })
+  }),
 )
 class Home extends Component {
   constructor(props) {
@@ -79,10 +79,10 @@ class Home extends Component {
       commBean: 0.0,
       hairDryerBean: 0.0,
       serviceList: [
-        // { serviceId: 3, serviceName: '吹风' },
+        { serviceId: 3, serviceName: '饮水' },
         { serviceId: 4, serviceName: '吹风' },
-        // { serviceId: 5, serviceName: '吹风' },
-        { serviceId: 9, serviceName: '吹风' },
+        // { serviceId: 5, serviceName: '洗浴' },
+        // { serviceId: 9, serviceName: '壁挂饮水' },
       ],
       annItem: {
         id: 0,
@@ -315,31 +315,33 @@ class Home extends Component {
                 <MenuIconBig
                   key={service.serviceId}
                   icon={WaterIconBig}
-                  text={'饮水'}
+                  text={''}
                   onClick={this.goBarCode}
                 />
               ) : service.serviceId === 4 || service.serviceId === 12 ? (
                 <MenuIconBig
+                  ex-class='hairDryer'
                   key={service.serviceId}
                   icon={DryerIconBig}
-                  text={'吹风'}
+                  text={service.serviceName}
+                  side='right'
                   onClick={this.goBarCode}
                 />
               ) : service.serviceId === 5 || service.serviceId === 10 ? (
                 <MenuIconBig
                   key={service.serviceId}
                   icon={ShowerIconBig}
-                  text={'洗浴'}
+                  text={service.serviceName}
                   onClick={this.goShower}
                 />
               ) : service.serviceId === 9 ? (
                 <MenuIconBig
                   key={service.serviceId}
                   icon={DispenserIconBig}
-                  text={'饮水'}
+                  text={''}
                   onClick={this.goDispenser}
                 />
-              ) : null
+              ) : null,
             )}
           </View>
         ) : serviceList.length && serviceList.length == 3 ? (
@@ -349,31 +351,31 @@ class Home extends Component {
                 <MenuIconBlock
                   key={service.serviceId}
                   icon={WaterIconBlock}
-                  text={'饮水'}
+                  text={service.serviceName}
                   onClick={this.goBarCode}
                 />
               ) : service.serviceId === 4 || service.serviceId === 12 ? (
                 <MenuIconBlock
                   key={service.serviceId}
                   icon={DryerIconBlock}
-                  text={'吹风'}
+                  text={service.serviceName}
                   onClick={this.goBarCode}
                 />
               ) : service.serviceId === 5 || service.serviceId === 10 ? (
                 <MenuIconBlock
                   key={service.serviceId}
                   icon={ShowerIconBlock}
-                  text={'洗浴'}
+                  text={service.serviceName}
                   onClick={this.goShower}
                 />
               ) : service.serviceId === 9 ? (
                 <MenuIconBlock
                   key={service.serviceId}
                   icon={DispenserIconBlock}
-                  text={'饮水'}
+                  text={service.serviceName}
                   onClick={this.goDispenser}
                 />
-              ) : null
+              ) : null,
             )}
           </View>
         ) : serviceList.length && serviceList.length >= 4 ? (
@@ -397,7 +399,7 @@ class Home extends Component {
                 <MenuIconNormal
                   key={service.serviceId}
                   icon={ShowerIconNormal}
-                  text={'洗浴'}
+                  text={service.serviceName}
                   onClick={this.goShower}
                 />
               ) : service.serviceId === 9 ? (
@@ -407,7 +409,7 @@ class Home extends Component {
                   text={'饮水'}
                   onClick={this.goDispenser}
                 />
-              ) : null
+              ) : null,
             )}
           </View>
         ) : null}
@@ -419,8 +421,7 @@ class Home extends Component {
               <Text>最新公告</Text>
               <View
                 className='Home-Announcement-more'
-                onClick={() => this.goAnn(annItem.id)}
-              >
+                onClick={() => this.goAnn(annItem.id)}>
                 更多
                 <Image className='more-icon' src={MoreIcon} />
               </View>
@@ -428,8 +429,7 @@ class Home extends Component {
             {annItem.items.length && (
               <View
                 className='Home-Announcement-Content'
-                onClick={() => this.geAnnDetail(annItem.items[0].id)}
-              >
+                onClick={() => this.geAnnDetail(annItem.items[0].id)}>
                 <Text className='Home-Announcement-Content-title'>
                   {annItem.items[0].title}
                 </Text>

src/pages/WaterDispenser/WaterDispenser.tsx

 import './WaterDispenser.scss';
-import { Component } from '@tarojs/taro';
+import Taro, { Component } from '@tarojs/taro';
 import { View, Image, Text } from '@tarojs/components';
 import ScanIcon from '../../images/shower/ic_saoma@2x.png';
-import ShowerStart from '../../images/shower/ic_sel@2x.png';
-import ShowerCantStart from '../../images/shower/ic_nor@2x.png';
+import StartIcon from '../../images/water/start@2x.png';
+import CantStartIcon from '../../images/water/nostart@2x.png';
 import CodeIcon from '../../images/water/code@2x.png';
 
 import DeviceInfo from '@/components/DeviceInfo/DeviceInfo';
 import EquipmentItem from './components/EquipmentItem/EquipmentItem';
+import {
+  getUsedEquipment,
+  getUsingEquipment,
+  waterBeginning,
+  fetchWaterEquipmentInfo,
+  DeviceInfoResponse,
+} from '@/api/waterDispenser';
+import { Customer } from '@/types/Customer/Customer';
+import { connect } from '@tarojs/redux';
+import { ComponentClass } from 'react';
+import { ResponseDataEntity } from '@/api';
 
-type DeviceInfo = {
+export type DeviceInfo = {
   code: string;
-  postion: string;
+  position: string;
 };
-type PageOwnState = {
+type PageStateProps = {
+  userinfo: Customer;
+};
+
+type PageState = {
   deviceInfo: DeviceInfo;
-  waterState: boolean;
+  waterUsingState: boolean;
   useList: DeviceInfo[];
+  timer: number | null;
 };
+
+type IProps = PageStateProps;
+
 interface WaterDispenser {
-  state: PageOwnState;
+  props: IProps;
+  state: PageState;
 }
+@connect(({ userinfo }) => ({
+  userinfo,
+}))
 class WaterDispenser extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      waterState: false,
+      waterUsingState: false,
       deviceInfo: {
         code: '',
-        postion: 'asdasf234',
+        position: '',
       },
-      useList: [
-        { code: 'asda', postion: 'asdasf234asdasf234asdasf234asdasf234' },
-        { code: 'asda', postion: 'asdasf234asdasf234asdasf234asdasf234' },
-        { code: 'asda', postion: 'asdasf234asdasf234asdasf234asdasf234' },
-        { code: 'asda', postion: 'asdasf234asdasf234asdasf234asdasf234' },
-        { code: 'asda', postion: 'asdasf234asdasf234asdasf234asdasf234' },
-        { code: 'asda', postion: 'asdasf234asdasf234asdasf234asdasf234' },
-      ],
+      useList: [],
+      timer: null,
     };
   }
-  scanEquipment() {}
 
-  start() {}
+  componentWillMount() {
+    this.getUsedEquipment();
+  }
+
+  componentWillUnmount() {
+    this.clearTimer();
+  }
+
+  clearTimer() {
+    const { timer } = this.state;
+    if (timer) {
+      clearTimeout(timer);
+      this.setState({
+        timer: null,
+      });
+    }
+  }
+
+  toggleCodeState() {
+    Taro.redirectTo({
+      url: `/pages/BarCode/BarCode?backPage=${encodeURIComponent(
+        '/pages/WaterDispenser/WaterDispenser',
+      )}`,
+    });
+  }
+
+  scanEquipment() {
+    return Taro.scanCode({
+      onlyFromCamera: true,
+      scanType: ['qrCode'],
+    })
+      .then(res => {
+        console.log(res);
+        const { result } = res;
+        const { userinfo } = this.props;
+
+        return fetchWaterEquipmentInfo({
+          deviceCode: result,
+          customerId: userinfo.customerId.toString(),
+          campusId: userinfo.areaId,
+        })
+          .then((res: ResponseDataEntity<DeviceInfoResponse>) => {
+            console.log(res);
+
+            const data = res.data;
+            this.setState({
+              deviceInfo: data,
+            });
+          })
+          .catch(err => {
+            console.error(err);
+            Taro.showToast({
+              title: err.msg || '请扫描正确的设备码',
+              icon: 'none',
+            });
+          });
+      })
+      .catch(err => {
+        console.error(err);
+        // Taro.showToast({
+        //   title: err.msg || '呼起扫码失败！',
+        //   icon: 'none',
+        // });
+      });
+  }
+
+  getUsedEquipment() {
+    const { userinfo } = this.props;
+    getUsedEquipment({
+      customerId: userinfo.customerId.toString(),
+      campusId: userinfo.areaId,
+    })
+      .then(res => {
+        console.log(res);
+        this.setState({
+          useList: res.data,
+        });
+      })
+      .catch(err => {
+        console.error(err);
+      });
+  }
+
+  getUsingEquipment() {
+    const { userinfo } = this.props;
+    getUsingEquipment({
+      customerId: userinfo.customerId.toString(),
+    })
+      .then(res => {
+        console.log(res);
+        if (res.data) {
+        } else {
+          this.setState({
+            waterUsingState: false,
+          });
+        }
+      })
+      .catch(err => {
+        console.error(err);
+      });
+  }
+
+  getSelectedEquipment(data: DeviceInfo) {
+    this.setState({
+      deviceInfo: data,
+    });
+  }
+
+  waterBeginning() {
+    Taro.showLoading();
+    const { deviceInfo } = this.state;
+    const { userinfo } = this.props;
+    waterBeginning({
+      deviceCode: deviceInfo.code,
+      customerId: userinfo.customerId,
+      customerName: userinfo.customerName,
+      customerPhone: userinfo.customerPhone,
+      campusId: userinfo.areaId,
+    })
+      .then(res => {
+        console.log(res);
+        Taro.hideLoading();
+        this.setState(
+          {
+            waterUsingState: true,
+          },
+          () => {
+            this.startCheckusing();
+          },
+        );
+      })
+      .catch(err => {
+        Taro.hideLoading();
+        console.error('开启失败： ', err);
+      });
+  }
+
+  startCheckusing() {
+    const { waterUsingState } = this.state;
+    if (waterUsingState) {
+      this.getUsingEquipment();
+      let timer = setTimeout(() => {
+        this.startCheckusing();
+      }, 5000);
+      this.setState({
+        timer,
+      });
+    } else {
+      this.clearTimer();
+    }
+  }
 
   render() {
     const {
-      waterState,
-      deviceInfo: { code, postion },
+      waterUsingState,
+      deviceInfo: { code, position },
       useList,
     } = this.state;
     return (
       <View className='WaterDispenser'>
-        <View className='WaterDispenser-tg'>
+        <View className='WaterDispenser-tg' onClick={this.toggleCodeState}>
           <Image className='icon' src={CodeIcon} />
           <Text className='text'>显示条码</Text>
         </View>
-        <DeviceInfo size='small' code={code} position={postion} />
+        <DeviceInfo size='small' code={code} position={position} />
 
         <View className='btn-box'>
           <Image
@@ -64,14 +230,14 @@ class WaterDispenser extends Component {
             src={ScanIcon}
             onClick={this.scanEquipment}
           />
-          {code && !waterState ? (
+          {code && !waterUsingState ? (
             <Image
               className='shower-start-btn'
-              src={ShowerStart}
-              onClick={this.start}
+              src={StartIcon}
+              onClick={this.waterBeginning}
             />
           ) : (
-            <Image className='shower-start-btn' src={ShowerCantStart} />
+            <Image className='shower-start-btn' src={CantStartIcon} />
           )}
         </View>
 
@@ -79,9 +245,11 @@ class WaterDispenser extends Component {
           <View className='LastUseList-title bb'>最近使用</View>
           {useList.map(device => (
             <EquipmentItem
+              key={device.code}
               ex-class='bb'
               code={device.code}
-              postion={device.postion}
+              position={device.position}
+              onClick={this.getSelectedEquipment}
             />
           ))}
         </View>
@@ -90,4 +258,4 @@ class WaterDispenser extends Component {
   }
 }
 
-export default WaterDispenser;
+export default WaterDispenser as ComponentClass<IProps, PageState>;

src/pages/WaterDispenser/components/EquipmentItem/EquipmentItem.tsx

 import { Component } from '@tarojs/taro';
 import { View, Text } from '@tarojs/components';
 import './EquipmentItem.scss';
+import { DeviceInfo } from '../../WaterDispenser';
+import { ComponentClass } from 'react';
 
 type PageOwnProps = {
   code: string;
-  postion: string;
+  position: string;
+  onClick: (e: DeviceInfo) => void;
 };
 interface EquipmentItem {
   props: PageOwnProps;
 }
 class EquipmentItem extends Component {
-  static externalClasses = ['ex-class']
+  static externalClasses = ['ex-class'];
+
+  clickHandle() {
+    const { code, position, onClick } = this.props;
+    onClick &&
+      onClick({
+        code,
+        position,
+      });
+  }
 
   render() {
-    const { code, postion } = this.props;
+    const { code, position } = this.props;
     return (
-      <View className='EquipmentItem ex-class'>
+      <View className='EquipmentItem ex-class' onClick={this.clickHandle}>
         <View className='EquipmentItem-item'>
           <Text className='EquipmentItem-label'>设备编码</Text>
           <View className='EquipmentItem-value code'>{code}</View>
         </View>
         <View className='EquipmentItem-item'>
           <Text className='EquipmentItem-label'>设备位置</Text>
-          <View className='EquipmentItem-value'>{postion}</View>
+          {position ? (
+            <View className='EquipmentItem-value'>{position}</View>
+          ) : null}
         </View>
       </View>
     );
   }
 }
 
-export default EquipmentItem;
+export default EquipmentItem as ComponentClass<PageOwnProps>;