password.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <template>
  2. <view>
  3. <u--form :model="inputForm" labelWidth="100px" class="u-form" labelPosition="left" :rules="rules" ref="inputForm">
  4. <u-form-item label="旧密码" borderBottom prop="oldPassword">
  5. <u--input v-model="inputForm.oldPassword" placeholder="请输入原密码" password border="none"></u--input>
  6. </u-form-item>
  7. <u-form-item label="新密码" borderBottom prop="newPassword">
  8. <u--input v-model="inputForm.newPassword" placeholder="请输入新密码" password border="none"></u--input>
  9. </u-form-item>
  10. <u-form-item label="确认新密码" borderBottom prop="confirmNewPassword">
  11. <u--input v-model="inputForm.confirmNewPassword" placeholder="请确认新密码" password border="none"></u--input>
  12. </u-form-item>
  13. <view class="padding-xl">
  14. <u-button type="primary" @click="formSubmit" text="提交"></u-button>
  15. </view>
  16. </u--form>
  17. </view>
  18. </template>
  19. <script>
  20. import userService from "@/api/sys/userService"
  21. export default {
  22. data () {
  23. return {
  24. loading: false,
  25. inputForm: {
  26. oldPassword: '',
  27. newPassword: '',
  28. confirmNewPassword: ''
  29. },
  30. rules: {
  31. 'oldPassword': [
  32. {
  33. required: true,
  34. message: '旧密码不能为空',
  35. trigger: ['blur', 'change']
  36. }
  37. ],
  38. 'newPassword': [
  39. {
  40. required: true,
  41. message: '新密码不能为空',
  42. trigger: ['blur', 'change']
  43. }
  44. ],
  45. 'confirmNewPassword': [
  46. {
  47. required: true,
  48. message: '确认密码不能为空',
  49. trigger: ['blur', 'change']
  50. },
  51. {
  52. validator: (rule, value, callback) => {
  53. if(this.inputForm.newPassword === this.inputForm.confirmNewPassword){
  54. return true;
  55. }else{
  56. return false;
  57. }
  58. },
  59. message: '你两次输入的新密码不同!'
  60. },
  61. ]
  62. }
  63. }
  64. },
  65. methods:{
  66. formSubmit: function(e) {
  67. //定义表单规则
  68. this.$refs.inputForm.validate().then(res => {
  69. uni.showLoading()
  70. userService.savePwd(this.inputForm).then((data) => {
  71. uni.showToast({title:data, icon:"success"});
  72. uni.clearStorage();
  73. uni.reLaunch({
  74. url: '/pages/login/login'
  75. })
  76. }).catch((e)=>{
  77. console.log(e)
  78. })
  79. })
  80. }
  81. }
  82. }
  83. </script>
  84. <style>
  85. .btn-logout {
  86. margin-top: 100upx;
  87. width: 80%;
  88. border-radius: 50upx;
  89. font-size: 16px;
  90. color: #fff;
  91. background: linear-gradient(to right, #365fff, #36bbff);
  92. }
  93. .btn-logout-hover {
  94. background: linear-gradient(to right, #365fdd, #36bbfa);
  95. }
  96. .cu-form-group .title {
  97. min-width: calc(4em + 40px);
  98. }
  99. </style>