feat:登录模块逻辑+mock，待适配后台正式的接口

package.json

@@ -37,8 +37,10 @@
     "core-js": "^3.6.5",
     "crypto-js": "^4.0.0",
     "element-ui": "^2.13.2",
+    "i": "^0.3.6",
     "js-md5": "^0.7.3",
-    "qrcode": "^1.4.4",
+    "js-sha256": "^0.9.0",
+    "qrcode": "^1.4.f4",
     "simple-components01": "^0.1.15",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",

src/config/URLS.ts

@@ -52,8 +52,8 @@ export class GO_URLS {
     static deleteFolder = prefix_go + '/api/template/deleteFolder'
     static updateFolder = prefix_go + '/api/template/updateFolder'
     static deleteBlockChainProof = prefix_go + '/api/proof/deleteBlockChainProof'
-    static methods = prefix_go + '/api/order/pay/methods'
-    static chunkCheck = prefix_go + '/api/file/chunk/check' // 检查分块
-    static chunkUpload = prefix_go + '/api/file/chunk/upload' // 分块上传
-    static chunkMerge = prefix_go + '/api/file/chunk/merge' // 合并分块
+    static methods = prefix_go + '/api/order/pay/methods';
+    static chunkCheck = prefix_go + '/api/file/chunk/check'; // 检查分块
+    static chunkUpload = prefix_go + '/api/file/chunk/upload'; // 分块上传
+    static chunkMerge = prefix_go + '/api/file/chunk/merge'; // 合并分块
 }

src/entry/czt/views/SignIn.vue

 <template>
-  <div class="sign-in">
-    <div class="img"></div>
-    <div class="fixed">
-      <div class="background-left"></div>
-      <div class="sign-in-box">
-        <!-- 手机+密码登录模块 -->
-        <phone-login
-          v-if="showPlg"
-          @change-email="changeEmail"
-          @SetPassword="
-            showPlg = false;
-            showSpd = true;
-          "
-        ></phone-login>
-        <!-- email登录模块 -->
-        <email-login
-          v-if="showEmail"
-          @phone-email="phoneEmail"
-          @SetPassword="
-            showEmail = false;
-            showSpd = true;
-          "
-        ></email-login>
-        <!-- 设置密码模块 -->
-        <set-password v-if="showSpd" @showLogin="showLogin"></set-password>
-      </div>
-    </div>
-  </div>
+  <div>login</div>
 </template>
-<script>
-import SetPassword from "@/components/signin/setPassword.vue";
-import PhoneLogin from "@/components/signin/phoneLogin.vue";
-import EmailLogin from "@/components/signin/emailLogin.vue";
-export default {
-  data() {
-    return {
-      showSpd: false, //设置密码
-      showPlg: true, //手机登录
-      showEmail: false, // 邮箱登录
-    };
-  },
+<script lang="ts">
+import {Component, Vue} from "vue-property-decorator";
+@Component({
   components: {
-    SetPassword,
-    PhoneLogin,
-    EmailLogin,
-  },
-  computed: {
-    getType: function () {
-      return this.$store.state.businessType;
-    },
   },
-  methods: {
-    showLogin() {
-      this.showSpd = false;
-      if (this.getType === 0 || this.getType === 1) {
-        this.showPlg = true;
-      } else {
-        this.showEmail = true;
-      }
-    },
-    // 切换至email登录
-    changeEmail() {
-      this.showEmail = true;
-      this.showPlg = false;
-    },
-    // 切换至手机登录
-    phoneEmail() {
-      this.showEmail = false;
-      this.showPlg = true;
-    },
-  },
-};
-</script>
-<style lang="less" scoped>
-.sign-in {
-  position: relative;
-  background: #ececec;
-}
-.img {
-  position: absolute;
-  left: 26px;
-  top: 14px;
-  width: 100px;
-  height: 30px;
-  background: url("../images/SigIn/logo.png") no-repeat center;
-  background-size: 100% 100%;
-}
-.fixed {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 895px;
-  box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.07);
-}
-.sign-in-box {
-  width: 443px;
-  height: 554px;
-  background: rgba(255, 255, 255, 1);
-  border-radius: 4px;
-  padding: 0 26px;
-  float: left;
-  position: relative;
-}
-.background-left {
-  background: url("../../../assets/images/SigIn/login_bg.png") no-repeat center;
-  background-size: 100%;
-  float: left;
-  background-color: #faf8fd;
-  height: 554px;
-  width: 400px;
+})
+export default class signIn extends Vue {
+  public created(): void {
+    const id = 57; // todo 从对方 iframe 拿数据
+    const res = {
+      token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2MTcyNjc0OTQsImlhdCI6MTYxNzAwODI5NCwidXNlcl9pbmZvIjoiZXlKcFpDSTZOVGQ5In0.zIIIXC68FdWiyPSlFCgBTAYxem1TQBKAwpf5IG3j5t8'
+    };
+    /* // todo 接口待适配
+    const res = await this.$ajax({
+      type: "post",
+      url: 'http://124.71.144.118:46789/api/user/demo/token',
+      params: {"id": "123124"},
+    });
+    */
+
+    if (res) {
+      // todo 处理自动登录跳转
+      sessionStorage.setItem(`user`, JSON.stringify({
+        id,
+        token: res.token
+      }));
+      this.$router.push({ path: "/categoryManage" });
+    }
+  }
 }
-</style>
+</script>
\ No newline at end of file
+<style>
+</style>

src/entry/czt/views/template/editTemplate.vue

@@ -72,7 +72,7 @@
               <i class="iconfont iconshangchuan upload_icon"></i>
               <p class="upload_title">上传{{ fileType }}</p>
               <p class="upload_note">注：仅支持20M以下的文件</p>
-              <input type="file"
+              <input ref="inputDom" type="file"
                      @click.stop
                      @change.stop="fileChange"
                      hidden
@@ -150,12 +150,14 @@
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue, Watch } from "vue-property-decorator";
-import { formatTemplateApi2Local, formatApiJson } from "@/plugins/Template";
-import { PropertyType } from "@/plugins/types";
-import { Property, Unit, ResUploadFiles } from "@/plugins/types2";
-import { GO_URLS } from "@/config/URLS";
-import { ImageInfo, ImageItem } from "@/utils/app/AddProductTypes";
+import {Component, Vue, Watch} from "vue-property-decorator";
+import {sha256} from 'js-sha256';
+import {formatApiJson, formatTemplateApi2Local} from "@/plugins/Template";
+import {PropertyType} from "@/plugins/types";
+import {Property, ResUploadFiles, Unit} from "@/plugins/types2";
+import {GO_URLS} from "@/config/URLS";
+import {ImageInfo, ImageItem} from "@/utils/app/AddProductTypes";
+import {file2DataUrl} from "@/utils/tool";
 import CommonDialog from "@/components/CommonDialog.vue";
 import NameEditor from "@/components/NameEditor.vue";
 import ReadOnly from "@/views/template/readOnly.vue"; // 回显
@@ -227,7 +229,7 @@ export default class editTemplate extends Vue {
     if (this.existingEvidenceList.length > 0 && !this.ShowPastData)
       this.existingEvidenceList[0].name = newVal;
   }
-  public created() {
+  public async created() {
     // 取值
     const query = this.$route.query;
     if (query.personalTemplateId && !query.childId) {
@@ -780,6 +782,106 @@ export default class editTemplate extends Vue {
       }
     }
   }
+
+  /**
+   * 分块上传文件
+   * @param current current blob to upload
+   * @param length length of buffer
+   */
+  public async uploadFileChunk(current: any, length: number) {
+    return await this.$ajax({
+      type: "post",
+      url: GO_URLS.chunkCheck,
+      params: current
+      // params: {
+      //   file_hash: hash,
+      // },
+    });
+    // fileUpload(current).then((res) => {
+    //   let { current_seq } = res.data;
+    //   if (current_seq === length) {
+    //     this.mergeChunkFile(current);
+    //   }
+    // });
+  }
+  //  查询文件
+  public async checkFileChunkState(hash: string) {
+    return await this.$ajax({
+      type: "get",
+      url: GO_URLS.chunkCheck,
+      params: {
+        file_hash: hash,
+      },
+    });
+  }
+  public fileChange(e: any) {
+    if (!e.target.files) {
+      this.$message("请上传文件");
+      return;
+    }
+    this.$emit("startLoading");
+    const file = e.target.files[0];
+    //1.把文件分块，分到数组里
+    const sliceBuffer: any[] = [];
+    let seize = file.size;
+    while (seize > 1024 * 1024) {
+      const blobPart = file.slice(
+        sliceBuffer.length * 1024 * 1024,
+        (sliceBuffer.length + 1) * 1024 * 1024
+      );
+      sliceBuffer.push(blobPart);
+      seize -= 1024 * 1024;
+    }
+    if (seize > 0) {
+      sliceBuffer.push(
+        file.slice(sliceBuffer.length * 1024 * 1024, file.size)
+      );
+    }
+    //2.计算文件HASH
+    let that = this;
+    const fileReader = new FileReader();
+    //文件读取回调
+    let fileHash = sha256.create();
+    fileReader.onload = function (event: any) {
+      const result = event.target.result;
+      fileHash.update(result);
+      fileHash.update(file.name);
+      that.checkFileChunkState(fileHash.hex()).then((res: any) => {
+        console.log(res);
+        let { is_done, file_info } = res.data;
+        if (is_done && file_info) {
+          // 上传完成
+          // todo 把文件显示在页面上
+          return;
+        }
+        const chunkRequests: any = [];
+        sliceBuffer.forEach((buffer, i) => {
+          const current = {
+            current_data: "", //当前块数据
+            current_seq: i + 1, // 当前块序号
+            current_size: buffer.size, //当前块大小
+            file_name: file.name, //文件名称
+            file_hash: fileHash.hex(), //文件hash
+            total_seq: sliceBuffer.length, //总序号
+            total_size: file.size, //总大小
+          };
+          file2DataUrl(buffer).then((res) => {
+            // 转化后的base64
+            current.current_data = res.split(',')[1];
+            chunkRequests.push(
+              that.uploadFileChunk(current, sliceBuffer.length)
+            );
+          });
+        });
+        return Promise.all(chunkRequests);
+      });
+    };
+    //读取失败回调
+    // fileReader.onreeor = function (err) {
+    //   // err.target.error;
+    // };
+    fileReader.readAsArrayBuffer(file);
+  }
 }
 </script>