diff --git a/src/pages/Index/Index.js b/src/pages/Index/Index.js
index 6f82d31..4a48292 100644
--- a/src/pages/Index/Index.js
+++ b/src/pages/Index/Index.js
@@ -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}
diff --git a/src/pages/Index/Index.scss b/src/pages/Index/Index.scss
index 31d4675..18f6dc3 100644
--- a/src/pages/Index/Index.scss
+++ b/src/pages/Index/Index.scss
@@ -19,6 +19,88 @@ body {
     z-index: 1;
   }
 }
+.ScanModal {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.8);
+  z-index: 100000;
+  @keyframes scaner {
+    0% {
+      top: -74px;
+    }
+    100% {
+      top: 320px;
+    }
+  }
+  .border {
+    position: absolute;
+    top: 16px;
+    left: 0;
+    right: 0;
+    margin: auto;
+    width: 320px;
+    height: 320px;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &::after {
+      position: absolute;
+      content: "";
+      top: 0;
+      left: 0;
+      width: 320px;
+      height: 320px;
+      background: center / cover no-repeat url(./border.svg);
+      z-index: 2;
+    }
+    .scaner {
+      position: absolute;
+      left: 0;
+      right: 0;
+      width: 320px;
+      height: 74px;
+      background: center / cover no-repeat url(./scaner.svg);
+      animation: 1s scaner infinite ease-in-out;
+      z-index: 3;
+    }
+    .container {
+      width: 320px;
+      height: 320px;
+      overflow: hidden;
+      z-index: 1;
+    }
+  }
+  .qrcodeTip {
+    position: absolute;
+    bottom: 34px;
+    left: 10px;
+    right: 10px;
+    height: calc(100vh - 16px - 16px - 34px - 320px);
+    background: center / cover no-repeat url(./qrcodeTip.png),
+      linear-gradient(#fff, #fff);
+    border-radius: 18px;
+    .back {
+      position: absolute;
+      left: 24px;
+      right: 24px;
+      bottom: 48px;
+      background: #3977f5;
+      border-radius: 8px;
+      height: 48px;
+      font-weight: 600;
+      font-size: 17px;
+      line-height: 22px;
+      color: #fff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
 .activity-modal {
   position: absolute;
   top: 0;
diff --git a/src/pages/Index/border.svg b/src/pages/Index/border.svg
new file mode 100644
index 0000000..79dfbe0
--- /dev/null
+++ b/src/pages/Index/border.svg
@@ -0,0 +1,3 @@
+<svg width="320" height="320" viewBox="0 0 320 320" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H30V4H4L4 30H0V0ZM320 0V30H316V4L290 4V0H320ZM290 320H320V290H316V316H290V320ZM0 320V290H4L4 316H30V320H0Z" fill="white"/>
+</svg>
diff --git a/src/pages/Index/qrcodeTip.png b/src/pages/Index/qrcodeTip.png
new file mode 100644
index 0000000..d44b986
Binary files /dev/null and b/src/pages/Index/qrcodeTip.png differ
diff --git a/src/pages/Index/scaner.svg b/src/pages/Index/scaner.svg
new file mode 100644
index 0000000..5747637
--- /dev/null
+++ b/src/pages/Index/scaner.svg
@@ -0,0 +1,10 @@
+<svg width="320" height="75" viewBox="0 0 320 75" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="73" width="320" height="2" fill="#437AF7"/>
+<rect width="320" height="74" fill="url(#paint0_linear_1149_77349)"/>
+<defs>
+<linearGradient id="paint0_linear_1149_77349" x1="160" y1="0" x2="160" y2="74" gradientUnits="userSpaceOnUse">
+<stop stop-color="#437AF7" stop-opacity="0"/>
+<stop offset="1" stop-color="#437AF7" stop-opacity="0.7"/>
+</linearGradient>
+</defs>
+</svg>