解决长按图片保存，字体压缩

.gitignore

@@ -1,7 +1,6 @@
 .DS_Store
 node_modules
 /dist
-/font_spider
 
 # local env files
 .env.local

common/service/jwt.js

@@ -1,4 +1,4 @@
-const ID_TOKEN_KEY = "id_token";
+const ID_TOKEN_KEY = "id_token_puzzle";
 
 export const getToken = () => {
   return window.localStorage.getItem(ID_TOKEN_KEY);

public/index.html

@@ -12,15 +12,15 @@
     //   "eyJyZWRJZCI6IjA0ZDFkNTk1MzNlYTJiODM2N2RlZjYyMmI5MWRlOTVkZmY0ZmRkNzMiLCJoZWFkSW1nVXJsIjoiaHR0cDovL3RoaXJkd3gucWxvZ28uY24vbW1vcGVuL3ZpXzMyL2gxbFZvME4wOEE3UEJUYzlvZU5aWjE2WGxQTXVvZUNYOWQ5WXlaWUJUTHRodDZTUjlCT3NwbkoyVlhBSGdCcThuY0tnWmNGc0RLU1plMktBaWJEQjZzQS8xMzIiLCJuaWNrbmFtZSI6IuWNgeS4gyIsInN0dU51bSI6IjIwMTgyMTEyNTkiLCJyZWFsTmFtZSI6IueOi+aipumjniIsImNvbGxlZ2UiOiLnjrDku6Ppgq7mlL/lrabpmaIiLCJtYWpvciI6IiIsImNsYXNzIjoiMDMxNjE4MDIifQ==.MArwTO0JINq5zSwVxTV5hYcxjyR5WMfznNMEBM2tsUZrDZXzmZK5ACxV8eux7x49n4XDbEA3FWuPZHa615ljB2Xpm1uY2sen3FipbJvDyiftA2DTvhbi2IgYJcer5ljNaDmc2OccszCjmPNC0VHjRdkbArfstf+BaPYPPMIXYkbMuXE5hk3kqy5sUOXFCJiVkN4ktxS84X2fuziAgcDbv1KkiQR6lh+6DqddylDNo5xXP2UoJm1mGXEbWiZh6PWvCCfe7fMcpqoTVdPQWbvnU9Of+egXNGTMtRIyuuhVpwTRG1x8BdN7q5OIUq4h32LRL2XZDQ0U3IiOk31/M20gCA=="
 
     const token = document.location.hash.split('#/?token=')[1];
-    if (!localStorage.getItem('id_token') && !token) {
+    if (!localStorage.getItem('id_token_puzzle') && !token) {
       window.location.href =
         'https://wx.redrock.team/magicloop/rushb?b=' + encodeURI(
           'https://wx.redrock.team/wxapi/puzzleofthemap/api/enter') + '&scope=tmpbase';
     }
 
     if (token && token.length) {
       document.location.hash = '#/';
-      localStorage.setItem('id_token', token)
+      localStorage.setItem('id_token_puzzle', token)
     }
   </script>
 </head>

src/assets/js/puzzle.js

@@ -65,18 +65,20 @@ var initPuzzle = function initPuzzle(num) {
 
 // 移动拼图,传入的四个参数分别为第二次点击的拼图块的id，第一次点击的拼图块的firstId,拼图的行列数num，关卡的状态flag
 var move = function move(id, firstId, num) {
-
+    // 假设需要移动的为第0的位置和第3个位置，2*2，现在在第0个位置的先点击firstId为1，在第3个位置的id为1
 
     let id_pos, first_id_pos;
     let m, n, x, y;
     // 找到存储的数据为id的位置
     for (var i = 0; i < num; i++) {
         for (var j = 0; j < num; j++) {
+            // [0][0]的位置为为第一次点击拼图块的位置，m=0,n=0,同时，第一次点击的位置的序列号为first_id_pos=0
             if (chart[i][j] == firstId) {
                 first_id_pos = num * i + j; //通过二维数组的下标计算出存储firstId的位置序列
                 m = i;
                 n = j;
             }
+// [1][1]的位置为为第二次点击拼图块的位置,x=1,y=1，同时第二次点击的位置的序列号为id_pos=3
             if (chart[i][j] == id) {
                 id_pos = num * i + j; //通过二维数组的下标计算出存储id的位置序列
                 x = i;
@@ -94,10 +96,11 @@ var move = function move(id, firstId, num) {
         // 交换两个拼图块,通过设置flex布局子元素的order改变位置
         document.getElementById("d" + id).style.order = first_id_pos;
         document.getElementById("d" + firstId).style.order = id_pos;
+        console.log(d_direct)
     }
 
 }
-
+// first_id_pos=0  id_pos=3
 function canIf(first_id_pos, id_pos, d_direct) {
     var move_flag = false;
     // 遍历id拼图块可交换位置，判断此次交换尝试是否可交换

src/common/service/api.js

@@ -14,8 +14,8 @@ const ApiService = {
     setHeader() {
         Vue.axios.defaults.headers.common[
             "Authorization"
-        ] = `${localStorage.getItem('id_token')}`
-        console.log(localStorage.getItem('id_token'))
+        ] = `${localStorage.getItem('id_token_puzzle')}`
+        console.log(localStorage.getItem('id_token_puzzle'))
     },
 
     // 封装axios

src/components/showPic.vue

@@ -6,13 +6,13 @@
         @touchstart="gtouchstart()"
         @touchmove="gtouchmove()"
         @touchend="gtouchend()"
-      > 
-        <img src="../assets/img/game/showpic_font.png" />
+      >
+        <div class="f">
+          <img src="../assets/img/game/showpic_font.png" />
+        </div>
       </div>
     </div>
-    <div class="dialogCon" v-show="isShow">
-
-    </div>
+    <div class="dialogCon" v-show="isShow"></div>
     <div class="dialog" v-show="isShow"></div>
   </div>
 </template>
@@ -87,9 +87,15 @@ export default {
       line-height: 107px;
       font-size: 50px;
       color: #fffcad;
-      img {
-        width: 333px;
-        height: 46px;
+      .f {
+        img {
+          width: 333px;
+          height: 46px;
+          pointer-events: none;
+          -webkit-user-select: none;
+          -moz-user-select: none;
+          user-select: none;
+        }
       }
     }
   }
@@ -104,19 +110,22 @@ export default {
     transform: scale(2);
 
     background-color: rgba($color: #dd8e5e, $alpha: 0.4);
+  }
 
+  .dialog {
+    background: url("../assets/img/common/dialog.png");
+    background-size: cover;
+    width: 750px;
+    height: 624px;
+    margin: auto auto;
+    position: absolute;
+    top: 0;
+    transform: translateX(-24px);
+    pointer-events: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
   }
-  
-    .dialog {
-      background: url("../assets/img/common/dialog.png");
-      background-size: cover;
-      width: 750px;
-      height: 624px;
-      margin: auto auto;
-      position: absolute;
-      top: 0;
-      transform: translateX(-24px)
-    }
 }
 </style>
 

src/store/result.js

@@ -28,7 +28,7 @@ const initialState = {
     first_flag: 'unlock',
     second_flag: 'lock',
     third_flag: 'lock',
-    forth_flag: 'lock',
+    fourth_flag: 'lock',
     current_pass: null,
     default_pass: 'first',
     user_time: 0,
@@ -57,13 +57,13 @@ const mutations = {
     },
     [SET_THIRD](state) {
         state.third_flag = 'success'
-        state.forth_flag = 'unlock'
+        state.fourth_flag = 'unlock'
         state.default_pass = 'fourth'
 
 
     },
     [SET_FOURTH](state) {
-        state.forth_flag = 'success'
+        state.fourth_flag = 'success'
         state.default_pass = 'fourth'
 
     },
@@ -78,20 +78,24 @@ const mutations = {
         if (pass_status == 1) {
             state.first_flag = 'success';
             state.second_flag = 'unlock';
+            state.default_pass = 'first'
         } else if (pass_status == 2) {
             state.first_flag = 'success';
             state.second_flag = 'success';
             state.third_flag = 'unlock'
+            state.default_pass = 'second'
         } else if (pass_status == 3) {
             state.first_flag = 'success';
             state.second_flag = 'success';
             state.third_flag = 'success';
-            state.forth_flag = 'unlock'
+            state.fourth_flag = 'unlock'
+            state.default_pass = 'third'
         } else if (pass_status == 4) {
             state.first_flag = 'success';
             state.second_flag = 'success';
             state.third_flag = 'success';
-            state.forth_flag = 'success'
+            state.fourth_flag = 'success'
+            state.default_pass = 'fourth'
         }
 
     },