account.vue 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
  1. <template>
  2. <el-form ref="formRef" size="large" class="login-content-form" :model="state.ruleForm" :rules="rules" @keyup.enter="loginClick">
  3. <!-- <el-form-item class="login-animation1" prop="merchant_code">
  4. <el-input type="text" :placeholder="'请输入商户号'" v-model="ruleForm.merchant_code" clearable autocomplete="off">
  5. <template #prefix>
  6. <el-icon class="el-input__icon"><ele-Shop /></el-icon>
  7. </template>
  8. </el-input>
  9. </el-form-item> -->
  10. <el-form-item class="login-animation1" prop="username">
  11. <el-input type="text" :placeholder="$t('message.account.accountPlaceholder1')" v-model="ruleForm.username" clearable autocomplete="off">
  12. <template #prefix>
  13. <el-icon class="el-input__icon"><ele-User /></el-icon>
  14. </template>
  15. </el-input>
  16. </el-form-item>
  17. <el-form-item class="login-animation2" prop="password">
  18. <el-input :type="isShowPassword ? 'text' : 'password'" :placeholder="$t('message.account.accountPlaceholder2')" v-model="ruleForm.password">
  19. <template #prefix>
  20. <el-icon class="el-input__icon"><ele-Unlock /></el-icon>
  21. </template>
  22. <template #suffix>
  23. <i
  24. class="iconfont el-input__icon login-content-password"
  25. :class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
  26. @click="isShowPassword = !isShowPassword"
  27. >
  28. </i>
  29. </template>
  30. </el-input>
  31. </el-form-item>
  32. <el-form-item class="login-animation3" v-if="isShowCaptcha" prop="captcha">
  33. <el-col :span="15">
  34. <el-input
  35. type="text"
  36. maxlength="4"
  37. :placeholder="$t('message.account.accountPlaceholder3')"
  38. v-model="ruleForm.captcha"
  39. clearable
  40. autocomplete="off"
  41. >
  42. <template #prefix>
  43. <el-icon class="el-input__icon"><ele-Position /></el-icon>
  44. </template>
  45. </el-input>
  46. </el-col>
  47. <el-col :span="1"></el-col>
  48. <el-col :span="8">
  49. <el-button class="login-content-captcha">
  50. <el-image :src="ruleForm.captchaImgBase" @click="refreshCaptcha" />
  51. </el-button>
  52. </el-col>
  53. </el-form-item>
  54. <el-form-item>
  55. <el-checkbox v-model="state.agreePolicy">
  56. 已阅读并同意
  57. <a href="/user-agreement" target="_blank" class="login-link">《用户服务协议》</a>
  58. <a href="/privacy-policy" target="_blank" class="login-link">《隐私协议》</a>
  59. </el-checkbox>
  60. </el-form-item>
  61. <el-form-item class="login-animation4">
  62. <el-button type="primary" class="login-content-submit" round @click="loginClick" :loading="loading.signIn" :disabled="!state.agreePolicy">
  63. <span>{{ $t('message.account.accountBtnText') }}</span>
  64. </el-button>
  65. </el-form-item>
  66. </el-form>
  67. <!-- 申请试用-->
  68. <div style="text-align: center" v-if="showApply()">
  69. <el-button class="login-content-apply" link type="primary" plain round @click="applyBtnClick">
  70. <span>申请试用</span>
  71. </el-button>
  72. </div>
  73. </template>
  74. <script lang="ts">
  75. import { toRefs, reactive, defineComponent, computed, onMounted, onUnmounted, ref } from 'vue';
  76. import { useRoute, useRouter } from 'vue-router';
  77. import { ElMessage, FormInstance, FormRules } from 'element-plus';
  78. import { useI18n } from 'vue-i18n';
  79. import Cookies from 'js-cookie';
  80. import { storeToRefs } from 'pinia';
  81. import { useThemeConfig } from '/@/stores/themeConfig';
  82. import { initFrontEndControlRoutes } from '/@/router/frontEnd';
  83. import { initBackEndControlRoutes } from '/@/router/backEnd';
  84. import { Session } from '/@/utils/storage';
  85. import { formatAxis } from '/@/utils/formatTime';
  86. import { NextLoading } from '/@/utils/loading';
  87. import * as loginApi from '/@/views/system/login/api';
  88. import { useUserInfo } from '/@/stores/userInfo';
  89. import { DictionaryStore } from '/@/stores/dictionary';
  90. import { SystemConfigStore } from '/@/stores/systemConfig';
  91. import { BtnPermissionStore } from '/@/plugin/permission/store.permission';
  92. import { Md5 } from 'ts-md5';
  93. import { errorMessage } from '/@/utils/message';
  94. import { getBaseURL } from '/@/utils/baseUrl';
  95. export default defineComponent({
  96. name: 'loginAccount',
  97. setup() {
  98. const { t } = useI18n();
  99. const storesThemeConfig = useThemeConfig();
  100. const { themeConfig } = storeToRefs(storesThemeConfig);
  101. const { userInfos } = storeToRefs(useUserInfo());
  102. const route = useRoute();
  103. const router = useRouter();
  104. const state = reactive({
  105. isShowPassword: false,
  106. ruleForm: {
  107. username: '',
  108. password: '',
  109. captcha: '',
  110. captchaKey: '',
  111. captchaImgBase: '',
  112. //merchant_code: localStorage.getItem('merchant_code') || 'ML01',
  113. tenant_id: 1,
  114. },
  115. loading: {
  116. signIn: false,
  117. },
  118. agreePolicy: true,
  119. });
  120. const rules = reactive<FormRules>({
  121. //merchant_code: [{ required: true, message: '请填写商户号', trigger: 'blur' }],
  122. username: [{ required: true, message: '请填写账号', trigger: 'blur' }],
  123. password: [
  124. {
  125. required: true,
  126. message: '请填写密码',
  127. trigger: 'blur',
  128. },
  129. ],
  130. captcha: [
  131. {
  132. required: true,
  133. message: '请填写验证码',
  134. trigger: 'blur',
  135. },
  136. ],
  137. });
  138. const formRef = ref();
  139. // 时间获取
  140. const currentTime = computed(() => {
  141. return formatAxis(new Date());
  142. });
  143. // 是否关闭验证码
  144. const isShowCaptcha = computed(() => {
  145. return SystemConfigStore().systemConfig['base.captcha_state'];
  146. });
  147. const getCaptcha = async () => {
  148. loginApi.getCaptcha().then((ret: any) => {
  149. state.ruleForm.captchaImgBase = ret.data.image_base;
  150. state.ruleForm.captchaKey = ret.data.key;
  151. });
  152. };
  153. const applyBtnClick = async () => {
  154. window.open(getBaseURL('/api/system/apply_for_trial/'));
  155. };
  156. const refreshCaptcha = async () => {
  157. state.ruleForm.captcha = '';
  158. loginApi.getCaptcha().then((ret: any) => {
  159. state.ruleForm.captchaImgBase = ret.data.image_base;
  160. state.ruleForm.captchaKey = ret.data.key;
  161. });
  162. };
  163. const loginClick = async () => {
  164. if (!formRef.value) return;
  165. await formRef.value.validate((valid: any) => {
  166. if (valid) {
  167. loginApi
  168. .login({ ...state.ruleForm, password: Md5.hashStr(state.ruleForm.password) })
  169. .then((res: any) => {
  170. if (res.code === 2000) {
  171. const { data } = res;
  172. Cookies.set('username', res.data.username);
  173. Session.set('token', res.data.access);
  174. Session.set('merchant_info', res.data.merchant_info);
  175. useUserInfo().setPwdChangeCount(data.pwd_change_count);
  176. /* if (data.pwd_change_count == 0) {
  177. return router.push('/login');
  178. } */
  179. if (!themeConfig.value.isRequestRoutes) {
  180. // 前端控制路由,2、请注意执行顺序
  181. initFrontEndControlRoutes();
  182. loginSuccess();
  183. } else {
  184. // 模拟后端控制路由,isRequestRoutes 为 true,则开启后端控制路由
  185. // 添加完动态路由,再进行 router 跳转,否则可能报错 No match found for location with path "/"
  186. initBackEndControlRoutes();
  187. // 执行完 initBackEndControlRoutes,再执行 signInSuccess
  188. loginSuccess();
  189. }
  190. }
  191. })
  192. .catch((err: any) => {
  193. // 登录错误之后,刷新验证码
  194. refreshCaptcha();
  195. });
  196. } else {
  197. errorMessage('请填写登录信息');
  198. }
  199. });
  200. };
  201. // 登录成功后的跳转
  202. const loginSuccess = () => {
  203. //获取所有字典
  204. DictionaryStore().getSystemDictionarys();
  205. // 初始化登录成功时间问候语
  206. let currentTimeInfo = currentTime.value;
  207. // 登录成功,跳到转首页
  208. const pwd_change_count = userInfos.value.pwd_change_count;
  209. router.push('/');
  210. state.loading.signIn = true;
  211. const signInText = t('message.signInText');
  212. ElMessage.success(`${currentTimeInfo},${signInText}`);
  213. /* if (pwd_change_count > 0) {
  214. // 如果是复制粘贴的路径,非首页/登录页,那么登录成功后重定向到对应的路径中
  215. if (route.query?.redirect) {
  216. router.push({
  217. path: <string>route.query?.redirect,
  218. query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
  219. });
  220. } else {
  221. }
  222. // 登录成功提示
  223. // 关闭 loading
  224. } */
  225. // 添加 loading,防止第一次进入界面时出现短暂空白
  226. NextLoading.start();
  227. };
  228. onMounted(() => {
  229. getCaptcha();
  230. //获取系统配置
  231. SystemConfigStore().getSystemConfigs();
  232. });
  233. // 是否显示申请试用按钮
  234. const showApply = () => {
  235. return window.location.href.indexOf('public') != -1;
  236. };
  237. return {
  238. refreshCaptcha,
  239. loginClick,
  240. loginSuccess,
  241. isShowCaptcha,
  242. state,
  243. formRef,
  244. rules,
  245. applyBtnClick,
  246. showApply,
  247. ...toRefs(state),
  248. };
  249. },
  250. });
  251. </script>
  252. <style scoped lang="scss">
  253. .login-content-form {
  254. margin-top: 20px;
  255. @for $i from 1 through 4 {
  256. .login-animation#{$i} {
  257. opacity: 0;
  258. animation-name: error-num;
  259. animation-duration: 0.5s;
  260. animation-fill-mode: forwards;
  261. animation-delay: calc($i/10) + s;
  262. }
  263. }
  264. .login-content-password {
  265. display: inline-block;
  266. width: 20px;
  267. cursor: pointer;
  268. &:hover {
  269. color: #909399;
  270. }
  271. }
  272. .login-content-captcha {
  273. width: 100%;
  274. padding: 0;
  275. font-weight: bold;
  276. letter-spacing: 5px;
  277. }
  278. .login-content-submit {
  279. width: 100%;
  280. letter-spacing: 2px;
  281. font-weight: 800;
  282. margin-top: 15px;
  283. }
  284. :deep(.el-checkbox__label) {
  285. color: #808080 !important;
  286. }
  287. :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
  288. color: #808080 !important;
  289. }
  290. .login-link {
  291. color: #0017ab;
  292. text-decoration: none;
  293. cursor: pointer;
  294. &:hover {
  295. color: #0017ab;
  296. }
  297. }
  298. }
  299. </style>