forget-pass.vue 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  1. <template>
  2. <view class="forget-wrap">
  3. <form class="login-form" @submit="formSubmit">
  4. <view v-show="state == 0">
  5. <view class="form-item">
  6. <input v-model="form.phone" class="item-inp" name="phone" type="number" maxlength="11" placeholder="请输入登录手机号" />
  7. </view>
  8. <view class="form-item">
  9. <input v-model="form.verifyCode" class="item-inp" name="verifyCode" type="number" maxlength="6" placeholder="请输入短信验证码" />
  10. <button class="getcode-btn" :disabled="isDisable" @click="getCodeValidate">{{nowVal}}</button>
  11. </view>
  12. <view class="form-btn-con">
  13. <button class="form-btn" @click="goStep">下一步</button>
  14. </view>
  15. </view>
  16. <view v-show="state == 1">
  17. <view class="form-item">
  18. <input v-model="form.password" class="item-inp" name="password" password type="text" maxlength="12" placeholder="请输入新密码" />
  19. </view>
  20. <view class="form-item">
  21. <input v-model="form.passwords" class="item-inp" name="passwords" password type="text" maxlength="12" placeholder="请再次输入新密码" />
  22. </view>
  23. <view class="form-btn-con">
  24. <button class="form-btn" form-type="submit">提交</button>
  25. </view>
  26. </view>
  27. </form>
  28. <!-- 图文验证码 -->
  29. <uni-popup ref="imageTxtPopup" type="center">
  30. <popup-con type="forgetImageTxt" title="图文验证码" :popBtn="popBtn" :changeImg="changeImg" @captchaImg="captchaImg"></popup-con>
  31. </uni-popup>
  32. </view>
  33. </template>
  34. <script>
  35. import { isvalidPhone } from '@/libs/tools.js'
  36. import uniPopup from '@/components/uni-popup/uni-popup.vue'
  37. import popupCon from '@/components/uni-popup/popup-con.vue'
  38. import { memberVerifyCode, memberChangePwd, memberValidateVerifyCode, memberGetByMobile } from '@/api/user.js'
  39. import { clzConfirm } from '@/libs/tools.js'
  40. export default{
  41. components: {
  42. uniPopup,
  43. popupCon
  44. },
  45. data(){
  46. return{
  47. state: 0, // 忘记密码当前状态
  48. form: {
  49. phone: '',
  50. verifyCode: '',
  51. password: '',
  52. passwords: ''
  53. },
  54. nowVal: '获取验证码', // 按钮显示内容
  55. count: '', // 当前秒数
  56. timer: null, // 倒计时
  57. isDisable: false, // 是否禁止获取验证码
  58. popBtn: [], // name为操作按钮名称,color为操作按钮颜色值
  59. changeImg: false, // 是否重新更换图形验证码
  60. randomCode: '', // 图片验证码随机码
  61. }
  62. },
  63. onLoad(opts) {
  64. if(opts.username){
  65. // Number判断其是否为非数字格式,若有值,则设为字符串格式,避免出现科学及算法数字。若为NaN时,则设为空
  66. this.form.phone = Number(opts.username) ? String(opts.username) : ''
  67. }
  68. },
  69. methods: {
  70. // 下一步
  71. goStep(){
  72. const _this = this
  73. // 表单校验
  74. if(this.form.phone == ''){
  75. uni.showToast({icon: 'none',title: '请输入登录手机号'})
  76. return
  77. }
  78. if(!isvalidPhone(this.form.phone)){
  79. uni.showToast({icon: 'none',title: '请输入正确的手机号码'})
  80. return
  81. }
  82. if(this.form.verifyCode == ''){
  83. uni.showToast({icon: 'none',title: '请输入验证码'})
  84. return
  85. }
  86. // 校验短信验证码是否正确
  87. const obj = {}
  88. obj.phone = _this.form.phone,
  89. obj.random = _this.randomCode, // 当前随机码
  90. obj.verifyCode = _this.form.verifyCode
  91. memberValidateVerifyCode(obj).then(res => {
  92. if(res.status == 200){
  93. _this.state = 1
  94. }else{
  95. uni.showToast({icon: 'none',title: res.message})
  96. }
  97. })
  98. },
  99. // 表单提交
  100. formSubmit(){
  101. const _this = this
  102. if(this.form.password == ''){
  103. uni.showToast({icon: 'none',title: '请输入新密码'})
  104. return
  105. }
  106. if(this.form.password.length < 6 || this.form.password.length > 12){
  107. uni.showToast({icon: 'none',title: '请输入6-12位新密码'})
  108. return
  109. }
  110. if(this.form.passwords == ''){
  111. uni.showToast({icon: 'none',title: '请再次输入新密码'})
  112. return
  113. }
  114. if(this.form.password != this.form.passwords){
  115. uni.showToast({icon: 'none',title: '两次密码输入不一致'})
  116. return
  117. }
  118. const obj = {}
  119. obj.phone = _this.form.phone,
  120. obj.random = _this.randomCode, // 当前随机码
  121. obj.verifyCode = _this.form.verifyCode,
  122. obj.password = _this.form.password
  123. memberChangePwd(obj).then(res => {
  124. if(res.status == 200){
  125. // 将修改后的账号密码 重新存储
  126. _this.$u.vuex('vuex_user.account', _this.form.phone)
  127. _this.$u.vuex('vuex_user.password', '')
  128. clzConfirm({
  129. title: '提示',
  130. content: '修改成功',
  131. confirmText: '去登录',
  132. showCancel: false,
  133. success: function (ret) {
  134. if (ret.confirm||ret.index==0) {
  135. uni.reLaunch({
  136. url: '/pages/login/login'
  137. })
  138. }
  139. }
  140. })
  141. }
  142. })
  143. },
  144. // 获取验证码
  145. getCodeValidate(){
  146. if(this.form.phone){
  147. if(!isvalidPhone(this.form.phone)){
  148. uni.showToast({icon: 'none',title: '请输入正确的手机号码'})
  149. return
  150. }else{
  151. // 校验手机号是否注册过
  152. memberGetByMobile({phone: this.form.phone}).then(res => {
  153. if(res.status == 200){
  154. // 图文验证码
  155. this.$refs.imageTxtPopup.open()
  156. }else{
  157. uni.showToast({icon: 'none',title: res.message})
  158. }
  159. })
  160. }
  161. }else{
  162. uni.showToast({icon: 'none',title: '请先输入手机号'})
  163. }
  164. },
  165. // 开始倒计时
  166. getCodeFun(){
  167. const TIME_COUNT = 60
  168. if (!this.timer) {
  169. this.count = TIME_COUNT
  170. this.timer = setInterval(() => {
  171. if (this.count > 0 && this.count <= TIME_COUNT) {
  172. this.count--
  173. this.nowVal = this.count + 's'
  174. this.isDisable = true
  175. } else {
  176. this.nowVal = '重新获取验证码'
  177. clearInterval(this.timer)
  178. this.timer = null
  179. this.isDisable = false
  180. }
  181. }, 1000)
  182. }
  183. },
  184. // 图文验证码
  185. captchaImg(code, nowRandomCode){
  186. this.captchaVerify(code, nowRandomCode)
  187. },
  188. // 验证图片验证码
  189. captchaVerify(code, nowRandomCode){
  190. const _this = this
  191. let obj = {}
  192. obj.phone = this.form.phone
  193. obj.random = nowRandomCode
  194. obj.captcha = code
  195. // 短信验证码
  196. memberVerifyCode(obj).then(res => {
  197. console.log(JSON.stringify(res))
  198. if(res.status == 200){ // 验证码输入正确
  199. _this.randomCode = nowRandomCode // 图片验证码随机码
  200. // 关闭 图形验证码 弹框
  201. _this.$refs.imageTxtPopup.close()
  202. // 开启倒计时
  203. this.getCodeFun()
  204. uni.showToast({icon: 'none',title: '验证码发送成功'})
  205. }else { // 验证码输入错误
  206. _this.randomCode = ''
  207. // 切换验证码重新校验
  208. _this.changeImg = false
  209. _this.$nextTick(function(){
  210. _this.changeImg = true
  211. })
  212. uni.showToast({icon: 'none',title: res.message})
  213. }
  214. })
  215. },
  216. }
  217. }
  218. </script>
  219. <style scoped lang="scss">
  220. @import './login.scss';
  221. .forget-wrap .login-form{
  222. padding-top: 300upx;
  223. }
  224. .getcode-btn {
  225. background-color: #298bf2 !important;
  226. color: #fff !important;
  227. border: none !important;
  228. }
  229. </style>