|
@@ -2,11 +2,10 @@
|
|
<!-- 登录 -->
|
|
<!-- 登录 -->
|
|
<div class="login">
|
|
<div class="login">
|
|
<s-header
|
|
<s-header
|
|
- :name="sys ? sys.title : $t('public.sysName')"
|
|
|
|
- :noback="false"
|
|
|
|
|
|
+ :name="sys ? sys.title : $t('public.sysName')"
|
|
></s-header>
|
|
></s-header>
|
|
<div class="loginLogoBox l-re">
|
|
<div class="loginLogoBox l-re">
|
|
- <van-image class="loginLogo" :src="sys ? sys.imgUrl : logiLogoImgUrl" />
|
|
|
|
|
|
+ <van-image class="loginLogo" :src="sys ? sys.imgUrl : logiLogoImgUrl"/>
|
|
<div class="l-ab pointer languageCon" @click="languageClk">
|
|
<div class="l-ab pointer languageCon" @click="languageClk">
|
|
<div class="c-text-b c-color-theme">
|
|
<div class="c-text-b c-color-theme">
|
|
{{ compLang }}
|
|
{{ compLang }}
|
|
@@ -19,48 +18,58 @@
|
|
<div class="loginFormBox">
|
|
<div class="loginFormBox">
|
|
<van-form @submit="onSubmit">
|
|
<van-form @submit="onSubmit">
|
|
<van-field
|
|
<van-field
|
|
- v-model="userName"
|
|
|
|
- name="userName"
|
|
|
|
- label=""
|
|
|
|
- :placeholder="$t('login.userNameInput')"
|
|
|
|
- :rules="[{ required: true, message: $t('login.userNameInput') }]"
|
|
|
|
|
|
+ v-model="userName"
|
|
|
|
+ name="userName"
|
|
|
|
+ label=""
|
|
|
|
+ :placeholder="$t('login.userNameInput')"
|
|
|
|
+ :rules="[{ required: true, message: $t('login.userNameInput') }]"
|
|
/>
|
|
/>
|
|
<van-field
|
|
<van-field
|
|
- v-model="userPwd"
|
|
|
|
- type="password"
|
|
|
|
- name="userPwd"
|
|
|
|
- label=""
|
|
|
|
- :placeholder="$t('login.passWordInput')"
|
|
|
|
- :rules="[{ required: true, message: $t('login.passWordInput') }]"
|
|
|
|
|
|
+ v-model="userPwd"
|
|
|
|
+ type="password"
|
|
|
|
+ name="userPwd"
|
|
|
|
+ label=""
|
|
|
|
+ :placeholder="$t('login.passWordInput')"
|
|
|
|
+ :rules="[{ required: true, message: $t('login.passWordInput') }]"
|
|
/>
|
|
/>
|
|
<div class="checkedPasswordBox">
|
|
<div class="checkedPasswordBox">
|
|
<van-checkbox
|
|
<van-checkbox
|
|
- icon-size="18px"
|
|
|
|
- class="checkedPassWord"
|
|
|
|
- v-model="checked"
|
|
|
|
- checked-color="#4d6add"
|
|
|
|
|
|
+ icon-size="18px"
|
|
|
|
+ class="checkedPassWord"
|
|
|
|
+ v-model="checked"
|
|
|
|
+ checked-color="#4d6add"
|
|
>
|
|
>
|
|
<template #default>
|
|
<template #default>
|
|
<span :class="checked ? 'c-color-theme' : ''">{{
|
|
<span :class="checked ? 'c-color-theme' : ''">{{
|
|
- $t("login.checkedPassWord")
|
|
|
|
- }}</span>
|
|
|
|
|
|
+ $t("login.checkedPassWord")
|
|
|
|
+ }}</span>
|
|
</template>
|
|
</template>
|
|
</van-checkbox>
|
|
</van-checkbox>
|
|
<span class="forgetPassWord" @click="forgetPassword">{{
|
|
<span class="forgetPassWord" @click="forgetPassword">{{
|
|
- $t("login.forgetPassWord")
|
|
|
|
- }}</span>
|
|
|
|
|
|
+ $t("login.forgetPassWord")
|
|
|
|
+ }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
+ <br>
|
|
|
|
+ <br>
|
|
|
|
+ <!-- 微信登录 -->
|
|
|
|
+ <div v-if="isInWeChat" class="loginWithWechatClass">
|
|
|
|
+ <van-button class="wechat-btn" type="primary" size="large" @click="wxLoginHandler" >
|
|
|
|
+ <van-icon name="wechat" color="#1bd66c" size="40" class="wechat-icon"/>
|
|
|
|
+ </van-button>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
<div class="buttonBox">
|
|
<div class="buttonBox">
|
|
<van-button
|
|
<van-button
|
|
- round
|
|
|
|
- type="primary"
|
|
|
|
- class="register"
|
|
|
|
- @click="registerClick"
|
|
|
|
- >{{ $t("login.regusterButton") }}
|
|
|
|
|
|
+ round
|
|
|
|
+ type="primary"
|
|
|
|
+ class="register"
|
|
|
|
+ @click="registerClick"
|
|
|
|
+ >{{ $t("login.regusterButton") }}
|
|
</van-button>
|
|
</van-button>
|
|
<van-button round type="primary" native-type="submit">{{
|
|
<van-button round type="primary" native-type="submit">{{
|
|
- $t("login.loginButton")
|
|
|
|
- }}</van-button>
|
|
|
|
|
|
+ $t("login.loginButton")
|
|
|
|
+ }}
|
|
|
|
+ </van-button>
|
|
</div>
|
|
</div>
|
|
</van-form>
|
|
</van-form>
|
|
</div>
|
|
</div>
|
|
@@ -69,25 +78,24 @@
|
|
|
|
|
|
<script>
|
|
<script>
|
|
import md5 from "js-md5";
|
|
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 {onMounted, ref, computed, reactive} from "vue";
|
|
|
|
+import {Toast, Dialog, Button} from "vant";
|
|
|
|
+import {login, getSys, wxLogin} from "@/service/login";
|
|
|
|
+import {setLocal, getLocal, navigatorLanguage} from "@/common/js/utils";
|
|
import sHeader from "@/components/SimpleHeader";
|
|
import sHeader from "@/components/SimpleHeader";
|
|
import logiLogoImgUrl from "@/assets/login/logo.png";
|
|
import logiLogoImgUrl from "@/assets/login/logo.png";
|
|
-import { useRoute, useRouter } from "vue-router";
|
|
|
|
-import { useI18n } from "vue-i18n";
|
|
|
|
-// vant组件的中英文切换
|
|
|
|
-import { Locale } from "vant";
|
|
|
|
|
|
+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 enUS from "vant/es/locale/lang/en-US";
|
|
// 引入简体中文语言包
|
|
// 引入简体中文语言包
|
|
import zhCN from "vant/es/locale/lang/zh-CN";
|
|
import zhCN from "vant/es/locale/lang/zh-CN";
|
|
-
|
|
|
|
export default {
|
|
export default {
|
|
setup() {
|
|
setup() {
|
|
let languageName = ref(getLocal("curLang"));
|
|
let languageName = ref(getLocal("curLang"));
|
|
- const { locale,t } = useI18n();
|
|
|
|
|
|
+ const {locale, t} = useI18n();
|
|
// 语言点击
|
|
// 语言点击
|
|
const languageClk = () => {
|
|
const languageClk = () => {
|
|
if (languageName.value === "zh") {
|
|
if (languageName.value === "zh") {
|
|
@@ -131,7 +139,7 @@ export default {
|
|
}
|
|
}
|
|
});
|
|
});
|
|
const getSysFun = async () => {
|
|
const getSysFun = async () => {
|
|
- const { data } = await getSys({
|
|
|
|
|
|
+ const {data} = await getSys({
|
|
relationAdminId: route.query.relation_admin_id,
|
|
relationAdminId: route.query.relation_admin_id,
|
|
});
|
|
});
|
|
if (data.code === "00000") {
|
|
if (data.code === "00000") {
|
|
@@ -142,7 +150,7 @@ export default {
|
|
};
|
|
};
|
|
// 登录
|
|
// 登录
|
|
const onSubmit = async (values) => {
|
|
const onSubmit = async (values) => {
|
|
- const { data } = await login({
|
|
|
|
|
|
+ const {data} = await login({
|
|
username: values.userName,
|
|
username: values.userName,
|
|
password: md5(values.userPwd),
|
|
password: md5(values.userPwd),
|
|
});
|
|
});
|
|
@@ -151,9 +159,9 @@ export default {
|
|
Toast.success(t('login.loginSucess'));
|
|
Toast.success(t('login.loginSucess'));
|
|
// 需要刷新页面,否则 axios.js 文件里的 token 不会被重置
|
|
// 需要刷新页面,否则 axios.js 文件里的 token 不会被重置
|
|
// window.location.href = '/';
|
|
// window.location.href = '/';
|
|
- setTimeout(()=>{
|
|
|
|
|
|
+ setTimeout(() => {
|
|
router.push("/home");
|
|
router.push("/home");
|
|
- },200);
|
|
|
|
|
|
+ }, 200);
|
|
} else {
|
|
} else {
|
|
Toast.fail(data.message);
|
|
Toast.fail(data.message);
|
|
}
|
|
}
|
|
@@ -167,6 +175,44 @@ export default {
|
|
router.push("/forgetpassword");
|
|
router.push("/forgetpassword");
|
|
};
|
|
};
|
|
|
|
|
|
|
|
+
|
|
|
|
+ const state = reactive({
|
|
|
|
+ isLoading: false
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ const wxLoginHandler = async () => {
|
|
|
|
+ state.isLoading = true
|
|
|
|
+ try {
|
|
|
|
+ // 用户默认授权,获取 openid
|
|
|
|
+ const {data} = await wxLogin();
|
|
|
|
+ if (data.code === "00000") {
|
|
|
|
+ Toast.success(t('login.loginSucess'));
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ router.push("/home");
|
|
|
|
+ }, 200);
|
|
|
|
+ } else {
|
|
|
|
+ // 用户未绑定微信
|
|
|
|
+ handleError('您还未绑定微信,请先前往个人中心进行绑定。')
|
|
|
|
+ }
|
|
|
|
+ } catch (error) {
|
|
|
|
+ handleError(error.message || '登录失败,请重试')
|
|
|
|
+ } finally {
|
|
|
|
+ state.isLoading = false
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const isInWeChat = computed(() => {
|
|
|
|
+ const ua = window.navigator.userAgent.toLowerCase();
|
|
|
|
+ return new RegExp('micromessenger').test(ua);
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ const handleError = (errMsg) => {
|
|
|
|
+ Dialog.alert({
|
|
|
|
+ title: '错误提示',
|
|
|
|
+ message: errMsg
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+
|
|
return {
|
|
return {
|
|
logiLogoImgUrl,
|
|
logiLogoImgUrl,
|
|
checked,
|
|
checked,
|
|
@@ -178,9 +224,16 @@ export default {
|
|
sys,
|
|
sys,
|
|
compLang,
|
|
compLang,
|
|
languageClk,
|
|
languageClk,
|
|
|
|
+ isInWeChat,
|
|
|
|
+ state,
|
|
|
|
+ wxLoginHandler
|
|
};
|
|
};
|
|
},
|
|
},
|
|
- components: { sHeader },
|
|
|
|
|
|
+ components: {
|
|
|
|
+ sHeader,
|
|
|
|
+ [Button.name]: Button,
|
|
|
|
+ [Dialog.name]: Dialog
|
|
|
|
+ },
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
|
|
|
|
@@ -202,6 +255,7 @@ export default {
|
|
height: 87px;
|
|
height: 87px;
|
|
margin-top: 41px;
|
|
margin-top: 41px;
|
|
}
|
|
}
|
|
|
|
+
|
|
.languageCon {
|
|
.languageCon {
|
|
right: 10px;
|
|
right: 10px;
|
|
top: 10px;
|
|
top: 10px;
|
|
@@ -319,9 +373,53 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ .loginWithWechatClass {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ }
|
|
|
|
+ .wechat-btn {
|
|
|
|
+ width: 60px;
|
|
|
|
+ height: 60px;
|
|
|
|
+ margin: 0;
|
|
|
|
+ padding: 0;
|
|
|
|
+ border: none;
|
|
|
|
+ border-radius: 50%; /* 将按钮样式修改为圆形 */
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .wechat-icon {
|
|
|
|
+ width: 40px;
|
|
|
|
+ height: 40px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ //.wechatBox{
|
|
|
|
+ // height: 100vh;
|
|
|
|
+ // display: flex;
|
|
|
|
+ // justify-content: center;
|
|
|
|
+ // align-items: center;
|
|
|
|
+ //}
|
|
|
|
+ //.loginWithWechat {
|
|
|
|
+ //
|
|
|
|
+ //
|
|
|
|
+ //}
|
|
|
|
+ //
|
|
|
|
+ //.wechat-btn {
|
|
|
|
+ // display: flex;
|
|
|
|
+ // align-items: center;
|
|
|
|
+ // justify-content: center;
|
|
|
|
+ // color: #0dc3c3;
|
|
|
|
+ // background-color: rosybrown;
|
|
|
|
+ // width: 120px;
|
|
|
|
+ // height: 40px;
|
|
|
|
+ // border-radius: 20px;
|
|
|
|
+ //}
|
|
|
|
+
|
|
.buttonBox {
|
|
.buttonBox {
|
|
width: 281px;
|
|
width: 281px;
|
|
- margin: 58px auto 0 auto;
|
|
|
|
|
|
+ margin: 20px auto 0 auto;
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
|
|
|