Merge branch 'develop' into test

src/api/shower.ts

@@ -55,15 +55,38 @@ export const startShowerEquipment = (params: StartParams) =>
     method: 'POST',
     data: params,
   });
+
+export enum ShowerUseType {
+  bluetooth = 1,
+  appointment = 2,
+  mix = 3,
+}
 type ControllerParams = {
   customerId: number;
   campusId: number;
 };
-type ControllerResponse = {
+type Balance = {
+  amount: number;
+  // allowEmptyValue: false
+  // 服务数量
+
+  serviceId: string;
+  // allowEmptyValue: false
+  // 服务id -1：授信额度；0：艾米；1：豆
+
+  serviceName: string;
+  // allowEmptyValue: false
+  // 服务名称
+};
+export type ControllerResponse = {
+  appointmentThresholdPrompt: string;
+  balances: Balance[];
   beanAmount: number;
+  defaultType: ShowerUseType;
   money: number;
   thresholdPrompt: string;
   thresholdValue: number;
+  useType: ShowerUseType;
 };
 
 export const getShowerController = (
@@ -73,3 +96,165 @@ export const getShowerController = (
     url: '/dcxy/api/shower/controllerConfigs',
     data: params,
   });
+
+type AppointDeviceParam = {
+  userId: number;
+  campusId: number;
+  location?: string;
+  pageNum?: number;
+  pageSize?: number;
+};
+export type AppointDeviceResponse = {
+  appointable: boolean;
+  // example: false
+  // allowEmptyValue: false
+  // 是否可预约
+
+  code: string;
+  // allowEmptyValue: false
+  // 设备编号
+
+  inPunishment: boolean;
+  // example: false
+  // allowEmptyValue: false
+  // 用户是在惩罚中
+
+  location: string;
+  // allowEmptyValue: false
+  // 设备位置
+
+  operationMode: number;
+  // allowEmptyValue: false
+  // 设备计费模式
+};
+export const getAppointmentDevice = (
+  params: AppointDeviceParam,
+): Promise<ResponseDataEntity<{ list: AppointDeviceResponse[] }>> =>
+  showerFetch({
+    url: '/dcxy/api/shower/appointment/devices',
+    data: params,
+  });
+type AppointingParams = {
+  account: string;
+  // allowEmptyValue: false
+  // 登录账号
+
+  deviceCode: string;
+  // allowEmptyValue: false
+  // 设备编号
+
+  phone: string;
+  // allowEmptyValue: false
+  // 手机号
+
+  userId: number;
+  // allowEmptyValue: false
+  // 用户ID
+
+  userName: string;
+  // allowEmptyValue: false
+  // 用户名称
+};
+export const appointingEquipment = (params: AppointingParams) =>
+  showerFetch({
+    url: '/dcxy/api/shower/appointment/appointing',
+    method: 'POST',
+    data: params,
+  });
+type AppointmentRecordsParams = {
+  pageNum?: number;
+  // 当前页码
+
+  pageSize?: number;
+  // 页面大小
+
+  orderSort?: string;
+  // 排序
+
+  userId: number;
+  // 用户ID
+
+  appointTimeStart?: string;
+  // 预约时间区间上限
+
+  appointTimeEnd?: string;
+  // 预约时间区间下限
+};
+export type AppointmentRecordsResponse = {
+  appointTime: string;
+  // allowEmptyValue: false
+  // 预约时间
+
+  campusName: string;
+  // allowEmptyValue: false
+  // 所属区域
+
+  deviceCode: string;
+  // allowEmptyValue: false
+  // 设备编号
+
+  deviceLocation: string;
+  // allowEmptyValue: false
+  // 设备位置
+
+  expireTime: string;
+  // allowEmptyValue: false
+  // 到期时间
+
+  status: number;
+  // allowEmptyValue: false
+  // 状态: 0-预约中，1-预约成功，2-使用中，3-完成，4-预约失败，5-失效(逾期未使用)
+
+  used: boolean;
+  // example: false
+  // allowEmptyValue: false
+  // 是否使用
+};
+export const getAppointmentRecords = (
+  params: AppointmentRecordsParams,
+): Promise<ResponseDataEntity<{ list: AppointmentRecordsResponse[] }>> =>
+  showerFetch({
+    url: '/dcxy/api/shower/appointment/appointRecords',
+    data: params,
+  });
+type UserAppointableParams = {
+  userId: number;
+  campusId: number;
+};
+export type UserAppointableData = {
+  appointMode: number;
+  // allowEmptyValue: false
+  // 校验结果：0-校区未启用预约功能，1-校区未设置惩罚时长，2-用户未在惩罚中，3-用户在惩罚中
+
+  defaultType: number;
+  // allowEmptyValue: false
+  // 混合模式时的默认使用模式
+
+  duration: number;
+  // allowEmptyValue: false
+  // 预约有效时长
+
+  message: string;
+  // allowEmptyValue: false
+  // 被禁用时提示消息
+
+  punishment: number;
+  // allowEmptyValue: false
+  // 系统惩罚时长
+
+  useType: number;
+  // allowEmptyValue: false
+  // 使用模式: 1-蓝牙，2-预约，3-混合
+
+  userPunishment: number;
+  // allowEmptyValue: false
+  // 用户剩余惩罚时长
+};
+export const getUserAppointableData = (
+  params: UserAppointableParams,
+): Promise<ResponseDataEntity<UserAppointableData>> =>
+  showerFetch({
+    url: `/dcxy/api/shower/appointment/user/${params.userId}/appointable/${
+      params.campusId
+    }`,
+  });

src/app.tsx

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

src/hooks/useInputValue.ts

+import { useState, useCallback } from '@tarojs/taro';
+import { BaseEventOrig } from '@tarojs/components/types/common';
+
+function useInputValue(initialValue: string) {
+  let [value, setValue] = useState(initialValue);
+  let onChange = useCallback(function(
+    event: BaseEventOrig<{
+      value: string;
+      cursor: number;
+      keyCode: number;
+    }>,
+  ) {
+    setValue(event.detail.value);
+  }, []);
+
+  return {
+    value,
+    onChange,
+  };
+}
+
+export default useInputValue;

src/pages/Home/Home.tsx

@@ -38,6 +38,12 @@ import MenuIconNormal from '@/components/MenuIcon/normal/MenuIconNormal';
 import MenuIconBlock from '@/components/MenuIcon/block/MenuIconBlock';
 import MenuIconBig from '@/components/MenuIcon/big/MenuIconBig';
 import { updateServiceList } from '@/store/rootReducers/service';
+import {
+  getShowerController,
+  ShowerUseType,
+  ControllerResponse,
+} from '@/api/shower';
+import { updateShowerControlConfig } from '@/store/rootReducers/shower';
 
 type PageStateProps = {
   userinfo: Customer;
@@ -46,6 +52,7 @@ type PageStateProps = {
 type PageDispatchProps = {
   updateUserInfo: (e: UserState) => void;
   updateServiceList: (e: Service[]) => void;
+  updateShowerControlConfig: (e: ControllerResponse) => void;
 };
 
 type BeanAccount = {
@@ -77,6 +84,9 @@ interface Home {
     updateServiceList(entity: Service[]) {
       dispatch(updateServiceList(entity));
     },
+    updateShowerControlConfig(e: ControllerResponse) {
+      dispatch(updateShowerControlConfig(e));
+    },
   }),
 )
 class Home extends Component {
@@ -182,11 +192,35 @@ class Home extends Component {
     });
   }
 
-  goShower() {
-    Taro.navigateTo({
-      url: '/pages/Shower/Shower',
-    });
-  }
+  goShower = () => {
+    const { userinfo } = this.props;
+    getShowerController({
+      campusId: userinfo.areaId,
+      customerId: userinfo.customerId,
+    })
+      .then(res => {
+        let data = res.data;
+        updateShowerControlConfig(res.data);
+        let type =
+          data.useType === ShowerUseType.mix ? data.defaultType : data.useType;
+        if (type === ShowerUseType.bluetooth) {
+          Taro.navigateTo({
+            url: '/pages/Shower/Shower',
+          });
+        } else {
+          Taro.navigateTo({
+            url: '/pages/Shower/ShowerAppointment',
+          });
+        }
+      })
+      .catch(err => {
+        console.log('getShowerController err:', err);
+        Taro.showToast({
+          title: err.msg || '网络错误',
+          icon: 'none',
+        });
+      });
+  };
 
   goDispenser() {
     Taro.navigateTo({

src/pages/Login/Login.scss

 .Login {
   height: 100%;
-  background: linear-gradient(180deg, #486dec, #b3b8fc);
+  background: linear-gradient(145deg, #486dec, #b3b8fc);
   overflow: hidden;
   padding: 0 32px;
   .Login-title {

src/pages/Shower/Shower.tsx

@@ -659,7 +659,7 @@ class Shower extends Component {
     });
   }
 
-  checkUserMonry() {
+  checkUserMoney() {
     const { userinfo } = this.props;
     return getShowerController({
       customerId: userinfo.customerId,
@@ -727,7 +727,7 @@ class Shower extends Component {
     if (!sockedDone) {
       this.connectDeviceSocket();
     }
-    this.checkUserMonry()
+    this.checkUserMoney()
       .then(() => this.startDevicesDiscovery())
       .then((deviceId: string) => this.createConnection(deviceId))
       .then(this.getDeviceServices)

src/pages/Shower/ShowerAppointment.scss

+.ShowerAppointment {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: linear-gradient(180deg, #486dec, #b3b8fc);
+  .ShowerAppointment-Searchbox {
+    height: 100px;
+    margin: 0 40px 28px;
+    background-color: #fff;
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    input {
+      padding-left: 40px;
+      font-size: 24px;
+      flex: 1;
+    }
+    .ShowerAppointment-Searchbox-btn {
+      font-size: 24px;
+      margin: 0 40px;
+      color: #8c95fa;
+    }
+  }
+  .ShowerAppointment-Account {
+    margin: 0 40px 34px;
+    color: #fff;
+    font-size: 28px;
+    display: flex;
+    .ShowerAppointment-Account-item {
+      display: flex;
+      height: 34px;
+      padding: 0 54px;
+      .name {
+        margin-right: 20px;
+      }
+      &:first-child {
+        padding-left: 0;
+      }
+      &:last-child {
+        border-left: 1px solid #7791f1;
+      }
+    }
+  }
+  .ShowerAppointment-Content {
+    box-sizing: border-box;
+    padding: 60px 40px;
+    background-color: #fff;
+    flex: 1;
+    overflow-y: scroll;
+    .ShowerAppointment-Equipment-title {
+      font-size: 32px;
+      color: #333;
+      font-weight: bolder;
+    }
+    .ShowerAppointment-Equipment-info {
+      margin: 8px 0 22px;
+      font-size: 24px;
+      color: #6180f4;
+    }
+  }
+  .ShowerAppointment-AppointmentList {
+    box-sizing: border-box;
+    flex: 1;
+    overflow-y: scroll;
+    padding: 10px 40px 20px;
+  }
+  .ShowerAppointment-Footer {
+    display: flex;
+    background-color: #fff;
+    height: 100px;
+    line-height: 100px;
+    justify-content: space-around;
+    font-size: 32px;
+    color: #999;
+    box-shadow: 0 -5px 5px -7px #bcbcbc;
+    .ShowerAppointment-Footer-item {
+      height: 100%;
+      &.actived {
+        position: relative;
+        color: #456beb;
+      }
+      &.actived::before {
+        content: '';
+        position: absolute;
+        left: 50%;
+        top: 0;
+        height: 4px;
+        width: 44px;
+        background-color: #ffd506;
+        transform: translate(-50%, 0);
+      }
+    }
+  }
+  .ShowerAppointment-ToggleBtn {
+    position: absolute;
+    box-sizing: border-box;
+    text-align: right;
+    right: 0;
+    top: 120px;
+    width: 60px;
+    height: 160px;
+    color: #fff;
+    background-color: #474747;
+    padding: 20px 15px 0;
+    line-height: 30px;
+    border-radius: 16px 0 0 16px;
+  }
+}

src/pages/Shower/ShowerAppointment.tsx

+import './ShowerAppointment.scss';
+import { View, Input, Text, Image, ScrollView } from '@tarojs/components';
+import Taro, { useState, useReducer, useEffect } from '@tarojs/taro';
+import AppointermentCard from './components/AppointermentCard/AppointermentCard';
+import useInputValue from '@/hooks/useInputValue';
+import {
+  getAppointmentDevice,
+  appointingEquipment,
+  ShowerUseType,
+} from '@/api/shower';
+import { useSelector } from '@tarojs/redux';
+import { Customer } from '@/types/Customer/Customer';
+import useDeviceList from './hooks/useDeviceList';
+import AppointermentEquipment from './components/AppointermentEquipment/AppointermentEquipment';
+import useAppointRecordsList from './hooks/useAppointRecordsList';
+import useCheckAppointable from './hooks/useCheckAppointable';
+import { ShowerState } from '@/store/rootReducers/shower';
+
+function ShowerAppointment() {
+  const userInfo = useSelector(
+    (state: { userinfo: Customer }) => state.userinfo,
+  );
+  const showerControlConfig = useSelector(
+    (state: { showerState: ShowerState }) => state.showerState,
+  );
+  const [showState, setShowState] = useState(1);
+  const search = useInputValue('');
+  const [searchString, setSearchString] = useState('');
+
+  const appointableData = useCheckAppointable(
+    userInfo.customerId,
+    userInfo.areaId,
+  );
+
+  const list = useDeviceList(
+    userInfo.areaId,
+    userInfo.customerId,
+    searchString,
+  );
+  const [records, resetRecordList, fetchMoreRecordList] = useAppointRecordsList(
+    userInfo.customerId,
+  );
+
+  const searchEquipment = () => {
+    setSearchString(search.value);
+  };
+  const appointingStart = (deviceCode: string) => {
+    // Taro.showModal({
+    //   title: '',
+    //   content: '',
+    // }).then(res => {
+    //   if(res.confirm){
+
+    //   }
+    // })
+
+    appointingEquipment({
+      account: userInfo.customerId.toString(),
+      phone: userInfo.customerPhone,
+      userId: userInfo.customerId,
+      userName: userInfo.customerName,
+      deviceCode: deviceCode,
+    })
+      .then(res => {
+        console.log(res);
+        Taro.showToast({
+          title: res.msg,
+        });
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  };
+  const goBluetoothShower = () => {
+    Taro.navigateTo({
+      url: '/pages/Shower/Shower',
+    });
+  };
+
+  return (
+    <View className='ShowerAppointment'>
+      {showState == 1 && (
+        <View className='ShowerAppointment-Searchbox'>
+          <Input
+            placeholder='请输入要少选的设备位置'
+            value={search.value}
+            onInput={e => search.onChange(e)}
+          />
+          <Text
+            className='ShowerAppointment-Searchbox-btn'
+            onClick={searchEquipment}>
+            开始筛选
+          </Text>
+        </View>
+      )}
+      {showState == 1 && showerControlConfig.controllerConfigs.balances.length && (
+        <View className='ShowerAppointment-Account'>
+          {showerControlConfig.controllerConfigs.balances.map(item => (
+            <View className='ShowerAppointment-Account-item'>
+              <Text className='name'>{item.serviceName}</Text>
+              <Text>{item.amount.toFixed(2)}</Text>
+            </View>
+          ))}
+        </View>
+      )}
+      {showState == 1 && (
+        <View className='ShowerAppointment-Content'>
+          <View className='ShowerAppointment-Equipment-title'>设备列表</View>
+          <View className='ShowerAppointment-Equipment-info'>
+            {appointableData.message}
+          </View>
+          {list.map(item => (
+            <AppointermentEquipment
+              key={item.code}
+              data={item}
+              appointingStart={appointingStart}
+            />
+          ))}
+        </View>
+      )}
+      {showState == 1 &&
+        showerControlConfig.controllerConfigs.useType === ShowerUseType.mix && (
+          <View
+            className='ShowerAppointment-ToggleBtn'
+            onClick={goBluetoothShower}>
+            自助洗浴
+          </View>
+        )}
+      {showState == 2 && (
+        <ScrollView
+          className='ShowerAppointment-AppointmentList'
+          scrollY
+          scrollWithAnimation
+          lowerThreshold={50}
+          onScrollToLower={fetchMoreRecordList}>
+          {records.map(item => (
+            <AppointermentCard key={item.deviceCode} data={item} />
+          ))}
+        </ScrollView>
+      )}
+
+      <View className='ShowerAppointment-Footer'>
+        <View
+          className={`ShowerAppointment-Footer-item ${
+            showState == 1 ? 'actived' : ''
+          }`}
+          onClick={() => setShowState(1)}>
+          洗浴预约
+        </View>
+        <View
+          className={`ShowerAppointment-Footer-item ${
+            showState == 2 ? 'actived' : ''
+          }`}
+          onClick={() => setShowState(2)}>
+          预约记录
+        </View>
+      </View>
+    </View>
+  );
+}
+ShowerAppointment.onPullDownRefresh = () => {
+  console.log('in onPullDownRefresh');
+};
+
+ShowerAppointment.config = {
+  navigationBarBackgroundColor: '#486dec',
+  navigationBarTitleText: '',
+  backgroundColor: '#486dec',
+};
+export default ShowerAppointment;

src/pages/Shower/components/AppointermentCard/AppointermentCard.scss

+.AppointermentCard {
+  position: relative;
+  box-sizing: border-box;
+  height: 370px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 16px;
+  padding: 50px 48px 0;
+  overflow: hidden;
+  box-shadow: 0 0 5px 0 #eee;
+  &.disabled {
+    background-color: #e7e7e7;
+    .AppointermentCard-Time {
+      background-color: #e2e2e6;
+    }
+    .AppointermentCard-Dis-Icon {
+      position: absolute;
+      width: 262px;
+      height: 246px;
+      right: 0;
+      bottom: 0;
+    }
+  }
+  .AppointermentCard-Title {
+    line-height: 40px;
+    font-size: 32px;
+    font-weight: bold;
+    margin-bottom: 20px;
+  }
+  .AppointermentCard-row {
+    display: flex;
+    line-height: 36px;
+    font-size: 24px;
+    margin-bottom: 10px;
+    &:last-child {
+      margin-bottom: 20px;
+    }
+    text:first-child {
+      margin-right: 16px;
+    }
+    .AppointermentCard-row-location {
+      width: 440px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+  .AppointermentCard-Time {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 96px;
+    line-height: 96px;
+    text-align: center;
+    color: #6180f4;
+    background-color: #fafafe;
+    border-radius: 0 0 16px 16px;
+  }
+}

src/pages/Shower/components/AppointermentCard/AppointermentCard.tsx

+import './AppointermentCard.scss';
+import { View, Text, Image } from '@tarojs/components';
+import DisabledIcon from '../../../../images/shower/img_shixiao@2x.png';
+import { AppointmentRecordsResponse } from '@/api/shower';
+
+type PageOwnProps = {
+  data: AppointmentRecordsResponse;
+};
+
+const AppointermentCard = (props: PageOwnProps) => {
+  const { data } = props;
+  return (
+    <View
+      className={`AppointermentCard ${data.status === 5 ? 'disabled' : ''}`}>
+      <View className='AppointermentCard-Title'>我的预约</View>
+      <View className='AppointermentCard-row'>
+        <Text>设备编码:</Text>
+        <Text>{data.deviceCode}</Text>
+      </View>
+      <View className='AppointermentCard-row'>
+        <Text>设备位置:</Text>
+        <Text className='AppointermentCard-row-location'>
+          {data.deviceLocation}
+        </Text>
+      </View>
+      <View className='AppointermentCard-row'>
+        <Text>预约生效时间:</Text>
+        <Text>{data.appointTime ? data.appointTime : ''}</Text>
+      </View>
+      <View className='AppointermentCard-Time'>
+        <Text>预约失效时间:</Text>
+        <Text>2019-15-24 12:45:31</Text>
+        {/* <Text>{data.expireTime ? data.expireTime : ''}</Text> */}
+      </View>
+      {data.status === 5 && (
+        <Image className='AppointermentCard-Dis-Icon' src={DisabledIcon} />
+      )}
+    </View>
+  );
+};
+
+export default AppointermentCard;

src/pages/Shower/components/AppointermentEquipment/AppointermentEquipment.scss

+.ShowerAppointment-Equipment {
+  position: relative;
+  font-size: 28px;
+  color: #333;
+  height: 158px;
+  background-color: #f7f8fe;
+  border-radius: 16px;
+  padding: 14px 0 0 32px;
+  margin-bottom: 20px;
+  &.disabled {
+    color: #999;
+  }
+  .ShowerAppointment-Equipment-row {
+    display: flex;
+    margin-bottom: 6px;
+    line-height: 44px;
+    .ShowerAppointment-Equipment-name {
+      margin-right: 32px;
+    }
+    .ShowerAppointment-Equipment-value {
+      width: 312px;
+      &.location {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+    }
+  }
+  .ShowerAppointment-Equipment-appoint {
+    position: absolute;
+    top: 50px;
+    right: 0;
+    width: 136px;
+    height: 68px;
+    text-align: center;
+    line-height: 68px;
+    background-color: #e4f3da;
+    color: #6bb11a;
+    font-size: 32px;
+    font-weight: bold;
+    border-radius: 16px 0 0 16px;
+  }
+  .ShowerAppointment-Equipment-disabled {
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    right: 46px;
+    top: 62px;
+  }
+}

src/pages/Shower/components/AppointermentEquipment/AppointermentEquipment.tsx

+import './AppointermentEquipment.scss';
+import { View, Text, Image } from '@tarojs/components';
+import { AppointDeviceResponse } from '@/api/shower';
+import DisabledIcon from '@/images/shower/ic_jinyuyue@2x.png';
+
+type PageOwnProps = {
+  data: AppointDeviceResponse;
+  appointingStart: (deviceCode: string) => void;
+};
+const AppointermentEquipment = (props: PageOwnProps) => {
+  const { data, appointingStart } = props;
+  const clickHandle = () => {
+    appointingStart && appointingStart(data.code);
+  };
+  return (
+    <View
+      className={`ShowerAppointment-Equipment ${
+        data.appointable && !data.inPunishment ? '' : 'disabled'
+      }`}>
+      <View className='ShowerAppointment-Equipment-row'>
+        <Text className='ShowerAppointment-Equipment-name'>设备编码</Text>
+        <Text className='ShowerAppointment-Equipment-value'>{data.code}</Text>
+      </View>
+      <View className='ShowerAppointment-Equipment-row'>
+        <Text className='ShowerAppointment-Equipment-name'>设备位置</Text>
+        <Text className='ShowerAppointment-Equipment-value location'>
+          {data.location}
+        </Text>
+      </View>
+      {data.appointable ? (
+        <View
+          className='ShowerAppointment-Equipment-appoint'
+          onClick={clickHandle}>
+          可预约
+        </View>
+      ) : (
+        <Image
+          className='ShowerAppointment-Equipment-disabled'
+          src={DisabledIcon}
+        />
+      )}
+    </View>
+  );
+};
+
+export default AppointermentEquipment;

src/pages/Shower/hooks/useAppointRecordsList.ts

+import Taro, { useEffect, useState, useReducer } from '@tarojs/taro';
+import {
+  getAppointmentRecords,
+  AppointmentRecordsResponse,
+} from '@/api/shower';
+import Actions from '@/types/Store/Actions';
+
+const reducer = (state: AppointmentRecordsResponse[], action: Actions) => {
+  switch (action.type) {
+    case 'getRecordList':
+      return action.payload;
+    case 'appendRecordList':
+      return [...state, ...action.payload];
+    default:
+      return state;
+  }
+};
+
+const useAppointRecordsList = (
+  userId: number,
+): [AppointmentRecordsResponse[], () => void, () => void] => {
+  const [pageNum, setPageNum] = useState(1);
+  const [list, dispatch] = useReducer(reducer, []);
+
+  const fetchList = (pageNum: number) => {
+    return getAppointmentRecords({
+      userId,
+      pageSize: 10,
+      pageNum,
+    });
+  };
+
+  const fetchMoreList = () => {
+    Taro.showLoading();
+    fetchList(pageNum + 1)
+      .then(res => {
+        Taro.hideLoading();
+        console.log(res);
+        let list = res.data.list;
+        if (list.length) {
+          setPageNum(pageNum + 1);
+          dispatch({ type: 'appendRecordList', payload: res.data.list });
+        }
+      })
+      .catch(err => {
+        console.log(err);
+        Taro.showToast({
+          title: err.msg || '网络错误',
+          icon: 'none',
+        });
+      });
+  };
+
+  const fetchNewList = () => {
+    Taro.showLoading();
+    fetchList(1)
+      .then(res => {
+        Taro.hideLoading();
+        console.log(res);
+        dispatch({ type: 'getRecordList', payload: res.data.list });
+      })
+      .catch(err => {
+        console.log(err);
+        Taro.showToast({
+          title: err.msg || '网络错误',
+          icon: 'none',
+        });
+      });
+  };
+
+  useEffect(() => {
+    fetchNewList();
+  }, [userId]);
+
+  return [list, fetchNewList, fetchMoreList];
+};
+
+export default useAppointRecordsList;

src/pages/Shower/hooks/useCheckAppointable.ts

+import { useEffect, useReducer } from '@tarojs/taro';
+import { getUserAppointableData, UserAppointableData } from '@/api/shower';
+import Actions from '@/types/Store/Actions';
+
+const reducer = (state: UserAppointableData, action: Actions) => {
+  switch (action.type) {
+    case 'getAppointData':
+      return action.payload;
+    default:
+      return state;
+  }
+};
+const initState: UserAppointableData = {
+  appointMode: 0,
+  defaultType: 0,
+  duration: 0,
+  message: '',
+  punishment: 0,
+  useType: 0,
+  userPunishment: 0,
+};
+const useCheckAppointable = (
+  userId: number,
+  campusId: number,
+): UserAppointableData => {
+  const [data, dispatch] = useReducer(reducer, initState);
+  useEffect(() => {
+    getUserAppointableData({
+      userId,
+      campusId,
+    })
+      .then(res => {
+        console.log(res);
+        dispatch({ type: 'getAppointData', payload: res.data });
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  }, [userId, campusId]);
+
+  return data;
+};
+
+export default useCheckAppointable;

src/pages/Shower/hooks/useDeviceList.ts

+import Taro, { useReducer, useEffect } from '@tarojs/taro';
+import Actions from '@/types/Store/Actions';
+import { getAppointmentDevice, AppointDeviceResponse } from '@/api/shower';
+
+const reducer = (state: AppointDeviceResponse[], action: Actions) => {
+  switch (action.type) {
+    case 'updateDeviceList':
+      return action.payload;
+    default:
+      return state;
+  }
+};
+const useDeviceList = (
+  campusId: number,
+  userId: number,
+  location: string,
+): AppointDeviceResponse[] => {
+  const [list, dispatch] = useReducer(reducer, []);
+  // const fetchList = (pageNum: number) => {
+  //   getAppointmentDevice({ location, campusId, userId, pageNum })
+  //     .then(res => {
+  //       Taro.hideLoading();
+  //       dispatch({ type: 'updateDeviceList', payload: res.data.list });
+  //     })
+  //     .catch(err => {
+  //       Taro.showToast({
+  //         title: err.msg || '网络错误',
+  //         icon: 'none',
+  //       });
+  //     });
+  // };
+  // const fetchNewList = () => {};
+  // const fetchMoreList = () => {};
+
+  useEffect(() => {
+    Taro.showLoading();
+    getAppointmentDevice(
+      location ? { location, campusId, userId } : { campusId, userId },
+    )
+      .then(res => {
+        Taro.hideLoading();
+        dispatch({ type: 'updateDeviceList', payload: res.data.list });
+      })
+      .catch(err => {
+        Taro.showToast({
+          title: err.msg || '网络错误',
+          icon: 'none',
+        });
+      });
+  }, [campusId, userId, location]);
+  return list;
+};
+
+export default useDeviceList;

src/store/reducers.ts

@@ -4,6 +4,7 @@ import OrderList from '../pages/Order/OrderList/store';
 import ShowerReducer from '@/pages/Shower/store';
 import serviceList from './rootReducers/service';
 import orderState from './rootReducers/orderState';
+import showerState from './rootReducers/shower';
 
 export default combineReducers({
   userinfo,
@@ -11,4 +12,5 @@ export default combineReducers({
   Shower: ShowerReducer,
   serviceList,
   orderState,
+  showerState,
 });

src/store/rootReducers/shower.ts

+import Actions from '@/types/Store/Actions';
+import { ControllerResponse } from '@/api/shower';
+
+export type ShowerState = {
+  controllerConfigs: ControllerResponse;
+};
+const INITIAL_STATE = {
+  controllerConfigs: {
+    appointmentThresholdPrompt: '',
+    balances: [],
+    beanAmount: 0,
+    defaultType: 0,
+    money: 0,
+    thresholdPrompt: '',
+    thresholdValue: 0,
+    useType: 0,
+  },
+};
+export const updateShowerControlConfig = (
+  entity: ControllerResponse,
+): Actions => ({
+  type: 'UPDATE_SHOWER_CONFIG',
+  payload: entity,
+});
+
+export default function shower(
+  state: ShowerState = INITIAL_STATE,
+  actions: Actions,
+): ShowerState {
+  switch (actions.type) {
+    case 'UPDATE_SHOWER_CONFIG':
+      return {
+        ...state,
+        controllerConfigs: actions.payload,
+      };
+    default:
+      return state;
+  }
+}