From f3d8949cc8257c7c5b09bb8f464c43b1f32c722e Mon Sep 17 00:00:00 2001 From: blak-kong <546598185@qq.com> Date: Tue, 6 Feb 2024 17:31:39 +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 | 2 +- src/components/popup/popup-countdown.less | 79 +++++++++ src/components/popup/popup-countdown.tsx | 96 +++++++++++ src/pages/index/index.tsx | 3 +- .../iotCarePlan/components/Footer/index.less | 0 .../iotCarePlan/components/Footer/index.tsx | 90 +++++++++++ .../components/ModeContent/index.less | 57 +++++++ .../components/ModeContent/index.tsx | 51 ++++++ .../iotCarePlan/components/ModeList/index.tsx | 15 +- src/pages/iotCarePlan/iotCarePlan.tsx | 151 +++++++++--------- src/pages/user/user.tsx | 2 +- src/store/features/userInfo.js | 3 + 12 files changed, 466 insertions(+), 83 deletions(-) create mode 100644 src/components/popup/popup-countdown.less create mode 100644 src/components/popup/popup-countdown.tsx create mode 100644 src/pages/iotCarePlan/components/Footer/index.less create mode 100644 src/pages/iotCarePlan/components/Footer/index.tsx create mode 100644 src/pages/iotCarePlan/components/ModeContent/index.less create mode 100644 src/pages/iotCarePlan/components/ModeContent/index.tsx diff --git a/src/app.tsx b/src/app.tsx index f8e1d69..610524b 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -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/components/popup/popup-countdown.less b/src/components/popup/popup-countdown.less new file mode 100644 index 0000000..5b33adf --- /dev/null +++ b/src/components/popup/popup-countdown.less @@ -0,0 +1,79 @@ +.countdown-box { + width: 400rpx; + height: 400rpx; + padding: 0; + .countdown-title { + margin-top: 52rpx; + margin-bottom: 60rpx; + font-size: 36rpx; + font-family: PingFang SC; + font-weight: bold; + color: #030000; + line-height: 60rpx; + } + .countdown-content { + display: flex; + justify-content: center; + } +} + +.countdown-popup-loading { + position: relative; +} + +.countdown-popup-loading-time { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 50rpx; + height: 50rpx; + line-height: 50rpx; + margin: auto; + font-size: 54rpx; + text-align: center; + color: #ecf0f3; + font-weight: bold; +} + +.ui-loading__bg { + position: relative; + width: 160rpx; + height: 160rpx; + border-radius: 50%; + background-color: #ecf0f3; + /* background-image: conic-gradient(#3CACFF 100%,#000 0%); */ +} +.ui-loading__bg::before { + content: ""; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 140rpx; + height: 140rpx; + border-radius: 50%; + background-color: #fff; +} + +.ui-loading { + position: absolute; + width: 160rpx; + height: 160rpx; + border-radius: 50%; + background: transparent; + box-sizing: border-box; + border: 10rpx solid #3cacff; + clip-path: polygon(0% 0%, 25% 0%, 50% 50%, 0% 25%); + animation: rotate 1s linear infinite; +} + +@keyframes rotate { + from { + transform: rotateZ(0deg); + } + to { + transform: rotateZ(360deg); + } +} diff --git a/src/components/popup/popup-countdown.tsx b/src/components/popup/popup-countdown.tsx new file mode 100644 index 0000000..4b93551 --- /dev/null +++ b/src/components/popup/popup-countdown.tsx @@ -0,0 +1,96 @@ +import classnames from "classnames"; +import { Component } from "react"; + +import { Block, View, PageMeta } from "@tarojs/components"; + +import { Popup } from "@antmjs/vantui"; + +import "./popup.less"; +import "./popup-countdown.less"; + +/** props + * isShow 是否显示 + * isClose 右上角关闭图标 + * type: 1注册 + * @confirm 关闭回调 + */ +export default class PopupCountdown extends Component { + constructor(props) { + super(props); + this.state = { + name: "倒计时", + }; + } + + async onLoad() {} + componentDidMount() {} + + componentWillUnmount() {} + + componentDidShow() {} + + componentDidHide() {} + + async initData() {} + + onClose = () => { + this.props.close(); + }; + + onConfirm = () => { + this.props.confirm(); + }; + + onClickStop = (e) => { + e.stopPropagation(); + }; + + render() { + let { isShow, isClose, countdown } = this.props; + return ( + + + + {isClose && ( + + )} + + + 启动倒计时 + + + + + + + + {countdown >= 0 && ( + + {countdown} + + )} + + + + + + + ); + } +} diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index 2d34b91..bab8405 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -484,6 +484,7 @@ class Index extends Component { } }; + /** 查询是否可以绑定 */ isBindingSerial = async () => { Taro.showLoading({ title: "请求中...", @@ -503,7 +504,7 @@ class Index extends Component { } Taro.hideLoading(); }; - // 绑定仪器 + /** 调用接口绑定仪器 */ bindingInstrument = async () => { Taro.showLoading({ title: "请求中...", diff --git a/src/pages/iotCarePlan/components/Footer/index.less b/src/pages/iotCarePlan/components/Footer/index.less new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/iotCarePlan/components/Footer/index.tsx b/src/pages/iotCarePlan/components/Footer/index.tsx new file mode 100644 index 0000000..b380f92 --- /dev/null +++ b/src/pages/iotCarePlan/components/Footer/index.tsx @@ -0,0 +1,90 @@ +import Taro from "@tarojs/taro"; +import classnames from "classnames"; +import { Block, View, Image, Text } from "@tarojs/components"; +import { useState, useEffect } from "react"; +import "./index.less"; + +interface Props { + isConnectionBlutoot: boolean; + isShowNurse: boolean; + isStopNurse: boolean; + onEmitStartNurse: Function; // 每次点击item，回调事件和数据给父组件 + onEmitSwitchChange: Function; + onEmitEndPlan: Function; +} +function Index({ + isConnectionBlutoot, + isShowNurse, + isStopNurse, + onEmitStartNurse, + onEmitSwitchChange, + onEmitEndPlan, +}: Props) { + const onStartNurse = () => { + onEmitStartNurse(); + }; + + const onSwitchChange = () => { + onEmitSwitchChange(); + }; + + const onEndPlan = () => { + onEmitEndPlan(); + }; + + return ( + + + {!isShowNurse && ( + + {isConnectionBlutoot ? ( + + 开始护理 + + ) : ( + + 开始护理 + + )} + + )} + {isShowNurse && ( + + + {isStopNurse ? ( + + + 暂停光照 + + ) : ( + + + 开始光照 + + )} + + + + + 结束护理 + + + )} + + + ); +} + +export default Index; diff --git a/src/pages/iotCarePlan/components/ModeContent/index.less b/src/pages/iotCarePlan/components/ModeContent/index.less new file mode 100644 index 0000000..a991d6f --- /dev/null +++ b/src/pages/iotCarePlan/components/ModeContent/index.less @@ -0,0 +1,57 @@ +.modelInfo-box { + width: 690rpx; + margin: 26rpx auto 0; + padding: 37rpx 35rpx; + background-color: #fff; + box-sizing: border-box; + border-radius: 30rpx; + overflow: visible; + margin-bottom: 150rpx; + .modelInfo-line { + margin-bottom: 50rpx; + &:last-child { + margin-bottom: 0; + .modelInfo-title { + margin-bottom: 6rpx; + } + } + .modelInfo-title { + margin-bottom: 24rpx; + font-size: 28rpx; + font-weight: bold; + line-height: 1; + color: #000; + } + + .modelInfo-effect { + font-size: 26rpx; + line-height: 1; + color: #000; + } + + .modelInfo-light-box { + display: flex; + flex-wrap: wrap; + .modelInfo-light-item { + display: flex; + align-items: center; + margin-right: 40rpx; + margin-top: 20rpx; + /*margin-bottom: 20rpx;*/ + } + + .modelInfo-light-color { + width: 12rpx; + height: 12rpx; + margin-right: 10rpx; + background-color: #f2c95b; + border-radius: 50%; + } + + .modelInfo-light-colorname { + font-size: 26rpx; + line-height: 1; + } + } + } +} diff --git a/src/pages/iotCarePlan/components/ModeContent/index.tsx b/src/pages/iotCarePlan/components/ModeContent/index.tsx new file mode 100644 index 0000000..e34cf02 --- /dev/null +++ b/src/pages/iotCarePlan/components/ModeContent/index.tsx @@ -0,0 +1,51 @@ +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 { + isShowNurse: boolean; + ActiveModeItem: any; +} +function Index({ isShowNurse, ActiveModeItem }: Props) { + const ModeColor = { + "590nm": "#CF231D", + "630nm": "#CF231D", + "830nm": "#9C1D17", + }; + return ( + + {isShowNurse && ( + + + 模式功效 + {ActiveModeItem.modeDesc} + + + 当前输出技术 + + {ActiveModeItem.combineData.map((item) => { + return ( + + + + {item.effectContent}({item.technologyInfo}) + + + ); + })} + + + + )} + + ); +} + +export default Index; diff --git a/src/pages/iotCarePlan/components/ModeList/index.tsx b/src/pages/iotCarePlan/components/ModeList/index.tsx index d1d4f0c..8bce79c 100644 --- a/src/pages/iotCarePlan/components/ModeList/index.tsx +++ b/src/pages/iotCarePlan/components/ModeList/index.tsx @@ -7,22 +7,23 @@ import "./index.less"; interface Props { ModeList: any; ModeType: string; // all visor cabin yimeish + ActiveModeItem: any; onEmit: Function; // 每次点击item，回调事件和数据给父组件 } -function Index({ ModeList, ModeType, onEmit }: Props) { +function Index({ ModeList, ModeType, ActiveModeItem, 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(""); - const [activeID, setActiveID] = useState(""); + const [ModeID, setModeID] = useState("mode_" + ActiveModeItem.id); + const [activeID, setActiveID] = useState(ActiveModeItem.id); + + console.log("ModeID", ModeID, activeID); const yimeishClick = (item) => { onEmit(item); - useEffect(() => { - setActiveID(item.id); - setModeID("mode_" + item.id); - }); + setActiveID(item.id); + setModeID("mode_" + item.id); }; const cabinClick = (item) => { diff --git a/src/pages/iotCarePlan/iotCarePlan.tsx b/src/pages/iotCarePlan/iotCarePlan.tsx index a2b9f5c..b249e03 100644 --- a/src/pages/iotCarePlan/iotCarePlan.tsx +++ b/src/pages/iotCarePlan/iotCarePlan.tsx @@ -20,10 +20,13 @@ import { connect } from "react-redux"; /* 公共组件 */ import Navbar from "@/components/navbar/navbar"; +import PopupCountdown from "@/components/popup/popup-countdown"; /* 公共组件 END */ /* 本页组件 */ import ModeListView from "./components/ModeList/index"; +import ModeContent from "./components/ModeContent/index"; +import Footer from "./components/Footer"; /* 本页组件 END */ import { getStorageSync, setStorageSync } from "@/utils/traoAPI"; @@ -41,9 +44,14 @@ class IotCarePlan extends Component { isStopNurse: false, // 是否暂停护理 isEndNurse: false, // 是否结束护理 + // 模式列表 ModeList: [], ModeType: "all", // all visor cabin yimeish - activeModeItem: {}, // 当前选中模式 + ActiveModeItem: {}, // 当前选中模式 + + // 倒计时 + isShowCountdown: false, + countdown: 6, }; } @@ -72,7 +80,18 @@ class IotCarePlan extends Component { }; let res = await InstrumentInfo.modeInfoList(params); if (res.data.code === 200) { - this.setState({ ModeList: res.data.data }); + if (res.data.data.length > 0) { + this.setState({ + ActiveModeItem: res.data.data[0], + ModeList: res.data.data, + }); + + setTimeout(() => { + console.log("ActiveModeItem", this.state.ActiveModeItem); + }); + } else { + this.setState({ ModeList: res.data.data }); + } } }; @@ -81,20 +100,37 @@ class IotCarePlan extends Component { this.setState({ isMusicPlay: !isMusicPlay }); }; + // 开始护理按钮：点击开始，页面进行到下一步 onStartNurse = async () => { this.stepNext(); + return; + let { isConnectionBlutoot } = this.state; + if (isConnectionBlutoot) { + this.stepNext(); + } else { + // todo 提示未连接蓝牙 + } + }; + onSwitchChange = async () => { + // todo + let { isStopNurse } = this.state; + this.setState({ isStopNurse: !isStopNurse }); + }; + onEndPlan = async () => { + // todo }; modeCurrentFun = async (data) => { console.log("modeCurrentFun", data); - this.setState({ activeModeItem: data }); + this.setState({ ActiveModeItem: data }); }; stepNext = () => { // //0未定义（全部） 1面罩模式 2舱体模式 3医美术后 let modeArray = ["all", "visor", "cabin", "yimeish"]; - let modeClass = this.state.activeModeItem.modeClass; + let modeClass = this.state.ActiveModeItem.modeClass; this.setState({ ModeType: modeArray[modeClass] }); + this.setState({ isShowNurse: true }); }; render() { @@ -106,10 +142,14 @@ class IotCarePlan extends Component { isConnectionBlutoot, isShowNurse, isStopNurse, + ActiveModeItem, + isShowCountdown, + countdown, } = this.state; return ( + @@ -128,7 +168,20 @@ class IotCarePlan extends Component { /> )} - - {isShowNurse && ( - - - 模式功效 - - {/* {{basicModeList[modelActiveIndex].desc}} */} - - - - 当前输出技术 - - - - - - - - - )} - - - {!isShowNurse && ( - - {isConnectionBlutoot ? ( - - 开始护理 - - ) : ( - - 开始护理 - - )} - - )} - {isShowNurse && ( - - - {isStopNurse ? ( - - ) : ( - - )} - - 暂停光照 - - - - 结束护理 - - - )} - +