|
|
import Taro from "@tarojs/taro";
|
|
|
import classnames from "classnames";
|
|
|
import { Block, View, ScrollView, Image } from "@tarojs/components";
|
|
|
import { useState, useEffect } from "react";
|
|
|
import "./FR200.less";
|
|
|
|
|
|
interface Props {
|
|
|
ModeID: any;
|
|
|
activeModeID: any;
|
|
|
ModeList: any;
|
|
|
ModeType: string; // all base eyes zone permeation sensitive intelligence
|
|
|
isShowNurse: boolean; // 是否已进入护理详情页
|
|
|
isPop: boolean; // 是否弹窗
|
|
|
onEmit: Function; // 每次点击item，回调事件和数据给父组件
|
|
|
onEmitShowAll: Function; // 打开弹窗按钮
|
|
|
onModeLockOpen: Function; // 打开锁定弹窗
|
|
|
}
|
|
|
function Index({
|
|
|
isShowNurse,
|
|
|
isPop,
|
|
|
ModeList,
|
|
|
ModeType,
|
|
|
ModeID,
|
|
|
activeModeID,
|
|
|
onEmit,
|
|
|
onEmitShowAll,
|
|
|
onModeLockOpen,
|
|
|
}: Props) {
|
|
|
let BaseList = ModeList.filter((item) => item.modeClass === 1); // 基础护理
|
|
|
let ZoneList = ModeList.filter((item) => item.modeClass === 2); // 专区护理
|
|
|
let PermeationList = ModeList.filter((item) => item.modeClass === 3); // 专研促渗
|
|
|
let SensitiveList = ModeList.filter((item) => item.modeClass === 4); // 敏感期护理
|
|
|
let IntelligenceList = ModeList.filter((item) => item.modeClass === 5); // 智能测肤
|
|
|
const onItemClick = (item) => {
|
|
|
if (item.lock) {
|
|
|
onModeLockOpen(); // 点击了锁定模式
|
|
|
return;
|
|
|
}
|
|
|
onEmit(item);
|
|
|
};
|
|
|
|
|
|
const showAll = () => {
|
|
|
onEmitShowAll();
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
<Block>
|
|
|
<View className="mode-list-main">
|
|
|
{!isPop && ModeList.length > 0 && isShowNurse && (
|
|
|
<View className="change-all-mode-btn" onClick={showAll}>
|
|
|
<View className="title">全部模式</View>
|
|
|
<Image
|
|
|
className="icon"
|
|
|
src={require("@/img/iot/mode-switch.png")}
|
|
|
/>
|
|
|
</View>
|
|
|
)}
|
|
|
{BaseList.length > 0 &&
|
|
|
(ModeType === "all" || ModeType === "base" || isPop) && (
|
|
|
<ScrollView
|
|
|
className="mode-list-box"
|
|
|
scrollX={true}
|
|
|
scrollIntoView={ModeID} // itemID自动滚动到该元素位置
|
|
|
>
|
|
|
<View className="mode-list">
|
|
|
<View className="mode-item-title">基础护理</View>
|
|
|
{BaseList.map((item: any, index: any) => {
|
|
|
return (
|
|
|
<View
|
|
|
key={"base_" + index}
|
|
|
id={"mode_" + item.id}
|
|
|
className={classnames("mode-item", {
|
|
|
"mode-item-active": activeModeID === item.id,
|
|
|
})}
|
|
|
onClick={onItemClick.bind(this, item)}
|
|
|
>
|
|
|
<View
|
|
|
className={classnames("new", {
|
|
|
"is-new": item.isNew === 1,
|
|
|
})}
|
|
|
>
|
|
|
NEW
|
|
|
</View>
|
|
|
<View className="mode-info">
|
|
|
<View className="mode-info-title">{item.modeName}</View>
|
|
|
<View className="mode-info-time">
|
|
|
{item.modeTimeStr === "00:00"
|
|
|
? "--:--"
|
|
|
: item.modeTimeStr}
|
|
|
</View>
|
|
|
<View
|
|
|
className={classnames("mode-info-select", {
|
|
|
"is-select": activeModeID === item.id,
|
|
|
})}
|
|
|
>
|
|
|
{activeModeID === item.id && (
|
|
|
<View className="mode-info-select-point"></View>
|
|
|
)}
|
|
|
</View>
|
|
|
</View>
|
|
|
|
|
|
{activeModeID === item.id && (
|
|
|
<View className="mode-pic">
|
|
|
<Image
|
|
|
src={item.modeBanner}
|
|
|
mode="aspectFill"
|
|
|
style="animation-iteration-count:1;"
|
|
|
/>
|
|
|
</View>
|
|
|
)}
|
|
|
</View>
|
|
|
);
|
|
|
})}
|
|
|
<View style="width:120rpx;min-width:120rpx;height:40rpx;display:flex"></View>
|
|
|
</View>
|
|
|
</ScrollView>
|
|
|
)}
|
|
|
{ZoneList.length > 0 &&
|
|
|
(ModeType === "all" || ModeType === "zone" || isPop) && (
|
|
|
<ScrollView
|
|
|
className="mode-list-box"
|
|
|
scrollX={true}
|
|
|
scrollIntoView={ModeID}
|
|
|
>
|
|
|
<View className="mode-list">
|
|
|
<View className="mode-item-title">专区护理</View>
|
|
|
{ZoneList.map((item: any, index: any) => {
|
|
|
return (
|
|
|
<View
|
|
|
key={"zone_" + index}
|
|
|
id={"mode_" + item.id}
|
|
|
onClick={onItemClick.bind(this, item)}
|
|
|
className={classnames("mode-item", {
|
|
|
"mode-item-active": activeModeID === item.id,
|
|
|
})}
|
|
|
>
|
|
|
<View
|
|
|
className={classnames("new", {
|
|
|
"is-new": item.isNew === 1,
|
|
|
})}
|
|
|
>
|
|
|
NEW
|
|
|
</View>
|
|
|
<View className="mode-info">
|
|
|
<View className="mode-info-title">{item.modeName}</View>
|
|
|
<View className="mode-info-time">
|
|
|
{item.modeTimeStr}
|
|
|
</View>
|
|
|
<View
|
|
|
className={classnames("mode-info-select", {
|
|
|
"is-select": activeModeID === item.id,
|
|
|
})}
|
|
|
>
|
|
|
{activeModeID === item.id && (
|
|
|
<View className="mode-info-select-point"></View>
|
|
|
)}
|
|
|
</View>
|
|
|
</View>
|
|
|
|
|
|
{activeModeID === item.id && (
|
|
|
<View className="mode-pic">
|
|
|
<Image
|
|
|
src={item.modeBanner}
|
|
|
mode="aspectFill"
|
|
|
style="animation-iteration-count:1;"
|
|
|
/>
|
|
|
</View>
|
|
|
)}
|
|
|
</View>
|
|
|
);
|
|
|
})}
|
|
|
</View>
|
|
|
</ScrollView>
|
|
|
)}
|
|
|
|
|
|
{PermeationList.length > 0 &&
|
|
|
(ModeType === "all" || ModeType === "permeation" || isPop) && (
|
|
|
<ScrollView
|
|
|
className="mode-list-box"
|
|
|
scrollX={true}
|
|
|
scrollIntoView={ModeID}
|
|
|
>
|
|
|
<View className="mode-list">
|
|
|
<View className="mode-item-title">专研促渗</View>
|
|
|
{PermeationList.map((item: any, index: any) => {
|
|
|
return (
|
|
|
<View
|
|
|
key={"permeation_" + index}
|
|
|
id={"mode_" + item.id}
|
|
|
onClick={onItemClick.bind(this, item)}
|
|
|
className={classnames("mode-item", {
|
|
|
"mode-item-active": activeModeID === item.id,
|
|
|
})}
|
|
|
>
|
|
|
<View
|
|
|
className={classnames("new", {
|
|
|
"is-new": item.isNew === 1,
|
|
|
})}
|
|
|
>
|
|
|
NEW
|
|
|
</View>
|
|
|
<View className="mode-info">
|
|
|
<View className="mode-info-title">{item.modeName}</View>
|
|
|
<View className="mode-info-time">
|
|
|
{item.modeTimeStr}
|
|
|
</View>
|
|
|
<View
|
|
|
className={classnames("mode-info-select", {
|
|
|
"is-select": activeModeID === item.id,
|
|
|
})}
|
|
|
>
|
|
|
{activeModeID === item.id && (
|
|
|
<View className="mode-info-select-point"></View>
|
|
|
)}
|
|
|
</View>
|
|
|
</View>
|
|
|
|
|
|
{activeModeID === item.id && (
|
|
|
<View className="mode-pic">
|
|
|
<Image
|
|
|
src={item.modeBanner}
|
|
|
mode="aspectFill"
|
|
|
style="animation-iteration-count:1;"
|
|
|
/>
|
|
|
</View>
|
|
|
)}
|
|
|
</View>
|
|
|
);
|
|
|
})}
|
|
|
</View>
|
|
|
</ScrollView>
|
|
|
)}
|
|
|
|
|
|
{SensitiveList.length > 0 &&
|
|
|
(ModeType === "all" || ModeType === "sensitive" || isPop) && (
|
|
|
<ScrollView
|
|
|
className="mode-list-box"
|
|
|
scrollX={true}
|
|
|
scrollIntoView={ModeID}
|
|
|
>
|
|
|
<View className="mode-list">
|
|
|
<View className="mode-item-title">敏期护理</View>
|
|
|
{PermeationList.map((item: any, index: any) => {
|
|
|
return (
|
|
|
<View
|
|
|
key={"sensitive_" + index}
|
|
|
id={"mode_" + item.id}
|
|
|
onClick={onItemClick.bind(this, item)}
|
|
|
className={classnames("mode-item", {
|
|
|
"mode-item-active": activeModeID === item.id,
|
|
|
})}
|
|
|
>
|
|
|
<View
|
|
|
className={classnames("new", {
|
|
|
"is-new": item.isNew === 1,
|
|
|
})}
|
|
|
>
|
|
|
NEW
|
|
|
</View>
|
|
|
<View className="mode-info">
|
|
|
<View className="mode-info-title">{item.modeName}</View>
|
|
|
<View className="mode-info-time">
|
|
|
{item.modeTimeStr}
|
|
|
</View>
|
|
|
<View
|
|
|
className={classnames("mode-info-select", {
|
|
|
"is-select": activeModeID === item.id,
|
|
|
})}
|
|
|
>
|
|
|
{activeModeID === item.id && (
|
|
|
<View className="mode-info-select-point"></View>
|
|
|
)}
|
|
|
</View>
|
|
|
</View>
|
|
|
|
|
|
{activeModeID === item.id && (
|
|
|
<View className="mode-pic">
|
|
|
<Image
|
|
|
src={item.modeBanner}
|
|
|
mode="aspectFill"
|
|
|
style="animation-iteration-count:1;"
|
|
|
/>
|
|
|
</View>
|
|
|
)}
|
|
|
</View>
|
|
|
);
|
|
|
})}
|
|
|
</View>
|
|
|
</ScrollView>
|
|
|
)}
|
|
|
|
|
|
{IntelligenceList.length > 0 &&
|
|
|
(ModeType === "all" || ModeType === "intelligence" || isPop) && (
|
|
|
<ScrollView
|
|
|
className="mode-list-box"
|
|
|
scrollX={true}
|
|
|
scrollIntoView={ModeID}
|
|
|
>
|
|
|
<View className="mode-list">
|
|
|
<View className="mode-item-title">智能测肤</View>
|
|
|
{IntelligenceList.map((item: any, index: any) => {
|
|
|
return (
|
|
|
<View
|
|
|
key={"intelligence_" + index}
|
|
|
id={"mode_" + item.id}
|
|
|
onClick={onItemClick.bind(this, item)}
|
|
|
className={classnames("mode-item", {
|
|
|
"mode-item-active": activeModeID === item.id,
|
|
|
})}
|
|
|
>
|
|
|
<View
|
|
|
className={classnames("new", {
|
|
|
"is-new": item.isNew === 1,
|
|
|
})}
|
|
|
>
|
|
|
NEW
|
|
|
</View>
|
|
|
<View className="mode-info">
|
|
|
<View className="mode-info-title">{item.modeName}</View>
|
|
|
<View className="mode-info-time">
|
|
|
{item.modeTimeStr}
|
|
|
</View>
|
|
|
<View
|
|
|
className={classnames("mode-info-select", {
|
|
|
"is-select": activeModeID === item.id,
|
|
|
})}
|
|
|
>
|
|
|
{activeModeID === item.id && (
|
|
|
<View className="mode-info-select-point"></View>
|
|
|
)}
|
|
|
</View>
|
|
|
</View>
|
|
|
|
|
|
{activeModeID === item.id && (
|
|
|
<View className="mode-pic">
|
|
|
<Image
|
|
|
src={item.modeBanner}
|
|
|
mode="aspectFill"
|
|
|
style="animation-iteration-count:1;"
|
|
|
/>
|
|
|
</View>
|
|
|
)}
|
|
|
</View>
|
|
|
);
|
|
|
})}
|
|
|
</View>
|
|
|
</ScrollView>
|
|
|
)}
|
|
|
</View>
|
|
|
</Block>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
export default Index;
|