huangmh
/
base_qmgo_react
1
0
Fork 0
Code Issues Pull Requests Projects Releases 62 Wiki Activity
Browse Source

feat: 替换扫码方式

pull/3/head
jiannibang 3 years ago
parent
95e11b8560
commit
e953aa8998
3 changed files with 94 additions and 73 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      package.json
  2. 116
      src/pages/Index/Index.js
  3. 49
      yarn.lock

2
package.json
View File

@ -14,7 +14,6 @@
"apollo-link-http": "^1.5.17",
"axios": "^0.21.1",
"graphql": "^15.5.0",
"html5-qrcode": "^2.3.0",
"node-sass": "^5.0.0",
"qrcodejs2": "^0.0.2",
"react": "^17.0.1",
@ -22,6 +21,7 @@
"react-infinite-scroller": "^1.2.4",
"react-lazy-load-image-component": "^1.5.1",
"react-modal": "^3.12.1",
"react-qr-reader": "^3.0.0-beta-1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"vconsole": "^3.4.0",

116
src/pages/Index/Index.js
View File

@ -11,7 +11,7 @@ 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 { QrReader } from "react-qr-reader";
// import vconsole from "vconsole";
// const vConsole = new vconsole();
export const MallCode = React.createContext(null);
@ -359,70 +359,46 @@ const Index = () => {
end,
});
};
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);
const handleQrcodeResult = (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,
});
return () => {
try {
html5QrCode.stop();
setQrcodeModalOpened(false);
setShowQrcodeModal(false);
} catch (error) {}
};
}
} catch (error) {
window.weui.toast("请扫大屏二维码", {
className: "toast",
});
}
}, [qrcodeModalOpened]);
};
return (
<MallCode.Provider value={mallCode}>
@ -436,12 +412,20 @@ const Index = () => {
>
<div className="border">
<div className="scaner"></div>
<div
<QrReader
constraints={{ facingMode: "environment" }}
className="container"
id="qrcode-scaner"
width="320px"
height="320px"
></div>
onResult={(result, error) => {
if (!!result) {
handleQrcodeResult(result?.text);
}
if (!!error) {
console.info(error);
}
}}
videoStyle={{ objectFit: "cover" }}
></QrReader>
</div>
<div className="qrcodeTip">
<div

49
yarn.lock
View File

@ -2198,6 +2198,27 @@
resolved "https://registry.npm.taobao.org/@xtuc/long/download/@xtuc/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
integrity sha1-0pHGpOl5ibXGHZrPOWrk/hM6cY0=
"@zxing/browser@0.0.7":
version "0.0.7"
resolved "https://registry.npmmirror.com/@zxing/browser/-/browser-0.0.7.tgz#5fa7680a867b660f48d3288fdf63e0174ad531c7"
integrity sha512-AepzMgDnD6EjxewqmXpHJsi4S3Gw9ilZJLIbTf6fWuWySEcHBodnGu3p7FWlgq1Sd5QyfPhTum5z3CBkkhMVng==
optionalDependencies:
"@zxing/text-encoding" "^0.9.0"
"@zxing/library@^0.18.3":
version "0.18.6"
resolved "https://registry.npmmirror.com/@zxing/library/-/library-0.18.6.tgz#717af8c6c1fd982865e21051afdd7b470ae6674c"
integrity sha512-bulZ9JHoLFd9W36pi+7e7DnEYNJhljYjZ1UTsKPOoLMU3qtC+REHITeCRNx40zTRJZx18W5TBRXt5pq2Uopjsw==
dependencies:
ts-custom-error "^3.0.0"
optionalDependencies:
"@zxing/text-encoding" "~0.9.0"
"@zxing/text-encoding@^0.9.0", "@zxing/text-encoding@~0.9.0":
version "0.9.0"
resolved "https://registry.npmmirror.com/@zxing/text-encoding/-/text-encoding-0.9.0.tgz#fb50ffabc6c7c66a0c96b4c03e3d9be74864b70b"
integrity sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==
abab@^2.0.3:
version "2.0.5"
resolved "https://registry.npm.taobao.org/abab/download/abab-2.0.5.tgz#c0b678fb32d60fc1219c784d6a826fe385aeb79a"
@ -5499,7 +5520,7 @@ fsevents@^1.2.7:
bindings "^1.5.0"
nan "^2.12.1"
fsevents@^2.1.2, fsevents@^2.1.3, fsevents@~2.3.1:
fsevents@^2.1.2, fsevents@^2.1.3, fsevents@~2.3.1, fsevents@~2.3.2:
version "2.3.2"
resolved "https://registry.npm.taobao.org/fsevents/download/fsevents-2.3.2.tgz?cache=0&sync_timestamp=1612536422255&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffsevents%2Fdownload%2Ffsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
integrity sha1-ilJveLj99GI7cJ4Ll1xSwkwC/Ro=
@ -5947,11 +5968,6 @@ html-webpack-plugin@4.5.0:
tapable "^1.1.3"
util.promisify "1.0.0"
html5-qrcode@^2.3.0:
version "2.3.4"
resolved "https://registry.npmmirror.com/html5-qrcode/-/html5-qrcode-2.3.4.tgz#7e2b4575a23b10ff5e26d2bf147c8027c1ece389"
integrity sha512-VPZrOTG8XR9HmIAhSSiGtJVPErZxKy/DuGc9cPQLburCWZEbvxQGJP9y4K4P+8vdalLtYB/vM5YP1BdWQKZ8jQ==
htmlparser2@^3.10.1:
version "3.10.1"
resolved "https://registry.npm.taobao.org/htmlparser2/download/htmlparser2-3.10.1.tgz?cache=0&sync_timestamp=1607394274032&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhtmlparser2%2Fdownload%2Fhtmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
@ -9818,6 +9834,15 @@ react-native-swipeout@^2.2.2:
prop-types "^15.5.10"
react-tween-state "^0.1.5"
react-qr-reader@^3.0.0-beta-1:
version "3.0.0-beta-1"
resolved "https://registry.npmmirror.com/react-qr-reader/-/react-qr-reader-3.0.0-beta-1.tgz#e04a20876409313439959d8e0ea6df3ba6e36d68"
integrity sha512-5HeFH9x/BlziRYQYGK2AeWS9WiKYZtGGMs9DXy3bcySTX3C9UJL9EwcPnWw8vlf7JP4FcrAlr1SnZ5nsWLQGyw==
dependencies:
"@zxing/browser" "0.0.7"
"@zxing/library" "^0.18.3"
rollup "^2.67.2"
react-refresh@^0.8.3:
version "0.8.3"
resolved "https://registry.npm.taobao.org/react-refresh/download/react-refresh-0.8.3.tgz?cache=0&sync_timestamp=1614183930570&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact-refresh%2Fdownload%2Freact-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
@ -10545,6 +10570,13 @@ rollup@^1.31.1:
"@types/node" "*"
acorn "^7.1.0"
rollup@^2.67.2:
version "2.79.1"
resolved "https://registry.npmmirror.com/rollup/-/rollup-2.79.1.tgz#bedee8faef7c9f93a2647ac0108748f497f081c7"
integrity sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==
optionalDependencies:
fsevents "~2.3.2"
rsvp@^4.8.4:
version "4.8.5"
resolved "https://registry.npm.taobao.org/rsvp/download/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
@ -11706,6 +11738,11 @@ tryer@^1.0.1:
resolved "https://registry.npm.taobao.org/tryer/download/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
integrity sha1-8shUBoALmw90yfdGW4HqrSQSUvg=
ts-custom-error@^3.0.0:
version "3.3.1"
resolved "https://registry.npmmirror.com/ts-custom-error/-/ts-custom-error-3.3.1.tgz#8bd3c8fc6b8dc8e1cb329267c45200f1e17a65d1"
integrity sha512-5OX1tzOjxWEgsr/YEUWSuPrQ00deKLh6D7OTWcvNHm12/7QPyRh8SYpyWvA4IZv8H/+GQWQEh/kwo95Q9OVW1A==
ts-invariant@^0.4.0:
version "0.4.4"
resolved "https://registry.npm.taobao.org/ts-invariant/download/ts-invariant-0.4.4.tgz#97a523518688f93aafad01b0e80eb803eb2abd86"

Write Preview
Loading…
Cancel
Save