修改测试环境地址

src/api/area.ts

-import { baseFetch, ResponseDataEntity } from './index';
+import { ResponseDataEntity, smaproFetch } from './index';
 
 export type Area = {
   id: number;
@@ -7,6 +7,6 @@ export type Area = {
 };
 
 export const fetchAllArea = (): Promise<ResponseDataEntity<Area[]>> =>
-  baseFetch({
-    url: '/area/queryAccessAreaList',
+  smaproFetch({
+    url: '/smpro/areaConfigs',
   });

src/api/home.ts

+import { ResponseDataEntity, smaproFetch } from './index';
+
+export enum ServiceTypeParams {
+  wechatPublicV = 1,
+  wechatAppV = 2,
+  aliPublicV = 3,
+  aliAppV = 4,
+}
+
+export type ServiceParams = {
+  areaId: number;
+  type: ServiceTypeParams;
+};
+export type Service = {
+  serviceId: number;
+  serviceName: string;
+};
+
+export const fetchAreaService = (
+  data: ServiceParams,
+): Promise<ResponseDataEntity<Service[]>> =>
+  smaproFetch({
+    url: `/smpro/areaServiceConfigs/${data.areaId}/${data.type}`,
+  });

src/api/index.ts

@@ -7,6 +7,8 @@ import {
   LogoutCode,
   SuccessCode,
   OLD_BASE_SERVER_URL,
+  SHOWER_APP_URL,
+  SMPRO_URL,
 } from '../constants/index';
 
 export type ResponseDataEntity<T> = {
@@ -35,22 +37,24 @@ const createFetch = (basePath: string) => {
             reqSource: 'wxmini',
           },
       url: basePath + entity.url,
-    }).then(({ data }: ResponseEntity) => {
-      if (data.code === SuccessCode) {
-        return data;
-      }
-      if (data.code === LogoutCode) {
-        Taro.redirectTo({
-          url: '/pages/Login/Login',
+    }).then(
+      ({ data }: ResponseEntity): ResponseDataEntity<any> => {
+        if (data.code === SuccessCode) {
+          return data;
+        }
+        if (data.code === LogoutCode) {
+          Taro.redirectTo({
+            url: '/pages/Login/Login',
+          });
+          throw data;
+        }
+        Taro.showToast({
+          title: data.msg || '网络错误',
+          icon: 'none',
         });
         throw data;
-      }
-      Taro.showToast({
-        title: data.msg || '网络错误',
-        icon: 'none',
-      });
-      throw data;
-    });
+      },
+    );
   };
 };
 
@@ -58,5 +62,7 @@ export const baseFetch = createFetch(BASE_SERVER_URL);
 export const oldBaseFetch = createFetch(OLD_BASE_SERVER_URL);
 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 default createFetch;

src/api/shower.ts

+import { showerFetch } from './index';
+
+type ShowerParams = {
+  deviceCode: string;
+  customerId: string;
+  campusId: number;
+};
+export type DeviceInfoResponse = {
+  code: string;
+  isOnlyBluetooth: number;
+  position: string;
+};
+/**
+ * 通过设备码获取设备信息
+ */
+export const fetchShowerInfo = (params: ShowerParams) =>
+  showerFetch({
+    url: `/dcxy/api/shower/devices/${params.deviceCode}`,
+    data: params,
+  });
+
+type UsingParams = {
+  customerId: number;
+};
+/**
+ * 通过用户查询在使用的设备信息
+ */
+export const fetchUsingShowerInfo = (params: UsingParams) =>
+  showerFetch({
+    url: '/dcxy/api/shower/devices/inuseByCurrentUser',
+    data: params,
+  });
+
+type StartParams = {
+  deviceCode: string;
+  customerId: string;
+  customerName: string;
+  customerPhone: string;
+};
+/**
+ * 开启设备使用
+ */
+export const startShowerEquipment = (params: StartParams) =>
+  showerFetch({
+    url: `/dcxy/api/shower/devices/${params.deviceCode}/beginning`,
+    method: 'POST',
+    data: params,
+  });

src/api/socket.ts

+import Taro from '@tarojs/taro';
+
+export const connectSocket = (url: string) =>
+  Taro.connectSocket({
+    url: url,
+  });
+// .then(task => {
+//   task.onOpen(function() {
+//     console.log('onOpen');
+//     task.send({ data: 'xxx' });
+//   });
+//   task.onMessage(function(msg) {
+//     console.log('onMessage: ', msg);
+//     task.close({
+//       code: 1000,
+//     });
+//   });
+//   task.onError(function() {
+//     console.log('onError');
+//   });
+//   task.onClose(function(e) {
+//     console.log('onClose: ', e);
+//   });
+// })
+// .catch(err => {
+//   console.error(err);
+// });

src/app.tsx

@@ -10,9 +10,9 @@ import './app.scss';
 
 // 如果需要在 h5 环境中开启 React Devtools
 // 取消以下注释：
-if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5') {
-  require('nerv-devtools');
-}
+// if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5') {
+//   require('nerv-devtools');
+// }
 
 class App extends Component {
   /**
@@ -39,6 +39,7 @@ class App extends Component {
       'pages/SelectCampus/SelectCampus',
       'pages/Content/Content',
       'pages/WebPage/WebPage',
+      'pages/Shower/Shower',
     ],
     window: {
       backgroundTextStyle: 'light',

src/constants/index.js

@@ -11,3 +11,6 @@ export const CUSTOMER_SERVER_URL =
 export const SCHOOL_MAIN_URL =
   'https://internal-test-school-home-bg.168cad.top';
 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';

src/pages/Home/Home.scss

@@ -118,12 +118,18 @@
     width: 40px;
     height: 20px;
   }
-  .Home-HairDryer {
+  .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 {
       position: absolute;
@@ -139,10 +145,23 @@
       margin-right: 50px;
       margin-top: 20px;
     }
-    .Home-HairDryer-arrow {
+    .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;
-      width: 15px;
-      height: 23px;
     }
   }
   .Home-Announcement {

src/pages/Home/Home.tsx

@@ -13,6 +13,7 @@ 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 './Home.scss';
 import { connect } from '@tarojs/redux';
@@ -26,6 +27,7 @@ import { fetchAnn, SectionItem } from '../../api/announcement';
 import { appLogout } from '../../api/customer';
 import { Customer } from '@/types/Customer/Customer';
 import { shareHandle } from '@/common/shareMethod';
+import { fetchAreaService, ServiceTypeParams, Service } from '@/api/home';
 
 type PageStateProps = {
   userinfo: Customer;
@@ -39,6 +41,7 @@ type PageState = {
   commBean: number;
   hairDryerBean: number;
   annItem: SectionItem;
+  serviceList: Service[];
 };
 type IProps = PageStateProps & PageDispatchProps;
 
@@ -63,6 +66,7 @@ class Home extends Component {
       barMenuVisiable: false,
       commBean: 0.0,
       hairDryerBean: 0.0,
+      serviceList: [],
       annItem: {
         id: 0,
         styleType: '',
@@ -89,6 +93,7 @@ class Home extends Component {
   }
   getInitData() {
     this.getBeanCountData();
+    this.getServiceList();
     const { userinfo } = this.props;
     fetchAnn({
       campusId: userinfo.areaId,
@@ -105,6 +110,21 @@ class Home extends Component {
         console.error(err);
       });
   }
+
+  getServiceList() {
+    const { userinfo } = this.props;
+    if (userinfo.areaId) {
+      fetchAreaService({
+        areaId: userinfo.areaId,
+        type: ServiceTypeParams.wechatAppV,
+      }).then(res => {
+        this.setState({
+          serviceList: res.data,
+        });
+      });
+    }
+  }
+
   getBeanCountData() {
     const { userinfo } = this.props;
     fetchBeanCount({
@@ -156,6 +176,12 @@ class Home extends Component {
     });
   }
 
+  goShower() {
+    Taro.navigateTo({
+      url: '/pages/Shower/Shower',
+    });
+  }
+
   toggleBarMenu() {
     this.setState(({ barMenuVisiable }: PageState) => ({
       barMenuVisiable: !barMenuVisiable,
@@ -184,7 +210,13 @@ class Home extends Component {
   }
   render() {
     const { userinfo } = this.props;
-    const { commBean, hairDryerBean, annItem, barMenuVisiable } = this.state;
+    const {
+      commBean,
+      hairDryerBean,
+      annItem,
+      barMenuVisiable,
+      serviceList,
+    } = this.state;
     return (
       <View className='Home'>
         {barMenuVisiable ? (
@@ -251,14 +283,52 @@ class Home extends Component {
             </View>
           </View>
         </View>
-        <View className='Home-HairDryer' onClick={this.goBarCode}>
-          <Image className='bg' src={HairDryerBg} />
-          <View className='Home-HairDryer-shadow' />
-          <View className='Home-HairDryer-text'>
-            吹风
-            <Image className='Home-HairDryer-arrow' src={HairDryerArr} />
-          </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,
+        )}
+
         {annItem.id ? (
           <View className='Home-Announcement'>
             <Image className='bg' src={AnnouncementBg} />

src/pages/Shower/Shower.scss

+.Shower {
+  padding-top: 126px;
+  .equipment-info-box {
+    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;
+      }
+    }
+  }
+  .btn-box {
+    margin: 72px 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;
+      }
+    }
+  }
+}

src/pages/Shower/actions.ts

+import Actions from '@/types/Store/Actions';
+import { BluetoothDevice } from '@/types/Shower/Shower';
+
+export const UPDATE_BLUETOOTH_DEVICE = 'UPDATE_BLUETOOTH_DEVICE';
+export const UPDATE_PAY_LIST = 'UPDATE_PAY_LIST';
+export const UPDATE_ALL_LIST = 'UPDATE_ALL_LIST';
+
+export type UpdateOrderParams<T> = {
+  lastOrderId?: number;
+  list: T[];
+};
+
+export const updateBluetoothDevice = (state: BluetoothDevice): Actions => ({
+  type: UPDATE_BLUETOOTH_DEVICE,
+  payload: state,
+});

src/pages/Shower/store.ts

+import Actions from '@/types/Store/Actions';
+import { BluetoothDevice } from '@/types/Shower/Shower';
+import { UPDATE_BLUETOOTH_DEVICE } from './actions';
+import Taro from '@tarojs/taro';
+
+const storeKey = 'DeviceInfo';
+
+let INITIAL_STATE = {
+  code: '',
+  isOnlyBluetooth: undefined,
+  position: '',
+};
+
+try {
+  var value = Taro.getStorageSync(storeKey);
+  if (value) {
+    INITIAL_STATE = value;
+  }
+} catch (e) {
+  console.error(e);
+}
+
+export default function ShowerReducer(
+  state: StoreState<BluetoothDevice> = INITIAL_STATE,
+  actions: Actions,
+) {
+  switch (actions.type) {
+    case UPDATE_BLUETOOTH_DEVICE:
+      Taro.setStorage({
+        key: storeKey,
+        data: actions.payload,
+      });
+      return {
+        ...state,
+        ...actions.payload,
+      };
+    default:
+      return state;
+  }
+}

src/store/reducers.ts

 import { combineReducers } from 'redux';
 import userinfo from './rootReducers/userinfo';
 import OrderList from '../pages/Order/OrderList/store';
+import ShowerReducer from '@/pages/Shower/store';
 
 export default combineReducers({
   userinfo,
   OrderList,
+  Shower: ShowerReducer,
 });

src/types/Shower/Shower.ts

+export type BluetoothDevice = {
+  code: string;
+  isOnlyBluetooth: number;
+  position: string;
+};

src/utils/arrayBuffer.ts

+export const ab2str = (buf: ArrayBuffer): string => {
+  return String.fromCharCode.apply(null, new Int8Array(buf));
+};
+
+export const str2ab = (str: string): ArrayBuffer => {
+  var buf = new ArrayBuffer(str.length);
+  var bufView = new Int8Array(buf);
+  for (var i = 0, strLen = str.length; i < strLen; i++) {
+    bufView[i] = str.charCodeAt(i);
+  }
+  return buf;
+};