交互修改

public/js/puzzle.js

 import Vue from 'vue';
 import VueI18n from 'vue-i18n';
+import api from '../../src/views/loginregister/api/api';
 Vue.use(VueI18n);
 const i18n = new VueI18n({
     locale: window.sessionStorage.getItem("language")||"zh-CN",    // 语言标识
@@ -9,6 +10,7 @@ const i18n = new VueI18n({
         'en': window.sessionStorage.getItem("language")=='zh-CN'?require('../../src/common/lang/zh'):require('../../src/common/lang/en')
     }
 });
+var that = this,imgData="";
 (function (window) {
     const l = 42, // 滑块边长
         r = 9, // 滑块半径
@@ -32,11 +34,12 @@ const i18n = new VueI18n({
         const img = createElement('img')
         img.crossOrigin = "Anonymous"
         img.onload = onload
-        img.onerror = () => {
-            img.src = getRandomImg()
-        }
+        // img.onerror = () => {
+        //     img.src = getRandomImg()
+        // }
         img.src = getRandomImg()
         return img
+
     }
 
     function createElement (tagName, className) {
@@ -54,8 +57,10 @@ const i18n = new VueI18n({
     }
 
     function getRandomImg () {
+        // console.log(api.getPuzzleImgAxios());
+        return imgData;
         // return 'https://picsum.photos/300/150/?image=' + getRandomNumberByRange(0, 1084)
-        return "http://techbook-test.oss-cn-beijing.aliyuncs.com/business/image/DFF907D19801455F9B3CCC67EA135398.jpg?Expires=1888458454&OSSAccessKeyId=LTAIm3BF0PBlzH5t&Signature=odycOQZJMxczAZtXDN0ULZIOyas%3D";
+        // return "http://techbook-test.oss-cn-beijing.aliyuncs.com/business/image/DFF907D19801455F9B3CCC67EA135398.jpg?Expires=1888458454&OSSAccessKeyId=LTAIm3BF0PBlzH5t&Signature=odycOQZJMxczAZtXDN0ULZIOyas%3D";
     }
 
     function draw (ctx, x, y, operation) {
@@ -95,7 +100,11 @@ const i18n = new VueI18n({
 
         init () {
             this.initDOM()
-            this.initImg()
+            api.getPuzzleImgAxios().then((res)=>{
+                if(res.code==0) {
+                    this.initImg(res.msg);
+                }
+            })
             this.bindEvents()
         }
 
@@ -136,7 +145,8 @@ const i18n = new VueI18n({
             })
         }
 
-        initImg () {
+        initImg (data) {
+            imgData = data;
             const img = createImg(() => {
                 this.draw()
                 this.canvasCtx.drawImage(img, 0, 0, w, h)

src/views/loginregister/api/api.js

@@ -125,5 +125,10 @@ export default {
     //根据账号获取用户信息
     getAccountInfoAxiosById(params){
         return api.fetchPost("/base/emp/selectUserInfo?"+Qs.stringify(params));
+    },
+
+    //获取拼图
+    getPuzzleImgAxios(){
+        return api.fetchLogin("/base/offline/randomSliderPicture");
     }
 }
\ No newline at end of file