Browse Source

fix: 蓝牙手动搜索

master
guoapeng 2 months ago
parent
commit
47af9e01f3
  1. 51
      src/pages/Bluetooth.tsx
  2. 14
      src/pages/Mine2.tsx

51
src/pages/Bluetooth.tsx

@ -1,4 +1,4 @@
import { NavBar, SpinLoading, Toast } from 'antd-mobile';
import {Button, NavBar, SpinLoading, Toast} from 'antd-mobile';
import './Bluetooth.scss'; import './Bluetooth.scss';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { useAppDispatch, useAppSelector } from '../utils/hooks'; import { useAppDispatch, useAppSelector } from '../utils/hooks';
@ -7,16 +7,19 @@ import { updateBleLinkStatus, updateBleList } from '../store/features/contextSli
export default function Bluetooth() { export default function Bluetooth() {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const device = useAppSelector((state) => state.context.device);
const contextState = useAppSelector((state) => state.context); const contextState = useAppSelector((state) => state.context);
const [connectingMac, setConnectingMac] = useState('') const [connectingMac, setConnectingMac] = useState('')
const [scanVisible , setScanVisible] = useState(false);
useEffect(() => { useEffect(() => {
Bridge.scanPeripherals().then((res) => {
if (!res.success) {
Toast.show(res.message);
}
});
// Bridge.scanPeripherals().then((res) => {
// if (!res.success) {
// Toast.show(res.message);
// }else {
// setScanVisible(true)
// }
// });
return () => { return () => {
Bridge.stopScanPeripherals().then((res) => {}); Bridge.stopScanPeripherals().then((res) => {});
}; };
@ -30,6 +33,7 @@ export default function Bluetooth() {
Toast.show(res.message); Toast.show(res.message);
} else { } else {
dispatch(updateBleLinkStatus({ mac, link: true })); dispatch(updateBleLinkStatus({ mac, link: true }));
scanStop()
} }
}); });
}; };
@ -43,8 +47,25 @@ export default function Bluetooth() {
} }
}); });
}; };
function scanning() {
return <div className='flex items-center gap-x-3'><p></p><SpinLoading /></div>
const scanStart = () => {
Bridge.scanPeripherals().then((res) => {
if (!res.success) {
Toast.show(res.message);
}else {
setScanVisible(true)
}
});
}
const scanStop = () => {
Bridge.stopScanPeripherals().then((res) => {
if (!res.success) {
Toast.show(res.message);
}else {
setScanVisible(false)
}
});
} }
return ( return (
<div> <div>
@ -55,7 +76,9 @@ export default function Bluetooth() {
<section> <section>
<div className="h-[42px] px-5 flex items-center justify-between"> <div className="h-[42px] px-5 flex items-center justify-between">
<h1 className="h-[42px] leading-[42px] text-base text-text font-medium"></h1> <h1 className="h-[42px] leading-[42px] text-base text-text font-medium"></h1>
{contextState.bleList.some((bl) => bl.linked) || connectingMac ? undefined : scanning()}
{scanVisible ?
<div className='flex items-center gap-x-3'><SpinLoading /><Button size='small' color='primary' onClick={scanStop}></Button></div>
: <div className='flex items-center gap-x-3'><Button size='small' color='primary' onClick={scanStart}></Button></div>}
</div> </div>
<div className="bg-white px-5 text-sm text-text"> <div className="bg-white px-5 text-sm text-text">
{contextState.bleList.map((ble) => ( {contextState.bleList.map((ble) => (
@ -63,8 +86,8 @@ export default function Bluetooth() {
key={ble.mac} key={ble.mac}
className="py-2 flex items-center border-b border-[#eee]" className="py-2 flex items-center border-b border-[#eee]"
onClick={ onClick={
contextState.bleList.some((bl) => bl.linked) || connectingMac
? undefined
device.connected
? undefined
: () => onConnect(ble.mac) : () => onConnect(ble.mac)
} }
> >
@ -73,9 +96,9 @@ export default function Bluetooth() {
<p className='text-[10px] text-title'>{ble.mac}</p> <p className='text-[10px] text-title'>{ble.mac}</p>
</div> </div>
<span className="text-xs text-title ml-3">{ble.linked ? '已连接' : connectingMac === ble.mac ? '正在连接' : ''}</span>
<span className="text-xs text-title ml-3">{device.connected && ble.linked ? '已连接' : connectingMac === ble.mac ? '正在连接' : ''}</span>
{connectingMac === ble.mac && <div className='ml-auto'><SpinLoading /></div>} {connectingMac === ble.mac && <div className='ml-auto'><SpinLoading /></div>}
{ble.linked && (
{device.connected && ble.linked && (
<button <button
className="btn-contained px-2 py-1 rounded ml-auto" className="btn-contained px-2 py-1 rounded ml-auto"
onClick={() => onDisconnect(ble.mac)} onClick={() => onDisconnect(ble.mac)}

14
src/pages/Mine2.tsx

@ -1,4 +1,4 @@
import { List, NavBar, SpinLoading, Toast } from 'antd-mobile';
import {Dialog, List, NavBar, SpinLoading, Toast} from 'antd-mobile';
import { UnorderedListOutline, SetOutline, UploadOutline, LoopOutline } from 'antd-mobile-icons'; import { UnorderedListOutline, SetOutline, UploadOutline, LoopOutline } from 'antd-mobile-icons';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
@ -11,10 +11,16 @@ export default function Mine2() {
const baseState = useAppSelector((state) => state.baseData); const baseState = useAppSelector((state) => state.baseData);
const onSync = async () => { const onSync = async () => {
const res = await dispatch(syncBaseData()).unwrap();
if (!res.success) {
Toast.show(res.message);
const result = await Dialog.confirm({
content: '是否确认同步',
})
if (result) {
const res = await dispatch(syncBaseData()).unwrap();
if (!res.success) {
Toast.show(res.message);
}
} }
}; };
return ( return (

Loading…
Cancel
Save