changePwd.vue 4.7 KB

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