upPassword.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. <template>
  2. <mobile-frame :frameStyle="frameStyle" @toPath="toPath">
  3. <view class="main">
  4. <view class="one">
  5. <uni-forms ref="form" :modelValue="form" :rules="rules" label-width="auto">
  6. <uni-forms-item label="账号" name="phone">
  7. <uni-easyinput type="text" v-model="form.phone" placeholder="请输入账号" disabled />
  8. </uni-forms-item>
  9. <uni-forms-item label="新密码" name="password">
  10. <uni-easyinput type="password" v-model="form.password" placeholder="请输入新密码" />
  11. </uni-forms-item>
  12. <uni-forms-item label="确认密码" name="is_password">
  13. <uni-easyinput type="is_password" v-model="form.is_password" placeholder="请输入确认密码" />
  14. </uni-forms-item>
  15. </uni-forms>
  16. <view class="btn">
  17. <button type="primary" @click="onSubmit('form')" size="small">提交</button>
  18. <view class="name">提示:为了您的账户安全,建议定期修改密码</view>
  19. </view>
  20. </view>
  21. </view>
  22. </mobile-frame>
  23. </template>
  24. <script>
  25. export default {
  26. data() {
  27. return {
  28. frameStyle: {
  29. useBar: false
  30. },
  31. form: {},
  32. rules: {
  33. password: {
  34. rules: [{
  35. required: true,
  36. errorMessage: '请输入新密码',
  37. }]
  38. },
  39. },
  40. };
  41. },
  42. onLoad: function(e) {
  43. const that = this;
  44. that.watchLogin();
  45. },
  46. methods: {
  47. watchLogin() {
  48. const that = this;
  49. uni.getStorage({
  50. key: 'token',
  51. success: (res) => {
  52. let user = that.$jwt(res.data);
  53. if (user) {
  54. that.$set(that, `form`, {
  55. id: user.id,
  56. phone: user.phone
  57. })
  58. }
  59. },
  60. fail: (err) => {}
  61. })
  62. },
  63. toPath(e) {
  64. if (e && e.route) uni.redirectTo({
  65. url: `/${e.route}`
  66. })
  67. },
  68. // 提交保存
  69. onSubmit(ref) {
  70. const that = this;
  71. that.$refs[ref].validate().then(async params => {
  72. if (params.password == params.is_password) {
  73. const arr = await that.$api(`/user/resetPwd/${that.form.id}`, 'POST', params);
  74. if (arr.errcode == '0') {
  75. uni.showToast({
  76. title: `密码修改成功`,
  77. icon: 'success',
  78. });
  79. uni.clearStorage();
  80. uni.redirectTo({
  81. url: '/pages/login/index'
  82. })
  83. } else {
  84. uni.showToast({
  85. title: arr.errmsg,
  86. })
  87. }
  88. } else {
  89. uni.showToast({
  90. title: `密码不一致`,
  91. });
  92. }
  93. })
  94. },
  95. }
  96. }
  97. </script>
  98. <style lang="scss">
  99. .main {
  100. display: flex;
  101. flex-direction: column;
  102. width: 100vw;
  103. height: 100vh;
  104. .one {
  105. padding: 2vw;
  106. .uni-input {
  107. border: #f1f1ff 1px solid;
  108. padding: 2vw 2vw;
  109. border-radius: 1vw;
  110. }
  111. .btn {
  112. text-align: center;
  113. button {
  114. margin: 0 2vw 2vw 2vw;
  115. background-color:var(--fFB1Color);
  116. color: var(--fffColor);
  117. }
  118. .name {
  119. color: var(--f85Color);
  120. font-size: var(--font14Size);
  121. }
  122. }
  123. }
  124. }
  125. .uni-forms-item {
  126. margin-bottom: 6vw !important;
  127. display: flex;
  128. flex-direction: row;
  129. }
  130. </style>