|
|
@ -1,14 +1,16 @@ |
|
|
|
import { NavBar, SpinLoading, Toast } from 'antd-mobile'; |
|
|
|
import './Bluetooth.scss'; |
|
|
|
import { useEffect } from 'react'; |
|
|
|
import { useEffect, useState } from 'react'; |
|
|
|
import { useAppDispatch, useAppSelector } from '../utils/hooks'; |
|
|
|
import Bridge from '../utils/bridge'; |
|
|
|
import { updateBleLinkStatus } from '../store/features/contextSlice'; |
|
|
|
import { updateBleLinkStatus, updateBleList } from '../store/features/contextSlice'; |
|
|
|
|
|
|
|
export default function Bluetooth() { |
|
|
|
const dispatch = useAppDispatch(); |
|
|
|
const contextState = useAppSelector((state) => state.context); |
|
|
|
|
|
|
|
const [connectingMac, setConnectingMac] = useState('') |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
Bridge.scanPeripherals().then((res) => { |
|
|
|
if (!res.success) { |
|
|
@ -21,7 +23,9 @@ export default function Bluetooth() { |
|
|
|
}, []); |
|
|
|
|
|
|
|
const onConnect = (mac: string) => { |
|
|
|
setConnectingMac(mac); |
|
|
|
Bridge.connectPeripheral({ mac }).then((res) => { |
|
|
|
setConnectingMac(''); |
|
|
|
if (!res.success) { |
|
|
|
Toast.show(res.message); |
|
|
|
} else { |
|
|
@ -34,7 +38,8 @@ export default function Bluetooth() { |
|
|
|
if (!res.success) { |
|
|
|
Toast.show(res.message); |
|
|
|
} else { |
|
|
|
dispatch(updateBleLinkStatus({ mac, link: false })); |
|
|
|
dispatch(updateBleList([])); // 清空列表
|
|
|
|
// dispatch(updateBleLinkStatus({ mac, link: false }));
|
|
|
|
} |
|
|
|
}); |
|
|
|
}; |
|
|
@ -50,7 +55,7 @@ export default function Bluetooth() { |
|
|
|
<section> |
|
|
|
<div className="h-[42px] px-5 flex items-center justify-between"> |
|
|
|
<h1 className="h-[42px] leading-[42px] text-base text-text font-medium">附近设备</h1> |
|
|
|
{contextState.bleList.some((bl) => bl.linked) ? undefined : scanning()} |
|
|
|
{contextState.bleList.some((bl) => bl.linked) || connectingMac ? undefined : scanning()} |
|
|
|
</div> |
|
|
|
<div className="bg-white px-5 text-sm text-text"> |
|
|
|
{contextState.bleList.map((ble) => ( |
|
|
@ -58,7 +63,7 @@ export default function Bluetooth() { |
|
|
|
key={ble.mac} |
|
|
|
className="py-2 flex items-center border-b border-[#eee]" |
|
|
|
onClick={ |
|
|
|
contextState.bleList.some((bl) => bl.linked) |
|
|
|
contextState.bleList.some((bl) => bl.linked) || connectingMac |
|
|
|
? undefined |
|
|
|
: () => onConnect(ble.mac) |
|
|
|
} |
|
|
@ -68,7 +73,8 @@ export default function Bluetooth() { |
|
|
|
<p className='text-[10px] text-title'>{ble.mac}</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<span className="text-xs text-title ml-3">{ble.linked ? '已连接' : ''}</span> |
|
|
|
<span className="text-xs text-title ml-3">{ble.linked ? '已连接' : connectingMac === ble.mac ? '正在连接' : ''}</span> |
|
|
|
{connectingMac === ble.mac && <div className='ml-auto'><SpinLoading /></div>} |
|
|
|
{ble.linked && ( |
|
|
|
<button |
|
|
|
className="btn-contained px-2 py-1 rounded ml-auto" |
|
|
|