app

src/App.vue

@@ -2,7 +2,15 @@
   <div id="app">
     <div class="head">
       <div class="logo">
-        <span style="font-size:28px;font-family:'GT Walsheim Pro Trial Bold';font-weight:bold;color:#fff">CocoBlockly</span>
+        <span
+          style="
+            font-size: 28px;
+            font-family: 'GT Walsheim Pro Trial Bold';
+            font-weight: bold;
+            color: #fff;
+          "
+          >CocoBlockly</span
+        >
       </div>
     </div>
 
@@ -10,14 +18,10 @@
       <!-- main 内容 -->
       <keep-alive v-if="$route.meta.keepAlive">
         <!-- 这里是会被缓存的视图组件 -->
-        <router-view
-          v-if="$route.meta.keepAlive"
-        />
+        <router-view v-if="$route.meta.keepAlive" />
       </keep-alive>
       <!-- 这里是不被缓存的视图组件 -->
-      <router-view
-        v-if="!$route.meta.keepAlive"
-      />
+      <router-view v-if="!$route.meta.keepAlive" />
     </div>
   </div>
 </template>
@@ -25,6 +29,23 @@
 <script>
 export default {
   name: "App",
+  created() {
+    //在页面加载时读取sessionStorage里的状态信息
+    if (sessionStorage.getItem("store")) {
+      this.$store.replaceState(
+        Object.assign(
+          {},
+          this.$store.state,
+          JSON.parse(sessionStorage.getItem("store"))
+        )
+      );
+    }
+
+    //在页面刷新时将vuex里的信息保存到sessionStorage里
+    window.addEventListener("beforeunload", () => {
+      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
+    });
+  },
 };
 </script>
 

src/components/blockly.vue

@@ -91,7 +91,9 @@ export default {
     },
     //下一步
     go() {
-      this.$router.push("./function?isCamera=" + 1);
+      //update修改   function state里的参数
+      this.$store.commit("update", ["function", 1]);
+      this.$router.push("./function");
     },
   },
 

src/components/function.vue

@@ -110,6 +110,7 @@ export default {
     }
   },
   mounted() {
+    console.log(this.$store.state.function);
     var _s3 = document.createElement("script");
     _s3.src = "/static/materialize/jquery-2.1.3.min.js";
     _s3.type = "text/javascript";
@@ -122,7 +123,9 @@ export default {
     _s1.src = "/static/bundle.js";
     _s1.type = "text/javascript";
     document.head.appendChild(_s1);
-    if (this.$route.query.isCamera == "1") {
+
+    console.log(this.$store.state.function);
+    if (this.$store.state.function == 1) {
       this.$message.error("摄像头开启失败，请检查摄像头是否可用！");
     }
   }

src/components/police.vue

@@ -19,6 +19,11 @@
     </div>
     <div class="right"><img src="../assets/img/right.png" alt="" /></div>
     <div class="button">进入CocoBlockly编程平台</div>
+    <video
+      id="musicC"
+      :src="require('../assets/music/disconnect.wav')"
+      v-show="false"
+    ></video>
   </div>
 </template>
 
@@ -46,6 +51,8 @@ export default {
         var dv1 = document.getElementById("tou");
         var dv2 = document.getElementById("ai");
         var dv3 = document.getElementById("police");
+        var musicC = document.getElementById("musicC");
+
         //鼠标按下事件
         el.onmousedown = function (e) {
           //获取x坐标和y坐标
@@ -222,7 +229,7 @@ export default {
             dv1.style.top = nt - 73 + "px";
 
             dv2.style.left = nl + "px";
-            dv2.style.top = nt-7 + "px";
+            dv2.style.top = nt - 7 + "px";
 
             dv3.style.left = nl - 56 + "px";
             dv3.style.top = nt + 70 + "px";
@@ -342,13 +349,21 @@ export default {
           }
 
           if (-70 < stL && stL < -15 && 45 < stP && stP < 100 && type == 1) {
+            dv1.style.transition = ".5s all";
             dv1.style.left = nl + 42 + "px";
             dv1.style.top = nt - 73 + "px";
+            setTimeout(() => {
+              dv1.style.transition = "";
+            }, 500);
           }
 
           if (-70 < stL && stL < -15 && 45 < stP && stP < 100 && type == 2) {
+            dv.style.transition = ".5s all";
             dv.style.left = nl - 42 + "px";
             dv.style.top = nt + 73 + "px";
+            setTimeout(() => {
+              dv.style.transition = "";
+            }, 500);
           }
         }
       },

src/config/config.js

@@ -6,6 +6,7 @@ Vue.use(Vuex)
 const store = new Vuex.Store({
     state: {
         api: '',
+        function:''
     },
 
     mutations: {

src/main.js

@@ -21,4 +21,4 @@ new Vue({
   router,
   components: { App },
   template: '<App/>'
-})
+})