flossom-miniapp/src/moduleIOT/pages/iotCarePlan/components/Footer/index.tsx

import Taro from "@tarojs/taro";
import classnames from "classnames";
import { Block, View, Image, Text, CoverView } from "@tarojs/components";
import { useState, useEffect } from "react";
import "./index.less";

interface Props {
  isShowNurse: boolean;
  isStopNurse: boolean;
  isDisabled: boolean; // 是否禁用开始暂停按钮：模式与连接设备是否一致
  onEmitStartNurse: Function; // 每次点击item，回调事件和数据给父组件
  onEmitSwitchChange: Function;
  onEmitEndPlan: Function;
  onEmitErrorTips: Function; // 不可点击，提示错误
}
function Index({
  isShowNurse,
  isStopNurse,
  isDisabled,
  onEmitStartNurse,
  onEmitSwitchChange,
  onEmitEndPlan,
  onEmitErrorTips,
}: Props) {
  const onStartNurse = () => {
    onEmitStartNurse();
  };

  const onSwitchChange = () => {
    if (!isDisabled) {
      onEmitSwitchChange();
    }
  };

  const onEndPlan = () => {
    onEmitEndPlan();
  };

  const onErrorTips = () => {
    onEmitErrorTips();
  };

  return (
    <Block>
      <View className="iot-footer">
        {!isShowNurse && (
          <Block>
            {isDisabled ? (
              <View className="btn btn-disable" onClick={onStartNurse}>
                开始护理
              </View>
            ) : (
              <View className="btn" onClick={onStartNurse}>
                开始护理
              </View>
            )}
          </Block>
        )}
        {isShowNurse && (
          <View className="switch-btn-box">
            {!isDisabled && (
              <View className="btn-item border-right" onClick={onSwitchChange}>
                {isStopNurse ? (
                  <Block>
                    <Image
                      className="btn-icon"
                      src={require("@/img/iot/start_nurse.png")}
                      mode="aspectFill"
                    />
                    <Text className="btn-text">启动光照</Text>
                  </Block>
                ) : (
                  <Block>
                    <Image
                      className="btn-icon"
                      src={require("@/img/iot/pause_nurse.png")}
                      mode="aspectFill"
                    />
                    <Text className="btn-text">暂停光照</Text>
                  </Block>
                )}
              </View>
            )}
            {isDisabled && (
              <View
                className="btn-item border-right btn-disable"
                onClick={onErrorTips}
              >
                {isStopNurse ? (
                  <Block>
                    <Image
                      className="btn-icon"
                      style="color: #ccc"
                      src={require("@/img/iot/start_nurse.png")}
                      mode="aspectFill"
                    />
                    <Text className="btn-text" style="color: #ccc">
                      启动光照
                    </Text>
                  </Block>
                ) : (
                  <Block>
                    <Image
                      className="btn-icon"
                      style="color: #ccc"
                      src={require("@/img/iot/pause_nurse.png")}
                      mode="aspectFill"
                    />
                    <Text className="btn-text" style="color: #ccc">
                      暂停光照
                    </Text>
                  </Block>
                )}
              </View>
            )}

            <View className="btn-item" onClick={onEndPlan}>
              <Image
                className="btn-icon"
                src={require("@/img/iot/over_nurse.png")}
                mode="aspectFill"
              />
              <Text className="btn-text">结束护理</Text>
            </View>
          </View>
        )}
      </View>
    </Block>
  );
}

export default Index;