添加洗浴切换按钮

src/pages/Shower/Shower.scss

 .Shower {
   padding-top: 126px;
+  .showAppoint {
+    position: absolute;
+    box-sizing: border-box;
+    text-align: right;
+    right: 0;
+    top: 30px;
+    width: 60px;
+    height: 160px;
+    color: #fff;
+    background-color: #474747;
+    padding: 20px 15px 0;
+    line-height: 30px;
+    border-radius: 16px 0 0 16px;
+  }
   .equipment-info-box {
     width: 630px;
     height: 572px;

src/pages/Shower/Shower.tsx

@@ -14,6 +14,8 @@ import {
   fetchUsingShowerInfo,
   getShowerController,
   OperationMode,
+  ControllerResponse,
+  ShowerUseType,
 } from '@/api/shower';
 import { connect, useSelector } from '@tarojs/redux';
 import { Customer } from '@/types/Customer/Customer';
@@ -43,6 +45,7 @@ type DeviceInfo = {
 type PageStateProps = {
   userinfo: Customer;
   bluetoothDevice: BluetoothDevice;
+  showerControlConfig: ControllerResponse;
 };
 type PageDispatchProps = {
   updateBluetoothDevice: (entity: BluetoothDevice) => void;
@@ -56,6 +59,7 @@ type PageState = {
   sockedDone: boolean;
   deviceDone: boolean;
   showerState: boolean;
+  showAppoint: boolean;
 };
 const StopCode = 1000;
 
@@ -68,9 +72,10 @@ let timer: NodeJS.Timeout | null = null;
 let reConnectting: boolean = false;
 let socketTask: Taro.SocketTask | null = null;
 @connect(
-  ({ userinfo, Shower }) => ({
+  ({ userinfo, Shower, showerState }) => ({
     userinfo,
     bluetoothDevice: Shower,
+    showerControlConfig: showerState.controllerConfigs,
   }),
   dispatch => ({
     updateBluetoothDevice(data: BluetoothDevice) {
@@ -99,15 +104,23 @@ class Shower extends Component {
         writeId: '',
         readId: '',
       },
+      showAppoint: false,
     };
   }
 
   onShareAppMessage = shareHandle;
 
   componentWillMount() {
+    // useType;
     this.openBluetooth();
     this.connectDeviceSocket();
     this.checkUsingDevice();
+    const { showerControlConfig } = this.props;
+    if (showerControlConfig.useType === ShowerUseType.mix) {
+      this.setState({
+        showAppoint: true,
+      });
+    }
   }
 
   componentWillUnmount() {
@@ -798,12 +811,17 @@ class Shower extends Component {
         this.closeBluetoothConnection();
       });
   }
+  goAppointShower() {
+    Taro.navigateTo({
+      url: '/pages/Shower/ShowerAppointment',
+    });
+  }
 
   render() {
     const {
       bluetoothDevice: { code, position },
     } = this.props;
-    const { showerState } = this.state;
+    const { showerState, showAppoint } = this.state;
     const payOrderState = useSelector(
       (state: { orderState: PayOrderState }) =>
         state.orderState.waitPayOrderState,
@@ -812,7 +830,11 @@ class Shower extends Component {
     return (
       <View className='Shower'>
         <WaitPayOrderComponent />
-
+        {showAppoint && (
+          <View className='showAppoint' onClick={this.goAppointShower}>
+            预约洗浴
+          </View>
+        )}
         <View className={payOrderState ? 'blur' : ''}>
           <View className='equipment-info-box'>
             <View className='equipment-info'>