简柏林 / 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 8 return uni.$u.http.get(`/yt/third/login/${code}`)
9 9 };
10 10
11   -//获取个人信息API
  11 +//设置个人信息API
12 12 const setUserInfoApi = () => {
13 13 return uni.$u.http.get("/yt/user/me/info")
14 14 };
... ... @@ -52,6 +52,18 @@ const deleteBindApi = (data = {}) => {
52 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 67 export default {
56 68 getPlateCustomApi,
57 69 getThirdLoginApi,
... ... @@ -62,5 +74,7 @@ export default {
62 74 postCodeApi,
63 75 postResetCodeApi,
64 76 postPersonalInfoApi,
65   - deleteBindApi
  77 + deleteBindApi,
  78 + postPhoneCodeApi,
  79 + postPhoneLoginApi
66 80 }
... ...
... ... @@ -2,17 +2,17 @@
2 2 <view class="code-page">
3 3 <!-- 公共组件-每个页面必须引入 -->
4 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 8 <text class="text">手机验证码登录</text>
9 9 <view class="circleStyle"></view>
10 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 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 14 <template slot="suffix">
15   - <view @click="getVcode" class="getvcode">{{ codeText }}</view>
  15 + <view @click="getVerifyCode" class="verify-code">{{ codeText }}</view>
16 16 </template>
17 17 </u-input>
18 18 </view>
... ... @@ -27,20 +27,25 @@
27 27 <script>
28 28 var clear;
29 29 import { mapState, mapMutations, mapActions } from 'vuex';
  30 +import { useShowToast,useNavigateTo } from '@/plugins/utils.js'
  31 +import api from '@/api'
  32 +
30 33 export default {
31 34 data() {
32 35 return {
  36 + loginForm:{
  37 + phone: '',
  38 + verifyCode: ''
  39 + },
33 40 readonly: false,
34 41 codeText: '发送验证码',
35   - phone: '', //号码
36   - vCode: '' //验证码
37 42 };
38 43 },
39 44 methods: {
40 45 ...mapMutations(['setUserInfo']),
41 46 ...mapActions(['updateBadgeTotal']),
42 47 //验证码按钮文字状态
43   - getCodeState() {
  48 + codeCountdownText() {
44 49 const _this = this;
45 50 this.readonly = true;
46 51 this.codeText = '60s后重新获取';
... ... @@ -56,123 +61,67 @@ export default {
56 61 }, 1000);
57 62 },
58 63 //获取验证码
59   - getVcode() {
  64 + async getVerifyCode() {
60 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 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 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 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 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 5 background: url(/static/login.png) no-repeat;
6 6 background-size: 750rpx 1400rpx;
7 7 }
8   -.f__login {
  8 +.login-body {
9 9 padding: 48rpx 32rpx;
10 10 border-radius: 18rpx 18rpx 0 0;
11 11 z-index: 99;
12 12 position: relative;
13 13 }
14 14
15   -.loginPhone {
  15 +.login-phone {
16 16 .phone-main {
  17 + margin-top: 240rpx;
17 18 .text {
18 19 font-size: 22px;
19 20 color: #3a4759;
... ... @@ -25,7 +26,7 @@
25 26 }
26 27 .form-row {
27 28 margin-top: 30rpx;
28   - .getvcode {
  29 + .verify-code {
29 30 font-family: PingFangSC-Regular, PingFang SC;
30 31 font-weight: 400;
31 32 font-size: 14px;
... ...