Changepassword.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  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"></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"></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"></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. </view>
  22. </template>
  23. <script>
  24. export default {
  25. data() {
  26. return {
  27. dataForm: {
  28. password: "",
  29. newPassword: "",
  30. confirmPassword: "",
  31. },
  32. model1: {
  33. userInfo: {
  34. password: '',
  35. newPassword: '',
  36. confirmPassword: '',
  37. },
  38. },
  39. rules: {
  40. 'userInfo.password': {
  41. type: 'string',
  42. required: true,
  43. message: '请填写旧登录密码',
  44. trigger: ['blur', 'change']
  45. },
  46. 'userInfo.newPassword': {
  47. type: 'string',
  48. required: true,
  49. message: '请填写新登录密码',
  50. trigger: ['blur', 'change']
  51. },
  52. 'userInfo.confirmPassword': {
  53. type: 'string',
  54. required: true,
  55. message: '请填写新登录密码',
  56. trigger: ['blur', 'change']
  57. },
  58. },
  59. };
  60. },
  61. onReady() {
  62. //如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则。
  63. this.$refs.form1.setRules(this.rules)
  64. },
  65. methods: {
  66. submit() {
  67. this.$refs.form1.validate().then(res => {
  68. if(this.model1.userInfo.newPassword!=this.model1.userInfo.confirmPassword){
  69. uni.$u.toast('您的新密码不一致,请重新输入')
  70. }else{
  71. uni.$u.toast('校验通过')
  72. console.log('111111111111111111',this.model1.userInfo)
  73. this.$api.get('/user/password',this.model1.userInfo)
  74. .then(res=>{
  75. uni.navigateTo({
  76. url: '/pages/login/login'
  77. })
  78. })
  79. }
  80. }).catch(errors => {
  81. uni.$u.toast('校验失败')
  82. })
  83. }
  84. }
  85. }
  86. </script>
  87. <style lang="scss">
  88. .tijiao {
  89. margin-top: 50rpx;
  90. padding-bottom: 30rpx;
  91. }
  92. .xgmy{
  93. padding: 20rpx;
  94. }
  95. .OutermostLayer h4 {
  96. font-size: 35rpx;
  97. margin-bottom: 10rpx;
  98. padding-top: 20rpx;
  99. text-align: center;
  100. }
  101. </style>