简柏林 / thingskit-app · Commits

Commit a8d35317fa675d668f6810cfaa71b8205e4afbde

Authored by sqy
1 parent 1df6d97e

fix:[DEFECT-383]忘记验证的验证

Inline Side-by-side
Showing 2 changed files with 243 additions and 261 deletions
1   -<template>
2   - <view class="find-password-page">
3   - <public-module></public-module>
4   - <view class="top u-flex" >
5   - <view @click="showPhone" :style="{color:!nextStatus?'#0079fe':''}" class="item">1.验证手机号码</view>
6   - <view :style="{color:!nextStatus?'':'#0079fe'}" class="item">2.设置新密码</view>
7   - </view>
8   - <view v-if="!nextStatus" style="margin-top: 40rpx;" class="f__login">
9   - <view class="loginPhone">
10   - <view class="form-row"><u-input v-model="phone" type="number" placeholder="请输入手机号码" border="bottom"></u-input></view>
11   - <view style="height: 25rpx;"></view>
12   - <view class="form-row">
13   - <u-input type="number" v-model="vCode" placeholder="请输入短信验证码" border="bottom">
14   - <template slot="suffix" @click="getVcode">
15   - <view class="getvcode">{{ codeText }}</view>
16   - </template>
17   - </u-input>
18   - </view>
19   - <button class="submit" size="default" @click="onNextSubmit"><text style="color:#fff">下一步</text></button>
20   - </view>
21   - </view>
22   - <view v-else style="margin-top: 40rpx;" class="f__login">
23   - <view class="loginPhone">
24   - <view class="form-row u-flex">
25   - <u-input v-model="password" :password="showPasswordF" placeholder="请设置6-20位新的登录密码" border="bottom">
26   - <template slot="suffix" @click="showPasswordModeF">
27   - <view style="padding:20rpx"><u-icon :name="showPasswordF ? '/static/eye-hide.png' : '/static/eye.png'"></u-icon></view>
28   - </template>
29   - </u-input>
30   - </view>
31   - <view class="form-row u-flex">
32   - <u-input v-model="rePassword" :password="showPasswordS" placeholder="请再次输入新的登录密码" border="bottom">
33   - <template slot="suffix" @click="showPasswordModeS">
34   - <view style="padding:20rpx"><u-icon :name="showPasswordS ? '/static/eye-hide.png' : '/static/eye.png'"></u-icon></view>
35   - </template>
36   - </u-input>
37   - </view>
38   - <button class="submit" size="default" @click="onSubmit"><text style="color:#fff">确定</text></button>
39   - </view>
40   - </view>
41   - </view>
42   -</template>
43   -
44   -<script>
45   -var clear;
46   -export default {
47   - data() {
48   - return {
49   - readonly: false,
50   - codeText: '发送验证码',
51   - phone: '', //号码
52   - vCode: '', //验证码
53   - nextStatus: false,
54   - password: '',
55   - rePassword: '',
56   - showPasswordF: true,
57   - showPasswordS: true
58   - };
59   - },
60   - methods: {
61   - //验证码按钮文字状态
62   - getCodeState() {
63   - const _this = this;
64   - this.readonly = true;
65   - this.codeText = '60s后重新获取';
66   - var s = 60;
67   - clear = setInterval(() => {
68   - s--;
69   - _this.codeText = s + 's后重新获取';
70   - if (s <= 0) {
71   - clearInterval(clear);
72   - _this.codeText = '发送验证码';
73   - _this.readonly = false;
74   - }
75   - }, 1000);
76   - },
77   - //获取验证码
78   - getVcode() {
79   - if (this.readonly) {
80   - uni.showToast({
81   - title: '验证码已发送~',
82   - icon: 'none'
83   - });
84   - return;
85   - }
86   - if (this.phone == '') {
87   - uni.showToast({
88   - title: '请输入手机号~',
89   - icon: 'none'
90   - });
91   - return;
92   - }
93   - const phoneRegular = /^1\d{10}$/;
94   - if (!phoneRegular.test(this.phone)) {
95   - uni.showToast({
96   - title: '手机号格式不正确~',
97   - icon: 'none'
98   - });
99   - return;
100   - }
101   - let httpData = {};
102   - // 获取验证码接口
103   - uni.$u.http.post(`/yt/noauth/resetCode/${this.phone}` ).then(res => {
104   - this.getCodeState(); //开始倒计时
105   - })
106   - },
107   - onNextSubmit() {
108   - const phoneRegular = /^1\d{10}$/;
109   - if(this.phone==''){
110   - uni.showToast({
111   - title: '请输入手机号码~',
112   - icon: 'none'
113   - });
114   - return;
115   - }else if (!phoneRegular.test(this.phone)) {
116   - uni.showToast({
117   - title: '手机号格式不正确~',
118   - icon: 'none'
119   - });
120   - return;
121   - }
122   - if (this.vCode == '') {
123   - uni.showToast({
124   - title: '请输入验证码~',
125   - icon: 'none'
126   - });
127   - return;
128   - } else if(!(/^\d{6}$/.test(this.vCode))){
129   - uni.showToast({
130   - title: '验证码格式不正确~',
131   - icon: 'none'
132   - });
133   - return
134   - }
135   - this.nextStatus = true
136   - },
137   - showPhone(){
138   - this.nextStatus = false
139   - },
140   - onSubmit() {
141   - const passReg=/^(?=.*?[A-Z])(?=(.*[a-z]){1,})(?=(.*[\d]){1,})(?=(.*[\W]){1,})(?!.*\s).{8,}$/
142   - if(this.password=='' &&this.rePassword==''){
143   - uni.showToast({
144   - title: '请输入密码~',
145   - icon: 'none'
146   - });
147   - return;
148   - }else if (!passReg.test(this.password)&&!passReg.test(this.rePassword)) {
149   - uni.showToast({
150   - title: '密码格式不正确（至少一个大写英文字母、至少一个小写英文字母、至少一位数字、至少一个特殊字符、最少八个字符）~',
151   - icon: 'none',
152   - duration: 3000
153   - });
154   - return;
155   - }
156   - if(this.password!==this.rePassword) return uni.$u.toast('两次输入密码不一致');
157   - let httpData={
158   - password: this.password,
159   - phoneNumber: this.phone,
160   - userId: this.vCode
161   - }
162   - uni.$u.http.post(`/yt/noauth/reset/${this.phone}`, httpData).then(res => {
163   - uni.showToast({
164   - title: '重置密码成功~',
165   - icon: 'none'
166   - }).then(res=>{
167   - uni.reLaunch({
168   - url: '/pages/personal/personal'
169   - });
170   - /**
171   - * 有些时候不起作用
172   - */
173   - // uni.navigateBack({
174   - // delta:2
175   - // })
176   - })
177   - });
178   - },
179   - showPasswordModeF() {
180   - this.showPasswordF = !this.showPasswordF;
181   - },
182   - showPasswordModeS() {
183   - this.showPasswordS = !this.showPasswordS;
184   - },
185   - }
186   - }
187   -</script>
188   -
189   -<style lang="scss" scoped>
190   - @import './static/findPassword.scss';
  1 +<template>
  2 + <view class="find-password-page">
  3 + <public-module></public-module>
  4 + <view class="top u-flex">
  5 + <view @click="showPhone" :style="{ color: !nextStatus ? '#0079fe' : '' }" class="item">1.验证手机号码</view>
  6 + <view :style="{ color: !nextStatus ? '' : '#0079fe' }" class="item">2.设置新密码</view>
  7 + </view>
  8 + <view v-if="!nextStatus" style="margin-top: 40rpx;" class="f__login">
  9 + <view class="loginPhone">
  10 + <view class="form-row"><u-input v-model="phone" type="number" placeholder="请输入手机号码" border="bottom" /></view>
  11 + <view class="form-row">
  12 + <u-input type="number" v-model="vCode" placeholder="请输入验证码" border="bottom">
  13 + <template slot="suffix" @click="getVcode">
  14 + <view class="getvcode">{{ codeText }}</view>
  15 + </template>
  16 + </u-input>
  17 + </view>
  18 + <button class="submit" size="default" @click="onNextSubmit"><text style="color:#fff">下一步</text></button>
  19 + </view>
  20 + </view>
  21 + <view v-else style="margin-top: 40rpx;" class="f__login">
  22 + <view class="loginPhone">
  23 + <view class="form-row u-flex">
  24 + <u-input v-model="password" :password="showPasswordF" placeholder="请设置6-20位新的登录密码" border="bottom">
  25 + <template slot="suffix" @click="showPasswordModeF">
  26 + <view style="padding:20rpx"><u-icon :name="showPasswordF ? '/static/eye-hide.png' : '/static/eye.png'"></u-icon></view>
  27 + </template>
  28 + </u-input>
  29 + </view>
  30 + <view class="form-row u-flex">
  31 + <u-input v-model="rePassword" :password="showPasswordS" placeholder="请再次输入新的登录密码" border="bottom">
  32 + <template slot="suffix" @click="showPasswordModeS">
  33 + <view style="padding:20rpx"><u-icon :name="showPasswordS ? '/static/eye-hide.png' : '/static/eye.png'"></u-icon></view>
  34 + </template>
  35 + </u-input>
  36 + </view>
  37 + <button class="submit" size="default" @click="onSubmit"><text style="color:#fff">确定</text></button>
  38 + </view>
  39 + </view>
  40 + </view>
  41 +</template>
  42 +
  43 +<script>
  44 +var clear;
  45 +export default {
  46 + data() {
  47 + return {
  48 + readonly: false,
  49 + codeText: '发送验证码',
  50 + phone: '', //号码
  51 + vCode: '', //验证码
  52 + nextStatus: false,
  53 + password: '',
  54 + rePassword: '',
  55 + showPasswordF: true,
  56 + showPasswordS: true
  57 + };
  58 + },
  59 + methods: {
  60 + //验证码按钮文字状态
  61 + getCodeState() {
  62 + const _this = this;
  63 + this.readonly = true;
  64 + this.codeText = '60s后重新获取';
  65 + var s = 60;
  66 + clear = setInterval(() => {
  67 + s--;
  68 + _this.codeText = s + 's后重新获取';
  69 + if (s <= 0) {
  70 + clearInterval(clear);
  71 + _this.codeText = '发送验证码';
  72 + _this.readonly = false;
  73 + }
  74 + }, 1000);
  75 + },
  76 + //获取验证码
  77 + getVcode() {
  78 + if (this.readonly) {
  79 + uni.showToast({
  80 + title: '验证码已发送~',
  81 + icon: 'none'
  82 + });
  83 + return;
  84 + }
  85 + if (this.phone == '') {
  86 + uni.showToast({
  87 + title: '请输入手机号~',
  88 + icon: 'none'
  89 + });
  90 + return;
  91 + }
  92 + const phoneRegular = /^1\d{10}$/;
  93 + if (!phoneRegular.test(this.phone)) {
  94 + uni.showToast({
  95 + title: '手机号格式不正确~',
  96 + icon: 'none'
  97 + });
  98 + return;
  99 + }
  100 + let httpData = {};
  101 + // 获取验证码接口
  102 + uni.$u.http
  103 + .post(`/yt/noauth/resetCode/${this.phone}`)
  104 + .then(res => {
  105 + this.getCodeState(); //开始倒计时
  106 + })
  107 + .catch(err => {
  108 + uni.showToast({
  109 + title: err.data.msg,
  110 + icon: 'none'
  111 + });
  112 + });
  113 + },
  114 + onNextSubmit() {
  115 + const phoneRegular = /^1\d{10}$/;
  116 + if (this.phone == '') {
  117 + uni.showToast({
  118 + title: '请输入手机号码~',
  119 + icon: 'none'
  120 + });
  121 + return;
  122 + } else if (!phoneRegular.test(this.phone)) {
  123 + uni.showToast({
  124 + title: '手机号格式不正确~',
  125 + icon: 'none'
  126 + });
  127 + return;
  128 + }
  129 + if (this.vCode == '') {
  130 + uni.showToast({
  131 + title: '请输入验证码~',
  132 + icon: 'none'
  133 + });
  134 + return;
  135 + } else if (!/^\d{6}$/.test(this.vCode)) {
  136 + uni.showToast({
  137 + title: '验证码格式不正确~',
  138 + icon: 'none'
  139 + });
  140 + return;
  141 + }
  142 + this.nextStatus = true;
  143 + },
  144 + showPhone() {
  145 + this.nextStatus = false;
  146 + },
  147 + onSubmit() {
  148 + const passReg = /^(?=.*?[A-Z])(?=(.*[a-z]){1,})(?=(.*[\d]){1,})(?=(.*[\W]){1,})(?!.*\s).{8,}$/;
  149 + if (this.password == '' && this.rePassword == '') {
  150 + uni.showToast({
  151 + title: '请输入密码~',
  152 + icon: 'none'
  153 + });
  154 + return;
  155 + } else if (!passReg.test(this.password) && !passReg.test(this.rePassword)) {
  156 + uni.showToast({
  157 + title: '密码格式不正确（至少一个大写英文字母、至少一个小写英文字母、至少一位数字、至少一个特殊字符、最少八个字符）~',
  158 + icon: 'none',
  159 + duration: 3000
  160 + });
  161 + return;
  162 + }
  163 + if (this.password !== this.rePassword) return uni.$u.toast('两次输入密码不一致');
  164 + let httpData = {
  165 + password: this.password,
  166 + phoneNumber: this.phone,
  167 + userId: this.vCode
  168 + };
  169 + uni.$u.http
  170 + .post(`/yt/noauth/reset/${this.phone}`, httpData)
  171 + .then(res => {
  172 + uni
  173 + .showToast({
  174 + title: '重置密码成功~',
  175 + icon: 'none'
  176 + })
  177 + .then(res => {
  178 + uni.reLaunch({
  179 + url: '/pages/personal/personal'
  180 + });
  181 + });
  182 + })
  183 + .catch(err => {
  184 + uni.showToast({
  185 + title: err.data.msg,
  186 + icon: 'none'
  187 + });
  188 + console.log(err.data.msg);
  189 + });
  190 + },
  191 + showPasswordModeF() {
  192 + this.showPasswordF = !this.showPasswordF;
  193 + },
  194 + showPasswordModeS() {
  195 + this.showPasswordS = !this.showPasswordS;
  196 + }
  197 + }
  198 +};
  199 +</script>
  200 +
  201 +<style lang="scss" scoped>
  202 +@import './static/findPassword.scss';
191 203 </style>
... ...
1   -.find-password-page {
2   - min-height: 100vh;
3   - background-color: #fff;
4   -}
5   -.top {
6   - width: 750rpx;
7   - height: 100rpx;
8   - border: 0.1px solid #f7f9ff;
9   - justify-content: space-between;
10   - flex-direction: row;
11   - align-items: center;
12   -
13   - .item {
14   - width: 375rpx;
15   - height: 100rpx;
16   - border: 0.1px solid #f7f9ff;
17   - text-align: center;
18   - line-height: 90rpx;
19   - }
20   -}
21   -
22   -.f__login {
23   - padding: 0 30rpx;
24   -
25   - .loginPhone {
26   - .form-row {
27   - position: relative;
28   - justify-content: space-between;
29   - .v-input {
30   - width: 620rpx;
31   - }
32   - .v-password {
33   - position: absolute;
34   - right: 18rpx;
35   - z-index: 66666;
36   - }
37   - .input {
38   - font-size: 34rpx;
39   - line-height: 102rpx;
40   - height: 94rpx;
41   - width: 100%;
42   - box-sizing: border-box;
43   - font-size: 30rpx;
44   - font-weight: bold;
45   - }
46   -
47   - .getvcode {
48   - font-size: 26rpx;
49   - height: 80rpx;
50   - color: #6299ff;
51   - line-height: 80rpx;
52   - min-width: 188rpx;
53   - text-align: center;
54   - border-radius: 8rpx;
55   - position: absolute;
56   - top: 50%;
57   - transform: translateY(-50%);
58   - right: 0;
59   - z-index: 11;
60   - &.forhidden {
61   - }
62   - }
63   - }
64   -
65   - .submit {
66   - margin-top: 60rpx;
67   - width: 100%;
68   - background: #377dff;
69   - border-radius: 48px;
70   - }
71   - }
  1 +.find-password-page {
  2 + min-height: 100vh;
  3 + background-color: #fff;
  4 +}
  5 +.top {
  6 + width: 750rpx;
  7 + height: 100rpx;
  8 + border: 0.1px solid #f7f9ff;
  9 + justify-content: space-between;
  10 + flex-direction: row;
  11 + align-items: center;
  12 +
  13 + .item {
  14 + width: 375rpx;
  15 + height: 100rpx;
  16 + border: 0.1px solid #f7f9ff;
  17 + text-align: center;
  18 + line-height: 90rpx;
  19 + }
  20 +}
  21 +
  22 +.f__login {
  23 + padding: 0 30rpx;
  24 + .loginPhone {
  25 + .form-row {
  26 + margin-top: 30rpx;
  27 + .getvcode {
  28 + font-family: PingFangSC-Regular, PingFang SC;
  29 + font-weight: 400;
  30 + font-size: 14px;
  31 + color: #6299ff;
  32 + }
  33 + }
  34 +
  35 + .submit {
  36 + margin-top: 60rpx;
  37 + width: 100%;
  38 + background: #377dff;
  39 + border-radius: 48px;
  40 + }
  41 + }
72 42 }
... ...