123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341 |
- <template>
- <!-- 登录 -->
- <div class="login">
- <s-header
- :name="sys ? sys.title : $t('public.sysName')"
- :noback="false"
- ></s-header>
- <div class="loginLogoBox l-re">
- <van-image class="loginLogo" :src="sys ? sys.imgUrl : logiLogoImgUrl" />
- <div class="l-ab pointer languageCon" @click="languageClk">
- <div class="c-text-b c-color-theme">
- {{ compLang }}
- </div>
- </div>
- </div>
- <div class="loginTitleBox l-flex-center">
- <span class="loginTitle">{{ $t("login.title") }}</span>
- </div>
- <div class="loginFormBox">
- <van-form @submit="onSubmit">
- <van-field
- v-model="userName"
- name="userName"
- label=""
- :placeholder="$t('login.userNameInput')"
- :rules="[{ required: true, message: $t('login.userNameInput') }]"
- />
- <van-field
- v-model="userPwd"
- type="password"
- name="userPwd"
- label=""
- :placeholder="$t('login.passWordInput')"
- :rules="[{ required: true, message: $t('login.passWordInput') }]"
- />
- <div class="checkedPasswordBox">
- <van-checkbox
- icon-size="18px"
- class="checkedPassWord"
- v-model="checked"
- checked-color="#4d6add"
- >
- <template #default>
- <span :class="checked ? 'c-color-theme' : ''">{{
- $t("login.checkedPassWord")
- }}</span>
- </template>
- </van-checkbox>
- <span class="forgetPassWord" @click="forgetPassword">{{
- $t("login.forgetPassWord")
- }}</span>
- </div>
- <div class="buttonBox">
- <van-button
- round
- type="primary"
- class="register"
- @click="registerClick"
- >{{ $t("login.regusterButton") }}
- </van-button>
- <van-button round type="primary" native-type="submit">{{
- $t("login.loginButton")
- }}</van-button>
- </div>
- </van-form>
- </div>
- </div>
- </template>
- <script>
- import md5 from "js-md5";
- import { onMounted, ref, computed } from "vue";
- import { Toast } from "vant";
- import { login, getSys } from "@/service/login";
- import { setLocal, getLocal, navigatorLanguage } from "@/common/js/utils";
- import sHeader from "@/components/SimpleHeader";
- import logiLogoImgUrl from "@/assets/login/logo.png";
- import { useRoute, useRouter } from "vue-router";
- import { useI18n } from "vue-i18n";
- // vant组件的中英文切换
- import { Locale } from "vant";
- // 引入英文语言包
- import enUS from "vant/es/locale/lang/en-US";
- // 引入简体中文语言包
- import zhCN from "vant/es/locale/lang/zh-CN";
- export default {
- setup() {
- let languageName = ref(getLocal("curLang"));
- const { locale,t } = useI18n();
- // 语言点击
- const languageClk = () => {
- if (languageName.value === "zh") {
- locale.value = "en";
- languageName.value = "en";
- setLocal("curLang", "en");
- // 切换vant语言包
- Locale.use("en-US", enUS);
- } else {
- locale.value = "zh";
- languageName.value = "zh";
- setLocal("curLang", "zh");
- // 切换vant语言包
- Locale.use("zh-CN", zhCN);
- }
- };
- const compLang = computed(() => {
- if (languageName.value === "en") {
- return "中文";
- } else {
- return "English";
- }
- });
- const checked = ref(false); // 是否记住密码状态
- const userName = ref("");
- const userPwd = ref("");
- const router = useRouter();
- const route = useRoute();
- const sys = ref(null);
- // 页面初始化
- onMounted(() => {
- // localStorage.clear();
- // 如果没有语言缓存
- if (!getLocal("curLang")) {
- // 根据浏览器语言重新缓存到localstorage
- setLocal("curLang", navigatorLanguage());
- languageName.value = getLocal("curLang");
- }
- if (route.query.relation_admin_id) {
- getSysFun();
- }
- });
- const getSysFun = async () => {
- const { data } = await getSys({
- relationAdminId: route.query.relation_admin_id,
- });
- if (data.code === "00000") {
- data.data.relationAdminId = route.query.relation_admin_id;
- setLocal("loginSys", JSON.stringify(data.data));
- sys.value = data.data;
- }
- };
- // 登录
- const onSubmit = async (values) => {
- const { data } = await login({
- username: values.userName,
- password: md5(values.userPwd),
- });
- if (data.code === "00000") {
- setLocal("loginUser", JSON.stringify(data.data));
- Toast.success(t('login.loginSucess'));
- // 需要刷新页面,否则 axios.js 文件里的 token 不会被重置
- // window.location.href = '/';
- setTimeout(()=>{
- router.push("/home");
- },200);
- } else {
- Toast.fail(data.message);
- }
- };
- // 跳转注册页面
- const registerClick = async () => {
- router.push("/register");
- };
- // 跳转忘记密码页面
- const forgetPassword = async () => {
- router.push("/forgetpassword");
- };
- return {
- logiLogoImgUrl,
- checked,
- userName,
- userPwd,
- onSubmit,
- registerClick,
- forgetPassword,
- sys,
- compLang,
- languageClk,
- };
- },
- components: { sHeader },
- };
- </script>
- <style lang="less" scoped>
- @import "../common/style/mixin";
- .login {
- display: flex;
- flex-wrap: wrap;
- flex-direction: row;
- align-content: flex-start;
- .loginLogoBox {
- width: 100%;
- text-align: center;
- .loginLogo {
- width: 216px;
- height: 87px;
- margin-top: 41px;
- }
- .languageCon {
- right: 10px;
- top: 10px;
- border: 1px solid #4d6add;
- padding: 5px 10px;
- border-radius: 10px;
- }
- }
- .loginTitleBox {
- width: 100%;
- .loginTitle {
- // width: 80px;
- height: 28px;
- overflow-wrap: break-word;
- color: #404d74;
- font-size: 20px;
- font-family: PingFangSC-Medium;
- text-align: center;
- white-space: nowrap;
- line-height: 28px;
- display: block;
- margin: 8px auto 0 auto;
- font-weight: 600;
- }
- }
- .loginFormBox {
- width: 100%;
- margin-top: 38px;
- /deep/ .van-field__body {
- height: 100%;
- }
- .van-form .van-cell {
- width: 281px;
- height: 38px;
- background-color: rgba(255, 255, 255, 1);
- border-radius: 2px;
- border: 0.5px solid rgba(185, 186, 208, 1);
- padding: 0;
- color: rgba(168, 168, 197, 1);
- font-size: 13px;
- margin: 0 auto;
- margin-top: 20px;
- overflow: visible;
- .van-field__control {
- height: 38px;
- line-height: 38px;
- padding: 6px;
- &:-internal-autofill-previewed,
- &:-internal-autofill-selected {
- -webkit-text-fill-color: #323233 !important;
- transition: background-color 5000s ease-in-out 0s !important;
- }
- }
- .van-field__control::-webkit-input-placeholder {
- color: rgba(168, 168, 197, 1);
- }
- }
- .checkedPasswordBox {
- width: 281px;
- margin: 20px auto 0 auto;
- font-size: 13px;
- color: #4d6add;
- display: flex;
- justify-content: space-between;
- height: 13px;
- line-height: 13px;
- .van-checkbox {
- overflow: visible;
- }
- .van-checkbox__icon {
- font-size: 13px;
- .van-icon {
- width: 12px;
- height: 12px;
- border-color: #4d6add;
- }
- }
- .van-checkbox__label {
- color: #4d6add;
- line-height: 13px;
- }
- .van-checkbox__icon--checked .van-icon-success {
- border-color: #4d6add;
- background: #4d6add;
- }
- .van-checkbox__icon--checked .van-icon-success::before {
- content: "";
- background: #fff;
- width: 40%;
- height: 40%;
- position: absolute;
- top: 30%;
- left: 30%;
- border-radius: 100%;
- }
- .forgetPassWord {
- cursor: pointer;
- }
- }
- }
- .buttonBox {
- width: 281px;
- margin: 58px auto 0 auto;
- display: flex;
- justify-content: space-between;
- .van-button {
- width: 120px;
- height: 34px;
- border: 1px solid rgba(77, 106, 221, 1);
- background-color: rgba(77, 106, 221, 1);
- }
- .register {
- background-color: transparent;
- color: rgba(77, 106, 221, 1);
- }
- }
- }
- </style>
|