ballotTopBannerEN.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749
  1. <template>
  2.  
  3. <div>
  4. <div class="box-bon">
  5. <div class="top-btm-box" v-if="changePassword"></div>
  6. </div>
  7. <div class="tal-top">
  8. <span class="tal-first">Welcome to the General Meeting!</span>
  9. <span class="tal-second" @click="goOut">
  10. <img src="@/assets/ballot/退出.png" alt="" />
  11. Log out</span
  12. >
  13. <span class="tal-third">|</span>
  14. <span class="tal-fourc" @click="openChange">
  15. <img src="@/assets/ballot/修改密码.png" alt="" />
  16. Change Password</span
  17. >
  18. </div>
  19.  
  20. <div class="box-big" v-if="changePassword">
  21. <div class="change-top">
  22. <!-- <div class="change-box">
  23. <el-select v-model="language.value" class="change-change">
  24. <el-option v-for="item in optionsInfoList" :key="item.value" :label="item.label"
  25. :value="item.value">
  26. </el-option>
  27. </el-select>
  28. </div> -->
  29. <div></div>
  30. <div class="change-text">Change Password</div>
  31. <div class="change-pic" @click="closeList">
  32. <img src="@/assets/ballot/close-l.png" alt="" />
  33. </div>
  34. </div>
  35. <div class="change-user-info">
  36. <div class="change-user-id">
  37. <div class="change-title-info">Old password:</div>
  38. <el-input
  39. v-model="changeList.oldPassword"
  40. placeholder="Please enter your old password"
  41. show-password
  42. >
  43. </el-input>
  44. </div>
  45. <div class="change-user-pws">
  46. <div class="change-title-info">New password:</div>
  47. <el-input
  48. placeholder="Please enter your new password"
  49. v-model="changeList.password"
  50. show-password
  51. @blur="getInp"
  52. >
  53. </el-input>
  54. </div>
  55. <div class="change-user-yzm">
  56. <div class="change-title-info">Confirm your new password:</div>
  57. <el-input
  58. placeholder="Please confirm your new password"
  59. v-model="changeList.newPassword"
  60. show-password
  61. >
  62. </el-input>
  63. </div>
  64. <div class="user-change">Password requirements:</div>
  65. <div class="user-long">1.&nbsp;&nbsp;Between 8 and 20 characters</div>
  66. <div class="user-style">
  67. 2.&nbsp;&nbsp;Must contain at least three categories among the
  68. following: uppercase letters, lowercase letters, digits, special
  69. characters. And your password must meet security requirements.
  70. </div>
  71. <div class="user-change-pic" @click="sureChange" v-if="getDisabled">
  72. Save
  73. </div>
  74. <div class="user-change-pic" @click="sureToChange" v-else>Save</div>
  75. </div>
  76. <div class="change-btm-pic">
  77. <img src="@/assets/ballot/未标题-2.png" alt="" />
  78. </div>
  79. </div>
  80. </div>
  81. </template>
  82. <script>
  83. import { BallotChanges } from '@/api/ballot/ballot'
  84. export default {
  85. name: 'ballotLogin',
  86. data() {
  87. return {
  88. getDisabled: false,
  89. changePassword: false,
  90. optionsInfoList: [
  91. {
  92. value: 'CN',
  93. label: '中文',
  94. },
  95. {
  96. value: 'EN',
  97. label: 'English',
  98. },
  99. {
  100. value: 'FR',
  101. label: 'Français',
  102. },
  103. {
  104. value: 'RU',
  105. label: 'Русский',
  106. },
  107. ],
  108. language: {
  109. value: 'EN',
  110. },
  111. changeList: {
  112. id: undefined,
  113. oldPassword: undefined,
  114. password: undefined,
  115. newPassword: undefined,
  116. },
  117. }
  118. },
  119. mounted() {
  120. let language = sessionStorage.getItem('language')
  121. this.language.value = language
  122. },
  123. methods: {
  124. getInp() {
  125. let value = this.changeList.password
  126. console.log(value)
  127. if (value == '' || value == undefined || value == null) {
  128. this.$message.error(
  129. 'Please enter a password between 8 and 20 characters, and it must containat least three categories among the following: uppercase letters, lowercase letters , digits, special characters.'
  130. )
  131. } else {
  132. const reg =
  133. /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[~!@#$%^&*_+\?<>:"\{\}\|\\';/\.,`=-])[^\u4E00-\u9FA5][A-Za-z\d~!@#$%^&*_+\?<>:"\{\}\|\\';/\.,`=-]{7,19}$/
  134. console.log(reg.test(value))
  135. if (!reg.test(value)) {
  136. this.$message.error(
  137. 'Please enter a password between 8 and 20 characters, and it must containat least three categories among the following: uppercase letters, lowercase letters, digits, special characters.'
  138. )
  139. } else {
  140. this.$message.success('Password format correct!')
  141. this.getDisabled = true
  142. }
  143. }
  144. },
  145. goOut() {
  146. sessionStorage.removeItem('language')
  147. sessionStorage.removeItem('mettingUser')
  148. sessionStorage.removeItem('item')
  149. sessionStorage.removeItem('lastList')
  150. localStorage.removeItem('language')
  151. localStorage.removeItem('mettingUser')
  152. localStorage.removeItem('item')
  153. localStorage.removeItem('lastList')
  154. this.$message.success('Exiting, please hold on...')
  155. setTimeout(() => {
  156. this.$router.push({ path: 'home' })
  157. }, 1500)
  158. },
  159. openChange() {
  160. this.changePassword = true
  161. },
  162. closeList() {
  163. this.changeList.oldPassword = ''
  164. this.changeList.password = ''
  165. this.changeList.newPassword = ''
  166. this.changePassword = false
  167. },
  168. sureToChange() {
  169. this.$message.error(
  170. 'Please enter a password between 8 and 20 characters, and it must containat least three categories among the following: uppercase letters, lowercase letters, digits, special characters.'
  171. )
  172. },
  173. sureChange() {
  174. if (this.changeList.password != this.changeList.newPassword) {
  175. this.$message.error(
  176. 'The two passwords are not the same, please re-enter!'
  177. )
  178. } else {
  179. let id = JSON.parse(sessionStorage.getItem('mettingUser')).userId
  180. let params = {
  181. id: id,
  182. oldPassword: this.changeList.oldPassword,
  183. password: this.changeList.password,
  184. }
  185. console.log(params)
  186. BallotChanges(params)
  187. .then((res) => {
  188. console.log(res)
  189. this.$message.success(
  190. 'If the modification is successful, log in again'
  191. )
  192. let params = JSON.stringify(params)
  193. sessionStorage.setItem('userPassword', [params])
  194. setTimeout(() => {
  195. this.goOut()
  196. }, 1500)
  197. })
  198. .catch((error) => {
  199. this.$message.error(
  200. 'The old password is incorrect. Please enter it again'
  201. )
  202. })
  203. }
  204. },
  205. },
  206. }
  207. </script>
  208. <style scoped>
  209. @media screen and (min-width: 1080px) {
  210. .tal-top {
  211. width: 100%;
  212. height: 40px;
  213. background-color: #155199;
  214. }
  215. .box-bon {
  216. position: relative;
  217. }
  218. .top-btm-box {
  219. width: 100%;
  220. height: 1298px;
  221. background-color: #000;
  222. opacity: 0.5;
  223. z-index: 998;
  224. position: absolute;
  225. top: -100%;
  226. }
  227. .tal-first {
  228. display: inline-block;
  229. /* width: 140px; */
  230. height: 40px;
  231. font-size: 15px;
  232. text-align: center;
  233. line-height: 40px;
  234. color: #fff;
  235. margin-left: 48.5%;
  236. margin-right: 3%;
  237. }
  238. .tal-second {
  239. display: inline-block;
  240. height: 40px;
  241. font-size: 15px;
  242. text-align: center;
  243. line-height: 40px;
  244. color: #fff;
  245. cursor: pointer;
  246. font-weight: 600;
  247. }
  248. .tal-second > img {
  249. width: 16px;
  250. height: 16px;
  251. transform: translateY(3px);
  252. }
  253. .tal-third {
  254. display: inline-block;
  255. height: 40px;
  256. text-align: center;
  257. line-height: 40px;
  258. color: #fff;
  259. margin-left: 1%;
  260. margin-right: 1%;
  261. }
  262. .tal-fourc {
  263. display: inline-block;
  264. height: 40px;
  265. font-size: 15px;
  266. text-align: center;
  267. line-height: 40px;
  268. color: #fff;
  269. cursor: pointer;
  270. font-weight: 600;
  271. }
  272. .tal-fourc > img {
  273. width: 20px;
  274. height: 20px;
  275. transform: translateY(5px);
  276. }
  277. .box-big {
  278. margin: 50px auto;
  279. width: 650px;
  280. height: 570px;
  281. background: linear-gradient(0deg, #00b4ff 0%, #094fc0 100%);
  282. box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.5);
  283. overflow: hidden;
  284. z-index: 999;
  285. position: absolute;
  286. top: 50px;
  287. left: 50%;
  288. transform: translateX(-50%);
  289. }
  290. .change-top {
  291. width: 650px;
  292. height: 81px;
  293. background: #f5f5f5;
  294. border-radius: 4px 4px 0px 0px;
  295. position: relative;
  296. }
  297. .change-change {
  298. width: 120px;
  299. height: 41px;
  300. line-height: 41px;
  301. font-size: 14px;
  302. transform: translateX(30px) translateY(20px);
  303. }
  304. .change-text {
  305. width: 260px;
  306. height: 20px;
  307. text-align: center;
  308. font-size: 20px;
  309. font-family: PingFangSC-Medium, PingFang SC;
  310. font-weight: 500;
  311. color: #262626;
  312. line-height: 20px;
  313. position: absolute;
  314. top: 32px;
  315. left: 191px;
  316. }
  317. .change-pic {
  318. width: 25px;
  319. height: 24px;
  320. text-align: center;
  321. overflow: hidden;
  322. border-radius: 20px;
  323. cursor: pointer;
  324. position: absolute;
  325. top: 32px;
  326. right: 21px;
  327. }
  328. .change-pic > img {
  329. width: 100%;
  330. height: 100%;
  331. }
  332. .change-user-info {
  333. width: 650px;
  334. height: 508px;
  335. padding: 0 40px;
  336. }
  337. .change-item-id {
  338. width: 570px;
  339. height: 51px;
  340. margin-top: 10px;
  341. position: relative;
  342. }
  343. .change-user-id {
  344. width: 570px;
  345. height: 51px;
  346. margin-top: 10px;
  347. position: relative;
  348. }
  349. .change-user-id {
  350. width: 570px;
  351. height: 51px;
  352. margin-top: 30px;
  353. position: relative;
  354. }
  355. .change-user-pws {
  356. width: 570px;
  357. height: 51px;
  358. margin-top: 30px;
  359. position: relative;
  360. }
  361. .change-user-yzm {
  362. width: 570px;
  363. height: 51px;
  364. margin-top: 30px;
  365. position: relative;
  366. }
  367. .change-title {
  368. height: 39px;
  369. line-height: 39px;
  370. z-index: 997;
  371. width: 170px;
  372. font-size: 13px;
  373. text-align: left;
  374. border-radius: 10px;
  375. position: absolute;
  376. top: 0;
  377. left: 8px;
  378. }
  379. .change-title-info {
  380. height: 39px;
  381. line-height: 39px;
  382. z-index: 997;
  383. width: 200px;
  384. text-align: left;
  385. border-radius: 10px;
  386. font-size: 14px;
  387. position: absolute;
  388. top: 0;
  389. left: 8px;
  390. }
  391. .user-change-pic {
  392. width: 570px;
  393. height: 59px;
  394. text-align: center;
  395. line-height: 59px;
  396. cursor: pointer;
  397. font-size: 24px;
  398. color: #fff;
  399. margin-top: 50px;
  400. background: linear-gradient(177deg, #84e2ff 0%, #30ade8 100%);
  401. box-shadow: 0px 2px 4px 0px #097fb0,
  402. inset 0px 3px 3px 0px rgba(194, 235, 255, 0.63);
  403. border-radius: 8px;
  404. }
  405. .user-change {
  406. width: 570px;
  407. height: 16px;
  408. font-size: 16px;
  409. font-family: PingFangSC-Regular, PingFang SC;
  410. font-weight: 400;
  411. color: #333333;
  412. line-height: 16px;
  413. margin-left: 10px;
  414. }
  415. .user-style {
  416. width: 570px;
  417. height: 24px;
  418. font-size: 16px;
  419. margin-top: 10px;
  420. margin-left: 10px;
  421. font-family: PingFangSC-Regular, PingFang SC;
  422. font-weight: 400;
  423. color: #333333;
  424. line-height: 24px;
  425. }
  426. .user-long {
  427. width: 570px;
  428. height: 20px;
  429. font-size: 16px;
  430. margin-top: 10px;
  431. margin-left: 10px;
  432. font-family: PingFangSC-Regular, PingFang SC;
  433. font-weight: 400;
  434. color: #333333;
  435. line-height: 20px;
  436. }
  437. .change-btm-pic {
  438. width: 100%;
  439. position: absolute;
  440. top: 535px;
  441. }
  442. .change-btm-pic > img {
  443. width: 100%;
  444. }
  445. /deep/.change-user-info .el-input__inner {
  446. padding-left: 210px;
  447. background-color: #f5f5f5;
  448. }
  449. }
  450. @media screen and (max-width: 1079px) {
  451. .tal-top {
  452. width: 100%;
  453. height: 40px;
  454. background-color: #155199;
  455. }
  456. .box-bon {
  457. position: relative;
  458. }
  459. .top-btm-box {
  460. width: 100%;
  461. height: 1298px;
  462. background-color: #000;
  463. opacity: 0.5;
  464. z-index: 998;
  465. position: absolute;
  466. top: -100%;
  467. }
  468. .tal-first {
  469. display: inline-block;
  470. /* width: 140px; */
  471. height: 40px;
  472. font-size: 15px;
  473. text-align: center;
  474. line-height: 40px;
  475. color: #fff;
  476. margin-left: 48.5%;
  477. margin-right: 3%;
  478. }
  479. .tal-second {
  480. display: inline-block;
  481. height: 40px;
  482. font-size: 15px;
  483. text-align: center;
  484. line-height: 40px;
  485. color: #fff;
  486. cursor: pointer;
  487. font-weight: 600;
  488. }
  489. .tal-second > img {
  490. width: 16px;
  491. height: 16px;
  492. transform: translateY(3px);
  493. }
  494. .tal-third {
  495. display: inline-block;
  496. height: 40px;
  497. text-align: center;
  498. line-height: 40px;
  499. color: #fff;
  500. margin-left: 1%;
  501. margin-right: 1%;
  502. }
  503. .tal-fourc {
  504. display: inline-block;
  505. height: 40px;
  506. font-size: 15px;
  507. text-align: center;
  508. line-height: 40px;
  509. color: #fff;
  510. cursor: pointer;
  511. font-weight: 600;
  512. }
  513. .tal-fourc > img {
  514. width: 20px;
  515. height: 20px;
  516. transform: translateY(5px);
  517. }
  518. .box-big {
  519. margin: 50px auto;
  520. width: 650px;
  521. height: 570px;
  522. background: linear-gradient(0deg, #00b4ff 0%, #094fc0 100%);
  523. box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.5);
  524. overflow: hidden;
  525. z-index: 999;
  526. position: absolute;
  527. top: 50px;
  528. left: 200px;
  529. }
  530. .change-top {
  531. width: 650px;
  532. height: 81px;
  533. background: #f5f5f5;
  534. border-radius: 4px 4px 0px 0px;
  535. position: relative;
  536. }
  537. .change-change {
  538. width: 120px;
  539. height: 41px;
  540. line-height: 41px;
  541. font-size: 14px;
  542. transform: translateX(30px) translateY(20px);
  543. }
  544. .change-text {
  545. width: 260px;
  546. height: 20px;
  547. text-align: center;
  548. font-size: 20px;
  549. font-family: PingFangSC-Medium, PingFang SC;
  550. font-weight: 500;
  551. color: #262626;
  552. line-height: 20px;
  553. position: absolute;
  554. top: 32px;
  555. left: 191px;
  556. }
  557. .change-pic {
  558. width: 25px;
  559. height: 24px;
  560. text-align: center;
  561. overflow: hidden;
  562. border-radius: 20px;
  563. cursor: pointer;
  564. position: absolute;
  565. top: 32px;
  566. right: 21px;
  567. }
  568. .change-pic > img {
  569. width: 100%;
  570. height: 100%;
  571. }
  572. .change-user-info {
  573. width: 650px;
  574. height: 508px;
  575. padding: 0 40px;
  576. }
  577. .change-item-id {
  578. width: 570px;
  579. height: 51px;
  580. margin-top: 10px;
  581. position: relative;
  582. }
  583. .change-user-id {
  584. width: 570px;
  585. height: 51px;
  586. margin-top: 10px;
  587. position: relative;
  588. }
  589. .change-user-id {
  590. width: 570px;
  591. height: 51px;
  592. margin-top: 30px;
  593. position: relative;
  594. }
  595. .change-user-pws {
  596. width: 570px;
  597. height: 51px;
  598. margin-top: 30px;
  599. position: relative;
  600. }
  601. .change-user-yzm {
  602. width: 570px;
  603. height: 51px;
  604. margin-top: 30px;
  605. position: relative;
  606. }
  607. .change-title {
  608. height: 39px;
  609. line-height: 39px;
  610. z-index: 997;
  611. width: 170px;
  612. font-size: 13px;
  613. text-align: left;
  614. border-radius: 10px;
  615. position: absolute;
  616. top: 0;
  617. left: 8px;
  618. }
  619. .change-title-info {
  620. height: 39px;
  621. line-height: 39px;
  622. z-index: 997;
  623. width: 200px;
  624. text-align: left;
  625. border-radius: 10px;
  626. font-size: 14px;
  627. position: absolute;
  628. top: 0;
  629. left: 8px;
  630. }
  631. .user-change-pic {
  632. width: 570px;
  633. height: 59px;
  634. text-align: center;
  635. line-height: 59px;
  636. cursor: pointer;
  637. font-size: 24px;
  638. color: #fff;
  639. margin-top: 50px;
  640. background: linear-gradient(177deg, #84e2ff 0%, #30ade8 100%);
  641. box-shadow: 0px 2px 4px 0px #097fb0,
  642. inset 0px 3px 3px 0px rgba(194, 235, 255, 0.63);
  643. border-radius: 8px;
  644. }
  645. .user-change {
  646. width: 570px;
  647. height: 16px;
  648. font-size: 16px;
  649. font-family: PingFangSC-Regular, PingFang SC;
  650. font-weight: 400;
  651. color: #333333;
  652. line-height: 16px;
  653. margin-left: 10px;
  654. }
  655. .user-style {
  656. width: 570px;
  657. height: 24px;
  658. font-size: 16px;
  659. margin-top: 10px;
  660. margin-left: 10px;
  661. font-family: PingFangSC-Regular, PingFang SC;
  662. font-weight: 400;
  663. color: #333333;
  664. line-height: 24px;
  665. }
  666. .user-long {
  667. width: 570px;
  668. height: 20px;
  669. font-size: 16px;
  670. margin-top: 10px;
  671. margin-left: 10px;
  672. font-family: PingFangSC-Regular, PingFang SC;
  673. font-weight: 400;
  674. color: #333333;
  675. line-height: 20px;
  676. }
  677. .change-btm-pic {
  678. width: 100%;
  679. position: absolute;
  680. top: 535px;
  681. }
  682. .change-btm-pic > img {
  683. width: 100%;
  684. }
  685. /deep/.change-user-info .el-input__inner {
  686. padding-left: 210px;
  687. background-color: #f5f5f5;
  688. }
  689. }
  690. </style>