changePwd.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. <template>
  2. <view class="container">
  3. <view class="content">
  4. <view class="tishi">请先输入原密码,再按步骤操作</view>
  5. <view class="input-group">
  6. <view class="input-row border">
  7. <text class="title">原密码:</text>
  8. <m-input class="m-input" :maxlength="12" type="password" displayable v-model="formCustom.oldPwd" placeholder="请输入原密码"></m-input>
  9. </view>
  10. <view class="input-row">
  11. <text class="title">新密码:</text>
  12. <m-input class="m-input" :maxlength="12" type="password" displayable v-model="formCustom.passwd" placeholder="请输入6-12位新密码"></m-input>
  13. </view>
  14. <view class="input-row">
  15. <text class="title">再次输入:</text>
  16. <m-input class="m-input" :maxlength="12" type="password" displayable v-model="formCustom.passwdCheck" placeholder="请输入6-12位新密码"></m-input>
  17. </view>
  18. </view>
  19. </view>
  20. <!-- 消息提醒弹窗 -->
  21. <view class="form-footer-btn">
  22. <button @click="handleReset" type="info">
  23. 重置
  24. </button>
  25. <button @click="handleSubmit" :loading="loading" type="primary">
  26. 保存
  27. </button>
  28. </view>
  29. </view>
  30. </template>
  31. <script>
  32. import mInput from '../../components/m-input.vue'
  33. import { changePwd, logout } from '@/api/user.js'
  34. export default{
  35. name:'changePwd',
  36. components: {
  37. mInput
  38. },
  39. data(){
  40. return{
  41. formCustom: {
  42. passwd: '',
  43. passwdCheck: '',
  44. oldPwd: ''
  45. },
  46. loading: false
  47. }
  48. },
  49. methods:{
  50. messageInfo(info){
  51. uni.showToast({
  52. icon:'none',
  53. title: info
  54. })
  55. },
  56. handleSubmit(){
  57. let _this = this
  58. //非空判断密码长度判断
  59. if (this.formCustom.oldPwd === '') {
  60. this.messageInfo("请输入原密码")
  61. return
  62. }
  63. if (this.formCustom.passwd === '') {
  64. this.messageInfo("请输入新密码")
  65. return
  66. }
  67. if (this.formCustom.passwd.length < 6) {
  68. this.messageInfo("新密码最少6位")
  69. return
  70. }
  71. if (this.formCustom.passwdCheck === '') {
  72. this.messageInfo("请再次输入新密码")
  73. return
  74. }
  75. if (this.formCustom.passwdCheck.length < 6) {
  76. this.messageInfo("再次输入新密码最少6位")
  77. return
  78. }
  79. if (this.formCustom.passwdCheck !== this.formCustom.passwd) {
  80. this.messageInfo("再次输入的密码和新密码不一样")
  81. return
  82. }
  83. // 保存
  84. this.loading = true
  85. changePwd({
  86. oldPassword: this.formCustom.oldPwd,
  87. password: this.formCustom.passwd
  88. }).then(res => {
  89. if (res.status == '200') {
  90. this.messageInfo('修改成功, 请重新登录')
  91. setTimeout(function(){
  92. _this.logout()
  93. },800)
  94. } else {
  95. this.messageInfo(res.message)
  96. this.loading = false
  97. }
  98. })
  99. },
  100. logout(){
  101. logout().then(res => {
  102. console.log(res)
  103. this.messageInfo(res.message)
  104. if(res.status == 200){
  105. this.$store.commit("$closeWebsocket")
  106. this.$store.state.vuex_token = ''
  107. this.$store.state.vuex_userData = ''
  108. uni.setStorageSync('setStatusIndexFunc', 0)
  109. uni.reLaunch({
  110. url: "/pages/login/login"
  111. })
  112. }
  113. this.loading = false
  114. })
  115. },
  116. handleReset (name) {
  117. this.formCustom = {
  118. passwd: '',
  119. passwdCheck: '',
  120. oldPwd: ''
  121. }
  122. }
  123. }
  124. }
  125. </script>
  126. <style lang="less">
  127. page{
  128. background: #FFFFFF;
  129. }
  130. .container{
  131. font-size: 28rpx;
  132. padding: 20rpx 40rpx ;
  133. .content{
  134. .tishi{
  135. text-align: center;
  136. line-height: 130rpx;
  137. font-size: 30rpx;
  138. color: #999;
  139. }
  140. .input-group{
  141. margin-top:20rpx;
  142. }
  143. .input-row{
  144. padding: 10rpx 20rpx;
  145. background-color: #F8F8F8;
  146. margin-bottom: 20rpx;
  147. border-radius: 10rpx;
  148. line-height: 32px;
  149. display: flex;
  150. .title{
  151. width:140rpx;
  152. display: inline-block;
  153. text-align: left;
  154. color:#808080;
  155. }
  156. }
  157. .uni-input-placeholder{
  158. font-size: 26rpx;
  159. color:#989898;
  160. }
  161. }
  162. .u-size-default[data-v-1f520a08]{
  163. height: 92rpx;
  164. }
  165. .m-input-input[data-v-5a85b703]{
  166. position: relative;
  167. bottom: 4rpx;
  168. }
  169. .m-input-icon[data-v-5a85b703]{
  170. position: relative;
  171. bottom: 10rpx;
  172. }
  173. }
  174. </style>