changePwd.vue 5.2 KB

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