web/components/Login/index.vue

<template>
  <div class="container">
    <div class="title">
      Log in
      <div></div>
      <span @click="close()" class="iconfont icon-shanchu1"></span>
    </div>
    <n-form ref="formRef" label-placement="left" :label-width="100" :model="form" :rules="rules" size="large" require-mark-placement="left">
      <n-form-item path="loginCode">
        <n-input v-model:value="form.loginCode" :placeholder="t('common.login.usernameTip')">
          <template #prefix>
            <div class="icon">
              <img src="@/assets/images/img18.png" alt="">
            </div>
          </template>
        </n-input>
      </n-form-item>
      <n-form-item path="password">
        <n-input v-model:value="form.password" type="password" show-password-on="click" :placeholder="t('common.login.passwordTip')">
          <template #prefix>
            <div class="icon1">
              <img src="@/assets/images/img19.png" alt="">
            </div>
          </template></n-input>
        <div class="forgotBox">
          <a href="#" class="forgot" @click="handleForgot"> {{t('common.login.forgetPassword')}}</a>
        </div>
      </n-form-item>
      <n-form-item path="validCode">
        <n-input v-model:value="form.validCode" :placeholder="t('common.login.validCodeTip')">
          <template #prefix>
            <div class="icon1">
              <img src="@/assets/images/img20.png" alt="">
            </div>
          </template>
          <template #suffix>
            <img :src="getValidCodeImg" @click="refreshValidCodeImg" class="cursor-pointer" width="100" />
          </template>
        </n-input>
      </n-form-item>
    </n-form>
    <n-button class="login-btn" attr-type="button" type="info" color="#18A058" :disabled="submitLoading" @click="handleLogin">
      {{ submitLoading ? t('common.login.submitting') : t('common.login.title') }}
    </n-button>
    <p class="register-btn">
      No account yet? Click to
      <span @click="handleRegister">Register</span>
    </p>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from "#imports";
import { ref, reactive, onMounted } from "vue";
import { createDiscreteApi } from "naive-ui";
import { useUserStore } from "@/store/user";
const config = useRuntimeConfig();
const baseUrl = ref(config.public.apiBase);
const emit = defineEmits(["closeSginDialog"]);
const userStore = useUserStore();
const { t, locale, setLocale } = useI18n();
const temptime = ref();

const formRef = ref();
const submitLoading = ref(false);

const form: Login = reactive({
  loginCode: "",
  password: "",
});

const rules: FormRules = {
  loginCode: [
    {
      required: true,
      message: t("common.login.usernameTip"),
      trigger: ["input", "blur"],
    },
  ],
  password: [
    {
      required: true,
      message: t("common.login.passwordTip"),
      trigger: ["input", "blur"],
    },
  ],
  validCode: [
    {
      required: true,
      message: t("common.login.validCodeTip"),
      trigger: ["input", "blur"],
    },
  ],
};

const getValidCodeImg = ref<string>("");

const refreshValidCodeImg = () => {
  temptime.value = +new Date().getTime();
  getValidCodeImg.value =
    baseUrl.value + `/report/websiteUser/getValidCode?unTime=${temptime.value}`;
};

refreshValidCodeImg();

const message = createDiscreteApi(["message"]);

const handleLogin = () => {
  formRef.value?.validate(async (errors: any) => {
    if (!errors) {
      submitLoading.value = true;
      const params = JSON.parse(JSON.stringify(form));
      params.loginCode = encryptByBase64(params.loginCode);
      params.password = encryptByBase64(params.password);
      params.unTime = temptime.value;
      try {
        const { code, data } = await login_Api(params);
        if (code === 200) {
          userStore.setToken(data?.token);
          userStore.setUserInfo(data?.user);
          emit("closeSginDialog", "success");
          message.message.success(t("common.login.success"));
        } else {
          refreshValidCodeImg();
          form.validCode = "";
        }
        submitLoading.value = false;
      } catch (error) {
        submitLoading.value = false;
      }
    }
  });
};

const handleForgot = () => {
  emit("closeSginDialog", "forgot");
};

const handleRegister = () => {
  emit("closeSginDialog", "register");
};
const close = () => {
  emit("closeSginDialog", "success");
};
</script>

<style lang="scss" scoped>
@import "~/assets/css/tool.scss";
.container {
  padding: 20px 58px;
  background: #ffffff;
  border-radius: 20px;
  position: relative;
  .title {
    font-size: 38px;
    font-family: Arial, Arial-Bold;
    font-weight: 700;
    text-align: center;
    color: #1a1a1a;
    > div {
      width: 71px;
      height: 6px;
      background: linear-gradient(90deg, #719d59 2%, #479f82 98%);
      border-radius: 3px;
      margin: auto;
    }
    > span {
      position: absolute;
      right: 20px;
      top: 15px;
      cursor: pointer;
    }
  }
  .login-btn {
    width: 100%;
    height: 58px;
    background: linear-gradient(90deg, #60ab91, #84a86c);
    border-radius: 8px;
    font-size: 18px;
    margin-top: 10px;
  }
  .register-btn {
    font-size: 18px;
    color: #808080;
    text-align: center;
    font-family: Arial, Arial-Regular;

    span {
      color: #61ab90;
      cursor: pointer;
    }
  }
  .forgotBox {
    margin-left: 10px;
    flex-shrink: 0;
  }
  .forgot {
    font-size: 14px;
    color: #00c2ff;
    // text-decoration: underline;
    border-bottom: 1px solid #00c2ff;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  :deep(input::-ms-reveal) {
    display: none;
  }
}
.icon {
  height: 26px;
  padding-right: 18px;
  margin-right: 18px;
  border-right: 1px solid #cccccc;
  img {
    width: 26px;
    height: 26px;
  }
}
.icon1 {
  height: 26px;
  padding-right: 22px;
  margin-right: 18px;
  border-right: 1px solid #cccccc;
  img {
    width: 22px;
    height: 26px;
  }
}
.icon2 {
  height: 26px;
  padding-right: 21px;
  margin-right: 18px;
  border-right: 1px solid #cccccc;
  img {
    width: 23px;
    height: 26px;
  }
}
.n-form {
  margin-top: 30px;
}
:deep(.n-form-item-blank) {
  border-bottom: 1px solid #e6e6e6;
}
:deep(.n-form-item-label) {
  color: #666666;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  line-height: var(--size-20);
  padding: 0px 10px 10px 0;
}
:deep(.n-input-wrapper) {
  font-size: var(--size-14);
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  line-height: var(--size-20);
  padding: 0px 0 10px;
}
:deep(.n-form-item-blank--error .n-input) {
  --n-border-error: var(--size-1) solid transparent !important;
  --n-border-focus-error: var(--size-1) solid transparent !important;
  --n-border-hover-error: var(--size-1) solid transparent !important;
  --n-box-shadow-focus-error: var(--size-1) solid transparent !important;
}
.area {
  width: 100%;
  :deep(.n-form-item-label),
  :deep(.n-input-wrapper) {
    border-bottom: none;
  }
  :deep(.n-input--textarea) {
    background: #fafafa;
    border-radius: var(--size-10);
    padding: 0 var(--size-5);
  }
  :deep(.n-input.n-input--textarea.n-input--resizable .n-input-wrapper) {
    min-height: var(--size-260);
  }
}
@include responseTo("phone") {
  .container {
    padding: 10px 20px;
    .title {
      font-size: 20px;
      > div {
        width: 30px;
        height: 4px;
        border-radius: 3px;
      }
    }
    .n-form {
      margin-top: 15px;
      .icon {
        height: 26px;
        padding-right: 10px;
        margin-right: 10px;
        border-right: 1px solid #cccccc;
      }
      .icon1 {
        height: 26px;
        padding-right: 14px;
        margin-right: 10px;
        border-right: 1px solid #cccccc;
      }
      .icon2 {
        height: 26px;
        padding-right: 13px;
        margin-right: 10px;
        border-right: 1px solid #cccccc;
      }
    }
    .login-btn {
      height: 45px;
    }
  }
}
</style>