Changepassword.vue 2.9 KB

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