ballotTopBannerFR.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720
  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">Bienvenue à l’Assemblée générale!</span>
  9. <span class="tal-second" @click="goOut">
  10. <img src="@/assets/ballot/退出.png" alt="" />
  11. Se déconnecter</span
  12. >
  13. <span class="tal-third">|</span>
  14. <span class="tal-fourc" @click="openChange">
  15. <img src="@/assets/ballot/修改密码.png" alt="" />
  16. Changer le mot de passe</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">Changer le mot de passe</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">Ancien mot de passe:</div>
  38. <el-input
  39. v-model="changeList.oldPassword"
  40. placeholder="Veuillez saisir votre ancien mot de passe"
  41. show-password
  42. ></el-input>
  43. </div>
  44. <div class="change-user-pws">
  45. <div class="change-title">Nouveau mot de passe:</div>
  46. <el-input
  47. placeholder="Veuillez saisir votre nouveau mot de passe"
  48. v-model="changeList.password"
  49. show-password
  50. @blur="getInp"
  51. ></el-input>
  52. </div>
  53. <div class="change-user-yzm">
  54. <div class="change-title">Confirmer votre nouveau mot de passe:</div>
  55. <el-input
  56. placeholder="Veuillez confirmer votre nouveau mot de passe"
  57. v-model="changeList.newPassword"
  58. show-password
  59. ></el-input>
  60. </div>
  61. <div class="user-change">Mot de passe requis :</div>
  62. <div class="user-long">1.&nbsp;&nbsp;entre 8 et 20 caractères</div>
  63. <div class="user-style">
  64. 2.&nbsp;&nbsp;doit contenir au moins trois catégories parmi les
  65. suivantes : lettres majuscules, lettres minuscules, chiffres,
  66. caractères spéciaux. Et votre mot de passe doit répondre aux exigences
  67. de sécurité.
  68. </div>
  69. <div class="user-change-pic" @click="sureChange" v-if="getDisabled">
  70. Sauvegarder
  71. </div>
  72. <div class="user-change-pic" @click="sureToChange" v-else>
  73. Sauvegarder
  74. </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: 'FR',
  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. 'Veuillez saisir un mot de passe entre 8 et 20 caractères, et il doit contenir au moins trois catégories parmi les suivantes : lettres majuscules, lettres minuscules, chiffres, caractères spéciaux.'
  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. 'Veuillez saisir un mot de passe entre 8 et 20 caractères, et il doit contenir au moins trois catégories parmi les suivantes : lettres majuscules, lettres minuscules, chiffres, caractères spéciaux.'
  138. )
  139. } else {
  140. this.$message.success('Le format du mot de passe est 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("Se déconnecter, s'il vous plaît plus tard...")
  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. 'Veuillez saisir un mot de passe entre 8 et 20 caractères, et il doit contenir au moins trois catégories parmi les suivantes : lettres majuscules, lettres minuscules, chiffres, caractères spéciaux.'
  171. )
  172. },
  173. sureChange() {
  174. if (this.changeList.password != this.changeList.newPassword) {
  175. this.$message.error(
  176. 'Les deux mots de passe ne correspondent pas, veuillez les saisir à nouveau!'
  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. this.$message.success(
  189. 'Modification réussie, veuillez vous reconnecter'
  190. )
  191. let params = JSON.stringify(params)
  192. sessionStorage.setItem('userPassword', [params])
  193. setTimeout(() => {
  194. this.goOut()
  195. }, 1500)
  196. })
  197. .catch((error) => {
  198. console.log(error)
  199. this.$message.error(
  200. 'Le mot de passe original est incorrect, veuillez le saisir à nouveau'
  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: 42%;
  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: 250px;
  372. font-size: 13px;
  373. text-align: left;
  374. border-radius: 10px;
  375. position: absolute;
  376. top: 0;
  377. left: 8px;
  378. }
  379. .user-change-pic {
  380. width: 570px;
  381. height: 59px;
  382. text-align: center;
  383. line-height: 59px;
  384. cursor: pointer;
  385. font-size: 24px;
  386. color: #fff;
  387. margin-top: 50px;
  388. background: linear-gradient(177deg, #84e2ff 0%, #30ade8 100%);
  389. box-shadow: 0px 2px 4px 0px #097fb0,
  390. inset 0px 3px 3px 0px rgba(194, 235, 255, 0.63);
  391. border-radius: 8px;
  392. }
  393. .user-change {
  394. width: 570px;
  395. height: 16px;
  396. font-size: 16px;
  397. font-family: PingFangSC-Regular, PingFang SC;
  398. font-weight: 400;
  399. color: #333333;
  400. line-height: 16px;
  401. margin-left: 10px;
  402. }
  403. .user-style {
  404. width: 570px;
  405. height: 24px;
  406. font-size: 16px;
  407. margin-top: 10px;
  408. margin-left: 10px;
  409. font-family: PingFangSC-Regular, PingFang SC;
  410. font-weight: 400;
  411. color: #333333;
  412. line-height: 24px;
  413. }
  414. .user-long {
  415. width: 570px;
  416. height: 20px;
  417. font-size: 16px;
  418. margin-top: 10px;
  419. margin-left: 10px;
  420. font-family: PingFangSC-Regular, PingFang SC;
  421. font-weight: 400;
  422. color: #333333;
  423. line-height: 20px;
  424. }
  425. .change-btm-pic {
  426. width: 100%;
  427. position: absolute;
  428. top: 535px;
  429. }
  430. .change-btm-pic > img {
  431. width: 100%;
  432. }
  433. /deep/.change-user-info .el-input__inner {
  434. padding-left: 260px;
  435. background-color: #f5f5f5;
  436. }
  437. }
  438. @media screen and (max-width: 1079px) {
  439. .tal-top {
  440. width: 100%;
  441. height: 40px;
  442. background-color: #155199;
  443. }
  444. .box-bon {
  445. position: relative;
  446. }
  447. .top-btm-box {
  448. width: 100%;
  449. height: 1298px;
  450. background-color: #000;
  451. opacity: 0.5;
  452. z-index: 998;
  453. position: absolute;
  454. top: -100%;
  455. }
  456. .tal-first {
  457. display: inline-block;
  458. /* width: 140px; */
  459. height: 40px;
  460. font-size: 15px;
  461. text-align: center;
  462. line-height: 40px;
  463. color: #fff;
  464. margin-left: 42%;
  465. margin-right: 3%;
  466. }
  467. .tal-second {
  468. display: inline-block;
  469. height: 40px;
  470. font-size: 15px;
  471. text-align: center;
  472. line-height: 40px;
  473. color: #fff;
  474. cursor: pointer;
  475. font-weight: 600;
  476. }
  477. .tal-second > img {
  478. width: 16px;
  479. height: 16px;
  480. transform: translateY(3px);
  481. }
  482. .tal-third {
  483. display: inline-block;
  484. height: 40px;
  485. text-align: center;
  486. line-height: 40px;
  487. color: #fff;
  488. margin-left: 1%;
  489. margin-right: 1%;
  490. }
  491. .tal-fourc {
  492. display: inline-block;
  493. height: 40px;
  494. font-size: 15px;
  495. text-align: center;
  496. line-height: 40px;
  497. color: #fff;
  498. cursor: pointer;
  499. font-weight: 600;
  500. }
  501. .tal-fourc > img {
  502. width: 20px;
  503. height: 20px;
  504. transform: translateY(5px);
  505. }
  506. .box-big {
  507. margin: 50px auto;
  508. width: 650px;
  509. height: 570px;
  510. background: linear-gradient(0deg, #00b4ff 0%, #094fc0 100%);
  511. box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.5);
  512. overflow: hidden;
  513. z-index: 999;
  514. position: absolute;
  515. top: 50px;
  516. left: 200px;
  517. }
  518. .change-top {
  519. width: 650px;
  520. height: 81px;
  521. background: #f5f5f5;
  522. border-radius: 4px 4px 0px 0px;
  523. position: relative;
  524. }
  525. .change-change {
  526. width: 120px;
  527. height: 41px;
  528. line-height: 41px;
  529. font-size: 14px;
  530. transform: translateX(30px) translateY(20px);
  531. }
  532. .change-text {
  533. width: 260px;
  534. height: 20px;
  535. text-align: center;
  536. font-size: 20px;
  537. font-family: PingFangSC-Medium, PingFang SC;
  538. font-weight: 500;
  539. color: #262626;
  540. line-height: 20px;
  541. position: absolute;
  542. top: 32px;
  543. left: 191px;
  544. }
  545. .change-pic {
  546. width: 25px;
  547. height: 24px;
  548. text-align: center;
  549. overflow: hidden;
  550. border-radius: 20px;
  551. cursor: pointer;
  552. position: absolute;
  553. top: 32px;
  554. right: 21px;
  555. }
  556. .change-pic > img {
  557. width: 100%;
  558. height: 100%;
  559. }
  560. .change-user-info {
  561. width: 650px;
  562. height: 508px;
  563. padding: 0 40px;
  564. }
  565. .change-item-id {
  566. width: 570px;
  567. height: 51px;
  568. margin-top: 10px;
  569. position: relative;
  570. }
  571. .change-user-id {
  572. width: 570px;
  573. height: 51px;
  574. margin-top: 10px;
  575. position: relative;
  576. }
  577. .change-user-id {
  578. width: 570px;
  579. height: 51px;
  580. margin-top: 30px;
  581. position: relative;
  582. }
  583. .change-user-pws {
  584. width: 570px;
  585. height: 51px;
  586. margin-top: 30px;
  587. position: relative;
  588. }
  589. .change-user-yzm {
  590. width: 570px;
  591. height: 51px;
  592. margin-top: 30px;
  593. position: relative;
  594. }
  595. .change-title {
  596. height: 39px;
  597. line-height: 39px;
  598. z-index: 997;
  599. width: 250px;
  600. font-size: 13px;
  601. text-align: left;
  602. border-radius: 10px;
  603. position: absolute;
  604. top: 0;
  605. left: 8px;
  606. }
  607. .user-change-pic {
  608. width: 570px;
  609. height: 59px;
  610. text-align: center;
  611. line-height: 59px;
  612. cursor: pointer;
  613. font-size: 24px;
  614. color: #fff;
  615. margin-top: 50px;
  616. background: linear-gradient(177deg, #84e2ff 0%, #30ade8 100%);
  617. box-shadow: 0px 2px 4px 0px #097fb0,
  618. inset 0px 3px 3px 0px rgba(194, 235, 255, 0.63);
  619. border-radius: 8px;
  620. }
  621. .user-change {
  622. width: 570px;
  623. height: 16px;
  624. font-size: 16px;
  625. font-family: PingFangSC-Regular, PingFang SC;
  626. font-weight: 400;
  627. color: #333333;
  628. line-height: 16px;
  629. margin-left: 10px;
  630. }
  631. .user-style {
  632. width: 570px;
  633. height: 24px;
  634. font-size: 16px;
  635. margin-top: 10px;
  636. margin-left: 10px;
  637. font-family: PingFangSC-Regular, PingFang SC;
  638. font-weight: 400;
  639. color: #333333;
  640. line-height: 24px;
  641. }
  642. .user-long {
  643. width: 570px;
  644. height: 20px;
  645. font-size: 16px;
  646. margin-top: 10px;
  647. margin-left: 10px;
  648. font-family: PingFangSC-Regular, PingFang SC;
  649. font-weight: 400;
  650. color: #333333;
  651. line-height: 20px;
  652. }
  653. .change-btm-pic {
  654. width: 100%;
  655. position: absolute;
  656. top: 535px;
  657. }
  658. .change-btm-pic > img {
  659. width: 100%;
  660. }
  661. /deep/.change-user-info .el-input__inner {
  662. padding-left: 260px;
  663. background-color: #f5f5f5;
  664. }
  665. }
  666. </style>