@opendesign-plus-test/components 0.0.1-rc.178 → 0.0.1-rc.179

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

@@ -1,366 +0,0 @@
-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

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

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

@@ -1,13 +0,0 @@
-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

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

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

@@ -1,34 +0,0 @@
-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
-};