@opendesign-plus-test/components 0.0.1-rc.19 → 0.0.1-rc.191

package/dist/treeshaking/components/user-center/verify/VerifySlide.vue2.mjs

@@ -0,0 +1,366 @@
+import { OIcon } from "@opensig/opendesign";
+import { aesEncrypt } from "./utils/ase.mjs";
+import { resetSize } from "./utils/util.mjs";
+import { useI18n } from "../../../i18n/index.mjs";
+import { toRefs, computed, getCurrentInstance, ref, reactive, shallowRef, onMounted, nextTick } from "vue";
+import IconRight from "../../../_virtual/icon-chevron-right2.mjs";
+import IconClose from "../../../_virtual/icon-close2.mjs";
+import IconDone from "../../../_virtual/icon-done.mjs";
+import IconRefresh from "../../../_virtual/icon-refresh2.mjs";
+const _sfc_main = {
+  name: "VerifySlide",
+  components: { OIcon, IconRefresh },
+  props: {
+    captchaType: {
+      type: String
+    },
+    // 弹出式pop，固定fixed
+    mode: {
+      type: String,
+      default: "fixed"
+    },
+    vSpace: {
+      type: Number,
+      default: 15
+    },
+    explain: {
+      type: String,
+      default: "向右滑动完成验证"
+    },
+    imgSize: {
+      type: Object,
+      default() {
+        return {
+          width: "310px",
+          height: "155px"
+        };
+      }
+    },
+    blockSize: {
+      type: Object,
+      default() {
+        return {
+          width: "50px",
+          height: "50px"
+        };
+      }
+    },
+    barSize: {
+      type: Object,
+      default() {
+        return {
+          width: "310px",
+          height: "40px"
+        };
+      }
+    },
+    apiType: {
+      type: String,
+      default: "ACCOUNT"
+      // api接口类型，ACCOUNT使用oneid接口、TOKEN使用oneid-workbench接口
+    },
+    community: {
+      type: String,
+      default: "openeuler"
+    },
+    // 验证码 API 由使用方传入
+    captchaApis: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const { mode, captchaType, blockSize, apiType } = toRefs(props);
+    const { t } = useI18n();
+    const explain = computed(() => t("common.SWIPE_RIGHT"));
+    const { proxy } = getCurrentInstance();
+    const secretKey = ref("");
+    const passFlag = ref("");
+    const backImgBase = ref("");
+    const blockBackImgBase = ref("");
+    const backToken = ref("");
+    const startMoveTime = ref(0);
+    const endMovetime = ref(0);
+    const tipsBackColor = ref("");
+    const tipWords = ref("");
+    const text = ref("");
+    const finishText = ref("");
+    const setSize = reactive({
+      imgHeight: 0,
+      imgWidth: 0,
+      barHeight: 0,
+      barWidth: 0
+    });
+    const top = ref(0);
+    const left = ref(0);
+    const moveBlockLeft = ref(void 0);
+    const leftBarWidth = ref(void 0);
+    const moveBlockBackgroundColor = ref(void 0);
+    const leftBarBorderColor = ref(void 0);
+    const iconColor = ref(void 0);
+    const iconComponent = shallowRef(IconRight);
+    const status = ref(false);
+    const isEnd = ref(false);
+    const showRefresh = ref(true);
+    const transitionLeft = ref("");
+    const transitionWidth = ref("");
+    const startLeft = ref(0);
+    const barArea = computed(() => {
+      return proxy.$el.querySelector(".verify-bar-area");
+    });
+    function getPictrue() {
+      const data = {
+        captchaType: captchaType.value
+      };
+      const reqGetApi = apiType.value === "ACCOUNT" ? props.captchaApis.reqGet : props.captchaApis.getImgToken;
+      reqGetApi(data).then((res) => {
+        if (res.repCode === "0000") {
+          backImgBase.value = res.repData.originalImageBase64;
+          blockBackImgBase.value = res.repData.jigsawImageBase64;
+          backToken.value = res.repData.token;
+          secretKey.value = res.repData.secretKey;
+        } else {
+          tipWords.value = res.repMsg;
+        }
+      });
+    }
+    const refresh = () => {
+      showRefresh.value = true;
+      finishText.value = "";
+      transitionLeft.value = "left .2s";
+      moveBlockLeft.value = 0;
+      leftBarWidth.value = void 0;
+      transitionWidth.value = "width .2s";
+      leftBarBorderColor.value = void 0;
+      moveBlockBackgroundColor.value = void 0;
+      iconColor.value = void 0;
+      iconComponent.value = IconRight;
+      isEnd.value = false;
+      getPictrue();
+      setTimeout(() => {
+        transitionWidth.value = "";
+        transitionLeft.value = "";
+        text.value = explain.value;
+      }, 300);
+    };
+    function start(e) {
+      e = e || window.event;
+      let x;
+      if (!e.touches) {
+        x = e.clientX;
+      } else {
+        x = e.touches[0].pageX;
+      }
+      startLeft.value = Math.floor(
+        x - barArea.value.getBoundingClientRect().left
+      );
+      startMoveTime.value = Number(/* @__PURE__ */ new Date());
+      if (isEnd.value === false) {
+        const colors = {
+          openeuler: "#002fa7",
+          opengauss: "#6e1be8",
+          mindspore: "#0080f2",
+          openmind: "#121212"
+        };
+        const color = colors[props.community];
+        text.value = "";
+        moveBlockBackgroundColor.value = color;
+        leftBarBorderColor.value = color;
+        iconColor.value = "#fff";
+        e.stopPropagation();
+        status.value = true;
+      }
+    }
+    function move(e) {
+      e = e || window.event;
+      if (status.value && isEnd.value === false) {
+        let x;
+        if (!e.touches) {
+          x = e.clientX;
+        } else {
+          x = e.touches[0].pageX;
+        }
+        const barAreaLeft = barArea.value.getBoundingClientRect().left;
+        let blockLeft = x - barAreaLeft;
+        if (blockLeft >= barArea.value.offsetWidth - parseInt(blockSize.value.width) / 2 - 2) {
+          blockLeft = barArea.value.offsetWidth - parseInt(blockSize.value.width) / 2 - 2;
+        }
+        if (blockLeft <= 0) {
+          blockLeft = parseInt(blockSize.value.width) / 2;
+        }
+        moveBlockLeft.value = blockLeft - startLeft.value + "px";
+        leftBarWidth.value = blockLeft - startLeft.value + 5 + "px";
+      }
+    }
+    function end() {
+      endMovetime.value = Number(/* @__PURE__ */ new Date());
+      if (status.value && isEnd.value === false) {
+        let moveLeftDistance = parseInt(
+          (moveBlockLeft.value || "").replace("px", "")
+        );
+        moveLeftDistance = moveLeftDistance * 310 / parseInt(String(setSize.imgWidth));
+        const data = {
+          captchaType: captchaType.value,
+          pointJson: secretKey.value ? aesEncrypt(
+            JSON.stringify({ x: moveLeftDistance, y: 5 }),
+            secretKey.value
+          ) : JSON.stringify({ x: moveLeftDistance, y: 5 }),
+          token: backToken.value
+        };
+        const reqCheckApi = apiType.value === "ACCOUNT" ? props.captchaApis.reqCheck : props.captchaApis.checkImgToken;
+        reqCheckApi(data).then((res) => {
+          if (res.repCode === "0000") {
+            moveBlockBackgroundColor.value = "#6dc335";
+            leftBarBorderColor.value = "#6dc335";
+            iconColor.value = "#fff";
+            iconComponent.value = IconDone;
+            showRefresh.value = false;
+            isEnd.value = true;
+            if (mode.value === "pop") {
+              setTimeout(() => {
+                proxy.$parent.clickShow = false;
+                refresh();
+              }, 1500);
+            }
+            passFlag.value = true;
+            tipWords.value = t("common.VERIFY_SUCCESS", {
+              second: `${((endMovetime.value - startMoveTime.value) / 1e3).toFixed(
+                2
+              )}`
+            });
+            const captchaVerification = secretKey.value ? aesEncrypt(
+              backToken.value + "---" + JSON.stringify({ x: moveLeftDistance, y: 5 }),
+              secretKey.value
+            ) : backToken.value + "---" + JSON.stringify({ x: moveLeftDistance, y: 5 });
+            setTimeout(() => {
+              tipWords.value = "";
+              proxy.$parent.closeBox();
+              proxy.$parent.$emit("success", { captchaVerification });
+            }, 1e3);
+          } else {
+            isEnd.value = true;
+            moveBlockBackgroundColor.value = "rgb(var(--varify-error-color2))";
+            leftBarBorderColor.value = "rgb(var(--varify-error-color2))";
+            iconColor.value = "#fff";
+            iconComponent.value = IconClose;
+            passFlag.value = false;
+            setTimeout(() => {
+              refresh();
+            }, 1e3);
+            proxy.$parent.$emit("error", proxy);
+            const codeToMsg = {
+              6111: "VERIFY_FAILED",
+              6110: "VERIFY_FAILED_INVALID"
+            };
+            tipWords.value = t(`common.${codeToMsg[res == null ? void 0 : res.repCode]}`) || t("common.VERIFY_FAILED");
+            setTimeout(() => {
+              tipWords.value = "";
+            }, 1e3);
+          }
+        }).catch(() => {
+          isEnd.value = true;
+          moveBlockBackgroundColor.value = "rgb(var(--varify-error-color2))";
+          leftBarBorderColor.value = "rgb(var(--varify-error-color2))";
+          iconColor.value = "#fff";
+          iconComponent.value = IconClose;
+          passFlag.value = false;
+          setTimeout(() => {
+            refresh();
+          }, 1e3);
+          proxy.$parent.$emit("error", proxy);
+          tipWords.value = t("common.VERIFY_FAILED");
+          setTimeout(() => {
+            tipWords.value = "";
+          }, 1e3);
+        });
+        status.value = false;
+      }
+    }
+    function init() {
+      text.value = explain.value;
+      getPictrue();
+      nextTick(() => {
+        const { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy);
+        setSize.imgHeight = imgHeight;
+        setSize.imgWidth = imgWidth;
+        setSize.barHeight = barHeight;
+        setSize.barWidth = barWidth;
+        proxy.$parent.$emit("ready", proxy);
+      });
+      window.removeEventListener("touchmove", (e) => {
+        move(e);
+      });
+      window.removeEventListener("mousemove", (e) => {
+        move(e);
+      });
+      window.removeEventListener("touchend", () => {
+        end();
+      });
+      window.removeEventListener("mouseup", () => {
+        end();
+      });
+      window.addEventListener("touchmove", (e) => {
+        move(e);
+      });
+      window.addEventListener("mousemove", (e) => {
+        move(e);
+      });
+      window.addEventListener("touchend", () => {
+        end();
+      });
+      window.addEventListener("mouseup", () => {
+        end();
+      });
+    }
+    onMounted(() => {
+      init();
+      proxy.$el.onselectstart = function() {
+        return false;
+      };
+    });
+    return {
+      secretKey,
+      // 后端返回的ase加密秘钥
+      passFlag,
+      // 是否通过的标识
+      backImgBase,
+      // 验证码背景图片
+      blockBackImgBase,
+      // 验证滑块的背景图片
+      backToken,
+      // 后端返回的唯一token值
+      startMoveTime,
+      // 移动开始的时间
+      endMovetime,
+      // 移动结束的时间
+      tipsBackColor,
+      // 提示词的背景颜色
+      tipWords,
+      text,
+      finishText,
+      setSize,
+      top,
+      left,
+      moveBlockLeft,
+      leftBarWidth,
+      // 移动中样式
+      moveBlockBackgroundColor,
+      leftBarBorderColor,
+      iconColor,
+      iconComponent,
+      status,
+      // 鼠标状态
+      isEnd,
+      // 是够验证完成
+      showRefresh,
+      transitionLeft,
+      transitionWidth,
+      barArea,
+      refresh,
+      start
+    };
+  }
+};
+export {
+  _sfc_main as default
+};

package/dist/treeshaking/components/user-center/verify/utils/ase.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @word 要加密的内容
+ * @keyWord String  服务器随机返回的关键字
+ *  */
+export declare function aesEncrypt(word: string, keyWord: string): string;

package/dist/treeshaking/components/user-center/verify/utils/ase.mjs

@@ -0,0 +1,13 @@
+import CryptoJS from "../../../../_virtual/crypto-js/index.js.mjs";
+function aesEncrypt(word, keyWord) {
+  const key = CryptoJS.enc.Utf8.parse(keyWord);
+  const srcs = CryptoJS.enc.Utf8.parse(word);
+  const encrypted = CryptoJS.AES.encrypt(srcs, key, {
+    mode: CryptoJS.mode.ECB,
+    padding: CryptoJS.pad.Pkcs7
+  });
+  return encrypted.toString();
+}
+export {
+  aesEncrypt
+};

package/dist/treeshaking/components/user-center/verify/utils/util.d.ts

@@ -0,0 +1,6 @@
+export declare function resetSize(vm: any): {
+    imgWidth: any;
+    imgHeight: any;
+    barWidth: any;
+    barHeight: any;
+};

package/dist/treeshaking/components/user-center/verify/utils/util.mjs

@@ -0,0 +1,34 @@
+function resetSize(vm) {
+  let imgWidth, imgHeight, barWidth, barHeight;
+  const parentWidth = vm.$el.parentNode.offsetWidth || window.offsetWidth;
+  const parentHeight = vm.$el.parentNode.offsetHeight || window.offsetHeight;
+  if (vm.imgSize.width.indexOf("%") !== -1) {
+    imgWidth = parseInt(vm.imgSize.width) / 100 * parentWidth + "px";
+  } else {
+    imgWidth = vm.imgSize.width;
+  }
+  if (vm.imgSize.height.indexOf("%") !== -1) {
+    imgHeight = parseInt(vm.imgSize.height) / 100 * parentHeight + "px";
+  } else {
+    imgHeight = vm.imgSize.height;
+  }
+  if (vm.barSize.width.indexOf("%") !== -1) {
+    barWidth = parseInt(vm.barSize.width) / 100 * parentWidth + "px";
+  } else {
+    barWidth = vm.barSize.width;
+  }
+  if (vm.barSize.height.indexOf("%") !== -1) {
+    barHeight = parseInt(vm.barSize.height) / 100 * parentHeight + "px";
+  } else {
+    barHeight = vm.barSize.height;
+  }
+  return {
+    imgWidth,
+    imgHeight,
+    barWidth,
+    barHeight
+  };
+}
+export {
+  resetSize
+};