|
@@ -35,71 +35,8 @@
|
|
|
<div class="top">
|
|
|
<div class="item1">{{ L["账号登录"] }}</div>
|
|
|
</div>
|
|
|
- <div class="center">
|
|
|
- <div class="item account">
|
|
|
- <span
|
|
|
- style="color: #bbb; font-size: 19px; padding-top: 7px"
|
|
|
- class="icon iconfont icon-wode"
|
|
|
- ></span>
|
|
|
- <input
|
|
|
- type="text"
|
|
|
- v-model="name"
|
|
|
- :placeholder="L['请输入邮箱']"
|
|
|
- class="input"
|
|
|
- @blur="validateEmail"
|
|
|
- autocomplete="off"
|
|
|
- />
|
|
|
- <div
|
|
|
- data-type="userName"
|
|
|
- class="cancel"
|
|
|
- @click="clearInputVal('name')"
|
|
|
- >
|
|
|
- <span style="color: #bbb" class="iconfont icon-cuowu"></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="error" v-if="emailErrorMsg">
|
|
|
- <span
|
|
|
- style="color: #e1251b; font-size: 14px"
|
|
|
- class="iconfont icon-jubao"
|
|
|
- ></span>
|
|
|
- {{ emailErrorMsg }}
|
|
|
- </div>
|
|
|
- <div class="item password">
|
|
|
- <span
|
|
|
- style="color: #bbb; font-size: 21px; padding-top: 7px"
|
|
|
- class="icon iconfont icon-mima1"
|
|
|
- ></span>
|
|
|
- <input
|
|
|
- type="password"
|
|
|
- v-model="password"
|
|
|
- :placeholder="L['请输入密码']"
|
|
|
- class="input"
|
|
|
- autocomplete="new-password"
|
|
|
- />
|
|
|
- <div
|
|
|
- data-type="password"
|
|
|
- class="cancel"
|
|
|
- @click="clearInputVal('password')"
|
|
|
- >
|
|
|
- <span style="color: #bbb" class="iconfont icon-cuowu"></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="error" v-if="errorMsg">
|
|
|
- <span
|
|
|
- style="color: #e1251b; font-size: 14px"
|
|
|
- class="iconfont icon-jubao"
|
|
|
- ></span>
|
|
|
- {{ errorMsg }}
|
|
|
- </div>
|
|
|
- <el-button
|
|
|
- @click="login"
|
|
|
- :class="{ submit: true, disabled: loginDisabled }"
|
|
|
- :disabled="loginDisabled"
|
|
|
- :loading="loginLoding"
|
|
|
- >{{ L["登录"] }}</el-button
|
|
|
- >
|
|
|
- </div>
|
|
|
+ <LoginEmail ref="loginEmail" v-if="appType === 'user'" :loginLoding="loginLoding" @login="login" />
|
|
|
+ <LoginPhone ref="loginPhone" v-if="appType === 'distributor'" :loginLoding="loginLoding" @login="login" />
|
|
|
<div
|
|
|
:class="{
|
|
|
bottom: true,
|
|
@@ -128,29 +65,26 @@ import { useUserInfo } from "@/store/user.js";
|
|
|
import { useFiltersStore } from "@/store/filter.js";
|
|
|
const configInfo = useUserInfo();
|
|
|
const filtersStore = useFiltersStore();
|
|
|
-const isLoading = ref(false);
|
|
|
|
|
|
-// const L = lang_zn;
|
|
|
+const loginEmail = ref();
|
|
|
+const loginPhone = ref()
|
|
|
+
|
|
|
+const config = useRuntimeConfig();
|
|
|
+const appType = config.public.appType;
|
|
|
+
|
|
|
const L = getCurLanguage();
|
|
|
const router = useRouter();
|
|
|
const route = useRoute();
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
-const keyEnter = ref(true);
|
|
|
-const errorMsg = ref(); //错误提示
|
|
|
-const name = ref(""); //账户
|
|
|
-const password = ref(""); //密码
|
|
|
-const loginType = ref(1); //登陆类型:1-账号密码登陆,2-手机验证码登陆
|
|
|
+// const keyEnter = ref(true);
|
|
|
+const loginLoding = ref(false)
|
|
|
+
|
|
|
const defaultImg = ref("/common_top_logo.png");
|
|
|
const defaultBgImg = ref("/login_bg.png");
|
|
|
const fromurl = ref("");
|
|
|
const wxEnable = ref("");
|
|
|
-const pwdCalc = ref();
|
|
|
const ImgBG = ref("");
|
|
|
-const loginLoding = ref(false);
|
|
|
-const emailCalc = ref();
|
|
|
-const emailErrorMsg = ref('')
|
|
|
|
|
|
-const loginDisabled = computed(() => !name.value || !password.value);
|
|
|
useHead({
|
|
|
title: "Login",
|
|
|
meta: [
|
|
@@ -165,15 +99,15 @@ useHead({
|
|
|
],
|
|
|
});
|
|
|
|
|
|
-//由于这里的回车键触发事件和商品搜索框的回车键触发事件冲突,引入keyEnter变量判断
|
|
|
-if (process.client) {
|
|
|
- document.onkeydown = function () {
|
|
|
- var key = window.event.keyCode;
|
|
|
- if (key == 13 && keyEnter.value) {
|
|
|
- login();
|
|
|
- }
|
|
|
- };
|
|
|
-}
|
|
|
+// //由于这里的回车键触发事件和商品搜索框的回车键触发事件冲突,引入keyEnter变量判断
|
|
|
+// if (process.client) {
|
|
|
+// document.onkeydown = function () {
|
|
|
+// var key = window.event.keyCode;
|
|
|
+// if (key == 13 && keyEnter.value) {
|
|
|
+// // login();
|
|
|
+// }
|
|
|
+// };
|
|
|
+// }
|
|
|
|
|
|
//获取背景图
|
|
|
const getBg = () => {
|
|
@@ -185,103 +119,39 @@ const getBg = () => {
|
|
|
};
|
|
|
getBg();
|
|
|
|
|
|
-// 校验邮箱
|
|
|
-const validateEmail = () => {
|
|
|
- //邮箱非空的验证
|
|
|
- if (!name.value) {
|
|
|
- emailErrorMsg.value = L["请输入邮箱"];
|
|
|
- return false;
|
|
|
- }
|
|
|
-
|
|
|
- // 邮箱格式验证
|
|
|
- emailCalc.value = checkEmail(name.value);
|
|
|
- if (emailCalc.value !== true) {
|
|
|
- emailErrorMsg.value = emailCalc.value;
|
|
|
- return false;
|
|
|
- }
|
|
|
- emailErrorMsg.value = "";
|
|
|
-
|
|
|
- return true;
|
|
|
-};
|
|
|
-
|
|
|
-const login = () => {
|
|
|
- let param = {};
|
|
|
- param.username = name.value;
|
|
|
- param.password = password.value;
|
|
|
- param.loginType = loginType.value;
|
|
|
-
|
|
|
- //邮箱验证
|
|
|
- if (!validateEmail()) return;
|
|
|
-
|
|
|
- //密码校验
|
|
|
- if (!param.password) {
|
|
|
- errorMsg.value = L["请输入密码"];
|
|
|
- return false;
|
|
|
- } else {
|
|
|
- pwdCalc.value = checkPwd(param.password);
|
|
|
- if (pwdCalc.value !== true) {
|
|
|
- errorMsg.value = pwdCalc.value;
|
|
|
- return false;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
+const login = (param) => {
|
|
|
loginLoding.value = true;
|
|
|
- post("v3/frontLogin/oauth/token", param).then((res) => {
|
|
|
- if (res.state == 200) {
|
|
|
- //将用户信息存缓存,并跳转到首页
|
|
|
- filtersStore.setLoginStatus(true);
|
|
|
- filtersStore.setToken(res.data.access_token);
|
|
|
- filtersStore.setRefreshToken(res.data.refresh_token);
|
|
|
- filtersStore.setTime(new Date().getTime().toString()); //存储refresh_token更新时间
|
|
|
- //获取用户信息,并同步信息到pinia
|
|
|
+ post("v3/frontLogin/oauth/token", param)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.state == 200) {
|
|
|
+ //将用户信息存缓存,并跳转到首页
|
|
|
+ filtersStore.setLoginStatus(true);
|
|
|
+ filtersStore.setToken(res.data.access_token);
|
|
|
+ filtersStore.setRefreshToken(res.data.refresh_token);
|
|
|
+ filtersStore.setTime(new Date().getTime().toString()); //存储refresh_token更新时间
|
|
|
+ //获取用户信息,并同步信息到pinia
|
|
|
|
|
|
- get("v3/member/front/member/getInfo")
|
|
|
- .then((res) => {
|
|
|
+ get("v3/member/front/member/getInfo").then((res) => {
|
|
|
if (res.state == 200) {
|
|
|
filtersStore.setMemberInfo(res.data);
|
|
|
router.replace({
|
|
|
- path: '/'
|
|
|
- })
|
|
|
- localStorage.setItem('isLoggedIn', 'true');
|
|
|
- setTimeout(() => {
|
|
|
- localStorage.removeItem('isLoggedIn');
|
|
|
- }, 200)
|
|
|
- // if (window.history.state.back) {
|
|
|
- // router.replace({
|
|
|
- // path: '/'
|
|
|
- // })
|
|
|
- // // if(window.history.state.back == '/register' || window.history.state.back == '/member/login/forget' || window.history.state.back == '/member/login/forget' || window.history.state.back == '/member/login/forget'){
|
|
|
- // // window.location.href = "/";
|
|
|
- // // }else{
|
|
|
- // // window.location.href = window.history.state.back;
|
|
|
- // // }
|
|
|
- // } else {
|
|
|
- // router.replace({ path: "/member/home" });
|
|
|
- // }
|
|
|
+ path: "/",
|
|
|
+ });
|
|
|
+ localStorage.setItem("isLoggedIn", "true");
|
|
|
+ setTimeout(() => {
|
|
|
+ localStorage.removeItem("isLoggedIn");
|
|
|
+ }, 200);
|
|
|
}
|
|
|
- })
|
|
|
- } else {
|
|
|
- //提示错误
|
|
|
- errorMsg.value = res.msg;
|
|
|
- }
|
|
|
- }).finally(() => {
|
|
|
- loginLoding.value = false;
|
|
|
- })
|
|
|
-};
|
|
|
-//清空输入框内容
|
|
|
-const clearInputVal = (type) => {
|
|
|
- if (type == "name") {
|
|
|
- name.value = "";
|
|
|
- } else if (type == "password") {
|
|
|
- password.value = "";
|
|
|
- }
|
|
|
-};
|
|
|
-//登录方式切换
|
|
|
-const changeLoginType = (type) => {
|
|
|
- loginType.value = type;
|
|
|
- name.value = "";
|
|
|
- password.value = "";
|
|
|
- errorMsg.value = "";
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ //提示错误
|
|
|
+ const instance = appType === 'user' ? loginEmail.value : loginPhone.value;
|
|
|
+ instance.updateErrorMsg(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ loginLoding.value = false;
|
|
|
+ });
|
|
|
};
|
|
|
|
|
|
//通过replace方式跳转页面
|
|
@@ -291,20 +161,6 @@ const goToPage = (type) => {
|
|
|
});
|
|
|
};
|
|
|
|
|
|
-watch([name, password], () => {
|
|
|
- if (loginType.value == 1) {
|
|
|
- password.value = password.value.substring(0, 20);
|
|
|
- // name.value = memberEmail.value.substring(0, 20)
|
|
|
- } else {
|
|
|
- password.value = password.value.substring(0, 6);
|
|
|
- // name.value = memberEmail.value.substring(0, .gitignore)
|
|
|
- }
|
|
|
-
|
|
|
- if (password.value || name.value) {
|
|
|
- errorMsg.value = "";
|
|
|
- }
|
|
|
-});
|
|
|
-
|
|
|
onMounted(() => {
|
|
|
if (route.query.redirectUrl) {
|
|
|
fromurl.value =
|
|
@@ -318,13 +174,10 @@ onMounted(() => {
|
|
|
}
|
|
|
});
|
|
|
|
|
|
-// onBeforeRouteLeave(() => {
|
|
|
-// keyEnter.value = false;
|
|
|
-// });
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
@import "@/assets/style/register.scss";
|
|
|
-.center {
|
|
|
+:deep(.center) {
|
|
|
padding: 30px 30px 40px;
|
|
|
|
|
|
.item {
|