change-password.vue 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281
  1. <template>
  2. <view>
  3. <headContent>
  4. <template #left>
  5. <reverse-back />
  6. </template>
  7. <template #content>
  8. <view class="haed-title">
  9. 修改登录密码
  10. </view>
  11. </template>
  12. </headContent>
  13. <view class="change-hint">
  14. <text class="iconfont">&#xe8ec;</text>
  15. <text>修改登录密码需24小时后才能操作体现</text>
  16. </view>
  17. <view class="form-box">
  18. <form class="form-content">
  19. <view class="form-item ">
  20. <view class="form-item-lable">原密码</view>
  21. <input class="form-item-input" v-model="formData.password" :maxlength="maxlength"
  22. placeholder-class="form-item-place" :type="showPwd ? 'text' : 'password'" placeholder="请输入原密码">
  23. <!-- <input class="form-item-input" v-model="formData.password" :maxlength="maxlength"
  24. placeholder-class="form-item-place" :type="showConfirmPsd ? 'text' : 'password'" placeholder="请输入原密码"> -->
  25. <view class="form-item-icon" @click.stop="showPwd = !showPwd">
  26. <text v-show="showPwd" class="iconfont">&#xe663;</text>
  27. <text v-show="!showPwd" class="iconfont">&#xe664;</text>
  28. </view>
  29. </view>
  30. <view class="err-hint">{{ formError.psdErr }}</view>
  31. <view class="form-item ">
  32. <view class="form-item-lable">新密码</view>
  33. <input class="form-item-input" v-model="formData.newPassword" :maxlength="maxlength"
  34. placeholder-class="form-item-place" :type="showNewPsd ? 'text' : 'password'" placeholder="请输入新密码">
  35. <view class="form-item-icon" @click.stop="showNewPsd = !showNewPsd">
  36. <text v-show="showNewPsd" class="iconfont">&#xe663;</text>
  37. <text v-show="!showNewPsd" class="iconfont">&#xe664;</text>
  38. </view>
  39. </view>
  40. <view class="err-hint">{{ formError.newPsdErr }}</view>
  41. <view class="form-item ">
  42. <view class="form-item-lable">确认密码</view>
  43. <input class="form-item-input" v-model="formData.confirmPassword" :maxlength="maxlength"
  44. placeholder-class="form-item-place" :type="showConfirmPsd ? 'text' : 'password'" placeholder="请再次输入新密码">
  45. <view class="form-item-icon" @click.stop="showConfirmPsd = !showConfirmPsd">
  46. <text v-show="showConfirmPsd" class="iconfont">&#xe663;</text>
  47. <text v-show="!showConfirmPsd" class="iconfont">&#xe664;</text>
  48. </view>
  49. </view>
  50. <view class="err-hint">{{ formError.confirmPsdErr }}</view>
  51. </form>
  52. <view :class="['form-btn' , deblockingSubmitBtn() ? 'active-form-btn' : '' ]"
  53. @click.stop="SubmitPassWord()">
  54. 确定
  55. </view>
  56. </view>
  57. </view>
  58. </template>
  59. <script>
  60. import {
  61. validPassword
  62. } from "@/utils/validate.js"
  63. export default {
  64. name: 'change-password',
  65. data() {
  66. return {
  67. maxlength: 20,
  68. showPwd: false,
  69. showNewPsd:false,
  70. showConfirmPsd:false,
  71. formData: {
  72. password: '',
  73. newPassword: '',
  74. confirmPassword: ''
  75. },
  76. formError: {
  77. psdErr: '',
  78. newPsdErr: '',
  79. confirmPsdErr: ''
  80. }
  81. };
  82. },
  83. watch: {
  84. 'formData.password'(newPsd, oldPsd) {
  85. this.validateField('password')
  86. },
  87. 'formData.newPassword'(newPsd, oldPsd) {
  88. this.validateField('newPassword')
  89. },
  90. 'formData.confirmPassword'(newPsd, oldPsd) {
  91. this.validateField('confirmPassword')
  92. }
  93. },
  94. methods: {
  95. validateField(key) {
  96. let validateStatus = false
  97. switch (key) {
  98. case 'password':
  99. if (this.formData[key].trim()) {
  100. this.formError.psdErr = '';
  101. validateStatus = true;
  102. } else {
  103. this.formError.psdErr = '请输入原密码';
  104. validateStatus = false;
  105. };
  106. break;
  107. case 'newPassword':
  108. if (!this.formData[key].trim()) {
  109. this.formError.newPsdErr = '请输入新密码'
  110. validateStatus = false;
  111. } else if (!validPassword(this.formData[key])) {
  112. this.formError.newPsdErr = '密码长度为8-20位字符,必须同时包含大写字母、小写字母和数字';
  113. validateStatus = false;
  114. } else {
  115. this.formError.newPsdErr = '';
  116. validateStatus = true;
  117. };
  118. break;
  119. case 'confirmPassword':
  120. if (!this.formData[key].trim()) {
  121. this.formError.confirmPsdErr = '请再次输入新密码';
  122. validateStatus = false;
  123. } else if (this.formData[key] !== this.formData.newPassword) {
  124. this.formError.confirmPsdErr = '确认密码和新密码输入不一致';
  125. validateStatus = false;
  126. } else {
  127. this.formError.confirmPsdErr = '';
  128. validateStatus = true;
  129. }
  130. break;
  131. default:
  132. validateStatus = false
  133. };
  134. return validateStatus;
  135. },
  136. confirmValidateField() {
  137. return new Promise((resolve, reject) => {
  138. let validateStatus = true;
  139. for (let key in this.formData) {
  140. console.log('SubmitPassWord', key)
  141. if (validateStatus) {
  142. validateStatus = this.validateField(key)
  143. } else {
  144. this.validateField(key)
  145. }
  146. }
  147. if (validateStatus) {
  148. resolve()
  149. } else {
  150. reject()
  151. };
  152. })
  153. },
  154. deblockingSubmitBtn() {
  155. for (let key in this.formData) {
  156. if (this.formData[key] === '') {
  157. return false
  158. break;
  159. }
  160. };
  161. return true
  162. },
  163. SubmitPassWord() {
  164. this.confirmValidateField().then(res => {
  165. uni.showLoading({
  166. title: '修改中',
  167. mask: true
  168. })
  169. setTimeout(() => {
  170. uni.hideLoading()
  171. }, 500)
  172. })
  173. }
  174. }
  175. }
  176. </script>
  177. <style lang="scss" scoped>
  178. .change-hint {
  179. font-size: 26rpx;
  180. padding: 0 $pages-padding;
  181. display: flex;
  182. align-items: center;
  183. color: $Theme-Color;
  184. border-top: 1rpx solid $border-color;
  185. height: 80rpx;
  186. .iconfont {
  187. margin-right: 20rpx;
  188. }
  189. }
  190. .form-box {
  191. width: 100%;
  192. padding: 0 $pages-padding;
  193. .form-content {
  194. width: 100%;
  195. .form-item {
  196. width: 100%;
  197. height: 80rpx;
  198. display: flex;
  199. align-items: center;
  200. font-size: 28rpx;
  201. border-bottom: 1rpx solid $border-color;
  202. .form-item-lable {
  203. width: 180rpx;
  204. }
  205. .form-item-input {
  206. font-size: 28rpx;
  207. flex: 1;
  208. height: 100%;
  209. border: none;
  210. }
  211. .form-item-place {
  212. font-size: 28rpx;
  213. color: #ccc;
  214. }
  215. .form-item-icon {
  216. width: 50rpx;
  217. height: 100%;
  218. display: flex;
  219. justify-content: flex-end;
  220. align-items: center;
  221. .iconfont {
  222. font-size: 26rpx;
  223. }
  224. }
  225. }
  226. .err-hint {
  227. width: 100%;
  228. min-height: 50rpx;
  229. font-size: 26rpx;
  230. color: red;
  231. line-height: 1.2;
  232. padding-top: 10rpx;
  233. }
  234. }
  235. .form-btn {
  236. width: 100%;
  237. background-color: #ccc;
  238. height: 80rpx;
  239. margin-top: 60rpx;
  240. border-radius: 10rpx;
  241. text-align: center;
  242. line-height: 80rpx;
  243. color: #fff;
  244. letter-spacing: 1px;
  245. font-size: 28rpx;
  246. }
  247. .active-form-btn {
  248. background-color: $Theme-Color ;
  249. }
  250. }
  251. </style>