添加预约后轮询预约状态以及惩罚禁用预约

src/api/shower.ts

@@ -137,7 +137,7 @@ export const getAppointmentDevice = (
 type AppointingParams = {
   account: string;
   // allowEmptyValue: false
-  // 登录账号
+  // 设备登录账号
 
   deviceCode: string;
   // allowEmptyValue: false
@@ -155,7 +155,9 @@ type AppointingParams = {
   // allowEmptyValue: false
   // 用户名称
 };
-export const appointingEquipment = (params: AppointingParams) =>
+export const appointingEquipment = (
+  params: AppointingParams,
+): Promise<ResponseDataEntity<number>> =>
   showerFetch({
     url: '/dcxy/api/shower/appointment/appointing',
     method: 'POST',
@@ -258,3 +260,20 @@ export const getUserAppointableData = (
       params.campusId
     }`,
   });
+
+type AppointResultParams = {
+  recordId: number;
+  userId: number;
+};
+export enum AppointResultRes {
+  appointting = 0,
+  appointSuccess = 1,
+  appointFail = 4,
+}
+export const fetchAppointResult = (
+  params: AppointResultParams,
+): Promise<ResponseDataEntity<AppointResultRes>> =>
+  showerFetch({
+    url: `/dcxy/api/shower/appointment/appointResult/${params.recordId}`,
+    data: params,
+  });

src/pages/Shower/ShowerAppointment.tsx

 import './ShowerAppointment.scss';
 import { View, Input, Text, ScrollView } from '@tarojs/components';
-import Taro, { useState } from '@tarojs/taro';
+import Taro, { useState, useEffect } from '@tarojs/taro';
 import AppointermentCard from './components/AppointermentCard/AppointermentCard';
 import useInputValue from '@/hooks/useInputValue';
 import {
   appointingEquipment,
   ShowerUseType,
   OperationMode,
+  fetchAppointResult,
+  AppointResultRes,
 } from '@/api/shower';
 import { useSelector } from '@tarojs/redux';
 import { Customer } from '@/types/Customer/Customer';
@@ -25,6 +27,8 @@ function ShowerAppointment() {
       state.showerState.controllerConfigs,
   );
   const [showState, setShowState] = useState(1);
+  const [recordId, setRecordId] = useState(0);
+  const [loopResultState, setLoopResultState] = useState(false);
   const search = useInputValue('');
   const [searchString, setSearchString] = useState('');
 
@@ -51,23 +55,87 @@ function ShowerAppointment() {
       mask: true,
     });
     return appointingEquipment({
-      account: userInfo.customerId.toString(),
+      account: userInfo.hardwareAccount,
       phone: userInfo.customerPhone,
       userId: userInfo.customerId,
       userName: userInfo.customerName,
       deviceCode: deviceCode,
     })
       .then(res => {
-        console.log(res);
-        Taro.showToast({
-          title: res.msg,
-        });
+        setRecordId(res.data);
       })
       .catch(err => {
         Taro.hideLoading();
+        Taro.showToast({
+          title: err.msg || '网络错误',
+          icon: 'none',
+          duration: 2000,
+        });
         console.log(err);
       });
   };
+  const startLoopFetchResult = () => {
+    if (loopResultState) {
+      let intervalTime = 1000;
+      fetchAppointResult({
+        userId: userInfo.customerId,
+        recordId,
+      })
+        .then(res => {
+          if (res.data === AppointResultRes.appointting) {
+            setTimeout(() => {
+              startLoopFetchResult();
+            }, intervalTime);
+          } else {
+            setLoopResultState(false);
+            setRecordId(0);
+            if (res.data === AppointResultRes.appointFail) {
+              Taro.showToast({
+                title: res.msg || '预约失败',
+                icon: 'none',
+                duration: 2000,
+              });
+            } else if (res.data === AppointResultRes.appointSuccess) {
+              Taro.showToast({
+                title: res.msg || '预约成功',
+                duration: 2000,
+              });
+            }
+          }
+        })
+        .catch(err => {
+          console.log(err);
+          setTimeout(() => {
+            startLoopFetchResult();
+          }, intervalTime);
+        });
+    } else {
+      Taro.showToast({
+        title: '请求超时',
+        icon: 'none',
+        duration: 2000,
+      });
+    }
+  };
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout | null = null;
+    if (recordId) {
+      setLoopResultState(true);
+      timer = setTimeout(() => {
+        setLoopResultState(false);
+      }, 30000);
+    }
+    return () => {
+      timer && clearTimeout(timer);
+    };
+  }, [recordId]);
+  useEffect(() => {
+    if (loopResultState) {
+      startLoopFetchResult();
+    }
+  }, [loopResultState]);
+
   const appointingStart = (
     deviceCode: string,
     operationMode: number,
@@ -143,7 +211,9 @@ function ShowerAppointment() {
       {showState == 1 && showerControlConfig.balances.length && (
         <View className='ShowerAppointment-Account'>
           {showerControlConfig.balances.map(item => (
-            <View key={item.serviceId} className='ShowerAppointment-Account-item'>
+            <View
+              key={item.serviceId}
+              className='ShowerAppointment-Account-item'>
               <Text className='name'>{item.serviceName}</Text>
               <Text>{item.amount.toFixed(2)}</Text>
             </View>
@@ -160,6 +230,7 @@ function ShowerAppointment() {
             <AppointermentEquipment
               key={item.code}
               data={item}
+              disabled={appointableData.appointMode === 3}
               appointingStart={appointingStart}
             />
           ))}

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

@@ -4,6 +4,7 @@ import { AppointDeviceResponse } from '@/api/shower';
 import DisabledIcon from '@/images/shower/ic_jinyuyue@2x.png';
 
 type PageOwnProps = {
+  disabled: boolean;
   data: AppointDeviceResponse;
   appointingStart: (
     deviceCode: string,
@@ -12,7 +13,7 @@ type PageOwnProps = {
   ) => void;
 };
 const AppointermentEquipment = (props: PageOwnProps) => {
-  const { data, appointingStart } = props;
+  const { data, appointingStart, disabled } = props;
   const clickHandle = () => {
     appointingStart &&
       appointingStart(data.code, data.operationMode, data.location);
@@ -20,7 +21,7 @@ const AppointermentEquipment = (props: PageOwnProps) => {
   return (
     <View
       className={`ShowerAppointment-Equipment ${
-        data.appointable && !data.inPunishment ? '' : 'disabled'
+        data.appointable && !data.inPunishment && !disabled ? '' : 'disabled'
       }`}>
       <View className='ShowerAppointment-Equipment-row'>
         <Text className='ShowerAppointment-Equipment-name'>设备编码</Text>
@@ -32,7 +33,7 @@ const AppointermentEquipment = (props: PageOwnProps) => {
           {data.location}
         </Text>
       </View>
-      {data.appointable ? (
+      {data.appointable && !disabled ? (
         <View
           className='ShowerAppointment-Equipment-appoint'
           onClick={clickHandle}>