高级搜索
This commit is contained in:
@@ -0,0 +1,90 @@
|
||||
import { View } from "@tarojs/components";
|
||||
import { memo, useEffect, useMemo, useState } from "react";
|
||||
import Taro from "@tarojs/taro";
|
||||
import {useBluetooth} from "@/use/contextBlueTooth"
|
||||
import SearchInput from "@/components/searchInput";
|
||||
import Popup from "@/components/bluetooth/Popup"
|
||||
import classnames from "classnames";
|
||||
import styles from "./css/linkBlueTooth.module.scss"
|
||||
|
||||
export default memo(() => {
|
||||
const {state, init, startScan, connect, disconnect} = useBluetooth()
|
||||
|
||||
useEffect(() => {
|
||||
init()
|
||||
}, [])
|
||||
|
||||
const [linkStatus, setLinkStatus] = useState(1)
|
||||
useEffect(() => {
|
||||
if(!state.available) {
|
||||
setLinkStatus(1)
|
||||
} else if(state.available&&state.connected?.name) {
|
||||
setLinkStatus(3)
|
||||
} else {
|
||||
setLinkStatus(2)
|
||||
}
|
||||
console.log('aaa:::',state.connected)
|
||||
}, [state.available, state.connected])
|
||||
|
||||
const linkName = useMemo(() => {
|
||||
return state.connected?.localName||''
|
||||
}, [state.connected])
|
||||
|
||||
//链接设备
|
||||
const onLinkListen = (item) => {
|
||||
if(!state.connected&&!state.connecting)
|
||||
connect(item)
|
||||
}
|
||||
|
||||
const [popupShow, setPopupShow] = useState(false)
|
||||
//显示设备列表
|
||||
const onFindDevice = () => {
|
||||
if(linkStatus == 1) {
|
||||
Taro.showToast({
|
||||
title:'请打开蓝牙',
|
||||
icon:'none'
|
||||
})
|
||||
} else {
|
||||
setPopupShow(true)
|
||||
onFindEven()
|
||||
}
|
||||
|
||||
}
|
||||
const onFindEven = () => {
|
||||
if(!state.discovering&&!state.connected&&!state.connecting)
|
||||
startScan()
|
||||
}
|
||||
|
||||
//断开链接
|
||||
const onDisconnect = () => {
|
||||
disconnect()
|
||||
setPopupShow(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<View className={styles.main}>
|
||||
<SearchInput title="蓝牙设备" showIcon={true}>
|
||||
<View className={styles.bluetooth_link} onClick={onFindDevice}>
|
||||
<View className={classnames(styles.link_status, linkStatus == 3 &&styles.link_statused, linkStatus == 2&&styles.link_statused_no)}></View>
|
||||
{
|
||||
linkStatus == 1&&<View className={classnames(styles.link_name, styles.link_name_no)}>请开启蓝牙</View>||
|
||||
linkStatus == 2&&<View className={classnames(styles.link_name,styles.link_name_no_link) }>未连接设备</View>||
|
||||
linkStatus == 3&&<View className={classnames(styles.link_name)}>{linkName}</View>
|
||||
}
|
||||
</View>
|
||||
</SearchInput>
|
||||
<Popup
|
||||
state={state}
|
||||
show={popupShow}
|
||||
onClose={() => setPopupShow(false)}
|
||||
onLink={item => onLinkListen(item)}
|
||||
onOff={onDisconnect}
|
||||
onFind={onFindEven}
|
||||
/>
|
||||
</View>
|
||||
</>
|
||||
|
||||
);
|
||||
|
||||
})
|
||||
@@ -0,0 +1,73 @@
|
||||
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>
|
||||
}
|
||||
</>
|
||||
)
|
||||
})
|
||||
@@ -0,0 +1,30 @@
|
||||
|
||||
.main{
|
||||
.bluetooth_link{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.link_status{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #f02409;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.link_statused{
|
||||
background: #07C160;
|
||||
}
|
||||
.link_statused_no{
|
||||
background: #f0ec09;
|
||||
}
|
||||
.link_name{
|
||||
font-size: $font_size;
|
||||
margin-left: 20px;
|
||||
|
||||
}
|
||||
.link_name_no{
|
||||
color: #f02409;
|
||||
}
|
||||
.link_name_no_link{
|
||||
color: #f0ec09;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
.popup{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
.mask{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
position: fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
z-index: 9;
|
||||
}
|
||||
.content{
|
||||
z-index: 99;
|
||||
background-color: #fff;
|
||||
width: 75vw;
|
||||
height: 600px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border-radius: 20px;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 28px;
|
||||
.title{
|
||||
text-align: center;
|
||||
margin: 20px;
|
||||
}
|
||||
.list{
|
||||
height: 480px;
|
||||
padding: 0 20px;
|
||||
.scroll{
|
||||
height: 100%;
|
||||
}
|
||||
.item{
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px dashed #ccc;
|
||||
padding: 15px 0;
|
||||
color: #3b3b3b;
|
||||
@mixin link{
|
||||
font-size: 25px;
|
||||
}
|
||||
.link_success{
|
||||
@include link;
|
||||
color: green;
|
||||
}
|
||||
.link_ing {
|
||||
color: orange;
|
||||
}
|
||||
}
|
||||
.noDevice{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #a8a8a8;
|
||||
.n_item{
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
margin-top: 20px;
|
||||
padding: 0 30px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.footer{
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 0 0 10px 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.finding{
|
||||
color: orange;
|
||||
}
|
||||
.footer_off{
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user