简柏林 / 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 </style> 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 }