upPassword.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  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. onShow: function() {},
  47. methods: {
  48. watchLogin() {
  49. const that = this;
  50. uni.getStorage({
  51. key: 'token',
  52. success: (res) => {
  53. let user = that.$jwt(res.data);
  54. if (user) {
  55. that.$set(that, `form`, {
  56. id: user.id,
  57. phone: user.phone
  58. })
  59. }
  60. },
  61. fail: (err) => {}
  62. })
  63. },
  64. toPath(e) {
  65. if (e && e.route) uni.redirectTo({
  66. url: `/${e.route}`
  67. })
  68. },
  69. // 提交保存
  70. onSubmit(ref) {
  71. const that = this;
  72. that.$refs[ref].validate().then(async params => {
  73. if (params.password == params.is_password) {
  74. const arr = await that.$api(`/user/resetPwd/${that.form.id}`, 'POST', params);
  75. if (arr.errcode == '0') {
  76. uni.showToast({
  77. title: `密码修改成功`,
  78. icon: 'success',
  79. });
  80. uni.clearStorage();
  81. uni.redirectTo({
  82. url: '/pages/login/index'
  83. })
  84. } else {
  85. uni.showToast({
  86. title: arr.errmsg,
  87. })
  88. }
  89. } else {
  90. uni.showToast({
  91. title: `密码不一致`,
  92. });
  93. }
  94. })
  95. },
  96. }
  97. }
  98. </script>
  99. <style lang="scss">
  100. .main {
  101. display: flex;
  102. flex-direction: column;
  103. width: 100vw;
  104. height: 100vh;
  105. .one {
  106. padding: 2vw;
  107. .uni-input {
  108. border: #f1f1ff 1px solid;
  109. padding: 2vw 2vw;
  110. border-radius: 1vw;
  111. }
  112. .btn {
  113. text-align: center;
  114. button {
  115. margin: 0 2vw 2vw 2vw;
  116. background-color: var(--ff0Color);
  117. color: var(--fffColor);
  118. }
  119. .name {
  120. color: var(--f85Color);
  121. font-size: var(--font14Size);
  122. }
  123. }
  124. }
  125. }
  126. .uni-forms-item {
  127. margin-bottom: 6vw !important;
  128. display: flex;
  129. flex-direction: row;
  130. }
  131. </style>