index.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. <template>
  2. <view class="register absolute">
  3. <view class="shading">
  4. <view class="pictrue acea-row row-center-wrapper">
  5. </view>
  6. </view>
  7. <view class="whiteBg">
  8. <view class="title">找回密码</view>
  9. <view class="list">
  10. <view class="item">
  11. <view class="acea-row row-middle">
  12. <image src="/static/images/phone_1.png"></image>
  13. <input type="text" placeholder="输入手机号码" placeholder-class="placeholder" v-model="account" class="input"/>
  14. </view>
  15. </view>
  16. <view class="item">
  17. <view class="align-left acea-row row-middle">
  18. <image src="/static/images/code_2.png"></image>
  19. <input type="text" placeholder="填写验证码" class="codeIput" v-model="captcha" placeholder-class="placeholder"/>
  20. <button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''" @click="code">
  21. {{ text }}
  22. </button>
  23. </view>
  24. </view>
  25. <view class="item">
  26. <view class="acea-row row-middle">
  27. <image src="/static/images/code_1.png"></image>
  28. <input type="password" placeholder="填写您的登录密码" v-model="password" placeholder-class="placeholder" class="input"/>
  29. </view>
  30. </view>
  31. </view>
  32. <view class="logon" @click="registerReset">确认</view>
  33. <navigator url="/pages/users/login/index" class="tip">
  34. <text class="font-color">立即登录</text>
  35. </navigator>
  36. </view>
  37. <view class="bottom"></view>
  38. </view>
  39. </template>
  40. <script>
  41. // +----------------------------------------------------------------------
  42. // | CRMEB [ CRMEB赋能开发者,助力企业发展 ]
  43. // +----------------------------------------------------------------------
  44. // | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
  45. // +----------------------------------------------------------------------
  46. // | Licensed CRMEB并不是自由软件,未经许可不能去掉CRMEB相关版权
  47. // +----------------------------------------------------------------------
  48. // | Author: CRMEB Team <admin@crmeb.com>
  49. // +----------------------------------------------------------------------
  50. import sendVerifyCode from "@/mixins/SendVerifyCode";
  51. import { registerVerify, registerReset } from "@/api/user";
  52. export default {
  53. data() {
  54. return {
  55. account: "",
  56. password: "",
  57. captcha: ""
  58. };
  59. },
  60. mixins: [sendVerifyCode],
  61. methods: {
  62. registerReset() {
  63. let that = this;
  64. if (!that.account) return that.$util.Tips({
  65. title: '请填写手机号码'
  66. });
  67. if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
  68. title: '请输入正确的手机号码'
  69. });
  70. if (!that.captcha) return that.$util.Tips({
  71. title: '请填写验证码'
  72. });
  73. if (!/^[\w\d]+$/i.test(that.captcha)) return that.$util.Tips({
  74. title: '请输入正确的验证码'
  75. });
  76. if (!that.password) return that.$util.Tips({
  77. title: '请填写密码'
  78. });
  79. if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/i.test(that.password)) return that.$util.Tips({
  80. title: '您输入的密码过于简单'
  81. });
  82. registerReset({
  83. account: that.account,
  84. captcha: that.captcha,
  85. password: that.password
  86. })
  87. .then(res => {
  88. that.$util.Tips({
  89. title: res.msg,
  90. success: () => {
  91. uni.navigateTo({
  92. url: '/pages/login/index'
  93. });
  94. }
  95. });
  96. })
  97. .catch(res => {
  98. console.log(res);
  99. that.$util.Tips({
  100. title: res.msg
  101. });
  102. });
  103. },
  104. async code() {
  105. let that = this;
  106. if (!that.account) return that.$util.Tips({
  107. title: '请填写手机号码'
  108. });
  109. if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
  110. title: '请输入正确的手机号码'
  111. });
  112. registerVerify({ phone: that.account })
  113. .then(res => {
  114. that.$util.Tips({
  115. title: res.msg
  116. });
  117. that.sendCode();
  118. })
  119. .catch(res => {
  120. that.$util.Tips({
  121. title: res
  122. });
  123. });
  124. }
  125. }
  126. };
  127. </script>
  128. <style>
  129. </style>