PasswordReset.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592
  1. <template>
  2. <div style="height: 1000px;background-color: #fff;" class="registerBox">
  3. <div class="header1">
  4. <div class="header2">
  5. <div class="logo">
  6. <img src="@/assets/img/home/LOGO2020-12-22.png" alt style="width: 330px;"/>
  7. </div>
  8. <!-- <div class="title">{{$i18n.locale == 'zh' ? 'GEIDCP 全球能源互联网发展合作平台' : 'GEIDCP'}}</div> -->
  9. </div>
  10. </div>
  11. <div
  12. style="width: 1200px;height: 700px;background-color: #fff;margin: auto;margin-top: 30px;position: relative;"
  13. >
  14. <div style="line-height: 100px;padding-left: 30px;color: #999;">
  15. {{ $t('common.resetpassword') }}
  16. <span style="float: right;margin-right: 20px;color:#2c558a ;">
  17. <el-button type="text" @click="locale('zh')">中文</el-button>
  18. <span> / </span>
  19. <el-button type="text" style="margin-right: 20px;" @click="locale('en')">EN</el-button>
  20. <span
  21. class="cursor"
  22. @click="toBack"
  23. >{{ $t('common.Returntologin') }}
  24. </span>
  25. </span>
  26. </div>
  27. <div class="crumbs" style="width: 80%;margin: auto;">
  28. <el-steps :active="active" align-center>
  29. <el-step :title="$t('common.Fillintheaccountname')"></el-step>
  30. <el-step :title="$t('common.Authentication')"></el-step>
  31. <el-step :title="$t('common.Setnewpassword')"></el-step>
  32. <el-step :title="$t('common.complete')"></el-step>
  33. </el-steps>
  34. </div>
  35. <div style="width: 500px;margin: auto;margin-top: 50px;">
  36. <el-form ref="form" :model="form" label-width="120px" v-if="active==0">
  37. <el-form-item :label="$t('common.mobilePhone')" v-if="!isTelLogin">
  38. <GlobalRoaming ref='GlobalRoaming' :size="{width:'460px'}" v-model="form.name"
  39. @getAreaCode="getPassAreaCode"></GlobalRoaming>
  40. </el-form-item>
  41. <el-form-item :label="$t('common.Email')+':'" v-if="isTelLogin">
  42. <el-input v-model="form.name"></el-input>
  43. </el-form-item>
  44. <el-form-item :label="$t('common.VerificationCode')">
  45. <el-input v-model="form.verificationCode"></el-input>
  46. </el-form-item>
  47. <el-form-item>
  48. <div class="securityCode-out" style="overflow:hidden">
  49. <div id="randomCode" style="float: left;padding-right: 4px;">
  50. <img style="border-radius: 5px;" :src="url"/>
  51. </div>
  52. <div id="securityCode" style="font-size: 16px;color: #999;">
  53. {{ $t('common.invisibility?') }}
  54. <span style="color: #0099ff;" class="cursor" @click="refreshCaptcha"> {{ $t('common.Changeit') }}</span>
  55. </div>
  56. </div>
  57. </el-form-item>
  58. <el-form-item>
  59. <span
  60. v-if="!isTelLogin"
  61. type="text"
  62. style="font-size:20px; color: rgba(80,141,231,1);"
  63. class="cursor"
  64. @click="isTelLogin = !isTelLogin"
  65. >{{ $t('common.PasswordResetByEmail') }}</span>
  66. </el-form-item>
  67. <el-form-item>
  68. <span
  69. v-if="isTelLogin"
  70. type="text"
  71. style="font-size:20px; color: rgba(80,141,231,1);"
  72. class="cursor"
  73. @click="isTelLogin = !isTelLogin"
  74. >{{ $t('common.PasswordResetByPhone') }}</span>
  75. </el-form-item>
  76. </el-form>
  77. <el-form ref="form2" :model="form2" label-width="120px" v-if="active==1">
  78. <el-form-item :label="$t('common.phonenumber')+'/'+$t('common.Email')+':'">
  79. <el-input v-model="form2.mobile" :readonly="true"></el-input>
  80. </el-form-item>
  81. <el-form-item :label="$t('common.VerificationCode')" style="position: relative;">
  82. <el-input v-model="form2.verificationCode"></el-input>
  83. <span style="position: absolute;right: 8px;top: 0;">
  84. <span
  85. v-show="show"
  86. @click="sendCode(form2)"
  87. style="margin-left: 40px;"
  88. class="getCode cursor"
  89. >{{ $t('common.Sendverificationcode') }}</span>
  90. <span
  91. v-show="!show"
  92. class="count"
  93. style="margin-left: 20px;color: #999;"
  94. >{{ count }} {{ $t('common.resend') }}</span>
  95. </span>
  96. </el-form-item>
  97. </el-form>
  98. <el-form ref="form3" :model="form3" label-width="120px" v-if="active==2">
  99. <el-form-item :label="$t('common.Newpassword')+':'">
  100. <el-input v-model="form3.passWord" show-password></el-input>
  101. </el-form-item>
  102. <el-form-item :label="$t('common.Repeatpassword')+':'" style="position: relative;">
  103. <el-input v-model="form3.confirmPassword" show-password></el-input>
  104. </el-form-item>
  105. </el-form>
  106. <el-form
  107. ref="form3"
  108. :model="form4"
  109. label-width="120px"
  110. v-if="active==3"
  111. style="margin-top: 100px;margin-left: -140px;"
  112. >
  113. <el-form-item>
  114. <i class="el-icon-mobile" style="font-size:65px;color:#0099ff;margin-left: 222px;"></i>
  115. <div style="text-align: center;color:#0099ff;line-height: 25px;font-size: 22px;">
  116. {{ $t('common.Passwordresetsuccessful') }}
  117. </div>
  118. <div style="text-align: center;color:#0099ff;line-height: 26px;">
  119. {{ $t('common.Pleaseloginagainwithnewpassword') }}
  120. </div>
  121. </el-form-item>
  122. </el-form>
  123. <div style="margin-top: 30px;" v-if="active!==3">
  124. <el-button type="primary" @click="onSubmit" style="width: 384px;float: right;">{{ $t('common.NextBu') }}
  125. </el-button>
  126. </div>
  127. </div>
  128. </div>
  129. </div>
  130. </template>
  131. <script>
  132. import Base from "@/views/base/Base";
  133. import axios from "axios";
  134. import {getMobileSmsCode, getCaptcha} from "@/api/user";
  135. import {getUserInfoByTel1, sendPhoneCode, updatePwdLogout} from "@/api/login";
  136. import {setPwd} from "@/api/user";
  137. import {getToken} from "@/api/token.js";
  138. import GlobalRoaming from "@/components/GlobalRoaming";
  139. export default {
  140. name: "PasswordReset",
  141. extends: Base,
  142. components: {
  143. GlobalRoaming
  144. },
  145. data() {
  146. return {
  147. select: "0086",
  148. isTelLogin: true,
  149. active: 0,
  150. show: true,
  151. count: "",
  152. timer: null,
  153. userInfo: [],
  154. codeFromTel: "",
  155. isSendCode: false,
  156. service: "",
  157. lang: window.localStorage.getItem("locale"),
  158. form: {
  159. name: "",
  160. verificationCode: "",
  161. names: ''
  162. },
  163. form2: {
  164. mobile: "",
  165. verificationCode: "",
  166. },
  167. form3: {
  168. passWord: "",
  169. confirmPassword: "",
  170. },
  171. url: "",
  172. };
  173. },
  174. mounted() {
  175. // let userId = this.$store.getters["user/isLogin"];
  176. let userId = this.$Cookies.get('token')
  177. if (userId) {
  178. this.logOut();
  179. }
  180. this.refreshCaptcha();
  181. },
  182. watch: {
  183. // "isTelLogin":function(value){
  184. // if(value){
  185. // }else{
  186. // }
  187. // },
  188. active() {
  189. if (this.active == 3) {
  190. setTimeout(() => {
  191. this.toBack();
  192. }, 2000);
  193. }
  194. },
  195. },
  196. methods: {
  197. locale(lang) {
  198. this.$i18n.locale = lang
  199. let locale = window.localStorage.getItem('locale')
  200. if (locale) {
  201. window.localStorage.setItem('locale', lang)
  202. } else {
  203. window.localStorage['locale'] = lang;
  204. }
  205. this.language = window.localStorage.getItem('locale');
  206. this.lang = window.localStorage.getItem('locale');
  207. // this.$bus.emit('setLang', window.localStorage.getItem("locale"))
  208. console.log(window.localStorage.getItem('locale'))
  209. },
  210. getPassAreaCode(code) {
  211. this.select = code;
  212. console.log("select=" + this.select);
  213. },
  214. refreshCaptcha() {
  215. getCaptcha(this.codeUid).then((response) => {
  216. this.codeUid = response["headers"]["captcha-uid"];
  217. let data = response.data;
  218. if (data.size == 0) {
  219. return;
  220. }
  221. let reader = new FileReader();
  222. reader.onload = (e) => {
  223. this.url = e.target.result || "";
  224. };
  225. reader.readAsDataURL(data);
  226. });
  227. },
  228. // 得搜索国家首字母
  229. getCountrySearchs(item, index) {
  230. this.getSearchs = item;
  231. },
  232. toBack() {
  233. this.$router.go(-1);
  234. },
  235. login: function () {
  236. if (this.loginType == 1) {
  237. this.accountPasswordLogin();
  238. } else {
  239. this.mobileLogin();
  240. }
  241. },
  242. onSubmit() {
  243. if (this.active == 0) {
  244. //校验用户是否存在。
  245. this.getUserInfo();
  246. } else if (this.active == 1) {
  247. //请输入验证码
  248. if (!this.form2.verificationCode) {
  249. this.$message.warning(this.$t('common.Pleaseenterverification'));
  250. return;
  251. }
  252. //后台自动登录,获取token值
  253. this.codeLogin();
  254. } else if (this.active == 2) {
  255. //设置新密码
  256. this.resetPass();
  257. } else if (this.active == 3) {
  258. var interval = setInterval(() => {
  259. location.reload();
  260. clearInterval(interval);
  261. }, 2000);
  262. }
  263. },
  264. codeLogin: function () {
  265. if (!this.isTelLogin) {
  266. this.service = "TX";
  267. } else {
  268. this.service = "YJ";
  269. }
  270. let locale = window.localStorage.getItem('locale');
  271. let myList = new Array(this.form2.mobile, locale);
  272. let names = myList.join(',');
  273. try {
  274. this.submitHandler((token) => {
  275. this.$store
  276. .dispatch("user/MOBILE_LOGIN", {
  277. mobile: names,
  278. checkCode: this.form2.verificationCode,
  279. service: this.service,
  280. token: token,
  281. })
  282. .then(() => {
  283. this.active++;
  284. })
  285. .catch((error) => {
  286. this.$message.error(error.msg);
  287. });
  288. }, false);
  289. } catch (err) {
  290. console.log(err);
  291. }
  292. },
  293. verificationTel: function (name) {
  294. //验证手机、邮箱合法性
  295. const regPhone = /^(0|86|17951)?(13[0-9]|15[1-9]|16[6]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
  296. const regEmail = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/;
  297. if (regEmail.test(name) || regPhone.test(name)) {
  298. return true;
  299. } else {
  300. this.$message.warning(this.$t('common.Pleaseenteravalidmobilephonenumberoremail') + "!");
  301. return false;
  302. }
  303. },
  304. getUserInfo: function () {
  305. if (!this.form.name) {
  306. this.$message.warning(this.$t('common.Phoneandemailcannotbeempty'));
  307. return;
  308. }
  309. if (!this.form.verificationCode) {
  310. this.$message.warning(this.$t('common.Verificationcodecannotbeempty'));
  311. return;
  312. }
  313. //校验手机号/邮箱/验证码格式
  314. if (!this.verificationTel(this.form.name)) {
  315. return false;
  316. }
  317. if (!this.isTelLogin) {
  318. this.form.names = this.select + this.form.name
  319. }
  320. //获取当前登录手机号的用户信息
  321. getUserInfoByTel1(!this.isTelLogin ? this.form.names : this.form.name, this.form.verificationCode, this.codeUid, this.$i18n.locale)
  322. .then((result) => {
  323. if (
  324. result.status == 200 && result.data != null && result.data != ""
  325. ) {
  326. // this.userInfo = result.data;
  327. this.form2.mobile = !this.isTelLogin ? this.form.names : this.form.name;
  328. this.active++;
  329. }
  330. })
  331. .catch((error) => {
  332. // this.msg(this.$t("common.userdoesnotexist") + "!", "error");
  333. this.msg(error.msg, "error");
  334. this.refreshCaptcha();
  335. });
  336. },
  337. async resetPass() {
  338. let userId = this.$store.getters["user/isLogin"];
  339. if (userId == "") {
  340. this.$message.warning(this.$t('common.ThesystemisbusyPleasetryagainlater'));
  341. return;
  342. }
  343. if (this.form3.passWord == "" || this.form3.passWord == null) {
  344. this.$message.warning(this.$t('common.Newpasswordcannotbeempty'));
  345. return;
  346. }
  347. if (
  348. this.form3.confirmPassword == "" ||
  349. this.form3.confirmPassword == null
  350. ) {
  351. this.$message.warning(this.$t('common.Confirmpasswordcannotbeempty'));
  352. return;
  353. }
  354. //判断两次密码是否一致
  355. if (this.form3.passWord != this.form3.confirmPassword) {
  356. this.$message.warning(this.$t('common.Thetwopasswordsarenotthesame'));
  357. return;
  358. }
  359. //校验密码格式
  360. var msg = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,20}$/.test(this.form3.confirmPassword)
  361. ? ""
  362. : $t('common.Yourpasswordstrengthistoolow');
  363. debugger
  364. if (msg != "") {
  365. return this.$message({
  366. message: msg,
  367. type: "warning",
  368. });
  369. }
  370. let token = getToken();
  371. let param = {};
  372. param.id = userId;
  373. param.password = this.form3.confirmPassword;
  374. await setPwd(JSON.stringify(param), token)
  375. .then((result) => {
  376. if (result.status == 200) {
  377. this.$message({
  378. message: this.$t('common.Passwordchangedsuccessfully') + "!",
  379. type: "success",
  380. });
  381. this.dialogVisible = false;
  382. this.active++;
  383. }
  384. })
  385. .catch((error) => {
  386. this.msg(error.msg, "error");
  387. });
  388. await this.logOut();
  389. },
  390. logOut: function () {
  391. // 退出的逻辑代码
  392. this.$store
  393. .dispatch("user/LOGOUT")
  394. .then(() => {
  395. })
  396. .catch((error) => {
  397. /* this.$message({
  398. type: 'error',
  399. message: error.msg
  400. });*/
  401. });
  402. },
  403. toView(router, json) {
  404. this.$router.push({name: router, params: json});
  405. },
  406. async sendCode() {
  407. // const {data: res} = await this.$http.get(`/userRegisterAndLogin/sendCode`)
  408. this.form2.mobile = !this.isTelLogin ? this.form.names : this.form.name;
  409. let mobile = "";
  410. if (!this.isTelLogin) {
  411. mobile = this.form.name.substring(4)
  412. } else {
  413. mobile = this.form.name;
  414. }
  415. //验证手机号合法性
  416. // const regPhone = /^(0|86|17951)?(13[0-9]|15[123456789]|16[6]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
  417. const regEmail = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/;
  418. if (!this.isTelLogin) {
  419. this.service = "TX";
  420. } else {
  421. this.service = "YJ";
  422. }
  423. //发送验证码 判断当前是手机号还是邮箱号 短信:service:“TX" 邮件:service:“YJ
  424. await sendPhoneCode(this.form2.mobile, this.service, this.$i18n.locale)
  425. .then((result) => {
  426. this.isSendCode = true;
  427. this.msg(result.msg, "success");
  428. })
  429. .catch((error) => {
  430. this.msg(error.msg, "error");
  431. });
  432. //倒计时
  433. const TIME_COUNT = 60;
  434. if (!this.timer) {
  435. this.count = TIME_COUNT;
  436. this.show = false;
  437. this.timer = setInterval(() => {
  438. if (this.count > 0 && this.count <= TIME_COUNT) {
  439. this.count--;
  440. } else {
  441. this.show = true;
  442. clearInterval(this.timer);
  443. this.timer = null;
  444. }
  445. }, 1000);
  446. }
  447. },
  448. msg: function (msg, type) {
  449. if (msg == "error") {
  450. msg = this.$t('common.ThesystemisbusyPleasetryagainlater');
  451. }
  452. return this.$message({
  453. message: msg,
  454. type: type,
  455. });
  456. },
  457. //次方法用于测试
  458. testMethod() {
  459. axios
  460. .get("./userRegisterAndLogin/sendCode/", {
  461. params: {
  462. telNum: 666,
  463. },
  464. })
  465. .then((res) => {
  466. console.log(res);
  467. })
  468. .catch((error) => {
  469. console.log(error);
  470. alert(this.$t('common.Networkerror'));
  471. });
  472. },
  473. },
  474. };
  475. </script>
  476. <!-- Add "scoped" attribute to limit CSS to this component only -->
  477. <style scoped>
  478. .getSearchs1 {
  479. color: #0c27ff;
  480. }
  481. .getSearchs2 {
  482. color: #d12910;
  483. }
  484. .header1 {
  485. width: 100%;
  486. height: 120px;
  487. margin: auto;
  488. background: #2c558a;
  489. /* border-bottom: 2px solid #c2c2c2; */
  490. }
  491. .header2 {
  492. width: 1200px;
  493. height: 120px;
  494. margin: auto;
  495. position: relative;
  496. border-bottom: 1px solid #fff;
  497. /* background: skyblue; */
  498. }
  499. .language {
  500. line-height: 50px;
  501. color: #ccc;
  502. font-weight: 400;
  503. font-size: 12px;
  504. }
  505. .logo {
  506. position: absolute;
  507. top: 30px;
  508. left: 80px;
  509. width: 260px;
  510. height: 55px;
  511. /* background-image: url(@/assets/logo.png); */
  512. }
  513. .title {
  514. position: absolute;
  515. top: 40px;
  516. left: 450px;
  517. font-size: 30px;
  518. font-weight: 700;
  519. color: #fff;
  520. }
  521. .crumbs >>> .el-step__icon {
  522. width: 37px;
  523. height: 37px;
  524. font-size: 18px;
  525. }
  526. .crumbs >>> .el-step.is-horizontal .el-step__line {
  527. top: 20px;
  528. }
  529. .crumbs >>> .el-step__head.is-process {
  530. color: #409eff;
  531. border-color: inherit;
  532. }
  533. .crumbs >>> .el-step__head.is-process .el-step__icon.is-text {
  534. background: #409eff;
  535. color: #fff;
  536. border-color: #409eff;
  537. width: 46px;
  538. height: 46px;
  539. }
  540. .crumbs >>> .el-step__title.is-process,
  541. .crumbs >>> .el-step__description.is-process {
  542. color: #409eff;
  543. }
  544. .crumbs >>> .el-collapse-item {
  545. /* width: 80%; */
  546. margin: auto;
  547. }
  548. .el-collapse {
  549. border: none;
  550. }
  551. .crumbs >>> .el-collapse-item__header {
  552. padding: 0 20px 0 100px;
  553. }
  554. .crumbs >>> .el-collapse-item__wrap {
  555. padding: 0 0 0 100px;
  556. }
  557. .el-checkbox {
  558. display: block;
  559. margin-bottom: 20px;
  560. }
  561. .getCode :active {
  562. color: rgb(255, 0, 0);
  563. }
  564. .registerBox /deep/ .el-select {
  565. width: 150px;
  566. }
  567. </style>