添加壁挂饮水页面

src/app.tsx

@@ -24,6 +24,7 @@ class App extends Component {
    */
   config: Config = {
     pages: [
+      'pages/WaterDispenser/WaterDispenser',
       'pages/index/index',
       'pages/Home/Home',
       'pages/Order/OrderPay/OrderPay',

src/components/DeviceInfo/DeviceInfo.scss

@@ -51,4 +51,24 @@
       }
     }
   }
+  &.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

@@ -2,10 +2,12 @@ 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 {
@@ -13,10 +15,15 @@ interface DeviceInfo {
 }
 
 class DeviceInfo extends Component {
+  static externalClasses = ['ex-class'];
+  static defaultProps = {
+    size: 'normal',
+  };
+
   render() {
-    const { code, position } = this.props;
+    const { size, code, position } = this.props;
     return (
-      <View className='DeviceInfo'>
+      <View className={`DeviceInfo ex-class ${size}`}>
         <View className='equipment-info'>
           {code ? (
             <View className='equipment-title matched'>已匹配设备</View>

src/components/MenuIcon/big/MenuIconBig.scss

 .MenuIconBig {
+  position: relative;
+  display: flex;
   width: 746px;
   height: 224px;
+  margin: 0 2px;
+  align-items: center;
+  .bg {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+  }
+  .text {
+    color: #fff;
+    margin-left: 50px;
+  }
+  .arrow{
+    width: 15px;
+    height: 23px;
+  }
 }

src/components/MenuIcon/big/MenuIconBig.tsx

@@ -3,6 +3,7 @@ import { Component } from '@tarojs/taro';
 import { View, Image, Text } from '@tarojs/components';
 
 type PageOwnProps = {
+  onClick: () => void;
   icon: string;
   text: string;
 };
@@ -12,9 +13,9 @@ interface MenuIconBig {
 }
 class MenuIconBig extends Component {
   render() {
-    const { icon, text } = this.props;
+    const { icon, text, onClick } = this.props;
     return (
-      <View className='MenuIconBig'>
+      <View className='MenuIconBig' onClick={onClick}>
         <Image className='bg' src={icon} />
         <Text className='text'>{text}</Text>
       </View>

src/components/MenuIcon/block/MenuIconBlock.scss

 .MenuIconBlock {
+  position: relative;
   width: 218px;
   height: 162px;
+  overflow: hidden;
+  .bg{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+  }
   .text {
+    display: block;
     margin-top: 50px;
-    margin-left: 18px;
+    margin-left: 40px;
     font-size: 24px;
     color: #fff;
   }

src/components/MenuIcon/block/MenuIconBlock.tsx

@@ -5,6 +5,7 @@ import { View, Image, Text } from '@tarojs/components';
 type PageOwnProps = {
   icon: string;
   text: string;
+  onClick: () => void;
 };
 
 interface MenuIconBlock {
@@ -12,9 +13,9 @@ interface MenuIconBlock {
 }
 class MenuIconBlock extends Component {
   render() {
-    const { icon, text } = this.props;
+    const { icon, text, onClick } = this.props;
     return (
-      <View className='MenuIconBlock'>
+      <View className='MenuIconBlock' onClick={onClick}>
         <Image className='bg' src={icon} />
         <Text className='text'>{text}</Text>
       </View>

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

@@ -5,6 +5,7 @@ import { View, Image, Text } from '@tarojs/components';
 type PageOwnProps = {
   icon: string;
   text: string;
+  onClick: () => void;
 };
 
 interface MenuIconNormal {
@@ -12,9 +13,9 @@ interface MenuIconNormal {
 }
 class MenuIconNormal extends Component<PageOwnProps> {
   render() {
-    const { icon, text } = this.props;
+    const { icon, text, onClick } = this.props;
     return (
-      <View className='MenuIconNormal'>
+      <View className='MenuIconNormal' onClick={onClick}>
         <Image className='icon' src={icon} />
         <Text className='text'>{text}</Text>
       </View>

src/pages/Home/Home.scss

 .Home {
-  padding: 0 32px;
+  // padding: 0 32px;
   .Home-BarMenu {
     position: absolute;
     right: 26px;
@@ -30,9 +30,9 @@
 
   .Home-UserBox {
     position: relative;
-    width: 100%;
     height: 390px;
-    padding-bottom: 40px;
+    padding: 0 0 40px;
+    margin: 0 32px;
     box-sizing: content-box;
     .bg {
       height: 390px;
@@ -123,56 +123,23 @@
     width: 40px;
     height: 20px;
   }
-  .Home-Item {
-    position: relative;
-    height: 192px;
-    margin-top: 68px;
+  .Home-Service-List {
     display: flex;
-    align-items: center;
-  }
-  .Home-Item-arrow {
-    width: 15px;
-    height: 23px;
-  }
-  .Home-HairDryer {
-    justify-content: flex-end;
-    .Home-HairDryer-shadow {
-      position: absolute;
-      bottom: 0px;
-      width: 100%;
-      height: 160px;
-      border-radius: 24px;
-      box-shadow: 0 6px 20px #3161ff;
+    flex-flow: wrap;
+    justify-content: space-between;
+    &.normal,
+    &.block {
+      padding: 0 32px;
+      margin: 20px auto;
     }
-    .Home-HairDryer-text {
-      color: #fff;
-      font-size: 32px;
-      margin-right: 50px;
+    &.big {
       margin-top: 20px;
     }
-    .Home-Item-arrow {
-      margin-left: 10px;
-    }
-  }
-  .Home-Shower {
-    margin-top: 40px;
-    .bg {
-      height: 225px;
-      transform: scale(1.1);
-    }
-    .Home-Shower-text {
-      color: #fff;
-      font-size: 32px;
-      margin-left: 50px;
-    }
-    .Home-Item-arrow {
-      margin-left: 10px;
-    }
   }
   .Home-Announcement {
     position: relative;
     height: 222px;
-    margin-top: 40px;
+    margin: 0 32px 40px;
     .Home-Announcement-title {
       display: flex;
       justify-content: space-between;

src/pages/Home/Home.tsx

@@ -12,6 +12,17 @@ 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 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';
@@ -58,7 +69,7 @@ interface Home {
     updateUserInfo(entity: UserState) {
       dispatch(updateUserInfo(entity));
     },
-  }),
+  })
 )
 class Home extends Component {
   constructor(props) {
@@ -67,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: '',
@@ -183,6 +199,12 @@ class Home extends Component {
     });
   }
 
+  goDispenser() {
+    Taro.navigateTo({
+      url: '/pages/WaterDispenser/WaterDispenser',
+    });
+  }
+
   toggleBarMenu() {
     this.setState(({ barMenuVisiable }: PageState) => ({
       barMenuVisiable: !barMenuVisiable,
@@ -210,42 +232,6 @@ class Home extends Component {
     });
   }
 
-  getServiceItem(serviceId: number, size: string) {
-    if (serviceId === 4 || serviceId === 11) {
-      // 自助饮水
-      return size === 'normal' ? (
-        <MenuIconNormal icon={WaterIconNormal} text={'饮水'} />
-      ) : size === 'block' ? (
-        <MenuIconBlock icon={WaterIconNormal} text={'饮水'} />
-      ) : (
-        <MenuIconBig icon={WaterIconNormal} text={'饮水'} />
-      );
-    } else if (serviceId === 4 || serviceId === 11) {
-      // 自助吹风
-      return size === 'normal' ? (
-        <MenuIconNormal icon={WaterIconNormal} text={'吹风'} />
-      ) : size === 'block' ? (
-        <MenuIconBlock icon={WaterIconNormal} text={'吹风'} />
-      ) : (
-        <MenuIconBig icon={WaterIconNormal} text={'吹风'} />
-      );
-    } else if (serviceId === 4 || serviceId === 11) {
-      // 自助饮水
-      return size === 'normal' ? (
-        <MenuIconNormal icon={WaterIconNormal} text={'饮水'} />
-      ) : size === 'block' ? (
-        <MenuIconBlock icon={WaterIconNormal} text={'饮水'} />
-      ) : (
-        <MenuIconBig icon={WaterIconNormal} text={'饮水'} />
-      );
-    } else if (serviceId === 9) {
-      // 壁挂饮水
-      return null;
-    } else {
-      return null;
-    }
-  }
-
   render() {
     const { userinfo } = this.props;
     const {
@@ -322,19 +308,109 @@ class Home extends Component {
           </View>
         </View>
 
-        {serviceList.length && serviceList.length <= 2
-          ? serviceList.map(service =>
-              this.getServiceItem(service.serviceId, 'normal'),
-            )
-          : serviceList.length && serviceList.length == 3
-          ? serviceList.map(service =>
-              this.getServiceItem(service.serviceId, 'block'),
-            )
-          : serviceList.length && serviceList.length >= 4
-          ? serviceList.map(service =>
-              this.getServiceItem(service.serviceId, 'big'),
-            )
-          : 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
+                  key={service.serviceId}
+                  icon={DryerIconBig}
+                  text={'吹风'}
+                  onClick={this.goBarCode}
+                />
+              ) : service.serviceId === 5 || service.serviceId === 10 ? (
+                <MenuIconBig
+                  key={service.serviceId}
+                  icon={ShowerIconBig}
+                  text={'洗浴'}
+                  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={'饮水'}
+                  onClick={this.goBarCode}
+                />
+              ) : service.serviceId === 4 || service.serviceId === 12 ? (
+                <MenuIconBlock
+                  key={service.serviceId}
+                  icon={DryerIconBlock}
+                  text={'吹风'}
+                  onClick={this.goBarCode}
+                />
+              ) : service.serviceId === 5 || service.serviceId === 10 ? (
+                <MenuIconBlock
+                  key={service.serviceId}
+                  icon={ShowerIconBlock}
+                  text={'洗浴'}
+                  onClick={this.goShower}
+                />
+              ) : service.serviceId === 9 ? (
+                <MenuIconBlock
+                  key={service.serviceId}
+                  icon={DispenserIconBlock}
+                  text={'饮水'}
+                  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={'洗浴'}
+                  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'>
@@ -343,7 +419,8 @@ 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>
@@ -351,7 +428,8 @@ 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.scss

-.WaterDispenser{
-
+.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 { Component } from '@tarojs/taro';
-import { View } from '@tarojs/components';
+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 CodeIcon from '../../images/water/code@2x.png';
+
 import DeviceInfo from '@/components/DeviceInfo/DeviceInfo';
+import EquipmentItem from './components/EquipmentItem/EquipmentItem';
 
+type DeviceInfo = {
+  code: string;
+  postion: string;
+};
+type PageOwnState = {
+  deviceInfo: DeviceInfo;
+  waterState: boolean;
+  useList: DeviceInfo[];
+};
+interface WaterDispenser {
+  state: PageOwnState;
+}
 class WaterDispenser extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      waterState: false,
+      deviceInfo: {
+        code: '',
+        postion: 'asdasf234',
+      },
+      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' },
+      ],
+    };
+  }
+  scanEquipment() {}
+
+  start() {}
+
   render() {
+    const {
+      waterState,
+      deviceInfo: { code, postion },
+      useList,
+    } = this.state;
     return (
       <View className='WaterDispenser'>
-        <DeviceInfo code='213' position='asd' />
+        <View className='WaterDispenser-tg'>
+          <Image className='icon' src={CodeIcon} />
+          <Text className='text'>显示条码</Text>
+        </View>
+        <DeviceInfo size='small' code={code} position={postion} />
+
+        <View className='btn-box'>
+          <Image
+            className='shower-scan-btn'
+            src={ScanIcon}
+            onClick={this.scanEquipment}
+          />
+          {code && !waterState ? (
+            <Image
+              className='shower-start-btn'
+              src={ShowerStart}
+              onClick={this.start}
+            />
+          ) : (
+            <Image className='shower-start-btn' src={ShowerCantStart} />
+          )}
+        </View>
+
+        <View className='LastUseList'>
+          <View className='LastUseList-title bb'>最近使用</View>
+          {useList.map(device => (
+            <EquipmentItem
+              ex-class='bb'
+              code={device.code}
+              postion={device.postion}
+            />
+          ))}
+        </View>
       </View>
     );
   }

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';
+
+type PageOwnProps = {
+  code: string;
+  postion: string;
+};
+interface EquipmentItem {
+  props: PageOwnProps;
+}
+class EquipmentItem extends Component {
+  static externalClasses = ['ex-class']
+
+  render() {
+    const { code, postion } = this.props;
+    return (
+      <View className='EquipmentItem ex-class'>
+        <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>
+        </View>
+      </View>
+    );
+  }
+}
+
+export default EquipmentItem;