简柏林 / thingskit-app · Commits

Commit 79e8156fe803c846a6e8f4d4de24613a8bd76cda

Authored by fengwotao
1 parent 3899dcb7

perf: app 优化登录页代码

Inline Side-by-side
Showing 3 changed files with 79 additions and 115 deletions
@@ -8,7 +8,7 @@ const getThirdLoginApi = (code) => { @@ -8,7 +8,7 @@ const getThirdLoginApi = (code) => {
8 return uni.$u.http.get(`/yt/third/login/${code}`) 8 return uni.$u.http.get(`/yt/third/login/${code}`)
9 }; 9 };
10 10
11 -//获取个人信息API 11 +//设置个人信息API
12 const setUserInfoApi = () => { 12 const setUserInfoApi = () => {
13 return uni.$u.http.get("/yt/user/me/info") 13 return uni.$u.http.get("/yt/user/me/info")
14 }; 14 };
@@ -52,6 +52,18 @@ const deleteBindApi = (data = {}) => { @@ -52,6 +52,18 @@ const deleteBindApi = (data = {}) => {
52 return uni.$u.http.delete('/yt/third', data) 52 return uni.$u.http.delete('/yt/third', data)
53 } 53 }
54 54
  55 +//获取手机验证码API
  56 +const postPhoneCodeApi = (phone, data = {}) => {
  57 + return uni.$u.http
  58 + .post(`/yt/noauth/send_login_code/${phone}`, data)
  59 +}
  60 +
  61 +//手机登录API
  62 +const postPhoneLoginApi = (data = {}) => {
  63 + return uni.$u.http
  64 + .post('/yt/auth/code/login', data)
  65 +}
  66 +
55 export default { 67 export default {
56 getPlateCustomApi, 68 getPlateCustomApi,
57 getThirdLoginApi, 69 getThirdLoginApi,
@@ -62,5 +74,7 @@ export default { @@ -62,5 +74,7 @@ export default {
62 postCodeApi, 74 postCodeApi,
63 postResetCodeApi, 75 postResetCodeApi,
64 postPersonalInfoApi, 76 postPersonalInfoApi,
65 - deleteBindApi 77 + deleteBindApi,
  78 + postPhoneCodeApi,
  79 + postPhoneLoginApi
66 } 80 }
@@ -2,17 +2,17 @@ @@ -2,17 +2,17 @@
2 <view class="code-page"> 2 <view class="code-page">
3 <!-- 公共组件-每个页面必须引入 --> 3 <!-- 公共组件-每个页面必须引入 -->
4 <public-module></public-module> 4 <public-module></public-module>
5 - <view class="f__login">  
6 - <view class="loginPhone">  
7 - <view class="phone-main" style="margin-top: 240rpx;"> 5 + <view class="login-body">
  6 + <view class="login-phone">
  7 + <view class="phone-main">
8 <text class="text">手机验证码登录</text> 8 <text class="text">手机验证码登录</text>
9 <view class="circleStyle"></view> 9 <view class="circleStyle"></view>
10 </view> 10 </view>
11 - <view class="form-row"><u-input v-model="phone" type="number" placeholder="请输入手机号码" border="bottom"></u-input></view> 11 + <view class="form-row"><u-input v-model="loginForm.phone" type="number" placeholder="请输入手机号码" border="bottom"></u-input></view>
12 <view class="form-row"> 12 <view class="form-row">
13 - <u-input type="number" v-model="vCode" placeholder="请输入验证码" border="bottom"> 13 + <u-input type="number" v-model="loginForm.verifyCode" placeholder="请输入验证码" border="bottom">
14 <template slot="suffix"> 14 <template slot="suffix">
15 - <view @click="getVcode" class="getvcode">{{ codeText }}</view> 15 + <view @click="getVerifyCode" class="verify-code">{{ codeText }}</view>
16 </template> 16 </template>
17 </u-input> 17 </u-input>
18 </view> 18 </view>
@@ -27,20 +27,25 @@ @@ -27,20 +27,25 @@
27 <script> 27 <script>
28 var clear; 28 var clear;
29 import { mapState, mapMutations, mapActions } from 'vuex'; 29 import { mapState, mapMutations, mapActions } from 'vuex';
  30 +import { useShowToast,useNavigateTo } from '@/plugins/utils.js'
  31 +import api from '@/api'
  32 +
30 export default { 33 export default {
31 data() { 34 data() {
32 return { 35 return {
  36 + loginForm:{
  37 + phone: '',
  38 + verifyCode: ''
  39 + },
33 readonly: false, 40 readonly: false,
34 codeText: '发送验证码', 41 codeText: '发送验证码',
35 - phone: '', //号码  
36 - vCode: '' //验证码  
37 }; 42 };
38 }, 43 },
39 methods: { 44 methods: {
40 ...mapMutations(['setUserInfo']), 45 ...mapMutations(['setUserInfo']),
41 ...mapActions(['updateBadgeTotal']), 46 ...mapActions(['updateBadgeTotal']),
42 //验证码按钮文字状态 47 //验证码按钮文字状态
43 - getCodeState() { 48 + codeCountdownText() {
44 const _this = this; 49 const _this = this;
45 this.readonly = true; 50 this.readonly = true;
46 this.codeText = '60s后重新获取'; 51 this.codeText = '60s后重新获取';
@@ -56,123 +61,67 @@ export default { @@ -56,123 +61,67 @@ export default {
56 }, 1000); 61 }, 1000);
57 }, 62 },
58 //获取验证码 63 //获取验证码
59 - getVcode() { 64 + async getVerifyCode() {
60 if (this.readonly) { 65 if (this.readonly) {
61 - uni.showToast({  
62 - title: '验证码已发送~',  
63 - icon: 'none'  
64 - });  
65 - return; 66 + useShowToast('验证码已发送~')
66 } 67 }
67 - if (this.phone == '') {  
68 - uni.showToast({  
69 - title: '请输入手机号~',  
70 - icon: 'none'  
71 - });  
72 - return; 68 + if (!this.loginForm.phone) {
  69 + useShowToast('请输入手机号~')
73 } 70 }
74 const phoneRegular = /^1\d{10}$/; 71 const phoneRegular = /^1\d{10}$/;
75 - if (!phoneRegular.test(this.phone)) {  
76 - uni.showToast({  
77 - title: '手机号格式不正确~',  
78 - icon: 'none'  
79 - });  
80 - return; 72 + if (!phoneRegular.test(this.loginForm.phone)) {
  73 + useShowToast('手机号格式不正确~')
81 } 74 }
82 // 获取验证码接口 75 // 获取验证码接口
83 - uni.$u.http  
84 - .post(`/yt/noauth/send_login_code/${this.phone}`)  
85 - .then(res => {  
86 - if (res) {  
87 - this.getCodeState(); //开始倒计时  
88 - }  
89 - })  
90 - .catch(err => {  
91 - uni.showToast({  
92 - title: err.data.msg,  
93 - icon: 'none'  
94 - });  
95 - }); 76 + const res = await api.loginApi.postPhoneCodeApi(this.loginForm.phone)
  77 + if (res) {
  78 + this.codeCountdownText(); //开始倒计时
  79 + }
96 }, 80 },
97 - onSubmit() { 81 + async onSubmit() {
98 const phoneRegular = /^1\d{10}$/; 82 const phoneRegular = /^1\d{10}$/;
99 - if (this.phone == '') {  
100 - uni.showToast({  
101 - title: '请输入手机号码~',  
102 - icon: 'none'  
103 - });  
104 - return;  
105 - } else if (!phoneRegular.test(this.phone)) {  
106 - uni.showToast({  
107 - title: '手机号格式不正确~',  
108 - icon: 'none'  
109 - });  
110 - return;  
111 - }  
112 - if (this.vCode == '') {  
113 - uni.showToast({  
114 - title: '请输入验证码~',  
115 - icon: 'none'  
116 - });  
117 - return;  
118 - } else if (!/^\d{6}$/.test(this.vCode)) {  
119 - uni.showToast({  
120 - title: '验证码格式不正确~',  
121 - icon: 'none' 83 + const verifyCodeReg=/^\d{6}$/;
  84 + const validateValue = Object.values(this.loginForm)
  85 + if(!validateValue[0]) return uni.$u.toast("请输入手机号码~");
  86 + if(!validateValue[1]) return uni.$u.toast("请输入验证码~");
  87 + if(!phoneRegular.test(validateValue[0])) return uni.$u.toast("手机号格式不正确~");
  88 + if(!verifyCodeReg.test(validateValue[1])) return uni.$u.toast("验证码格式不正确~");
  89 + const res = await api.loginApi.postPhoneLoginApi(this.loginForm)
  90 + if (res) {
  91 + // 储存登录信息
  92 + let tokenInfo = {
  93 + refreshToken: res.refreshToken,
  94 + isToken: res.token
  95 + };
  96 + let userInfo = {
  97 + ...tokenInfo,
  98 + token: true, //token用于判断是否登录
  99 + isThirdLogin: false
  100 + };
  101 + if (userInfo.token) {
  102 + this.setUserInfo(userInfo);
  103 + }
  104 + useShowToast('登录成功~').then(async (res) => {
  105 + this.saveUserInfo();
  106 + await this.getAlarmTotalData();
  107 + useReLaunch("/pages/personal/personal")
122 }); 108 });
123 - return;  
124 } 109 }
125 - let httpData = {  
126 - code: this.vCode,  
127 - phoneNumber: this.phone  
128 - };  
129 - uni.$u.http.post('/yt/auth/code/login', httpData).then(res => {  
130 - if (res) {  
131 - // 储存登录信息  
132 - let resObj = {  
133 - refreshToken: res.refreshToken,  
134 - isToken: res.token  
135 - };  
136 - let userInfo = {  
137 - ...resObj,  
138 - token: true, //token用于判断是否登录  
139 - isThirdLogin: false  
140 - };  
141 - if (userInfo.token) {  
142 - this.setUserInfo(userInfo);  
143 - }  
144 - uni.showToast({  
145 - title: '登录成功~',  
146 - icon: 'none'  
147 - }).then(async res => {  
148 - this.saveUserInfo();  
149 - await this.getAlarmTotalData();  
150 - uni.reLaunch({  
151 - url: '/pages/personal/personal'  
152 - });  
153 - });  
154 - }  
155 - });  
156 }, 110 },
157 async getAlarmTotalData() { 111 async getAlarmTotalData() {
158 - const res = await uni.$u.http.get('/yt/homepage/app?login=true');  
159 - if (res) {  
160 - //异步实时更新告警徽标数  
161 - this.updateBadgeTotal(res.totalAlarm?.activedAlarm);  
162 - } 112 + const res = await await api.loginApi.getAlarmTotalApi()
  113 + if(!res)return
  114 + //异步实时更新告警徽标数
  115 + this.updateBadgeTotal(res.totalAlarm?.activedAlarm);
163 }, 116 },
164 - saveUserInfo() { 117 + async saveUserInfo() {
165 //储存个人信息 118 //储存个人信息
166 - uni.$u.http.get('/yt/user/me/info').then(res => {  
167 - if (res) {  
168 - this.setUserInfo(res);  
169 - }  
170 - }); 119 + const res=await api.loginApi.setUserInfoApi()
  120 + if(!res)return
  121 + this.setUserInfo(res);
171 }, 122 },
172 openAccountFunc() { 123 openAccountFunc() {
173 - uni.navigateTo({  
174 - url: '../public/login'  
175 - }); 124 + useNavigateTo('../public/login')
176 } 125 }
177 } 126 }
178 }; 127 };
@@ -5,15 +5,16 @@ @@ -5,15 +5,16 @@
5 background: url(/static/login.png) no-repeat; 5 background: url(/static/login.png) no-repeat;
6 background-size: 750rpx 1400rpx; 6 background-size: 750rpx 1400rpx;
7 } 7 }
8 -.f__login { 8 +.login-body {
9 padding: 48rpx 32rpx; 9 padding: 48rpx 32rpx;
10 border-radius: 18rpx 18rpx 0 0; 10 border-radius: 18rpx 18rpx 0 0;
11 z-index: 99; 11 z-index: 99;
12 position: relative; 12 position: relative;
13 } 13 }
14 14
15 -.loginPhone { 15 +.login-phone {
16 .phone-main { 16 .phone-main {
  17 + margin-top: 240rpx;
17 .text { 18 .text {
18 font-size: 22px; 19 font-size: 22px;
19 color: #3a4759; 20 color: #3a4759;
@@ -25,7 +26,7 @@ @@ -25,7 +26,7 @@
25 } 26 }
26 .form-row { 27 .form-row {
27 margin-top: 30rpx; 28 margin-top: 30rpx;
28 - .getvcode { 29 + .verify-code {
29 font-family: PingFangSC-Regular, PingFang SC; 30 font-family: PingFangSC-Regular, PingFang SC;
30 font-weight: 400; 31 font-weight: 400;
31 font-size: 14px; 32 font-size: 14px;