临时提交

src/app.tsx

@@ -8,7 +8,7 @@ import "./app.less";
 
 import { Provider } from "react-redux";
 import store from "./store";
-import './iconfont/iconfont.css'
+import "./iconfont/iconfont.css";
 import "taro-ui/rn/style/components/icon.scss";
 
 import { go } from "./utils/traoAPI";
@@ -24,7 +24,7 @@ class App extends Component<PropsWithChildren> {
       return;
     }
 
-    // go("/pages/iotCarePlan/iotCarePlan");
+    go("/pages/iotCarePlan/iotCarePlan");
     // go("/pages/instrument_clickin_upload/index");
     // go("/pages/instrument/intro");
     // Taro.switchTab({

src/pages/iotCarePlan/components/ModeList/index.less

@@ -1,8 +1,40 @@
+.mode-list-main {
+  position: relative;
+  font-family: PingFang SC;
+  .change-all-mode-btn {
+    position: absolute;
+    top: 10rpx;
+    right: -30rpx;
+    width: 140rpx;
+    height: 160rpx;
+    background-color: #fff;
+    border-radius: 30rpx 0rpx 0rpx 30rpx;
+    box-shadow: 1rpx 2rpx 16rpx 2rpx rgba(97, 97, 97, 0.1);
+    text-align: center;
+    // align-items: center;
+    z-index: 20;
+    box-sizing: border-box;
+    .title {
+      font-size: 26rpx;
+      text-align: center;
+      font-weight: bold;
+      text-align: center;
+      margin-top: 33rpx;
+    }
+    .icon {
+      display: block;
+      width: 36rpx;
+      height: 36rpx;
+      margin: 0 auto;
+      margin-top: 26rpx;
+    }
+  }
+}
 .mode-list-box {
   width: 100%;
   height: 180rpx;
   padding: 10rpx 26rpx;
-  margin-bottom: 20rpx;
+  margin-top: 20rpx;
   background-color: #f2f2f2;
   border-radius: 30rpx;
   box-sizing: border-box;
@@ -46,6 +78,7 @@
           margin-bottom: 4rpx;
           font-size: 26rpx;
           text-align: center;
+          font-weight: bold;
         }
         .mode-info-time {
           margin-bottom: 4rpx;
@@ -81,7 +114,7 @@
       margin-left: 20rpx;
     }
     .mode-item-active {
-      min-width: 300rpx;
+      // min-width: 300rpx;
       padding-right: 11rpx;
       background: linear-gradient(90deg, #efdcc2 0%, #fff2df 100%);
     }

src/pages/iotCarePlan/components/ModeList/index.tsx

@@ -1,103 +1,188 @@
 import Taro from "@tarojs/taro";
+import classnames from "classnames";
 import { Block, View, ScrollView, Image } from "@tarojs/components";
+import { useState, useEffect } from "react";
 import "./index.less";
 
 interface Props {
-  // link: string;
-  // children?: any;
   ModeList: any;
+  ModeType: string; // all visor cabin yimeish
+  onEmit: Function; // 每次点击item，回调事件和数据给父组件
 }
-
-let scrollIntoView = "0";
-
-function Index({ ModeList }: any) {
+function Index({ ModeList, ModeType, onEmit }: Props) {
   let VisorList = ModeList.filter((item) => item.modeClass === 1); // 面罩模式
   let CabinList = ModeList.filter((item) => item.modeClass === 2); // 舱体模式
   let YimeishList = ModeList.filter((item) => item.modeClass === 3); // 医美术后
+
+  const [ModeID, setModeID] = useState<any>("");
+  const [activeID, setActiveID] = useState<any>("");
+
+  const yimeishClick = (item) => {
+    onEmit(item);
+    useEffect(() => {
+      setActiveID(item.id);
+      setModeID("mode_" + item.id);
+    });
+  };
+
+  const cabinClick = (item) => {
+    onEmit(item);
+    setActiveID(item.id);
+    setModeID("mode_" + item.id);
+  };
+
+  const visorClick = (item) => {
+    onEmit(item);
+    setActiveID(item.id);
+    setModeID("mode_" + item.id);
+  };
+
   return (
     <Block>
-      {VisorList.length > 0 && (
-        <ScrollView
-          className="mode-list-box"
-          scroll-x="true"
-          scrollIntoView={scrollIntoView}
-        >
-          <View className="mode-list">
-            <View className="mode-item-title">面罩模式</View>
-            {VisorList.map((item: any, index: any) => {
-              return (
-                <View key={index} className="mode-item mode-item-active">
-                  <View className="mode-info">
-                    <View className="mode-info-title">{item.modeName}</View>
-                    <View className="mode-info-time">{item.modeDesc}</View>
-                    <View className="mode-info-select is-select">
-                      <View className="mode-info-select-point"></View>
-                    </View>
-                  </View>
-                  <View className="mode-pic">
-                    <Image src={item.banner} mode="aspectFill" />
-                  </View>
-                </View>
-              );
-            })}
+      <View className="mode-list-main">
+        {ModeList.length > 0 && ModeType !== "all" && (
+          <View className="change-all-mode-btn">
+            <View className="title">全部模式</View>
+            <Image
+              className="icon"
+              src={require("../../../../img/iot/mode-switch.png")}
+            />
           </View>
-        </ScrollView>
-      )}
-      {CabinList.length > 0 && (
-        <ScrollView
-          className="mode-list-box"
-          scrollX={true}
-          scrollIntoView={scrollIntoView}
-        >
-          <View className="mode-list">
-            <View className="mode-item-title">舱体模式</View>
-            {CabinList.map((item: any, index: any) => {
-              return (
-                <View key={index} className="mode-item  mode-item-active">
-                  <View className="mode-info">
-                    <View className="mode-info-title">{item.title}</View>
-                    <View className="mode-info-time">{item.time}</View>
-                    <View className="mode-info-select is-select">
-                      <View className="mode-info-select-point"></View>
+        )}
+        {VisorList.length > 0 &&
+          (ModeType === "all" || ModeType === "visor") && (
+            <ScrollView
+              className="mode-list-box"
+              scroll-x="true"
+              scrollIntoView={ModeID} // itemID自动滚动到该元素位置
+            >
+              <View className="mode-list">
+                <View className="mode-item-title">面罩模式</View>
+                {VisorList.map((item: any, index: any) => {
+                  return (
+                    <View
+                      key={"visor_" + index}
+                      id={"visor_" + item.id}
+                      className={classnames("mode-item", {
+                        "mode-item-active": activeID === item.id,
+                      })}
+                      onClick={visorClick.bind(this, item)}
+                    >
+                      <View className="mode-info">
+                        <View className="mode-info-title">{item.modeName}</View>
+                        <View className="mode-info-time">{item.modeTime}</View>
+                        <View
+                          className={classnames("mode-info-select", {
+                            "is-select": activeID === item.id,
+                          })}
+                        >
+                          {activeID === item.id && (
+                            <View className="mode-info-select-point"></View>
+                          )}
+                        </View>
+                      </View>
+
+                      {activeID === item.id && (
+                        <View className="mode-pic">
+                          <Image src={item.modeBanner} mode="aspectFill" />
+                        </View>
+                      )}
                     </View>
-                  </View>
-                  <View className="mode-pic">
-                    <Image src={item.banner} mode="aspectFill" />
-                  </View>
-                </View>
-              );
-            })}
-          </View>
-        </ScrollView>
-      )}
+                  );
+                })}
+              </View>
+            </ScrollView>
+          )}
+        {CabinList.length > 0 &&
+          (ModeType === "all" || ModeType === "cabin") && (
+            <ScrollView
+              className="mode-list-box"
+              scrollX={true}
+              scrollIntoView={ModeID}
+            >
+              <View className="mode-list">
+                <View className="mode-item-title">舱体模式</View>
+                {CabinList.map((item: any, index: any) => {
+                  return (
+                    <View
+                      key={"cabin_" + index}
+                      id={"cabin_" + item.id}
+                      onClick={cabinClick.bind(this, item)}
+                      className={classnames("mode-item", {
+                        "mode-item-active": activeID === item.id,
+                      })}
+                    >
+                      <View className="mode-info">
+                        <View className="mode-info-title">{item.modeName}</View>
+                        <View className="mode-info-time">{item.modeTime}</View>
+                        <View
+                          className={classnames("mode-info-select", {
+                            "is-select": activeID === item.id,
+                          })}
+                        >
+                          {activeID === item.id && (
+                            <View className="mode-info-select-point"></View>
+                          )}
+                        </View>
+                      </View>
 
-      {YimeishList.length > 0 && (
-        <ScrollView
-          className="mode-list-box"
-          scrollX={true}
-          scrollIntoView={scrollIntoView}
-        >
-          <View className="mode-list">
-            <View className="mode-item-title">医美术后</View>
-            {YimeishList.map((item: any, index: any) => {
-              return (
-                <View key={index} className="mode-item  mode-item-active">
-                  <View className="mode-info">
-                    <View className="mode-info-title">{item.title}</View>
-                    <View className="mode-info-time">{item.time}</View>
-                    <View className="mode-info-select is-select">
-                      <View className="mode-info-select-point"></View>
+                      {activeID === item.id && (
+                        <View className="mode-pic">
+                          <Image src={item.modeBanner} mode="aspectFill" />
+                        </View>
+                      )}
                     </View>
-                  </View>
-                  <View className="mode-pic">
-                    <Image src={item.banner} mode="aspectFill" />
-                  </View>
-                </View>
-              );
-            })}
-          </View>
-        </ScrollView>
-      )}
+                  );
+                })}
+              </View>
+            </ScrollView>
+          )}
+
+        {YimeishList.length > 0 &&
+          (ModeType === "all" || ModeType === "yimeish") && (
+            <ScrollView
+              className="mode-list-box"
+              scrollX={true}
+              scrollIntoView={ModeID}
+            >
+              <View className="mode-list">
+                <View className="mode-item-title">医美术后</View>
+                {YimeishList.map((item: any, index: any) => {
+                  return (
+                    <View
+                      key={"yimeish_" + index}
+                      id={"yimeish_" + item.id}
+                      onClick={yimeishClick.bind(this, item)}
+                      className={classnames("mode-item", {
+                        "mode-item-active": activeID === item.id,
+                      })}
+                    >
+                      <View className="mode-info">
+                        <View className="mode-info-title">{item.modeName}</View>
+                        <View className="mode-info-time">{item.modeTime}</View>
+                        <View
+                          className={classnames("mode-info-select", {
+                            "is-select": activeID === item.id,
+                          })}
+                        >
+                          {activeID === item.id && (
+                            <View className="mode-info-select-point"></View>
+                          )}
+                        </View>
+                      </View>
+
+                      {activeID === item.id && (
+                        <View className="mode-pic">
+                          <Image src={item.modeBanner} mode="aspectFill" />
+                        </View>
+                      )}
+                    </View>
+                  );
+                })}
+              </View>
+            </ScrollView>
+          )}
+      </View>
     </Block>
   );
 }

src/pages/iotCarePlan/iotCarePlan.less

@@ -2,6 +2,7 @@
   padding: 20rpx 30rpx;
   background: #f8f8f8;
   box-sizing: border-box;
+  min-height: calc(100vh - 180rpx);
   .banner-box {
     position: relative;
     display: block;
@@ -53,3 +54,105 @@
     // background-color: #fff;
   }
 }
+
+.iot-btn-start {
+  width: 690rpx;
+  height: 90rpx;
+  line-height: 90rpx;
+  text-align: center;
+  color: #fff;
+  font-size: 32rpx;
+  background-color: #ccc;
+  border-radius: 45rpx;
+  &.is-connect {
+    background-color: #000;
+  }
+}
+
+.footer {
+  position: fixed;
+  bottom: 0;
+  z-index: 99;
+  display: flex;
+  align-items: baseline;
+  width: 100%;
+  height: 153rpx;
+  background: #ffffff;
+  box-shadow: 0rpx -3rpx 7rpx 1rpx rgba(173, 191, 207, 0.21);
+  padding-bottom: env(safe-area-inset-bottom);
+  box-sizing: border-box;
+  .btn {
+    width: 690rpx;
+    height: 90rpx;
+    background: #000;
+    border-radius: 45rpx;
+    color: #fff;
+    line-height: 90rpx;
+    text-align: center;
+    margin: 21rpx 49rpx 42rpx 30rpx;
+    font-size: 32rpx;
+  }
+
+  .text {
+    display: flex;
+    align-items: center;
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #000;
+  }
+
+  .btn-disable {
+    background-color: #ccc !important; /* 设置按钮背景颜色为灰色 */
+    color: #fff !important; /* 设置按钮文字颜色为白色 */
+    border-color: #ccc !important; /* 设置按钮边框颜色为灰色 */
+  }
+
+  .switch-btn-box {
+    width: 100vw;
+    display: flex;
+    align-items: center;
+    margin-top: 34rpx;
+    .btn-item {
+      height: 70rpx;
+      display: flex;
+      flex: 1;
+      align-items: center;
+      justify-content: center;
+      .btn-icon {
+        width: 36rpx;
+        height: 36rpx;
+        margin-right: 18rpx;
+      }
+      .btn-text {
+        font-size: 32rpx;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: #000000;
+      }
+    }
+    .border-right {
+      border-right: 1px solid #ddd;
+    }
+  }
+}
+
+.battery_icon {
+  width: 8rpx;
+  height: 20rpx;
+  border-radius: 5rpx;
+  & + .battery_icon {
+    margin-left: 8rpx;
+  }
+}
+
+.v1 {
+  background: linear-gradient(0deg, #efdcc2 0%, #fff2df 100%);
+}
+
+.v2 {
+  background: #f8f8f8;
+}
+
+.v3 {
+  background: linear-gradient(0deg, #ff4646, #ff6b6b, #f86f6f, #ff9494);
+}

src/pages/iotCarePlan/iotCarePlan.tsx

@@ -35,9 +35,15 @@ class IotCarePlan extends Component<any, any> {
     super(props);
     this.state = {
       name: "iotCarePlan",
-      musicStatus: false, // 声音播放状态
+      isMusicPlay: false, // 声音播放状态
+      isConnectionBlutoot: false, // 是否已连接蓝牙
+      isShowNurse: false, // 是否开始并显示护理
+      isStopNurse: false, // 是否暂停护理
+      isEndNurse: false, // 是否结束护理
 
       ModeList: [],
+      ModeType: "all", // all visor cabin yimeish
+      activeModeItem: {}, // 当前选中模式
     };
   }
 
@@ -70,25 +76,54 @@ class IotCarePlan extends Component<any, any> {
     }
   };
 
+  changeMusicStatus = () => {
+    let { isMusicPlay } = this.state;
+    this.setState({ isMusicPlay: !isMusicPlay });
+  };
+
+  onStartNurse = async () => {
+    this.stepNext();
+  };
+
+  modeCurrentFun = async (data) => {
+    console.log("modeCurrentFun", data);
+    this.setState({ activeModeItem: data });
+  };
+
+  stepNext = () => {
+    // //0未定义（全部）  1面罩模式 2舱体模式 3医美术后
+    let modeArray = ["all", "visor", "cabin", "yimeish"];
+    let modeClass = this.state.activeModeItem.modeClass;
+    this.setState({ ModeType: modeArray[modeClass] });
+  };
+
   render() {
-    let { name, musicStatus, ModeList } = this.state;
+    let {
+      name,
+      isMusicPlay,
+      ModeList,
+      ModeType,
+      isConnectionBlutoot,
+      isShowNurse,
+      isStopNurse,
+    } = this.state;
     return (
       <Block>
         <Navbar titleSlot="美容仪名字" isBack={true} />
         <View>
           <View className="iot-main">
             <View className="banner-box">
-              <View className="music-btn">
-                {musicStatus ? (
+              <View className="music-btn" onClick={this.changeMusicStatus}>
+                {isMusicPlay ? (
                   <Image
                     className="music-btn_icon"
-                    src={require("../../img/volume_icon.png")}
+                    src={require("../../img/iot/volume_icon.png")}
                     mode="aspectFill"
                   />
                 ) : (
                   <Image
                     className="music-btn_icon"
-                    src={require("../../img/mute_icon.png")}
+                    src={require("../../img/iot/mute_icon.png")}
                     mode="aspectFill"
                   />
                 )}
@@ -99,12 +134,86 @@ class IotCarePlan extends Component<any, any> {
                   <Text>护理时间：10:00</Text>
                 </View>
                 <View className="item">
-                  <Text>WE200电量</Text>
+                  <Text>WE200电量：</Text>
+                  <View className="value flex aitems">
+                    <View className="v3 battery_icon"></View>
+                    <View className="v1 battery_icon"></View>
+                    <View className="v2 battery_icon"></View>
+                  </View>
                 </View>
               </View>
             </View>
 
-            <ModeListView ModeList={ModeList} />
+            <ModeListView
+              ModeList={ModeList}
+              ModeType={ModeType}
+              onEmit={this.modeCurrentFun}
+            />
+          </View>
+
+          {isShowNurse && (
+            <View className="modelInfo-box">
+              <View className="modelInfo-line is-effect">
+                <View className="modelInfo-title">模式功效</View>
+                <View className="modelInfo-effect">
+                  {/* {{basicModeList[modelActiveIndex].desc}} */}
+                </View>
+              </View>
+              <View className="modelInfo-line">
+                <View className="modelInfo-title">当前输出技术</View>
+                <View className="modelInfo-light-box">
+                  <View className="modelInfo-light-item">
+                    <View className="modelInfo-light-color"></View>
+                    <View className="modelInfo-light-colorname"></View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          )}
+
+          <View className="footer">
+            {!isShowNurse && (
+              <Block>
+                {isConnectionBlutoot ? (
+                  <View className="btn" onClick={this.onStartNurse}>
+                    开始护理
+                  </View>
+                ) : (
+                  <View className="btn btn-disable" onClick={this.onStartNurse}>
+                    开始护理
+                  </View>
+                )}
+              </Block>
+            )}
+            {isShowNurse && (
+              <View className="switch-btn-box">
+                <View className="btn-item border-right">
+                  {isStopNurse ? (
+                    <Image
+                      className="btn-icon"
+                      src={require("../../img/iot/pause_nurse.png")}
+                      mode="aspectFill"
+                    />
+                  ) : (
+                    <Image
+                      className="btn-icon"
+                      src={require("../../img/iot/start_nurse.png")}
+                      mode="aspectFill"
+                    />
+                  )}
+
+                  <Text className="btn-text">暂停光照</Text>
+                </View>
+                <View className="btn-item">
+                  <Image
+                    className="btn-icon"
+                    src={require("../../img/iot/over_nurse.png")}
+                    mode="aspectFill"
+                  />
+                  <Text className="btn-text">结束护理</Text>
+                </View>
+              </View>
+            )}
           </View>
         </View>
       </Block>