|
|
|
@ -11,9 +11,11 @@ import compass from "./compass.png"; |
|
|
|
import Shops from "../Shops/Shops"; |
|
|
|
import NavBottom from "../../components/NavBottom/NavBottom"; |
|
|
|
import Modal from "react-modal"; |
|
|
|
|
|
|
|
import { Html5Qrcode } from "html5-qrcode"; |
|
|
|
// import vconsole from "vconsole";
|
|
|
|
// const vConsole = new vconsole();
|
|
|
|
export const MallCode = React.createContext(null); |
|
|
|
// const vConsole = new window.VConsole();
|
|
|
|
|
|
|
|
let focusdDevice; |
|
|
|
|
|
|
|
const Index = () => { |
|
|
|
@ -44,6 +46,8 @@ const Index = () => { |
|
|
|
const [end, _setEnd] = useState(null); |
|
|
|
const [doFocus, _setDoFocus] = useState(0); |
|
|
|
const [focusTextClicked, setFocusTextClicked] = useState(false); |
|
|
|
const [showQrcodeModal, setShowQrcodeModal] = useState(false); |
|
|
|
const [qrcodeModalOpened, setQrcodeModalOpened] = useState(false); |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
if (!map) return; |
|
|
|
@ -346,6 +350,7 @@ const Index = () => { |
|
|
|
}, [focusTextClicked]); |
|
|
|
|
|
|
|
const handleEndSet = (end) => { |
|
|
|
if (!start) return setShowQrcodeModal(true); |
|
|
|
setEnd(end); |
|
|
|
map.startNavigate({ |
|
|
|
start, |
|
|
|
@ -353,9 +358,102 @@ const Index = () => { |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
if (qrcodeModalOpened) { |
|
|
|
const html5QrCode = new Html5Qrcode("qrcode-scaner"); |
|
|
|
html5QrCode |
|
|
|
.start( |
|
|
|
{ facingMode: "environment" }, |
|
|
|
{ fps: 10, qrbox: { width: 320, height: 320 } }, |
|
|
|
(code) => { |
|
|
|
try { |
|
|
|
code = decodeURIComponent(code); |
|
|
|
const kvs = code |
|
|
|
.split("?") |
|
|
|
.pop() |
|
|
|
.split("&") |
|
|
|
.map((kv) => kv.split("=")); |
|
|
|
const s = kvs.find(([k]) => k === "s") |
|
|
|
? kvs.find(([k]) => k === "s")[1] |
|
|
|
: ""; |
|
|
|
const startParamList = s.split("_"); |
|
|
|
if (startParamList.length === 3) { |
|
|
|
let [sfloororder, spoint, sname] = startParamList; |
|
|
|
sfloororder = Number(sfloororder); |
|
|
|
spoint = Number(spoint); |
|
|
|
const nxt = { |
|
|
|
isDevice: true, |
|
|
|
name: sname, |
|
|
|
navPoint: spoint, |
|
|
|
yaxis: spoint, |
|
|
|
floorOrder: sfloororder, |
|
|
|
}; |
|
|
|
setStart(nxt); |
|
|
|
setEnd(shop); |
|
|
|
map.startNavigate({ |
|
|
|
start: nxt, |
|
|
|
end: shop, |
|
|
|
}); |
|
|
|
try { |
|
|
|
setQrcodeModalOpened(false); |
|
|
|
setShowQrcodeModal(false); |
|
|
|
html5QrCode.stop(); |
|
|
|
} catch (error) {} |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
window.weui.toast("请扫大屏二维码", { |
|
|
|
className: "toast", |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
) |
|
|
|
.catch(() => { |
|
|
|
window.weui.toast("启动二维码失败", { |
|
|
|
className: "toast", |
|
|
|
}); |
|
|
|
setQrcodeModalOpened(false); |
|
|
|
setShowQrcodeModal(false); |
|
|
|
}); |
|
|
|
return () => { |
|
|
|
try { |
|
|
|
html5QrCode.stop(); |
|
|
|
} catch (error) {} |
|
|
|
}; |
|
|
|
} |
|
|
|
}, [qrcodeModalOpened]); |
|
|
|
|
|
|
|
return ( |
|
|
|
<MallCode.Provider value={mallCode}> |
|
|
|
<div className="index"> |
|
|
|
{showQrcodeModal && ( |
|
|
|
<Modal |
|
|
|
onAfterOpen={() => setQrcodeModalOpened(true)} |
|
|
|
isOpen |
|
|
|
ariaHideApp={false} |
|
|
|
className="ScanModal" |
|
|
|
> |
|
|
|
<div className="border"> |
|
|
|
<div className="scaner"></div> |
|
|
|
<div |
|
|
|
className="container" |
|
|
|
id="qrcode-scaner" |
|
|
|
width="320px" |
|
|
|
height="320px" |
|
|
|
></div> |
|
|
|
</div> |
|
|
|
<div className="qrcodeTip"> |
|
|
|
<div |
|
|
|
className="back" |
|
|
|
onClick={() => { |
|
|
|
setQrcodeModalOpened(false); |
|
|
|
setShowQrcodeModal(false); |
|
|
|
}} |
|
|
|
> |
|
|
|
取消 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</Modal> |
|
|
|
)} |
|
|
|
{!online && ( |
|
|
|
<Modal |
|
|
|
isOpen={!online} |
|
|
|
|
