forget.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. <template>
  2. <view class="container">
  3. <view class="" style="text-align: left;padding-left: 30rpx;font-size: 52rpx;padding-top: 50rpx;">{{ $t('login.czmm') }}</view>
  4. <view class="tit">{{ $t('login.yx') }}</view>
  5. <input type="text" class="shuru" :placeholder="$t('login.yx')" v-model="email" />
  6. <view class="tit">{{ $t('login.xmm') }}</view>
  7. <input type="text" class="shuru" :placeholder="$t('login.xmm')" v-model="lpwd" />
  8. <view class="tit">{{ $t('login.yxyzm') }}</view>
  9. <view class="flex" style="width: 673rpx;justify-content: space-between;margin: auto;">
  10. <input type="text" class=" yzm" :placeholder="$t('login.yzm')" v-model="ecode" />
  11. <view class="code yzmbtn" @click="verification">{{ countDown == 0 ? $t('login.yzm') : countDown }}</view>
  12. </view>
  13. <view class="flex" style="justify-content: space-between;padding: 50rpx 30rpx;align-items: flex-start;">
  14. <view class=""></view>
  15. <image src="../../static/icon/goto.png" mode="" style="width: 97rpx;height: 97rpx;" @click="resetpwd()"></image>
  16. </view>
  17. </view>
  18. </template>
  19. <script>
  20. import { mapMutations } from 'vuex';
  21. import { verify, loginMobile, getUserInfo, getForget, resetpwd } from '@/api/login.js';
  22. export default {
  23. data() {
  24. return {
  25. ecode: '',
  26. email: '',
  27. lpwd: '',
  28. phone: '', //用户
  29. code: '', //验证码
  30. time: '', //保存倒计时对象
  31. countDown: 0 //倒计时
  32. };
  33. },
  34. onLoad() {
  35. uni.setNavigationBarTitle({ title: this.$t('login.czmm') });
  36. },
  37. watch: {
  38. // 监听倒计时
  39. countDown(i) {
  40. if (i == 0) {
  41. clearInterval(this.time);
  42. }
  43. }
  44. },
  45. methods: {
  46. ...mapMutations('user', ['setUserInfo', 'login']),
  47. resetpwd() {
  48. let obj = this;
  49. if (obj.email == '') {
  50. return obj.$api.msg(this.$t('login.qsryx'));
  51. }
  52. if (!obj.isEmailAvailable(obj.email)) {
  53. return obj.$api.msg(this.$t('login.qsrzqdyx'));
  54. }
  55. if (obj.ecode == '') {
  56. return obj.$api.msg(this.$t('login.qsryzm'));
  57. }
  58. if (obj.lpwd == '') {
  59. return obj.$api.msg(this.$t('login.qsrxmm'));
  60. }
  61. resetpwd({
  62. email: obj.email,
  63. ecode: obj.ecode,
  64. lpwd: obj.lpwd
  65. })
  66. .then(res => {
  67. console.log(res);
  68. obj.login();
  69. })
  70. .catch(err => {});
  71. },
  72. // 手机登录
  73. register() {
  74. let obj = this;
  75. if (obj.phone == '') {
  76. obj.$api.msg('请输入电话号码');
  77. return;
  78. }
  79. if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(this.phone)) {
  80. obj.$api.msg('请输入正确的手机号');
  81. return;
  82. }
  83. if (obj.code == '') {
  84. obj.$api.msg('请输入验证码');
  85. return;
  86. }
  87. loginMobile({
  88. phone: obj.phone, //账号
  89. captcha: obj.code
  90. })
  91. .then(function(e) {
  92. uni.setStorageSync('token', e.data.token);
  93. getUserInfo({}).then(e => {
  94. obj.login();
  95. // 保存返回用户数据
  96. obj.setUserInfo(e.data);
  97. //成功跳转首页
  98. uni.switchTab({
  99. url: '/pages/index/index'
  100. });
  101. });
  102. })
  103. .catch(e => {
  104. console.log(e);
  105. });
  106. },
  107. isEmailAvailable(obj) {
  108. let email = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
  109. if (!email.test(obj)) {
  110. return false;
  111. }
  112. return true;
  113. },
  114. //发送验证码
  115. verification() {
  116. let obj = this;
  117. if (obj.email == '') {
  118. return obj.$api.msg(this.$t('login.qsryx'));
  119. }
  120. if (!obj.isEmailAvailable(obj.email)) {
  121. return obj.$api.msg(this.$t('login.qsrzqdyx'));
  122. }
  123. // 判断是否在倒计时
  124. if (obj.countDown > 0) {
  125. return false;
  126. } else {
  127. obj.countDown = 60;
  128. obj.time = setInterval(() => {
  129. obj.countDown--;
  130. }, 1000);
  131. //调用验证码接口
  132. getForget({
  133. email: obj.email
  134. // type: 'login'
  135. })
  136. .then(({ data }) => {})
  137. .catch(err => {
  138. console.log(err);
  139. });
  140. }
  141. },
  142. login() {
  143. //返回登录
  144. uni.navigateTo({
  145. url: '/pages/public/login'
  146. });
  147. }
  148. }
  149. };
  150. </script>
  151. <style lang="scss">
  152. page {
  153. height: 100%;
  154. background-color: #fff;
  155. font-size: 32rpx;
  156. }
  157. .container {
  158. width: 100%;
  159. height: 100%;
  160. background-size: 100%;
  161. }
  162. .shuru {
  163. display: block;
  164. background-color: #f5f5f5;
  165. width: 673rpx;
  166. height: 95rpx;
  167. margin: auto;
  168. padding-left: 30rpx;
  169. text-align: 95rpx;
  170. }
  171. .tit {
  172. padding: 40rpx 48rpx 20rpx;
  173. }
  174. .gologin {
  175. width: 204rpx;
  176. height: 98rpx;
  177. line-height: 98rpx;
  178. background-color: #fcd535;
  179. text-align: center;
  180. border-radius: 20rpx;
  181. }
  182. .wjmm {
  183. color: #fcd535;
  184. }
  185. .yzm {
  186. width: 400rpx;
  187. height: 95rpx;
  188. padding-left: 30rpx;
  189. background-color: #f5f5f5;
  190. }
  191. .yzmbtn {
  192. width: 234rpx;
  193. height: 95rpx;
  194. background-color: #f5f5f5;
  195. text-align: center;
  196. line-height: 95rpx;
  197. color: #fcd535;
  198. }
  199. </style>