changePwd.vue 4.5 KB

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