简柏林 / thingskit-app · Commits

Commit 1df6d97e5741333ad5fe84ec6a6ad73d4163ffc9

Authored by sqy
1 parent bff8625b

fix:修改登录页面的问题，验证码发送不好点击

Inline Side-by-side
Showing 4 changed files with 313 additions and 349 deletions
1 -<template>  
2 - <view class="code-page">  
3 - <!-- 公共组件-每个页面必须引入 -->  
4 - <public-module></public-module>  
5 - <view class="f__login">  
6 - <view class="loginPhone">  
7 - <view class="phone-main" style="margin-top: 240rpx;">  
8 - <text class="text">手机验证码登录</text>  
9 - <view class="circleStyle"></view>  
10 - </view>  
11 - <view class="form-row">  
12 - <u-input v-model="phone" type="number" placeholder="请输入手机号码" border="bottom"></u-input>  
13 - </view>  
14 - <view class="form-row">  
15 - <u-input type="number" v-model="vCode" placeholder="请输入验证码" border="bottom">  
16 - <template slot="suffix" @click="getVcode">  
17 - <view class="getvcode" >{{ codeText }}</view>  
18 - </template>  
19 - </u-input>  
20 - </view>  
21 - <button class="submit" size="default" @click="onSubmit"><text class="text">登录</text></button>  
22 - <view class="u-flex account-style"><view class="content" @click="openAccountFunc">账号密码登录</view></view>  
23 - <view class="circleStyleBottom"></view>  
24 - </view>  
25 - </view>  
26 - </view>  
27 -</template>  
28 -  
29 -<script>  
30 - var clear;  
31 - import { mapState, mapMutations } from 'vuex';  
32 - export default {  
33 - data() {  
34 - return {  
35 - readonly: false,  
36 - codeText: '发送验证码',  
37 - phone: '', //号码  
38 - vCode: '', //验证码  
39 - }  
40 - },  
41 - methods: {  
42 - ...mapMutations(['setUserInfo']),  
43 - //验证码按钮文字状态  
44 - getCodeState() {  
45 - const _this = this;  
46 - this.readonly = true;  
47 - this.codeText = '60S后重新获取';  
48 - var s = 60;  
49 - clear = setInterval(() => {  
50 - s--;  
51 - _this.codeText = s + 'S后重新获取';  
52 - if (s <= 0) {  
53 - clearInterval(clear);  
54 - _this.codeText = '发送验证码';  
55 - _this.readonly = false;  
56 - }  
57 - }, 1000);  
58 - },  
59 - //获取验证码  
60 - getVcode() {  
61 - if (this.readonly) {  
62 - uni.showToast({  
63 - title: '验证码已发送~',  
64 - icon: 'none'  
65 - });  
66 - return;  
67 - }  
68 - if (this.phone == '') {  
69 - uni.showToast({  
70 - title: '请输入手机号~',  
71 - icon: 'none'  
72 - });  
73 - return;  
74 - }  
75 - const phoneRegular = /^1\d{10}$/;  
76 - if (!phoneRegular.test(this.phone)) {  
77 - uni.showToast({  
78 - title: '手机号格式不正确~',  
79 - icon: 'none'  
80 - });  
81 - return;  
82 - }  
83 - // 获取验证码接口  
84 - uni.$u.http.post(`/yt/noauth/sendLoginSmsCode/${this.phone}` ).then(res => {  
85 - if(res){  
86 - this.getCodeState(); //开始倒计时  
87 - }  
88 - })  
89 - },  
90 - onSubmit() {  
91 - const phoneRegular = /^1\d{10}$/;  
92 - if(this.phone==''){  
93 - uni.showToast({  
94 - title: '请输入手机号码~',  
95 - icon: 'none'  
96 - });  
97 - return;  
98 - }else if (!phoneRegular.test(this.phone)) {  
99 - uni.showToast({  
100 - title: '手机号格式不正确~',  
101 - icon: 'none'  
102 - });  
103 - return;  
104 - }  
105 - if (this.vCode == '') {  
106 - uni.showToast({  
107 - title: '请输入验证码~',  
108 - icon: 'none'  
109 - });  
110 - return;  
111 - } else if(!(/^\d{6}$/.test(this.vCode))){  
112 - uni.showToast({  
113 - title: '验证码格式不正确~',  
114 - icon: 'none'  
115 - });  
116 - return  
117 - }  
118 - let httpData = {  
119 - code: this.vCode,  
120 - phoneNumber: this.phone  
121 - }  
122 - uni.$u.http.post('/yt/auth/code/login', httpData).then(res => {  
123 - if (res) {  
124 - // 储存登录信息  
125 - let resObj = {  
126 - refreshToken: res.refreshToken,  
127 - isToken: res.token  
128 - };  
129 - let userInfo = {  
130 - ...resObj,  
131 - token: true ,//token用于判断是否登录  
132 - isThirdLogin: false  
133 - };  
134 - if (userInfo.token) {  
135 - this.setUserInfo(userInfo);  
136 - }  
137 - uni.showToast({  
138 - title: '登录成功~',  
139 - icon: 'none'  
140 - }).then(res => {  
141 - uni.reLaunch({  
142 - url: '/pages/personal/personal'  
143 - });  
144 - });  
145 - this.saveUserInfo();  
146 -  
147 - }  
148 - });  
149 - },  
150 - saveUserInfo() {  
151 - //储存个人信息  
152 - uni.$u.http.get('/yt/user/me/info').then(res => {  
153 - if (res) {  
154 - this.setUserInfo(res);  
155 - }  
156 - });  
157 - },  
158 - openAccountFunc(){  
159 - uni.navigateTo({  
160 - url:"../public/login"  
161 - })  
162 - }  
163 - }  
164 - }  
165 -</script>  
166 -  
167 -<style lang="scss" scoped>  
168 - @import './static/code.scss'; 1 +<template>
  2 + <view class="code-page">
  3 + <!-- 公共组件-每个页面必须引入 -->
  4 + <public-module></public-module>
  5 + <view class="f__login">
  6 + <view class="loginPhone">
  7 + <view class="phone-main" style="margin-top: 240rpx;">
  8 + <text class="text">手机验证码登录</text>
  9 + <view class="circleStyle"></view>
  10 + </view>
  11 + <view class="form-row"><u-input v-model="phone" type="number" placeholder="请输入手机号码" border="bottom"></u-input></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="onSubmit"><text class="text">登录</text></button>
  20 + <view class="u-flex account-style"><view class="content" @click="openAccountFunc">账号密码登录</view></view>
  21 + <view class="circleStyleBottom"></view>
  22 + </view>
  23 + </view>
  24 + </view>
  25 +</template>
  26 +
  27 +<script>
  28 +var clear;
  29 +import { mapState, mapMutations } from 'vuex';
  30 +export default {
  31 + data() {
  32 + return {
  33 + readonly: false,
  34 + codeText: '发送验证码',
  35 + phone: '', //号码
  36 + vCode: '' //验证码
  37 + };
  38 + },
  39 + methods: {
  40 + ...mapMutations(['setUserInfo']),
  41 + //验证码按钮文字状态
  42 + getCodeState() {
  43 + const _this = this;
  44 + this.readonly = true;
  45 + this.codeText = '60s后重新获取';
  46 + var s = 60;
  47 + clear = setInterval(() => {
  48 + s--;
  49 + _this.codeText = s + 's后重新获取';
  50 + if (s <= 0) {
  51 + clearInterval(clear);
  52 + _this.codeText = '发送验证码';
  53 + _this.readonly = false;
  54 + }
  55 + }, 1000);
  56 + },
  57 + //获取验证码
  58 + getVcode() {
  59 + if (this.readonly) {
  60 + uni.showToast({
  61 + title: '验证码已发送~',
  62 + icon: 'none'
  63 + });
  64 + return;
  65 + }
  66 + if (this.phone == '') {
  67 + uni.showToast({
  68 + title: '请输入手机号~',
  69 + icon: 'none'
  70 + });
  71 + return;
  72 + }
  73 + const phoneRegular = /^1\d{10}$/;
  74 + if (!phoneRegular.test(this.phone)) {
  75 + uni.showToast({
  76 + title: '手机号格式不正确~',
  77 + icon: 'none'
  78 + });
  79 + return;
  80 + }
  81 + // 获取验证码接口
  82 + uni.$u.http
  83 + .post(`/yt/noauth/sendLoginSmsCode/${this.phone}`)
  84 + .then(res => {
  85 + if (res) {
  86 + this.getCodeState(); //开始倒计时
  87 + }
  88 + })
  89 + .catch(err => {
  90 + uni.showToast({
  91 + title: err.data.msg,
  92 + icon: 'none'
  93 + });
  94 + });
  95 + },
  96 + onSubmit() {
  97 + const phoneRegular = /^1\d{10}$/;
  98 + if (this.phone == '') {
  99 + uni.showToast({
  100 + title: '请输入手机号码~',
  101 + icon: 'none'
  102 + });
  103 + return;
  104 + } else if (!phoneRegular.test(this.phone)) {
  105 + uni.showToast({
  106 + title: '手机号格式不正确~',
  107 + icon: 'none'
  108 + });
  109 + return;
  110 + }
  111 + if (this.vCode == '') {
  112 + uni.showToast({
  113 + title: '请输入验证码~',
  114 + icon: 'none'
  115 + });
  116 + return;
  117 + } else if (!/^\d{6}$/.test(this.vCode)) {
  118 + uni.showToast({
  119 + title: '验证码格式不正确~',
  120 + icon: 'none'
  121 + });
  122 + return;
  123 + }
  124 + let httpData = {
  125 + code: this.vCode,
  126 + phoneNumber: this.phone
  127 + };
  128 + uni.$u.http.post('/yt/auth/code/login', httpData).then(res => {
  129 + if (res) {
  130 + // 储存登录信息
  131 + let resObj = {
  132 + refreshToken: res.refreshToken,
  133 + isToken: res.token
  134 + };
  135 + let userInfo = {
  136 + ...resObj,
  137 + token: true, //token用于判断是否登录
  138 + isThirdLogin: false
  139 + };
  140 + if (userInfo.token) {
  141 + this.setUserInfo(userInfo);
  142 + }
  143 + uni
  144 + .showToast({
  145 + title: '登录成功~',
  146 + icon: 'none'
  147 + })
  148 + .then(res => {
  149 + uni.reLaunch({
  150 + url: '/pages/personal/personal'
  151 + });
  152 + });
  153 + this.saveUserInfo();
  154 + }
  155 + });
  156 + },
  157 + saveUserInfo() {
  158 + //储存个人信息
  159 + uni.$u.http.get('/yt/user/me/info').then(res => {
  160 + if (res) {
  161 + this.setUserInfo(res);
  162 + }
  163 + });
  164 + },
  165 + openAccountFunc() {
  166 + uni.navigateTo({
  167 + url: '../public/login'
  168 + });
  169 + }
  170 + }
  171 +};
  172 +</script>
  173 +
  174 +<style lang="scss" scoped>
  175 +@import './static/code.scss';
169 </style> 176 </style>
1 -.code-page {  
2 - min-height: 100vh;  
3 - background-color: #fff;  
4 - width: 750rpx;  
5 - background: url(/static/login.png) no-repeat;  
6 -}  
7 -.f__login {  
8 - padding: 48rpx 32rpx;  
9 - border-radius: 18rpx 18rpx 0 0;  
10 - z-index: 99;  
11 - position: relative;  
12 -}  
13 -  
14 -.loginPhone {  
15 - .phone-main {  
16 - .text {  
17 - font-size: 22px;  
18 - color: #3a4759;  
19 - position: relative;  
20 - z-index: 9999;  
21 - font-family: PingFangSC-Semibold, PingFang SC;  
22 - font-weight: 600;  
23 - }  
24 - }  
25 - .form-row {  
26 - position: relative;  
27 - // border-bottom: 1rpx solid #e8e8e8;  
28 - margin-top: 30rpx;  
29 - .input {  
30 - font-size: 34rpx;  
31 - line-height: 102rpx;  
32 - height: 94rpx;  
33 - width: 100%;  
34 - box-sizing: border-box;  
35 - font-size: 30rpx;  
36 - padding: 0;  
37 - font-weight: bold;  
38 - }  
39 -  
40 - .getvcode {  
41 - font-family: PingFangSC-Regular, PingFang SC;  
42 - font-weight: 400;  
43 - font-size: 15px;  
44 - height: 80rpx;  
45 - color: #6299ff;  
46 - line-height: 80rpx;  
47 - min-width: 188rpx;  
48 - text-align: center;  
49 - border-radius: 8rpx;  
50 - position: absolute;  
51 - top: 50%;  
52 - transform: translateY(-50%);  
53 - right: 0;  
54 - z-index: 11;  
55 - }  
56 - }  
57 -  
58 - .submit {  
59 - margin-top: 60rpx;  
60 - width: 100%;  
61 - position: relative;  
62 - background: linear-gradient(90deg, #5dc2fc 0%, #377dff 100%);  
63 - border-radius: 46px;  
64 - .text {  
65 - color: #ffffff;  
66 - }  
67 - }  
68 - .account-style {  
69 - flex-direction: row;  
70 - margin-top: 48rpx;  
71 - justify-content: space-between;  
72 - .content {  
73 - color: #999999;  
74 - font-size: 13px;  
75 - }  
76 - } 1 +.code-page {
  2 + min-height: 100vh;
  3 + background-color: #fff;
  4 + width: 750rpx;
  5 + background: url(/static/login.png) no-repeat;
  6 +}
  7 +.f__login {
  8 + padding: 48rpx 32rpx;
  9 + border-radius: 18rpx 18rpx 0 0;
  10 + z-index: 99;
  11 + position: relative;
  12 +}
  13 +
  14 +.loginPhone {
  15 + .phone-main {
  16 + .text {
  17 + font-size: 22px;
  18 + color: #3a4759;
  19 + position: relative;
  20 + z-index: 9999;
  21 + font-family: PingFangSC-Semibold, PingFang SC;
  22 + font-weight: 600;
  23 + }
  24 + }
  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 + position: relative;
  39 + background: linear-gradient(90deg, #5dc2fc 0%, #377dff 100%);
  40 + border-radius: 46px;
  41 + .text {
  42 + color: #ffffff;
  43 + }
  44 + }
  45 + .account-style {
  46 + flex-direction: row;
  47 + margin-top: 48rpx;
  48 + justify-content: space-between;
  49 + .content {
  50 + color: #999999;
  51 + font-size: 13px;
  52 + }
  53 + }
77 } 54 }
@@ -17,7 +17,7 @@ @@ -17,7 +17,7 @@
17 <view class="form-row u-flex"> 17 <view class="form-row u-flex">
18 <u-input v-model="loginForm.password" :password="showPassword" placeholder="请输入登录密码" border="bottom"> 18 <u-input v-model="loginForm.password" :password="showPassword" placeholder="请输入登录密码" border="bottom">
19 <template slot="suffix" @click="showPasswordMode"> 19 <template slot="suffix" @click="showPasswordMode">
20 - <view style="padding:20rpx"><u-icon :name="showPassword ? '/static/eye-hide.png' : '/static/eye.png'"></u-icon></view> 20 + <view style="padding:10rpx"><u-icon :name="showPassword ? '/static/eye-hide.png' : '/static/eye.png'"></u-icon></view>
21 </template> 21 </template>
22 </u-input> 22 </u-input>
23 </view> 23 </view>
@@ -57,7 +57,7 @@ export default { @@ -57,7 +57,7 @@ export default {
57 57
58 password: '' 58 password: ''
59 }, 59 },
60 - showPassword: false, 60 + showPassword: true,
61 code: '', 61 code: '',
62 openid: '' 62 openid: ''
63 }; 63 };
1 -.login-page {  
2 - min-height: 100vh;  
3 - width: 750rpx;  
4 - background: url(/static/login.png) no-repeat;  
5 - .login-main {  
6 - flex-direction: column;  
7 - .content {  
8 - height: 250rpx;  
9 - margin-top: 90rpx;  
10 - margin-left: -107rpx;  
11 - position: relative;  
12 - top: 50rpx;  
13 - left: -15rpx;  
14 - .hello {  
15 - font-size: 30px;  
16 - color: #3a4759;  
17 - z-index: 9999;  
18 - position: relative;  
19 - }  
20 - .hello-welcome {  
21 - position: relative;  
22 - font-size: 30px;  
23 - color: #3a4759;  
24 - z-index: 9999;  
25 - }  
26 - }  
27 - }  
28 -}  
29 -  
30 -.f__login {  
31 - padding: 8rpx 32rpx;  
32 - border-radius: 18rpx 18rpx 0 0;  
33 - z-index: 99;  
34 - position: relative;  
35 -}  
36 -  
37 -.loginPhone {  
38 - .form-row {  
39 - position: relative;  
40 - justify-content: space-between;  
41 - // margin-top: 60rpx;  
42 - .v-input {  
43 - width: 690rpx;  
44 - border-bottom: 1px solid #e5e5e5;  
45 - }  
46 - .v-password {  
47 - position: absolute;  
48 - right: 0rpx;  
49 - z-index: 66666;  
50 - }  
51 - .input {  
52 - font-size: 34rpx;  
53 - line-height: 102rpx;  
54 - height: 114rpx;  
55 - width: 100%;  
56 - box-sizing: border-box;  
57 - font-size: 30rpx;  
58 - padding: 0;  
59 - font-weight: bold;  
60 - }  
61 - }  
62 -  
63 - .submit {  
64 - margin-top: 60rpx;  
65 - background: linear-gradient(90deg, #5dc2fc 0%, #377dff 100%);  
66 - width: 100%;  
67 - border-radius: 46px;  
68 - .text {  
69 - color: #ffffff;  
70 - }  
71 - }  
72 - .row-item {  
73 - flex-direction: row;  
74 - margin-top: 60rpx;  
75 - justify-content: space-between;  
76 - .row-phone {  
77 - color: #999999;  
78 - font-size: 13px;  
79 - }  
80 - .row-reset {  
81 - color: #999999;  
82 - font-size: 13px;  
83 - position: relative;  
84 - }  
85 - }  
86 - .link-login {  
87 - justify-content: center;  
88 - flex-direction: column;  
89 - margin-top: 370rpx;  
90 - /* #ifdef APP-PLUS */  
91 - margin-top: 250rpx;  
92 - /* #endif */  
93 - .link-text {  
94 - color: #999999;  
95 - font-size: 13px;  
96 - }  
97 - .link-image {  
98 - .image {  
99 - width: 75rpx;  
100 - height: 75rpx;  
101 - }  
102 - }  
103 - } 1 +.login-page {
  2 + min-height: 100vh;
  3 + width: 750rpx;
  4 + background: url(/static/login.png) no-repeat;
  5 + .login-main {
  6 + flex-direction: column;
  7 + .content {
  8 + height: 250rpx;
  9 + margin-top: 90rpx;
  10 + margin-left: -107rpx;
  11 + position: relative;
  12 + top: 50rpx;
  13 + left: -15rpx;
  14 + .hello {
  15 + font-size: 30px;
  16 + color: #3a4759;
  17 + z-index: 9999;
  18 + position: relative;
  19 + }
  20 + .hello-welcome {
  21 + position: relative;
  22 + font-size: 30px;
  23 + color: #3a4759;
  24 + z-index: 9999;
  25 + }
  26 + }
  27 + }
  28 +}
  29 +
  30 +.f__login {
  31 + padding: 8rpx 32rpx;
  32 + border-radius: 18rpx 18rpx 0 0;
  33 + z-index: 99;
  34 + position: relative;
  35 +}
  36 +
  37 +.loginPhone {
  38 + .form-row {
  39 + justify-content: space-between;
  40 + margin-top: 30rpx;
  41 + }
  42 +
  43 + .submit {
  44 + margin-top: 60rpx;
  45 + background: linear-gradient(90deg, #5dc2fc 0%, #377dff 100%);
  46 + width: 100%;
  47 + border-radius: 46px;
  48 + .text {
  49 + color: #ffffff;
  50 + }
  51 + }
  52 + .row-item {
  53 + flex-direction: row;
  54 + margin-top: 60rpx;
  55 + justify-content: space-between;
  56 + .row-phone {
  57 + color: #999999;
  58 + font-size: 13px;
  59 + }
  60 + .row-reset {
  61 + color: #999999;
  62 + font-size: 13px;
  63 + position: relative;
  64 + }
  65 + }
  66 + .link-login {
  67 + justify-content: center;
  68 + flex-direction: column;
  69 + margin-top: 370rpx;
  70 + /* #ifdef APP-PLUS */
  71 + margin-top: 250rpx;
  72 + /* #endif */
  73 + .link-text {
  74 + color: #999999;
  75 + font-size: 13px;
  76 + }
  77 + .link-image {
  78 + .image {
  79 + width: 75rpx;
  80 + height: 75rpx;
  81 + }
  82 + }
  83 + }
104 } 84 }