73 lines
3.7 KiB
TypeScript
73 lines
3.7 KiB
TypeScript
import { ScrollView, View } from "@tarojs/components"
|
|
import { memo, useEffect, useState } from "react"
|
|
import Loading from "@/components/loading"
|
|
import style from "./css/popup.module.scss"
|
|
|
|
interface params {
|
|
state: any,
|
|
show: Boolean,
|
|
onClose: (Boolean) => void,
|
|
onLink: (any) => void,
|
|
children?: React.ReactNode
|
|
onOff: () => void,
|
|
onFind: () => void,
|
|
}
|
|
|
|
export default memo(({state, show=false, onClose, onLink, onOff, onFind}:params) => {
|
|
const [popupShow, setPopupShow] = useState(show)
|
|
useEffect(() => {
|
|
setPopupShow(show)
|
|
}, [show])
|
|
const onCloseListener = () => {
|
|
onClose(false)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{
|
|
popupShow&&<View className={style.popup}>
|
|
<View className={style.content}>
|
|
<View className={style.title}>搜索设备</View>
|
|
<View className={style.list}>
|
|
<ScrollView scrollY className={style.scroll}>
|
|
{
|
|
(state.devices&&state.devices.length > 0)&&state?.devices.map(item => {
|
|
return (
|
|
<View className={style.item} onClick={() => onLink(item)}>
|
|
<View>{item.name}</View>
|
|
{
|
|
(!state.connecting&&!state.connected)&&<View >链接</View>||
|
|
(state.connecting&&item.deviceId == state.connecting.deviceId)&&<View className={style.link_ing}>正在链接...</View>||
|
|
(state.connected&&item.deviceId == state.connected.deviceId)&&<View className={style.link_success}>链接成功</View>
|
|
}
|
|
</View>
|
|
)
|
|
})||
|
|
<View className={style.noDevice}>
|
|
{
|
|
(!state.discovering)&& <>
|
|
<View>暂无设备,请按以下条件检查</View>
|
|
<View className={style.n_item}>1.请确保取色仪处于激活状态</View>
|
|
<View className={style.n_item}>2.请确保取色仪没有链接其他设备</View>
|
|
<View className={style.n_item}>3.请打开手机定位</View>
|
|
</>||
|
|
<View>设备搜索中</View>
|
|
}
|
|
|
|
</View>
|
|
|
|
}
|
|
</ScrollView>
|
|
</View>
|
|
{
|
|
state.connected&&<View className={`${style.footer} ${style.footer_off}`} onClick={onOff}>断开链接</View>||
|
|
(!state.connected&&state.discovering)&&<View className={`${style.footer} ${style.finding}`}>搜索中<Loading width={30} color='orange'/></View>||
|
|
<View className={style.footer} onClick={onFind}>重新搜索</View>
|
|
}
|
|
</View>
|
|
<View className={style.mask} onClick={onCloseListener}></View>
|
|
</View>
|
|
}
|
|
</>
|
|
)
|
|
}) |