配置测试地址

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

@@ -40,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.scss

+.DeviceInfo {
+  width: 630px;
+  height: 572px;
+  margin: 0 auto;
+  border-radius: 176px;
+  border: 2px solid #dfdfdf;
+  background-color: #f1f1f1;
+  .equipment-info {
+    width: 610px;
+    height: 552px;
+    border-radius: 176px;
+    margin: 10px auto 0;
+    background-color: #fff;
+    overflow: hidden;
+    .equipment-title {
+      margin-top: 114px;
+      font-size: 44px;
+      text-align: center;
+      &.matched {
+        color: #6180f4;
+      }
+    }
+    .equipment-line {
+      display: block;
+      width: 460px;
+      height: 8px;
+      margin: 46px auto 0;
+    }
+    .equipment-noCode {
+      margin-top: 108px;
+      text-align: center;
+      font-size: 32px;
+      color: #666;
+    }
+    .equipment-list {
+      margin-top: 64px;
+    }
+    .equipment-item {
+      display: flex;
+      margin-bottom: 20px;
+      align-items: center;
+      font-size: 32px;
+      .equipment-label {
+        margin-left: 110px;
+      }
+      .equipment-value {
+        width: 260px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+  &.small {
+    height: 320px;
+    border-radius: 100px;
+    .equipment-info {
+      height: 300px;
+      border-radius: 100px;
+      .equipment-title {
+        margin-top: 26px;
+      }
+      .equipment-line {
+        margin-top: 30px;
+      }
+      .equipment-noCode {
+        margin-top: 60px;
+      }
+      .equipment-list {
+        margin-top: 24px;
+      }
+    }
+  }
+}

src/components/DeviceInfo/DeviceInfo.tsx

+import { ComponentClass } from 'react';
+import { View, Image, Text } from '@tarojs/components';
+import LineImg from '@/images/shower/img_nor@2x.png';
+import { Component } from '@tarojs/taro';
+import './DeviceInfo.scss';
+
+type PageOwnProps = {
+  code: string;
+  position: string;
+  size: string;
+};
+
+interface DeviceInfo {
+  props: PageOwnProps;
+}
+
+class DeviceInfo extends Component {
+  static externalClasses = ['ex-class'];
+  static defaultProps = {
+    size: 'normal',
+  };
+
+  render() {
+    const { size, code, position } = this.props;
+    return (
+      <View className={`DeviceInfo ex-class ${size}`}>
+        <View className='equipment-info'>
+          {code ? (
+            <View className='equipment-title matched'>已匹配设备</View>
+          ) : (
+            <View className='equipment-title'>未匹配设备</View>
+          )}
+
+          <Image className='equipment-line' src={LineImg} />
+          {code ? (
+            <View className='equipment-list'>
+              <View className='equipment-item'>
+                <Text className='equipment-label'>设备编号：</Text>
+                <Text className='equipment-value'>{code}</Text>
+              </View>
+              <View className='equipment-item'>
+                <Text className='equipment-label'>设备位置：</Text>
+                {position ? (
+                  <Text className='equipment-value'>{position}</Text>
+                ) : null}
+              </View>
+            </View>
+          ) : (
+            <View v-loading='loading' className='equipment-noCode'>
+              点击左下角扫一扫完成匹配
+            </View>
+          )}
+        </View>
+      </View>
+    );
+  }
+}
+
+export default DeviceInfo as ComponentClass<PageOwnProps>;

src/components/MenuIcon/big/MenuIconBig.scss

+.MenuIconBig {
+  position: relative;
+  display: flex;
+  width: 686px;
+  height: 164px;
+  margin: 0 auto 20px;
+  align-items: center;
+  .bg {
+    position: absolute;
+    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;
+    font-size: 32px;
+    margin-right: 20px;
+  }
+  .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, side } = this.props;
+    return (
+      <View className={`MenuIconBig ${side} ex-class`} onClick={onClick}>
+        <Image className='bg' src={icon} />
+        {text ? (
+          <View className='text-box'>
+            <Text className='text'>{text}</Text>
+            <Image className='arrow' src={ArrowIcon} />
+          </View>
+        ) : null}
+      </View>
+    );
+  }
+}
+
+export default MenuIconBig as ComponentClass<PageOwnProps>;

src/components/MenuIcon/block/MenuIconBlock.scss

+.MenuIconBlock {
+  position: relative;
+  width: 218px;
+  height: 162px;
+  overflow: hidden;
+  .bg {
+    position: absolute;
+    width: 278px;
+    height: 224px;
+    z-index: -1;
+    transform: translate(-30px, -18px);
+  }
+  .text {
+    display: block;
+    margin-top: 50px;
+    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;
+  text: string;
+  onClick: () => void;
+};
+
+interface MenuIconBlock {
+  props: PageOwnProps;
+}
+class MenuIconBlock extends Component {
+  render() {
+    const { icon, text, onClick } = this.props;
+    return (
+      <View className='MenuIconBlock' onClick={onClick}>
+        <Image className='bg' src={icon} />
+        <Text className='text'>{text}</Text>
+      </View>
+    );
+  }
+}
+
+export default MenuIconBlock as ComponentClass<PageOwnProps>;

src/components/MenuIcon/normal/MenuIconNormal.scss

+.MenuIconNormal {
+  display: flex;
+  flex-direction: column;
+  width: 120px;
+  .icon {
+    width: 120px;
+    height: 120px;
+  }
+  .text {
+    width: 100%;
+    font-size: 24px;
+    color: #666;
+    text-align: center;
+  }
+}

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;
+  text: string;
+  onClick: () => void;
+};
+
+interface MenuIconNormal {
+  props: PageOwnProps;
+}
+class MenuIconNormal extends Component<PageOwnProps> {
+  render() {
+    const { icon, text, onClick } = this.props;
+    return (
+      <View className='MenuIconNormal' onClick={onClick}>
+        <Image className='icon' src={icon} />
+        <Text className='text'>{text}</Text>
+      </View>
+    );
+  }
+}
+
+export default MenuIconNormal as ComponentClass<PageOwnProps>;

src/constants/index.js

@@ -14,3 +14,4 @@ export const ANN_LINK_URL = 'https://ex-test-wx.168cad.top/announcement/';
 export const SHOWER_APP_URL = 'https://in-test-shower-app-server.168cad.top';
 export const SOCKET_URL = 'wss://in-test-shower-hardware-server.168cad.top/ws';
 export const SMPRO_URL = 'https://ex-test-dcxy-smapro-app.168cad.top';
+export const GX_URL = 'http://ex-test-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

 .Home {
-  padding: 0 32px;
+  // padding: 0 32px;
   .Home-BarMenu {
     position: absolute;
     right: 26px;
@@ -30,8 +30,13 @@
 
   .Home-UserBox {
     position: relative;
-    width: 100%;
     height: 390px;
+    padding: 0 0 40px;
+    margin: 0 32px;
+    box-sizing: content-box;
+    .bg {
+      height: 390px;
+    }
     .Home-UserBox-Setting {
       position: absolute;
       right: 28px;
@@ -39,135 +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-Order {
-    position: absolute;
-    left: 50%;
-    bottom: -40px;
-    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-Item {
-    position: relative;
-    height: 192px;
-    margin-top: 68px;
-    display: flex;
-    align-items: center;
-  }
-  .Home-Item-arrow {
-    width: 15px;
-    height: 23px;
-  }
-  .Home-HairDryer {
-    justify-content: flex-end;
-    .Home-HairDryer-shadow {
+    .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;
-      width: 100%;
-      height: 160px;
-      border-radius: 24px;
-      box-shadow: 0 6px 20px #3161ff;
+      transform: translate(-50%);
+      width: 572px;
+      height: 80px;
+      line-height: 80px;
+      background-color: #6180f4;
+      border-radius: 50px;
+      display: flex;
+      overflow: hidden;
     }
-    .Home-HairDryer-text {
+    .Home-UserBox-Order-text {
+      flex: 1;
+      text-align: center;
       color: #fff;
-      font-size: 32px;
-      margin-right: 50px;
-      margin-top: 20px;
+      font-size: 24px;
     }
-    .Home-Item-arrow {
-      margin-left: 10px;
+    .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-Shower {
-    margin-top: 40px;
-    .bg {
-      height: 225px;
-      transform: scale(1.1);
+
+  .Home-Service-List {
+    display: flex;
+    flex-flow: wrap;
+    justify-content: space-between;
+    .Home-Service-List {
+      margin-top: 20px;
     }
-    .Home-Shower-text {
-      color: #fff;
-      font-size: 32px;
-      margin-left: 50px;
+    &.normal,
+    &.block {
+      padding: 0 32px;
+      margin: 20px auto;
     }
-    .Home-Item-arrow {
-      margin-left: 10px;
+    &.big {
+      width: 686px;
+      margin: 20px auto 0;
     }
   }
   .Home-Announcement {
     position: relative;
     height: 222px;
-    margin-top: 40px;
+    margin: 20px 32px 40px;
     .Home-Announcement-title {
       display: flex;
       justify-content: space-between;

src/pages/Home/Home.tsx

@@ -4,8 +4,6 @@ import { View, Image, Text } from '@tarojs/components';
 
 import UserBoxBg from '../../images/home/img_bg@2x.png';
 import ArrowIcon from '../../images/home/icon_dingdan@2x.png';
-import HairDryerBg from '../../images/home/img_chuifeng_bg@2x.png';
-import HairDryerArr from '../../images/home/icon_chuifeng_right@2x.png';
 import AnnouncementBg from '../../images/home/img_gonggao_bg@2x.png';
 import MoreIcon from '../../images/home/icon_more_right@2x.png';
 import SettingIcon from '../../images/home/icon_shezhi@2x.png';
@@ -13,7 +11,18 @@ import HBeanIcon from '../../images/home/icon_chuifengdou@2x.png';
 import TBeanIcon from '../../images/home/icon_tongyongdou@2x.png';
 import UserHeaderM from '../../images/home/img_boy_touxiang@2x.png';
 import UserHeaderF from '../../images/home/img_girl_touxiang@2x.png';
-import ShowerIcon from '../../images/home/ic_linyu@2x.png';
+import WaterIconNormal from '../../images/menu/ic_zizhu@2x.png';
+import WaterIconBlock from '../../images/menu/ic_zizhu-2@2x.png';
+import WaterIconBig from '../../images/menu/ic_zizhu-3@2x.png';
+import ShowerIconNormal from '../../images/menu/ic_linyu@2x.png';
+import ShowerIconBlock from '../../images/menu/ic_zizhu-1@2x.png';
+import ShowerIconBig from '../../images/menu/ic_linyu-2@2x.png';
+import DryerIconNormal from '../../images/menu/ic_chuifeng@2x.png';
+import DryerIconBlock from '../../images/menu/ic_chuifeng-1@2x.png';
+import DryerIconBig from '../../images/menu/ic_chuifeng-2@2x.png';
+import DispenserIconNormal from '../../images/menu/ic_bigua@2x.png';
+import DispenserIconBlock from '../../images/menu/ic_bigua-1@2x.png';
+import DispenserIconBig from '../../images/menu/ic_bigua-2@2x.png';
 
 import './Home.scss';
 import { connect } from '@tarojs/redux';
@@ -28,6 +37,9 @@ import { appLogout } from '../../api/customer';
 import { Customer } from '@/types/Customer/Customer';
 import { shareHandle } from '@/common/shareMethod';
 import { fetchAreaService, ServiceTypeParams, Service } from '@/api/home';
+import MenuIconNormal from '@/components/MenuIcon/normal/MenuIconNormal';
+import MenuIconBlock from '@/components/MenuIcon/block/MenuIconBlock';
+import MenuIconBig from '@/components/MenuIcon/big/MenuIconBig';
 
 type PageStateProps = {
   userinfo: Customer;
@@ -66,7 +78,12 @@ class Home extends Component {
       barMenuVisiable: false,
       commBean: 0.0,
       hairDryerBean: 0.0,
-      serviceList: [],
+      serviceList: [
+        { serviceId: 3, serviceName: '饮水' },
+        { serviceId: 4, serviceName: '吹风' },
+        // { serviceId: 5, serviceName: '洗浴' },
+        // { serviceId: 9, serviceName: '壁挂饮水' },
+      ],
       annItem: {
         id: 0,
         styleType: '',
@@ -182,6 +199,12 @@ class Home extends Component {
     });
   }
 
+  goDispenser() {
+    Taro.navigateTo({
+      url: '/pages/WaterDispenser/WaterDispenser',
+    });
+  }
+
   toggleBarMenu() {
     this.setState(({ barMenuVisiable }: PageState) => ({
       barMenuVisiable: !barMenuVisiable,
@@ -208,6 +231,7 @@ class Home extends Component {
       url: `/pages/Content/Content?id=${id}`,
     });
   }
+
   render() {
     const { userinfo } = this.props;
     const {
@@ -283,51 +307,112 @@ class Home extends Component {
             </View>
           </View>
         </View>
-        {serviceList.map(service =>
-          service.serviceId === 4 || service.serviceId === 11 ? (
-            // 自助吹风
-            <View
-              key={service.serviceId}
-              className='Home-Item Home-HairDryer'
-              onClick={this.goBarCode}>
-              <Image className='bg' src={HairDryerBg} />
-              <View className='Home-HairDryer-shadow' />
-              <View className='Home-HairDryer-text'>
-                吹风
-                <Image className='Home-Item-arrow' src={HairDryerArr} />
-              </View>
-            </View>
-          ) : service.serviceId === 10 || service.serviceId === 5 ? (
-            // 自助吹风
-            <View
-              key={service.serviceId}
-              className='Home-Item Home-Shower'
-              onClick={this.goShower}>
-              <Image className='bg' src={ShowerIcon} />
-              <View className='Home-Shower-shadow' />
-              <View className='Home-Shower-text'>
-                洗浴
-                <Image className='Home-Item-arrow' src={HairDryerArr} />
-              </View>
-            </View>
-          ) : service.serviceId === 3 || service.serviceId === 11 ? (
-            // 自助饮水
-            <View
-              key={service.serviceId}
-              className='Home-Item Home-Water'
-              onClick={this.goBarCode}>
-              <Image className='bg' src={HairDryerBg} />
-              <View className='Home-Water-shadow' />
-              <View className='Home-Water-text'>
-                饮水
-                <Image className='Home-Item-arrow' src={HairDryerArr} />
-              </View>
-            </View>
-          ) : service.serviceId === 9 ? (
-            // 壁挂饮水
-            <View key={service.serviceId} />
-          ) : null,
-        )}
+
+        {serviceList.length && serviceList.length <= 2 ? (
+          <View className='Home-Service-List big'>
+            {serviceList.map(service =>
+              service.serviceId === 3 || service.serviceId === 11 ? (
+                <MenuIconBig
+                  key={service.serviceId}
+                  icon={WaterIconBig}
+                  text={''}
+                  onClick={this.goBarCode}
+                />
+              ) : service.serviceId === 4 || service.serviceId === 12 ? (
+                <MenuIconBig
+                  ex-class='hairDryer'
+                  key={service.serviceId}
+                  icon={DryerIconBig}
+                  text={service.serviceName}
+                  side='right'
+                  onClick={this.goBarCode}
+                />
+              ) : service.serviceId === 5 || service.serviceId === 10 ? (
+                <MenuIconBig
+                  key={service.serviceId}
+                  icon={ShowerIconBig}
+                  text={service.serviceName}
+                  onClick={this.goShower}
+                />
+              ) : service.serviceId === 9 ? (
+                <MenuIconBig
+                  key={service.serviceId}
+                  icon={DispenserIconBig}
+                  text={''}
+                  onClick={this.goDispenser}
+                />
+              ) : null,
+            )}
+          </View>
+        ) : serviceList.length && serviceList.length == 3 ? (
+          <View className='Home-Service-List block'>
+            {serviceList.map(service =>
+              service.serviceId === 3 || service.serviceId === 11 ? (
+                <MenuIconBlock
+                  key={service.serviceId}
+                  icon={WaterIconBlock}
+                  text={service.serviceName}
+                  onClick={this.goBarCode}
+                />
+              ) : service.serviceId === 4 || service.serviceId === 12 ? (
+                <MenuIconBlock
+                  key={service.serviceId}
+                  icon={DryerIconBlock}
+                  text={service.serviceName}
+                  onClick={this.goBarCode}
+                />
+              ) : service.serviceId === 5 || service.serviceId === 10 ? (
+                <MenuIconBlock
+                  key={service.serviceId}
+                  icon={ShowerIconBlock}
+                  text={service.serviceName}
+                  onClick={this.goShower}
+                />
+              ) : service.serviceId === 9 ? (
+                <MenuIconBlock
+                  key={service.serviceId}
+                  icon={DispenserIconBlock}
+                  text={service.serviceName}
+                  onClick={this.goDispenser}
+                />
+              ) : null,
+            )}
+          </View>
+        ) : serviceList.length && serviceList.length >= 4 ? (
+          <View className='Home-Service-List normal'>
+            {serviceList.map(service =>
+              service.serviceId === 3 || service.serviceId === 11 ? (
+                <MenuIconNormal
+                  key={service.serviceId}
+                  icon={WaterIconNormal}
+                  text={'饮水'}
+                  onClick={this.goBarCode}
+                />
+              ) : service.serviceId === 4 || service.serviceId === 12 ? (
+                <MenuIconNormal
+                  key={service.serviceId}
+                  icon={DryerIconNormal}
+                  text={'吹风'}
+                  onClick={this.goBarCode}
+                />
+              ) : service.serviceId === 5 || service.serviceId === 10 ? (
+                <MenuIconNormal
+                  key={service.serviceId}
+                  icon={ShowerIconNormal}
+                  text={service.serviceName}
+                  onClick={this.goShower}
+                />
+              ) : service.serviceId === 9 ? (
+                <MenuIconNormal
+                  key={service.serviceId}
+                  icon={DispenserIconNormal}
+                  text={'饮水'}
+                  onClick={this.goDispenser}
+                />
+              ) : null,
+            )}
+          </View>
+        ) : null}
 
         {annItem.id ? (
           <View className='Home-Announcement'>

src/pages/WaterDispenser/WaterDispenser.scss

+.WaterDispenser {
+  position: relative;
+  .WaterDispenser-tg {
+    position: absolute;
+    right: 0;
+    top: 34px;
+    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;
+    }
+  }
+  .btn-box {
+    margin: 40px auto 0;
+    width: 534px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .shower-scan-btn {
+      width: 116px;
+      height: 116px;
+      border-radius: 50%;
+      &:active {
+        box-shadow: #ddd 0 0 40px;
+      }
+    }
+    .shower-start-btn {
+      width: 276px;
+      height: 128px;
+      border-radius: 50px;
+      &:active {
+        box-shadow: #ddd 0 0 40px;
+      }
+    }
+  }
+  .LastUseList {
+    padding: 0 22px;
+    margin-top: 50px;
+    .bb {
+      border-bottom: 1px dotted #999;
+    }
+    .LastUseList-title {
+      line-height: 70px;
+      font-size: 30px;
+      color: #5f81fe;
+      font-weight: bolder;
+      text-indent: 58px;
+    }
+  }
+}

src/pages/WaterDispenser/WaterDispenser.tsx

+import './WaterDispenser.scss';
+import Taro, { Component } from '@tarojs/taro';
+import { View, Image, Text } from '@tarojs/components';
+import ScanIcon from '../../images/shower/ic_saoma@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';
+
+export type DeviceInfo = {
+  code: string;
+  position: string;
+};
+type PageStateProps = {
+  userinfo: Customer;
+};
+
+type PageState = {
+  deviceInfo: DeviceInfo;
+  waterUsingState: boolean;
+  useList: DeviceInfo[];
+  timer: number | null;
+};
+
+type IProps = PageStateProps;
+
+interface WaterDispenser {
+  props: IProps;
+  state: PageState;
+}
+@connect(({ userinfo }) => ({
+  userinfo,
+}))
+class WaterDispenser extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      waterUsingState: false,
+      deviceInfo: {
+        code: '',
+        position: '',
+      },
+      useList: [],
+      timer: null,
+    };
+  }
+
+  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 {
+      waterUsingState,
+      deviceInfo: { code, position },
+      useList,
+    } = this.state;
+    return (
+      <View className='WaterDispenser'>
+        <View className='WaterDispenser-tg' onClick={this.toggleCodeState}>
+          <Image className='icon' src={CodeIcon} />
+          <Text className='text'>显示条码</Text>
+        </View>
+        <DeviceInfo size='small' code={code} position={position} />
+
+        <View className='btn-box'>
+          <Image
+            className='shower-scan-btn'
+            src={ScanIcon}
+            onClick={this.scanEquipment}
+          />
+          {code && !waterUsingState ? (
+            <Image
+              className='shower-start-btn'
+              src={StartIcon}
+              onClick={this.waterBeginning}
+            />
+          ) : (
+            <Image className='shower-start-btn' src={CantStartIcon} />
+          )}
+        </View>
+
+        <View className='LastUseList'>
+          <View className='LastUseList-title bb'>最近使用</View>
+          {useList.map(device => (
+            <EquipmentItem
+              key={device.code}
+              ex-class='bb'
+              code={device.code}
+              position={device.position}
+              onClick={this.getSelectedEquipment}
+            />
+          ))}
+        </View>
+      </View>
+    );
+  }
+}
+
+export default WaterDispenser as ComponentClass<IProps, PageState>;

src/pages/WaterDispenser/components/EquipmentItem/EquipmentItem.scss

+.EquipmentItem {
+  padding: 10px 0;
+  line-height: 46px;
+  .EquipmentItem-item {
+    display: flex;
+    font-size: 26px;
+    color: #999;
+  }
+  .EquipmentItem-label {
+    margin-right: 24px;
+    margin-left: 58px;
+  }
+  .EquipmentItem-value {
+    width: 460px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .code {
+    font-size: 30px;
+    color: #333;
+  }
+}

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;
+  position: string;
+  onClick: (e: DeviceInfo) => void;
+};
+interface EquipmentItem {
+  props: PageOwnProps;
+}
+class EquipmentItem extends Component {
+  static externalClasses = ['ex-class'];
+
+  clickHandle() {
+    const { code, position, onClick } = this.props;
+    onClick &&
+      onClick({
+        code,
+        position,
+      });
+  }
+
+  render() {
+    const { code, position } = this.props;
+    return (
+      <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>
+          {position ? (
+            <View className='EquipmentItem-value'>{position}</View>
+          ) : null}
+        </View>
+      </View>
+    );
+  }
+}
+
+export default EquipmentItem as ComponentClass<PageOwnProps>;