Changepassword.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <template>
  2. <view class="OutermostLayer">
  3. <h4>登录密码修改</h4>
  4. <view class="xgmy">
  5. <u--form labelPosition="left" labelWidth='180' :model="model1" :rules="rules" ref="form1">
  6. <u-form-item label="旧登录密码" prop="userInfo.password" borderBottom ref="item1">
  7. <u--input v-model="model1.userInfo.password" border="surround" clearable></u--input>
  8. </u-form-item>
  9. <u-form-item label="新登录密码" prop="userInfo.newPassword" borderBottom ref="item1">
  10. <u--input v-model="model1.userInfo.newPassword" border="surround" clearable></u--input>
  11. </u-form-item>
  12. </u-form-item>
  13. <u-form-item label="请再次输入" prop="userInfo.confirmPassword" borderBottom ref="item1">
  14. <u--input v-model="model1.userInfo.confirmPassword" border="surround" clearable></u--input>
  15. </u-form-item>
  16. </u--form>
  17. <view class="tijiao">
  18. <u-button type="primary" @click="submit">确定修改</u-button>
  19. </view>
  20. </view>
  21. <u-notify ref="uNotify" message="" ></u-notify>
  22. </view>
  23. </template>
  24. <script>
  25. export default {
  26. data() {
  27. return {
  28. dataForm: {
  29. password: "",
  30. newPassword: "",
  31. confirmPassword: "",
  32. },
  33. model1: {
  34. userInfo: {
  35. password: '',
  36. newPassword: '',
  37. confirmPassword: '',
  38. },
  39. },
  40. rules: {
  41. 'userInfo.password': {
  42. type: 'string',
  43. required: true,
  44. message: '请填写旧登录密码',
  45. trigger: ['blur', 'change']
  46. },
  47. 'userInfo.newPassword': {
  48. type: 'string',
  49. required: true,
  50. message: '请填写新登录密码',
  51. trigger: ['blur', 'change']
  52. },
  53. 'userInfo.confirmPassword': {
  54. type: 'string',
  55. required: true,
  56. message: '请填写新登录密码',
  57. trigger: ['blur', 'change']
  58. },
  59. },
  60. };
  61. },
  62. onReady() {
  63. //如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则。
  64. this.$refs.form1.setRules(this.rules)
  65. },
  66. methods: {
  67. submit() {
  68. this.$refs.form1.validate().then(res => {
  69. if(this.model1.userInfo.newPassword!=this.model1.userInfo.confirmPassword){
  70. uni.$u.toast('您的新密码不一致,请重新输入')
  71. }else{
  72. //uni.$u.toast('校验通过')
  73. // console.log('111111111111111111',this.model1.userInfo)
  74. let postdata={
  75. "newPassword":this.model1.userInfo.newPassword,
  76. "password": this.model1.userInfo.password
  77. }
  78. this.$api.put('/user/password',postdata)
  79. .then(res=>{
  80. if(res.data.code==0){
  81. uni.navigateTo({
  82. url: '/pages/login/login'
  83. })
  84. }else{
  85. this.$refs.uNotify.error(res.data.msg)
  86. }
  87. })
  88. }
  89. }).catch(errors => {
  90. uni.$u.toast('校验失败')
  91. })
  92. }
  93. }
  94. }
  95. </script>
  96. <style lang="scss">
  97. .tijiao {
  98. margin-top: 50rpx;
  99. padding-bottom: 30rpx;
  100. }
  101. .xgmy{
  102. padding: 20rpx;
  103. }
  104. .OutermostLayer h4 {
  105. font-size: 35rpx;
  106. margin-bottom: 10rpx;
  107. padding-top: 20rpx;
  108. text-align: center;
  109. }
  110. </style>