changePassword.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. <template>
  2. <view class="page-container">
  3. <u--form label-width="auto" labelAlign="right"
  4. ref="uForm"
  5. :model="model"
  6. :rules="rules"
  7. :labelStyle="{
  8. fontSize: '28rpx',
  9. fontWeight: '500',
  10. }"
  11. >
  12. <u-cell-group :border="false">
  13. <u-cell :border="true" :isLink="false" :clickable="true">
  14. <view slot="value" class="value">
  15. <u-form-item label="用户昵称">
  16. {{renderItem(userInfo,'nickName','--')}}
  17. </u-form-item>
  18. </view>
  19. </u-cell>
  20. <u-cell :border="true" :isLink="false" :clickable="true">
  21. <view slot="value" class="value">
  22. <u-form-item label="旧密码" prop="form.oldPassword" :required="true">
  23. <u--input
  24. v-model="model.form.oldPassword"
  25. placeholder="请输入旧密码"
  26. border="none"
  27. type="password"
  28. :clearable="true"
  29. inputAlign="right"
  30. >
  31. </u--input>
  32. </u-form-item>
  33. </view>
  34. </u-cell>
  35. <u-cell :border="true" :isLink="false" :clickable="true">
  36. <view slot="value" class="value">
  37. <u-form-item label="新密码" prop="form.newPassword" :required="true">
  38. <u--input
  39. v-model="model.form.newPassword"
  40. placeholder="请输入新密码"
  41. border="none"
  42. type="password"
  43. :clearable="true"
  44. inputAlign="right"
  45. >
  46. </u--input>
  47. </u-form-item>
  48. </view>
  49. </u-cell>
  50. <u-cell :border="true" :isLink="false" :clickable="true">
  51. <view slot="value" class="value">
  52. <u-form-item label="确认密码" prop="form.confirmPassword" :required="true">
  53. <u--input
  54. v-model="model.form.confirmPassword"
  55. placeholder="请输入确认密码"
  56. border="none"
  57. type="password"
  58. :clearable="true"
  59. inputAlign="right"
  60. >
  61. </u--input>
  62. </u-form-item>
  63. </view>
  64. </u-cell>
  65. </u-cell-group>
  66. </u--form>
  67. <view class="footer">
  68. <u-row style="margin-top: 40rpx;">
  69. <u-col :span="12" style="padding: 0 30rpx;">
  70. <u-button type="primary" shape="circle"
  71. color="linear-gradient(to right, #41B5FF, #4573FC)"
  72. :custom-style="{
  73. width: '100%',
  74. height: '38px'
  75. }" @click="handleSubmit">提交
  76. </u-button>
  77. </u-col>
  78. </u-row>
  79. </view>
  80. </view>
  81. </template>
  82. <script>
  83. import { encrypt, decrypt } from "@/utils/jsencrypt";
  84. import {updateUserPwd,userProfile} from '@/api/common/user.js'
  85. export default {
  86. components: {
  87. },
  88. data() {
  89. return {
  90. model: {
  91. form: {
  92. oldPassword: "",
  93. newPassword: "",
  94. confirmPassword: "",
  95. }
  96. },
  97. rules: {
  98. 'form.oldPassword': [
  99. {
  100. type: 'string',
  101. required: true,
  102. message: '请输入旧密码',
  103. trigger: ['blur', 'change']
  104. },
  105. ],
  106. 'form.newPassword': [
  107. {
  108. type: 'string',
  109. required: true,
  110. message: '请输入新密码',
  111. trigger: ['blur', 'change']
  112. },
  113. /* {
  114. type: 'string',
  115. required: true,
  116. message: '长度在 6 到 20 个字符',
  117. min: 6, max: 20,
  118. trigger: ['blur', 'change']
  119. }, */
  120. ],
  121. 'form.confirmPassword': [
  122. {
  123. type: 'string',
  124. required: true,
  125. message: '请输入确认密码',
  126. trigger: ['blur', 'change']
  127. },
  128. {
  129. // 自定义验证函数,见上说明
  130. validator: (rule, value, callback) => {
  131. if (this.model.form.newPassword != value) {
  132. callback(new Error("两次输入的密码不一致"));
  133. } else {
  134. callback();
  135. }
  136. },
  137. // 触发器可以同时用blur和change
  138. trigger: ['change','blur'],
  139. }
  140. ],
  141. },
  142. userInfo: null,
  143. }
  144. },
  145. onLoad() {
  146. this.getUserInfo()
  147. },
  148. onShow() {
  149. },
  150. onHide() {
  151. },
  152. onReady() {
  153. this.$refs.uForm.setRules(this.rules)
  154. },
  155. methods: {
  156. getUserInfo() {
  157. userProfile().then((res) => {
  158. this.userInfo = res.data
  159. })
  160. },
  161. // 提交
  162. async handleSubmit() {
  163. this.$refs.uForm.validate().then(async res => {
  164. let ajaxData = {
  165. ...this.model.form,
  166. }
  167. ajaxData.oldPassword = encrypt(ajaxData.oldPassword)
  168. ajaxData.newPassword = encrypt(ajaxData.newPassword)
  169. delete ajaxData.confirmPassword
  170. let { data, code } = await updateUserPwd(ajaxData)
  171. if (code == 0) {
  172. this.$modal.msgSuccess('修改成功')
  173. }
  174. }).catch(errors => {
  175. console.log('校验失败',errors)
  176. })
  177. },
  178. }
  179. }
  180. </script>
  181. <style lang="scss" scoped>
  182. .page-container {
  183. background: #fff;
  184. font-size: 28rpx;
  185. min-height: 100%;
  186. position: relative;
  187. .footer {
  188. padding: 10rpx 0;
  189. position: fixed;
  190. width: 100%;
  191. left: 0;
  192. bottom: 0;
  193. }
  194. }
  195. ::v-deep {
  196. .u-cell__body {
  197. .u-cell__body__content {
  198. width: auto;
  199. flex: none;
  200. }
  201. .value {
  202. flex: 1;
  203. .u-form-item__body {
  204. padding: 0;
  205. }
  206. }
  207. .u-form-item__body__right__content__slot {
  208. flex: 1;
  209. justify-content: flex-end;
  210. text-align: right;
  211. }
  212. }
  213. }
  214. </style>