From 3369f372660ebacdfcb3128f2a3b1bf12ac6675a Mon Sep 17 00:00:00 2001 From: blak-kong <546598185@qq.com> Date: Mon, 5 Feb 2024 20:45:42 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=B4=E6=97=B6=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app.tsx | 4 +- src/img/iot/mode-switch.png | Bin 0 -> 2374 bytes src/img/{ => iot}/mute_icon.png | Bin src/img/{ => iot}/over_nurse.png | Bin src/img/{ => iot}/pause_nurse.png | Bin src/img/{ => iot}/start_nurse.png | Bin src/img/{ => iot}/start_nurse_off.png | Bin src/img/{ => iot}/volume_icon.png | Bin .../components/ModeList/index.less | 37 ++- .../iotCarePlan/components/ModeList/index.tsx | 253 ++++++++++++------ src/pages/iotCarePlan/iotCarePlan.less | 103 +++++++ src/pages/iotCarePlan/iotCarePlan.tsx | 125 ++++++++- 12 files changed, 426 insertions(+), 96 deletions(-) create mode 100644 src/img/iot/mode-switch.png rename src/img/{ => iot}/mute_icon.png (100%) rename src/img/{ => iot}/over_nurse.png (100%) rename src/img/{ => iot}/pause_nurse.png (100%) rename src/img/{ => iot}/start_nurse.png (100%) rename src/img/{ => iot}/start_nurse_off.png (100%) rename src/img/{ => iot}/volume_icon.png (100%) diff --git a/src/app.tsx b/src/app.tsx index 4ea6abf..f8e1d69 100644 --- a/src/app.tsx +++ b/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 { return; } - // go("/pages/iotCarePlan/iotCarePlan"); + go("/pages/iotCarePlan/iotCarePlan"); // go("/pages/instrument_clickin_upload/index"); // go("/pages/instrument/intro"); // Taro.switchTab({ diff --git a/src/img/iot/mode-switch.png b/src/img/iot/mode-switch.png new file mode 100644 index 0000000000000000000000000000000000000000..5aee737ef577f105bbf71dab812fedc825041c6e GIT binary patch literal 2374 zcmaJ@dpy&7A0K0+^iWI21{4QBh(f^-L$7=Z~l7_j>)lx7Yjq{#?HAKfdXH+q`sjjCCLo zh%RLdiKd#di@!EZHD-__dsUN>oE#|ME)J8&u%sZwjVoq@aEg!>4$?ptH*R+`=mLR2 zEqVTd@<8fVJVz`}#7;4MWAUBq#uhUMy(|NTvRNs8IL~ zEtAv0fAamG!ZQCj35cSBGI5lYqq?{-^TkjSyoVHI$;DECu~@LwMZXBKTr7(aOW+T!`+hE% z@9KT!a=)L8!*{tTRWhi>%l)s*UOG}aXmRD-}nJIfP+l4Wi4#Avo3``^gIdT^(nGt@+VhSe{gVqCb| z-@ej8-L|d-qv?_i^kt+N!p_#0h9sYR2OH}OOqg41{6S!yU`v(`P~~)slSOL^M+aSnl}l361MMpha0`AOEgtaAfxuBWXj?P}-*5 z7uG#n_`Tow(eOM}lKgh)(B?DEIhmV%-;^rzt3I#pZ5IttCR}T)=6LC=~r*|Ou7aLFw+J~MFM%UY@!l*ymLC)$IOb^u<2Pv!%nzqa3kOk&SMsRCl|IPhi*vMR|K zwIi(Y7gD|%tiUOe3cPbEFV)XFrup^`;!_^p71^5Y!z>Zet`!5!^i>19v`iHzjVcol z4ECv2Uoii;uW9{w2QP$Xcge54yCp80W2y7%x8@bX+7w27&wGFCAE1tOccY)3N3#{1 zkLi#USmxf%El$z8Et3#EB|iRylf87azIdcEYRc>LDd-SI+`X2}W;~bmi`v zfi%bR`1EdW=P7i`k<0poh|&>-d8J`nd30pMkQ>DIQQIY#@n!w=PC?PClK`1s!xrDF zXrPQdY9Ts5Z%Aqx56@}To9<3y)jNdoY>E58rX8byD%YIIoht3Cbok5Iu*A0Pt|j%X zqu0|@yn=IQLOocHA5%6wVS8Vuylt|`>1cjlGWTQEHbSoVFHsMz$bvDyu1FdG!4+6d z-G)j+>d_6Wt8Edm6M?^$2Q0*N>wY-h-4@Z_$avbEIp271dOjXOUp5zf5RWx>IM3UE*i+Us^kjBFRP+YE$zbMVjn9M7-gdhqz{?_B zZ5K~-d6P{qn|t=oiq|$~{MQeE68Huk``BfHbYAxYw>@gd5M^&&YoTj$&rJ`fB40a< z4c24Vdq!sJd@9BfWWc00dez item.modeClass === 1); // 面罩模式 let CabinList = ModeList.filter((item) => item.modeClass === 2); // 舱体模式 let YimeishList = ModeList.filter((item) => item.modeClass === 3); // 医美术后 + + const [ModeID, setModeID] = useState(""); + const [activeID, setActiveID] = useState(""); + + 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 ( - {VisorList.length > 0 && ( - - - 面罩模式 - {VisorList.map((item: any, index: any) => { - return ( - - - {item.modeName} - {item.modeDesc} - - - - - - - - - ); - })} + + {ModeList.length > 0 && ModeType !== "all" && ( + + 全部模式 + - - )} - {CabinList.length > 0 && ( - - - 舱体模式 - {CabinList.map((item: any, index: any) => { - return ( - - - {item.title} - {item.time} - - + )} + {VisorList.length > 0 && + (ModeType === "all" || ModeType === "visor") && ( + + + 面罩模式 + {VisorList.map((item: any, index: any) => { + return ( + + + {item.modeName} + {item.modeTime} + + {activeID === item.id && ( + + )} + + + + {activeID === item.id && ( + + + + )} - - - - - - ); - })} - - - )} + ); + })} + + + )} + {CabinList.length > 0 && + (ModeType === "all" || ModeType === "cabin") && ( + + + 舱体模式 + {CabinList.map((item: any, index: any) => { + return ( + + + {item.modeName} + {item.modeTime} + + {activeID === item.id && ( + + )} + + - {YimeishList.length > 0 && ( - - - 医美术后 - {YimeishList.map((item: any, index: any) => { - return ( - - - {item.title} - {item.time} - - + {activeID === item.id && ( + + + + )} - - - - - - ); - })} - - - )} + ); + })} + + + )} + + {YimeishList.length > 0 && + (ModeType === "all" || ModeType === "yimeish") && ( + + + 医美术后 + {YimeishList.map((item: any, index: any) => { + return ( + + + {item.modeName} + {item.modeTime} + + {activeID === item.id && ( + + )} + + + + {activeID === item.id && ( + + + + )} + + ); + })} + + + )} + ); } diff --git a/src/pages/iotCarePlan/iotCarePlan.less b/src/pages/iotCarePlan/iotCarePlan.less index c38ba08..271c249 100644 --- a/src/pages/iotCarePlan/iotCarePlan.less +++ b/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); +} diff --git a/src/pages/iotCarePlan/iotCarePlan.tsx b/src/pages/iotCarePlan/iotCarePlan.tsx index 94ff5a5..a2b9f5c 100644 --- a/src/pages/iotCarePlan/iotCarePlan.tsx +++ b/src/pages/iotCarePlan/iotCarePlan.tsx @@ -35,9 +35,15 @@ class IotCarePlan extends Component { 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 { } }; + 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 ( - - {musicStatus ? ( + + {isMusicPlay ? ( ) : ( )} @@ -99,12 +134,86 @@ class IotCarePlan extends Component { 护理时间：10:00 - WE200电量 + WE200电量： + + + + + - + + + + {isShowNurse && ( + + + 模式功效 + + {/* {{basicModeList[modelActiveIndex].desc}} */} + + + + 当前输出技术 + + + + + + + + + )} + + + {!isShowNurse && ( + + {isConnectionBlutoot ? ( + + 开始护理 + + ) : ( + + 开始护理 + + )} + + )} + {isShowNurse && ( + + + {isStopNurse ? ( + + ) : ( + + )} + + 暂停光照 + + + + 结束护理 + + + )}