ballotTopBannerRU.vue 15 KB

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