index.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. <template>
  2. <div class="mine-box">
  3. <div class="mine-body">
  4. <div class="form-list-box">
  5. <div class="info-box">
  6. <div class="label">当前密码</div>
  7. <div class="input-box">
  8. <input
  9. :type="show1 ? 'text' : 'password'"
  10. placeholder="请输入"
  11. v-model="lastPassword"
  12. />
  13. </div>
  14. <div class="icon-box" @click="getShow('1')">
  15. <van-icon name="eye-o" v-if="show1" />
  16. <van-icon name="closed-eye" v-else class="iconfont" />
  17. </div>
  18. </div>
  19. <div class="info-box">
  20. <div class="label">修改密码</div>
  21. <div class="input-box">
  22. <input
  23. :type="show2 ? 'text' : 'password'"
  24. placeholder="请输入"
  25. v-model="password"
  26. />
  27. </div>
  28. <div class="icon-box" @click="getShow('2')">
  29. <van-icon name="eye-o" v-if="show2" />
  30. <van-icon name="closed-eye" v-else class="iconfont" />
  31. </div>
  32. </div>
  33. <div class="info-box">
  34. <div class="label">确认修改密码</div>
  35. <div class="input-box">
  36. <input
  37. :type="show3 ? 'text' : 'password'"
  38. placeholder="请输入"
  39. v-model="checkPassword"
  40. />
  41. </div>
  42. <div class="icon-box" @click="getShow('3')">
  43. <van-icon name="eye-o" v-if="show3" />
  44. <van-icon name="closed-eye" v-else class="iconfont" />
  45. </div>
  46. </div>
  47. <div class="foot-box">
  48. <div class="but" @click="editPassword">保存</div>
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. </template>
  54. <script>
  55. import { editPassword, getUserLocalStorageInfo } from "@/js_sdk/http";
  56. // import auth from "@/service/auth";
  57. export default {
  58. name: "PasswordEdit",
  59. data() {
  60. return {
  61. show1: false,
  62. show2: false,
  63. show3: false,
  64. lastPassword: "",
  65. password: "",
  66. checkPassword: "",
  67. };
  68. },
  69. created() {},
  70. mounted() {},
  71. methods: {
  72. getShow(type) {
  73. this["show" + type] = !this["show" + type];
  74. },
  75. editPassword() {
  76. if (this.password === "") {
  77. this.$showToast("请填写密码");
  78. return false;
  79. }
  80. if (this.lastPassword === "") {
  81. this.$showToast("请填写原密码");
  82. return false;
  83. }
  84. if (this.password !== this.checkPassword) {
  85. this.$showToast("确认密码与密码不一致");
  86. return false;
  87. }
  88. if (this.password.length <= 6) {
  89. this.$showToast("新密码必须超过六位数!");
  90. return false;
  91. }
  92. var pwdRegex = new RegExp("(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}");
  93. if (!pwdRegex.test(this.password)) {
  94. this.$showToast(
  95. "您的密码复杂度太低(密码中必须包含字母、数字),请及时修改密码!"
  96. );
  97. return false;
  98. }
  99. editPassword({
  100. userId: getUserLocalStorageInfo().user.id,
  101. newPassword: this.password,
  102. oldPassword: this.lastPassword,
  103. }).then((res) => {
  104. if (res.errno === 0 && res.data) {
  105. uni.clearStorageSync();
  106. uni.reLaunch({
  107. url: "/pages/login/login",
  108. });
  109. this.$showToast("修改成功,请重新登陆");
  110. } else {
  111. this.$showToast(res.errmsg);
  112. }
  113. });
  114. },
  115. },
  116. };
  117. </script>
  118. <style lang="scss" scoped>
  119. .mine-box {
  120. width: 100%;
  121. height: 100%;
  122. // background-image: url("../../assets/image/mine/mine-bg.jpg");
  123. // background-image: url("../../../static/passwordbac.png");
  124. background-image: url("https://pgy.idea-sf.com/mnpApi/FileController/download/128270394311049216");
  125. background-size: 100% 100%;
  126. background-repeat: no-repeat;
  127. box-sizing: border-box;
  128. overflow: hidden;
  129. .mine-body {
  130. padding: 30rpx;
  131. box-sizing: border-box;
  132. height: calc(100vh - 100rpx);
  133. box-sizing: border-box;
  134. overflow-y: auto;
  135. .form-list-box {
  136. width: 100%;
  137. background: rgba(#fff, 0.8);
  138. border-radius: 20rpx;
  139. box-sizing: border-box;
  140. margin-top: 160rpx;
  141. padding: 15rpx 30rpx;
  142. box-sizing: border-box;
  143. .info-box {
  144. height: 100rpx;
  145. @include flex;
  146. border-bottom: 1rpx solid #c6c5c9;
  147. .label {
  148. width: 200rpx;
  149. line-height: 100rpx;
  150. height: 100rpx;
  151. font-size: 30rpx;
  152. color: #262626;
  153. }
  154. .input-box {
  155. width: 260rpx;
  156. input {
  157. width: 100%;
  158. height: 100rpx;
  159. font-size: 30rpx;
  160. color: #999999;
  161. background: rgba(#fff, 0);
  162. }
  163. }
  164. .icon-box {
  165. width: 100rpx;
  166. text-align: center;
  167. i {
  168. font-size: 35rpx;
  169. color: #333;
  170. }
  171. }
  172. &:last-child {
  173. border-bottom: none;
  174. }
  175. }
  176. .foot-box {
  177. margin-top: 200rpx;
  178. width: 100%;
  179. .but {
  180. text-align: center;
  181. background: rgba(102, 0, 255, 1);
  182. color: #fff;
  183. font-size: 30rpx;
  184. line-height: 100rpx;
  185. border-radius: 10rpx;
  186. }
  187. }
  188. }
  189. }
  190. }
  191. </style>