index.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620
  1. <template>
  2. <div class="login-container">
  3. <div class="lang">
  4. <el-dropdown @command="translate">
  5. <span class="el-dropdown-link svgs">
  6. <svg-icon icon-class="lang" />
  7. </span>
  8. <el-dropdown-menu slot="dropdown">
  9. <el-dropdown-item command="zh-CN"
  10. :class="{'dropdown_selected':lang === 'zh-CN'}">
  11. <i class="el-icon-check"></i>
  12. 简体中文</el-dropdown-item>
  13. <el-dropdown-item command="en-US"
  14. :class="{'dropdown_selected':lang === 'en-US'}">
  15. <i class="el-icon-check"></i>
  16. English</el-dropdown-item>
  17. </el-dropdown-menu>
  18. </el-dropdown>
  19. </div>
  20. <div class="new-login">
  21. <div class="new-login-l">
  22. <div class="imgs">
  23. <img :src="$t('auth.logo')" alt="" :lang="$i18n.locale">
  24. <div class="img-text" >{{$t('auth.mgs')}}</div>
  25. </div>
  26. </div>
  27. <div class="new-login-r">
  28. <div class="title">{{$t('auth.signIn')}}</div>
  29. <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
  30. <el-form-item prop="username">
  31. <span class="svg-container">
  32. <svg-icon icon-class="user" />
  33. </span>
  34. <el-input ref="username" v-model="loginForm.username" :placeholder="$t('auth.username')" name="username" type="text" tabindex="1" auto-complete="on" />
  35. </el-form-item>
  36. <el-form-item prop="password" class="password">
  37. <span class="svg-container">
  38. <svg-icon icon-class="password" />
  39. </span>
  40. <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" :placeholder="$t('auth.password')" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
  41. <span class="show-pwd" @click="showPwd">
  42. <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
  43. </span>
  44. </el-form-item>
  45. <el-form-item class="rememberPassword">
  46. <input id="remember-password-checkbox" v-model="rememberPassword" type="checkbox" value="remember-me" @click="doRememberPassword($event)">
  47. <span for="remember-password-checkbox">
  48. {{$t('auth.rePassword')}}
  49. </span>
  50. </input>
  51. </el-form-item>
  52. </el-form>
  53. <el-button type="text" :loading="loading" class="btn" @click.native.prevent="handleLogin">{{$t('auth.userBtn')}}</el-button>
  54. </div>
  55. </div>
  56. <div style="position: absolute;bottom: 0;left: 0;right:0;color: #000;background: #fee; opacity: .7; font-size: 14px;">
  57. <p style="text-align:center;line-height:16px;">
  58. {{$t('auth.companyTit')}}
  59. <a href="http://www.dairyinfo.com.cn" target="_blank"> {{$t('auth.company')}}</a>
  60. <!-- <a style="margin-left: 20px;" href="https://beian.miit.gov.cn/" target="_blank">沪ICP备11008303号-3 </a> -->
  61. </p>
  62. </div>
  63. </div>
  64. </template>
  65. <script>
  66. import { validUsername } from '@/utils/validate'
  67. import Cookies from 'js-cookie'
  68. import { getToken } from '@/utils/auth'
  69. import axios from 'axios'
  70. const md5 = require('md5')
  71. export default {
  72. name: 'Login',
  73. data() {
  74. console.log(this.$t('auth.usernames'),'0000')
  75. const validateUsername = (rule, value, callback) => {
  76. if (!validUsername(value)) {
  77. callback(new Error(this.$t('auth.userTname')))
  78. } else {
  79. callback()
  80. }
  81. }
  82. const validatePassword = (rule, value, callback) => {
  83. if (!value.length) {
  84. callback(new Error(this.$t('auth.userTpassword')))
  85. } else if (value.length < 6) {
  86. callback(new Error(this.$t('auth.passwordTest')))
  87. } else {
  88. callback()
  89. }
  90. }
  91. return {
  92. lang:"",
  93. loginForm: {
  94. username: '',
  95. password: ''
  96. },
  97. loginRules: {
  98. username: [
  99. {
  100. required: true,
  101. trigger: 'blur',
  102. message: this.$t('auth.usernames'),
  103. validator: validateUsername
  104. }
  105. ],
  106. password: [
  107. {
  108. required: true,
  109. trigger: 'blur',
  110. message: this.$t('auth.passwordPla'),
  111. validator: validatePassword
  112. }
  113. ]
  114. },
  115. loading: false,
  116. passwordType: 'password',
  117. redirect: undefined,
  118. rememberPassword: ''
  119. }
  120. },
  121. watch: {
  122. $route: {
  123. handler: function (route) {
  124. this.redirect = route.query && route.query.redirect
  125. },
  126. immediate: true
  127. }
  128. },
  129. created() {
  130. var that = this
  131. document.onkeydown = function (e) {
  132. e = window.event || e
  133. // eslint-disable-next-line eqeqeq
  134. if (
  135. that.$route.path == '/login' &&
  136. (e.code == 'Enter' || e.code == 'Num Enter')
  137. ) {
  138. // 验证在登录界面和按得键是回车键enter
  139. that.handleLogin('ruleForm2') // 登录函数 (handleSubmit2('ruleForm2')-登录按钮的点击事件)
  140. }
  141. }
  142. },
  143. mounted() {
  144. // 读取cookie中的账号信息,如果有accountInfo的话,则说明该用户之前勾选了记住密码的功能,则需要自动填上账号密码
  145. this.setSwitch()
  146. this.loadAccountInfo()
  147. },
  148. methods: {
  149. // 获取浏览器当前中英文
  150. setSwitch() {
  151. this.lang =localStorage.getItem('lang') || navigator.language
  152. },
  153. // 切换中英文的调用
  154. translate(val) {
  155. this.$i18n.locale = val
  156. localStorage.setItem('lang',val)
  157. location.reload();
  158. },
  159. showPwd() {
  160. if (this.passwordType === 'password') {
  161. this.passwordType = ''
  162. } else {
  163. this.passwordType = 'password'
  164. }
  165. this.$nextTick(() => {
  166. this.$refs.password.focus()
  167. })
  168. },
  169. handleLogin() {
  170. var obj = {
  171. username: this.loginForm.username,
  172. password: md5(this.loginForm.password)
  173. }
  174. var rememberStatus = this.rememberPassword
  175. var accountInfo = this.loginForm.username + '&' + this.loginForm.password
  176. this.$refs.loginForm.validate((valid) => {
  177. if (valid) {
  178. this.loading = true
  179. this.$store
  180. .dispatch('user/login', obj)
  181. .then(() => {
  182. // this.$store.dispatch('user/login', this.loginForm).then(() => {
  183. if (rememberStatus) {
  184. console.log('勾选了记住密码,现在开始写入cookie')
  185. Cookies.set('accountInfo', accountInfo, 1440 * 3)
  186. } else {
  187. console.log('没有勾选记住密码,现在开始删除账号cookie')
  188. Cookies.remove('accountInfo')
  189. }
  190. // 若为本地环境 则手写cookie
  191. if (window.location.href.indexOf('localhost') != -1) {
  192. Cookies.set('token', getToken(), 1440)
  193. }
  194. this.$router.push({ path: this.redirect || '/' })
  195. this.loading = false
  196. })
  197. .catch(() => {
  198. this.loading = false
  199. })
  200. } else {
  201. console.log('error submit!!')
  202. return false
  203. }
  204. })
  205. },
  206. doRememberPassword() {
  207. const rememberStatus = this.rememberPassword
  208. this.rememberPassword = !rememberStatus
  209. },
  210. loadAccountInfo: function () {
  211. const _this = this
  212. // zhaopeng&A15hOsu8YeGnCsjb
  213. const accountInfo = Cookies.get('accountInfo')
  214. // 如果cookie里没有账号信息
  215. if (Boolean(accountInfo) == false) {
  216. console.log('cookie中没有检测到账号信息!')
  217. return false
  218. } else {
  219. // 如果cookie里有账号信息
  220. console.log('cookie中检测到账号信息!现在开始预填写!')
  221. let userName = ''
  222. let passWord = ''
  223. const index = accountInfo.indexOf('&')
  224. userName = accountInfo.substring(0, index)
  225. passWord = accountInfo.substring(index + 1)
  226. // this.loginForm.username + '&' + this.loginForm.password
  227. _this.loginForm.username = userName
  228. _this.loginForm.password = passWord
  229. _this.rememberPassword = true
  230. }
  231. }
  232. }
  233. }
  234. </script>
  235. <style lang="scss">
  236. /* 修复input 背景不协调 和光标变色 */
  237. /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
  238. // $bg: #283443;
  239. // $light_gray: #fff;
  240. // $cursor: #fff;
  241. // 更改
  242. // $bg: #ccc;
  243. // $light_gray: #ccc;
  244. // $cursor: #000;
  245. // @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  246. // .login-container .el-input input {
  247. // color: $cursor;
  248. // }
  249. // }
  250. // .login-container {
  251. // min-height: 232px;
  252. // .el-input {
  253. // display: inline-block;
  254. // height: 38px;
  255. // width: 80%;
  256. // input {
  257. // background: #fff;
  258. // border: 0px;
  259. // -webkit-appearance: none;
  260. // border-radius: 0px;
  261. // padding: 5px 5px 5px 15px;
  262. // color: #000;
  263. // height: 16.7%;
  264. // caret-color: $cursor;
  265. // &:-webkit-autofill {
  266. // box-shadow: 0 0 0px 1000px $bg inset !important;
  267. // -webkit-text-fill-color: $cursor !important;
  268. // }
  269. // }
  270. // }
  271. // .el-form-item {
  272. // border: 1px solid rgba(255, 255, 255, 0.1);
  273. // background: #fff;
  274. // border-radius: 5px;
  275. // color: #999;
  276. // width: 73%;
  277. // margin: 10px auto;
  278. // .el-form-item__content {
  279. // line-height: 16%;
  280. // border-bottom: 1px solid #e7e7e7;
  281. // }
  282. // }
  283. // .rememberPassword{
  284. // .el-form-item__content {
  285. // line-height:16%;
  286. // border: none;
  287. // span{padding-left: 5px;}
  288. // }
  289. // }
  290. // .password{
  291. // margin-top: 20px;margin-bottom: 15px;
  292. // }
  293. // .btn{
  294. // position: relative;
  295. // width: 520px;
  296. // max-width: 100%;
  297. // overflow: hidden;
  298. // }
  299. // .btn span{width:72%;background:#01996a;border: #01996a;border-radius: 5px;line-height: 40px; text-align: center;color:#fff; margin: 0 auto;display: block;}
  300. // }
  301. </style>
  302. /* <style>
  303. .login-container .el-input input:-webkit-autofill,
  304. textarea:-webkit-autofill,
  305. select:-webkit-autofill {
  306. -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  307. box-shadow: 0 0 0px 1000px #fff inset !important;
  308. -webkit-text-fill-color: #000 !important;
  309. }
  310. </style> */
  311. // <style lang="scss" scoped>
  312. // $bg: #2d3a4b;
  313. // $dark_gray: #999;
  314. // $light_gray: #000;
  315. // .login-container {
  316. // min-height: 100%;
  317. // width: 100%;
  318. // height: 100%;
  319. // position: relative;
  320. // background: url("../../assets/images/nlogin-bg.png") no-repeat;
  321. // background-size:100%;
  322. // overflow: hidden;
  323. // .login {
  324. // border-radius: 5%;
  325. // padding: 30px;
  326. // background: rgba(0,0,0,0.4);
  327. // width: 380px;
  328. // height: 340px;
  329. // position: relative;
  330. // top: 50%;
  331. // left: 50%;
  332. // margin-left: -190px;
  333. // margin-top: -270px;
  334. // box-shadow:0px 0px 10px #fff;
  335. // .login-form {
  336. // margin-top: 60px;
  337. // position: relative;
  338. // width: 520px;
  339. // max-width: 100%;
  340. // overflow: hidden;
  341. // }
  342. // .tips {
  343. // font-size: 14px;
  344. // color: #fff;
  345. // margin-bottom: 10px;
  346. // span {
  347. // &:first-of-type {
  348. // margin-right: 16px;
  349. // }
  350. // }
  351. // }
  352. // .svg-container {
  353. // padding: 6px 5px 6px 15px;
  354. // color: $dark_gray;
  355. // vertical-align: middle;
  356. // width: 30px;
  357. // display: inline-block;
  358. // }
  359. // .title {
  360. // font-size: 26px;
  361. // color: $light_gray;
  362. // margin: 0px auto 0 auto;
  363. // text-align: center;
  364. // font-weight: bold;
  365. // }
  366. // b {
  367. // text-align: center;
  368. // font: 14px/2 "";
  369. // }
  370. // .show-pwd {
  371. // position: absolute;
  372. // right: 10px;
  373. // top: 7px;
  374. // font-size: 16px;
  375. // color: $dark_gray;
  376. // cursor: pointer;
  377. // user-select: none;
  378. // }
  379. // .kpt{text-align: center;color: #fff;display: inline-block;width: 100%;font:12px/18px '';}
  380. // }
  381. // }
  382. //
  383. </style>
  384. // <style lang="scss" scoped>
  385. // .login-container {
  386. // width: 100vw;
  387. // height: 100vh;
  388. // display: flex;
  389. // justify-content: center;
  390. // align-items: center;
  391. // .new-login{
  392. // width: 57%;
  393. // height: 43%;
  394. // display: flex;
  395. // .new-login-l{
  396. // flex: 1 1;
  397. // width: 50%;
  398. // background: url("../../assets/images/nlogin-bg2.png") no-repeat;
  399. // position: relative;
  400. // .new-login-l-t{
  401. // width: 34%;
  402. // height: 13%;
  403. // position: absolute;
  404. // top: 36%;
  405. // left: 32%;
  406. // right: 0;
  407. // bottom: 0;
  408. // }
  409. // .new-login-l-b{
  410. // position: absolute;
  411. // // 138,263
  412. // width: 40%;
  413. // // height: 5%;
  414. // top: 56%;
  415. // left: 30%;
  416. // // right: 0;
  417. // // bottom: 0;
  418. // }
  419. // }
  420. // .new-login-r{
  421. // flex: 1 1;
  422. // width: 50%;
  423. // background: url("../../assets/images/nlogin-bg3.png") no-repeat;
  424. // position: relative;
  425. // .title{
  426. // text-align: center;
  427. // font-size: 26px;
  428. // font-weight: 700;
  429. // color: #01996a;
  430. // padding-top: 10%;
  431. // padding-bottom: 3%;
  432. // }
  433. // .btn {position: absolute;bottom: 10%;}
  434. // }
  435. // }
  436. // }
  437. //
  438. </style>
  439. <style lang="scss" scoped>
  440. $bg: #2d3a4b;
  441. $dark_gray: #999;
  442. $light_gray: #000;
  443. $bg: #ccc;
  444. $light_gray: #ccc;
  445. $cursor: #000;
  446. .lang{
  447. float:right;
  448. padding-right: 50px;
  449. margin-top: 30px;
  450. cursor: pointer;
  451. .svgs{
  452. font-size:36px;
  453. }
  454. }
  455. .dropdown_selected{
  456. color:#009C69 !important;
  457. background-color: #ecf5ff;
  458. }
  459. .login-container {
  460. position: relative;
  461. height: 100%;
  462. width: 100%;
  463. background: url('../../assets/images/nlogin-bg1.jpg') no-repeat;
  464. background-size: cover;
  465. .new-login {
  466. width: 50%;
  467. height: 42%;
  468. position: absolute;
  469. left: 0;
  470. right: 0;
  471. bottom: 0;
  472. top: 0;
  473. margin: auto;
  474. .new-login-l {
  475. float: left;
  476. height: 100%;
  477. width: 50%;
  478. background: url('../../assets/images/nlogin-bg2.png') no-repeat;
  479. position: relative;
  480. background-size: cover;
  481. text-align: center;
  482. .imgs {
  483. position: absolute;
  484. left: 0;
  485. right: 0;
  486. bottom: 0;
  487. top: 0;
  488. margin: auto;
  489. height: 26%;
  490. width: 100%;
  491. }
  492. img {
  493. width: 60%;
  494. // height: 23%;
  495. // &:lang(en) {
  496. // width: 70%;
  497. // }
  498. }
  499. .img-text {
  500. width: 100%;
  501. font-size: 14px;
  502. font-weight: 500;
  503. color: #019969;
  504. text-align: center;
  505. margin-top: 8px;
  506. // &:lang(en) {
  507. // font-size: 14px!important;
  508. // }
  509. }
  510. }
  511. .new-login-r {
  512. background: #fff;
  513. float: left;
  514. height: 100%;
  515. width: 50%;
  516. position: relative;
  517. .title {
  518. margin-top: 10%;
  519. font-size: 20px;
  520. font-weight: 600;
  521. color: #019969;
  522. text-align: center;
  523. }
  524. .login-form {
  525. position: relative;
  526. width: 520px;
  527. overflow: hidden;
  528. height: 48%;
  529. width: 100%;
  530. .svg-container {
  531. padding: 6px 5px 6px 15px;
  532. color: $dark_gray;
  533. vertical-align: middle;
  534. width: 30px;
  535. display: inline-block;
  536. }
  537. .el-input {
  538. display: inline-block;
  539. width: 80%;
  540. }
  541. }
  542. .el-form-item {
  543. border: none;
  544. background: #fff;
  545. border-radius: 5px;
  546. color: #999;
  547. width: 73%;
  548. margin: 10px auto;
  549. height: 30%;
  550. /deep/.el-form-item__content {
  551. line-height: 16%;
  552. border-bottom: 1px solid #e7e7e7;
  553. }
  554. .el-form-item__content .el-input {
  555. /deep/.el-input__inner {
  556. border: none !important;
  557. }
  558. }
  559. }
  560. .rememberPassword {
  561. /deep/.el-form-item__content {
  562. line-height: 16%;
  563. border: none;
  564. padding-bottom: 10px;
  565. span {
  566. padding-left: 5px;
  567. }
  568. }
  569. }
  570. .password {
  571. margin-top: 10px;
  572. margin-bottom: 20px;
  573. }
  574. .btn {
  575. position: absolute;
  576. overflow: hidden;
  577. width: 75%;
  578. left: 0;
  579. right: 0;
  580. bottom: 10%;
  581. margin: 0 auto;
  582. /deep/span {
  583. background: #01996a;
  584. border: #01996a;
  585. border-radius: 5px;
  586. line-height: 40px;
  587. text-align: center;
  588. color: #fff;
  589. display: block;
  590. }
  591. }
  592. }
  593. }
  594. }
  595. </style>