index.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458
  1. <template>
  2. <div class="login-container">
  3. <div class="form-content">
  4. <div class="title-container">
  5. <img src="../../assets/images/login-head.png" class="images" />
  6. </div>
  7. <el-form
  8. v-if="loginOrRetrieve == 'login'"
  9. ref="loginForm"
  10. :model="loginForm"
  11. :rules="loginRules"
  12. class="login-form"
  13. autocomplete="on"
  14. label-position="left"
  15. >
  16. <el-form-item prop="username">
  17. <span class="svg-container">
  18. <svg-icon icon-class="user" />
  19. </span>
  20. <el-input
  21. ref="username"
  22. v-model="loginForm.username"
  23. placeholder="登录用户名"
  24. name="username"
  25. type="text"
  26. tabindex="1"
  27. autocomplete="on"
  28. />
  29. </el-form-item>
  30. <el-tooltip
  31. v-model="capsTooltip"
  32. content="Caps lock is On"
  33. placement="right"
  34. manual
  35. >
  36. <el-form-item prop="password">
  37. <span class="svg-container">
  38. <svg-icon icon-class="password" />
  39. </span>
  40. <el-input
  41. :key="passwordType"
  42. ref="password"
  43. v-model="loginForm.password"
  44. :type="passwordType"
  45. placeholder="登录密码"
  46. name="password"
  47. tabindex="2"
  48. autocomplete="on"
  49. @keyup.native="checkCapslock"
  50. @blur="capsTooltip = false"
  51. @keyup.enter.native="handleLogin"
  52. />
  53. <span class="show-pwd" @click="showPwd">
  54. <svg-icon
  55. :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
  56. />
  57. </span>
  58. </el-form-item>
  59. </el-tooltip>
  60. <el-button
  61. :loading="loading"
  62. type="primary"
  63. style="width: 100%; margin-bottom: 30px"
  64. @click="handleLogin"
  65. >立即登录</el-button
  66. >
  67. <div class="tips">
  68. <div @click="Retrieve('retrieve')" style="cursor: pointer">
  69. 找回密码
  70. </div>
  71. </div>
  72. </el-form>
  73. <div v-if="loginOrRetrieve == 'retrieve'">
  74. <el-form
  75. ref="RetrieveForm"
  76. :model="RetrieveForm"
  77. :rules="RetrieveRules"
  78. class="login-form"
  79. autocomplete="on"
  80. label-position="left"
  81. >
  82. <el-form-item prop="phone">
  83. <el-input
  84. ref="phone"
  85. v-model="RetrieveForm.phone"
  86. placeholder="请输入手机号"
  87. name="phone"
  88. type="text"
  89. tabindex="1"
  90. autocomplete="on"
  91. />
  92. </el-form-item>
  93. <el-tooltip
  94. v-model="capsTooltip"
  95. content="Caps lock is On"
  96. placement="right"
  97. manual
  98. >
  99. <el-form-item prop="verification_code">
  100. <el-input
  101. ref="verification_code"
  102. v-model="RetrieveForm.verification_code"
  103. type="text"
  104. placeholder="请输入验证码"
  105. name="text"
  106. tabindex="2"
  107. autocomplete="on"
  108. />
  109. <span class="show-pwd">
  110. <el-button :disabled="isDisabled" @click="getCode">
  111. {{ buttonText }}
  112. </el-button>
  113. </span>
  114. </el-form-item>
  115. </el-tooltip>
  116. <el-tooltip
  117. v-model="capsTooltip"
  118. content="Caps lock is On"
  119. placement="right"
  120. manual
  121. >
  122. <el-form-item prop="new_password1">
  123. <span class="svg-container">
  124. <svg-icon icon-class="password" />
  125. </span>
  126. <el-input
  127. :key="passwordType"
  128. ref="password"
  129. v-model="RetrieveForm.new_password1"
  130. :type="passwordType"
  131. placeholder="请输入新密码"
  132. name="password"
  133. tabindex="2"
  134. autocomplete="on"
  135. @keyup.native="checkCapslock"
  136. @blur="capsTooltip = false"
  137. />
  138. <span class="show-pwd" @click="showPwd">
  139. <svg-icon
  140. :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
  141. />
  142. </span>
  143. </el-form-item>
  144. </el-tooltip>
  145. <el-tooltip
  146. v-model="capsTooltip"
  147. content="Caps lock is On"
  148. placement="right"
  149. manual
  150. >
  151. <el-form-item prop="new_password2">
  152. <span class="svg-container">
  153. <svg-icon icon-class="password" />
  154. </span>
  155. <el-input
  156. :key="passwordType"
  157. ref="passwords"
  158. v-model="RetrieveForm.new_password2"
  159. :type="passwordTypes"
  160. placeholder="确认新密码"
  161. name="password"
  162. tabindex="2"
  163. autocomplete="on"
  164. @keyup.native="checkCapslock"
  165. @blur="capsTooltips = false"
  166. />
  167. <span class="show-pwd" @click="showPwds">
  168. <svg-icon
  169. :icon-class="
  170. passwordTypes === 'password' ? 'eye' : 'eye-open'
  171. "
  172. />
  173. </span>
  174. </el-form-item>
  175. </el-tooltip>
  176. <el-button
  177. :loading="loading"
  178. type="primary"
  179. style="width: 100%; margin-bottom: 30px"
  180. @click="retPass"
  181. >重置密码</el-button
  182. >
  183. <div class="tips">
  184. <div @click="Retrieve('login')" style="cursor: pointer">返回登录</div>
  185. </div>
  186. </el-form>
  187. </div>
  188. </div>
  189. </div>
  190. </template>
  191. <script>
  192. import { validUsername } from "@/utils/validate";
  193. import { tailPhone, codeCheckout, updatePassword, login } from "@/api/user";
  194. import SocialSign from "./components/SocialSignin";
  195. export default {
  196. name: "Login",
  197. components: { SocialSign },
  198. data() {
  199. const validateUsername = (rule, value, callback) => {
  200. if (value.length < 3) {
  201. callback(new Error("请填写正确的登录用户名"));
  202. } else {
  203. callback();
  204. }
  205. };
  206. const validatePassword = (rule, value, callback) => {
  207. if (value.length < 6) {
  208. callback(new Error("请填写正确的密码,密码不得小于6位"));
  209. } else {
  210. callback();
  211. }
  212. };
  213. const validatePhone = (rule, value, callback) => {
  214. const phoneRegex = /^1[3-9]\d{9}$/;
  215. if (value === "") {
  216. callback(new Error("请输入手机号码"));
  217. } else if (!phoneRegex.test(value)) {
  218. callback(new Error("请输入正确的手机号码"));
  219. } else {
  220. callback();
  221. }
  222. };
  223. const validateNewPassword = (rule, value, callback) => {
  224. if (value.length < 6) {
  225. callback(new Error("新密码不能少于6个字符"));
  226. } else {
  227. if (this.RetrieveForm.new_password2 !== "") {
  228. this.$refs.RetrieveForm.validateField("new_password2");
  229. }
  230. callback();
  231. }
  232. };
  233. const validateConfirmPassword = (rule, value, callback) => {
  234. if (value === "") {
  235. callback(new Error("请再次输入密码"));
  236. } else if (value !== this.RetrieveForm.new_password1) {
  237. callback(new Error("两次输入的密码不一致"));
  238. } else {
  239. callback();
  240. }
  241. };
  242. return {
  243. loginForm: {
  244. username: "",
  245. password: "",
  246. },
  247. loginRules: {
  248. username: [
  249. { required: true, trigger: "blur", validator: validateUsername },
  250. ],
  251. password: [
  252. { required: true, trigger: "blur", validator: validatePassword },
  253. ],
  254. },
  255. passwordType: "password",
  256. passwordTypes: "password",
  257. capsTooltip: false,
  258. loading: false,
  259. showDialog: false,
  260. redirect: undefined,
  261. otherQuery: {},
  262. loginOrRetrieve: "login",
  263. RetrieveForm: {
  264. phone: "",
  265. verification_code: "",
  266. new_password1: "",
  267. new_password2: "",
  268. },
  269. RetrieveRules: {
  270. phone: [{ required: true, trigger: "blur", validator: validatePhone }],
  271. verification_code: [
  272. { required: true, message: "请输入验证码", trigger: "blur" },
  273. ],
  274. new_password1: [
  275. { required: true, trigger: "blur", validator: validateNewPassword },
  276. ],
  277. new_password2: [
  278. {
  279. required: true,
  280. trigger: "blur",
  281. validator: validateConfirmPassword,
  282. },
  283. ],
  284. },
  285. countdown: 60,
  286. isDisabled: false,
  287. buttonText: "获取验证码",
  288. };
  289. },
  290. watch: {
  291. $route: {
  292. handler: function (route) {
  293. const query = route.query;
  294. if (query) {
  295. this.redirect = query.redirect;
  296. this.otherQuery = this.getOtherQuery(query);
  297. }
  298. },
  299. immediate: true,
  300. },
  301. },
  302. created() {
  303. // window.addEventListener('storage', this.afterQRScan)
  304. },
  305. mounted() {
  306. if (this.loginForm.username === "") {
  307. this.$refs.username.focus();
  308. } else if (this.loginForm.password === "") {
  309. this.$refs.password.focus();
  310. }
  311. },
  312. destroyed() {
  313. // window.removeEventListener('storage', this.afterQRScan)
  314. },
  315. methods: {
  316. /* 找回密码 */
  317. retPass() {
  318. this.$refs.RetrieveForm.validate((valid) => {
  319. if (valid) {
  320. codeCheckout({
  321. phone: this.RetrieveForm.phone,
  322. verification_code: this.RetrieveForm.verification_code,
  323. })
  324. .then((response) => {
  325. if (response.status !== 200) return;
  326. updatePassword(this.RetrieveForm).then((res) => {
  327. this.loginOrRetrieve = "login";
  328. this.$message.success("密码已成功重置");
  329. });
  330. })
  331. .catch((error) => {
  332. this.$message.error("验证码校验失败");
  333. });
  334. } else {
  335. console.log("error submit!!");
  336. return false;
  337. }
  338. });
  339. },
  340. /* 获取验证码 */
  341. getCode() {
  342. this.$refs.RetrieveForm.validateField("phone", (errorMessage) => {
  343. if (errorMessage) {
  344. this.$message.warning(errorMessage);
  345. } else {
  346. this.isDisabled = true;
  347. this.buttonText = `${this.countdown}s`;
  348. const timer = setInterval(() => {
  349. if (this.countdown > 0) {
  350. this.countdown--;
  351. this.buttonText = `${this.countdown}s`;
  352. } else {
  353. clearInterval(timer);
  354. this.isDisabled = false;
  355. this.buttonText = "获取验证码";
  356. this.countdown = 60;
  357. }
  358. }, 1000);
  359. tailPhone({ phone: this.RetrieveForm.phone }).then((res) => {
  360. console.log(res);
  361. });
  362. }
  363. });
  364. },
  365. showPwds() {
  366. if (this.passwordTypes === "password") {
  367. this.passwordTypes = "";
  368. } else {
  369. this.passwordTypes = "password";
  370. }
  371. this.$nextTick(() => {
  372. this.$refs.passwords.focus();
  373. });
  374. },
  375. checkCapslock(e) {
  376. const { key } = e;
  377. this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
  378. },
  379. showPwd() {
  380. if (this.passwordType === "password") {
  381. this.passwordType = "";
  382. } else {
  383. this.passwordType = "password";
  384. }
  385. this.$nextTick(() => {
  386. this.$refs.password.focus();
  387. });
  388. },
  389. handleLogin() {
  390. this.$refs.loginForm.validate((valid) => {
  391. if (valid) {
  392. this.loading = true;
  393. this.$store
  394. .dispatch("user/login", this.loginForm)
  395. .then(() => {
  396. this.$router.push({
  397. path: "/knowledge/knowledgeMenu/index",/* this.redirect || */
  398. query: this.otherQuery,
  399. });
  400. this.loading = false;
  401. })
  402. .catch(() => {
  403. this.loading = false;
  404. });
  405. } else {
  406. console.log("error submit!!");
  407. return false;
  408. }
  409. });
  410. },
  411. getOtherQuery(query) {
  412. return Object.keys(query).reduce((acc, cur) => {
  413. if (cur !== "redirect") {
  414. acc[cur] = query[cur];
  415. }
  416. return acc;
  417. }, {});
  418. },
  419. // afterQRScan() {
  420. // if (e.key === 'x-admin-oauth-code') {
  421. // const code = getQueryObject(e.newValue)
  422. // const codeMap = {
  423. // wechat: 'code',
  424. // tencent: 'code'
  425. // }
  426. // const type = codeMap[this.auth_type]
  427. // const codeName = code[type]
  428. // if (codeName) {
  429. // this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
  430. // this.$router.push({ path: this.redirect || '/' })
  431. // })
  432. // } else {
  433. // alert('第三方登录失败')
  434. // }
  435. // }
  436. // }
  437. /* 找回密码 */
  438. Retrieve(val) {
  439. this.loginOrRetrieve = val;
  440. },
  441. },
  442. };
  443. </script>
  444. <style lang="scss">
  445. /* 修复input 背景不协调 和光标变色 */
  446. /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
  447. @import "./index.scss";
  448. </style>