Commit ccb56b3b99a4c43c69fa83431d34bf3440451cda
1 parent
0d8f10cf
使用 uview 重构实际登陆
Showing
2 changed files
with
49 additions
and
71 deletions
yudao-vue-ui/api/system/auth.js
| @@ -2,26 +2,33 @@ import { request } from '@/common/js/request.js' | @@ -2,26 +2,33 @@ import { request } from '@/common/js/request.js' | ||
| 2 | 2 | ||
| 3 | // 手机号 + 密码登陆 | 3 | // 手机号 + 密码登陆 |
| 4 | export function login(mobile, password) { | 4 | export function login(mobile, password) { |
| 5 | - const data = { | ||
| 6 | - mobile, | ||
| 7 | - password | ||
| 8 | - } | ||
| 9 | return request({ | 5 | return request({ |
| 10 | url: 'login', | 6 | url: 'login', |
| 11 | method: 'post', | 7 | method: 'post', |
| 12 | - data: data | 8 | + data: { |
| 9 | + mobile, password | ||
| 10 | + } | ||
| 13 | }) | 11 | }) |
| 14 | } | 12 | } |
| 15 | 13 | ||
| 16 | // 手机号 + 验证码登陆 | 14 | // 手机号 + 验证码登陆 |
| 17 | export function smsLogin(mobile, code) { | 15 | export function smsLogin(mobile, code) { |
| 18 | - const data = { | ||
| 19 | - mobile, | ||
| 20 | - code | ||
| 21 | - } | ||
| 22 | return request({ | 16 | return request({ |
| 23 | url: 'sms-login', | 17 | url: 'sms-login', |
| 24 | method: 'post', | 18 | method: 'post', |
| 25 | - data: data | 19 | + data: { |
| 20 | + mobile, code | ||
| 21 | + } | ||
| 26 | }) | 22 | }) |
| 23 | +} | ||
| 24 | + | ||
| 25 | +// 发送手机验证码 | ||
| 26 | +export function sendSmsCode(mobile, scene) { | ||
| 27 | + return request({ | ||
| 28 | + url: 'send-sms-code', | ||
| 29 | + method: 'post', | ||
| 30 | + data: { | ||
| 31 | + mobile, scene | ||
| 32 | + } | ||
| 33 | + }) | ||
| 27 | } | 34 | } |
| 28 | \ No newline at end of file | 35 | \ No newline at end of file |
yudao-vue-ui/pages/auth/login.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="app"> | 2 | <view class="app"> |
| 3 | - <!-- 左下角的环 --> | ||
| 4 | - <view class="left-bottom-sign"></view> | ||
| 5 | - <!-- 右上角的折角 --> | ||
| 6 | - <view class="right-top-sign"></view> | ||
| 7 | <!-- 左上角的 x 关闭 --> | 3 | <!-- 左上角的 x 关闭 --> |
| 8 | <view class="back-btn mix-icon icon-guanbi" @click="navBack"></view> | 4 | <view class="back-btn mix-icon icon-guanbi" @click="navBack"></view> |
| 5 | + | ||
| 9 | <!-- 用户协议 --> | 6 | <!-- 用户协议 --> |
| 10 | <view class="agreement center"> | 7 | <view class="agreement center"> |
| 11 | <text class="mix-icon icon-xuanzhong" :class="{active: agreement}" @click="checkAgreement"></text> | 8 | <text class="mix-icon icon-xuanzhong" :class="{active: agreement}" @click="checkAgreement"></text> |
| @@ -26,8 +23,8 @@ | @@ -26,8 +23,8 @@ | ||
| 26 | <!-- 判断使用验证码还是密码 --> | 23 | <!-- 判断使用验证码还是密码 --> |
| 27 | <u-form-item prop="code" borderBottom v-if="loginType == 'code'"> | 24 | <u-form-item prop="code" borderBottom v-if="loginType == 'code'"> |
| 28 | <u--input type="number" v-model="form.code" placeholder="请输入验证码" border="none"></u--input> | 25 | <u--input type="number" v-model="form.code" placeholder="请输入验证码" border="none"></u--input> |
| 29 | - <u-button slot="right" @tap="getCode" :text="tips" type="success" size="mini" :disabled="disabled1"></u-button> | ||
| 30 | - <u-code ref="uCode" @change="codeChange" seconds="60" @start="disabled1 = true" @end="disabled1 = false"></u-code> | 26 | + <u-button slot="right" @tap="getCode" :text="uCode.tips" type="success" size="mini" :disabled="uCode.disabled"></u-button> |
| 27 | + <u-code ref="uCode" @change="codeChange" seconds="60" @start="uCode.disabled === true" @end="uCode.disabled === false"></u-code> | ||
| 31 | </u-form-item> | 28 | </u-form-item> |
| 32 | <u-form-item prop="password" borderBottom v-else> | 29 | <u-form-item prop="password" borderBottom v-else> |
| 33 | <u--input password v-model="form.password" placeholder="请输入密码" border="none"></u--input> | 30 | <u--input password v-model="form.password" placeholder="请输入密码" border="none"></u--input> |
| @@ -69,7 +66,7 @@ | @@ -69,7 +66,7 @@ | ||
| 69 | 66 | ||
| 70 | <script> | 67 | <script> |
| 71 | import { checkStr } from '@/common/js/util' | 68 | import { checkStr } from '@/common/js/util' |
| 72 | - import { login, smsLogin } from '@/api/system/auth.js' | 69 | + import { login, smsLogin, sendSmsCode } from '@/api/system/auth.js' |
| 73 | import loginMpWx from './mixin/login-mp-wx.js' | 70 | import loginMpWx from './mixin/login-mp-wx.js' |
| 74 | import loginAppWx from './mixin/login-app-wx.js' | 71 | import loginAppWx from './mixin/login-app-wx.js' |
| 75 | 72 | ||
| @@ -78,7 +75,7 @@ | @@ -78,7 +75,7 @@ | ||
| 78 | data() { | 75 | data() { |
| 79 | return { | 76 | return { |
| 80 | agreement: true, | 77 | agreement: true, |
| 81 | - loginType: 'password', // 登录方式，code 验证码；password 密码 | 78 | + loginType: 'code', // 登录方式，code 验证码；password 密码 |
| 82 | loading: false, // 表单提交 | 79 | loading: false, // 表单提交 |
| 83 | rules: { | 80 | rules: { |
| 84 | mobile: [{ | 81 | mobile: [{ |
| @@ -98,8 +95,10 @@ | @@ -98,8 +95,10 @@ | ||
| 98 | code: '', | 95 | code: '', |
| 99 | password: '', | 96 | password: '', |
| 100 | }, | 97 | }, |
| 101 | - disabled1: false, | ||
| 102 | - tips: '', | 98 | + uCode: { |
| 99 | + tips: '', | ||
| 100 | + disable: false, | ||
| 101 | + } | ||
| 103 | } | 102 | } |
| 104 | }, | 103 | }, |
| 105 | onLoad() { | 104 | onLoad() { |
| @@ -126,11 +125,10 @@ | @@ -126,11 +125,10 @@ | ||
| 126 | this.loading = false; | 125 | this.loading = false; |
| 127 | }) | 126 | }) |
| 128 | }).catch(errors => { | 127 | }).catch(errors => { |
| 129 | - debugger; | ||
| 130 | }); | 128 | }); |
| 131 | }, | 129 | }, |
| 132 | // 登陆成功的处理逻辑 | 130 | // 登陆成功的处理逻辑 |
| 133 | - loginSuccessCallBack(data){ | 131 | + loginSuccessCallBack(data) { |
| 134 | this.$util.msg('登录成功'); | 132 | this.$util.msg('登录成功'); |
| 135 | this.$store.commit('setToken', data); | 133 | this.$store.commit('setToken', data); |
| 136 | // TODO 芋艿：如果当前页是第一页，则无法返回。期望是能够回到首页 | 134 | // TODO 芋艿：如果当前页是第一页，则无法返回。期望是能够回到首页 |
| @@ -139,7 +137,9 @@ | @@ -139,7 +137,9 @@ | ||
| 139 | }, 1000) | 137 | }, 1000) |
| 140 | }, | 138 | }, |
| 141 | navBack() { | 139 | navBack() { |
| 142 | - uni.navigateBack(); | 140 | + uni.navigateBack({ |
| 141 | + delta: 1 | ||
| 142 | + }); | ||
| 143 | }, | 143 | }, |
| 144 | setLoginType(loginType) { | 144 | setLoginType(loginType) { |
| 145 | this.loginType = loginType; | 145 | this.loginType = loginType; |
| @@ -151,8 +151,8 @@ | @@ -151,8 +151,8 @@ | ||
| 151 | required: true, | 151 | required: true, |
| 152 | message: '请输入验证码' | 152 | message: '请输入验证码' |
| 153 | }, { | 153 | }, { |
| 154 | - min: 1000, | ||
| 155 | - max: 999999, | 154 | + min: 4, |
| 155 | + max: 6, | ||
| 156 | message: '验证码不正确' | 156 | message: '验证码不正确' |
| 157 | }]; | 157 | }]; |
| 158 | } else { | 158 | } else { |
| @@ -181,24 +181,27 @@ | @@ -181,24 +181,27 @@ | ||
| 181 | })) | 181 | })) |
| 182 | }, | 182 | }, |
| 183 | codeChange(text) { | 183 | codeChange(text) { |
| 184 | - this.tips = text; | 184 | + this.uCode.tips = text; |
| 185 | }, | 185 | }, |
| 186 | getCode() { | 186 | getCode() { |
| 187 | - if (this.$refs.uCode.canGetCode) { | ||
| 188 | - // 模拟向后端请求验证码 | ||
| 189 | - uni.showLoading({ | ||
| 190 | - title: '正在获取验证码' | ||
| 191 | - }) | ||
| 192 | - setTimeout(() => { | ||
| 193 | - uni.hideLoading(); | ||
| 194 | - // 这里此提示会被this.start()方法中的提示覆盖 | 187 | + // 处于发送中，则跳过 |
| 188 | + if (!this.$refs.uCode.canGetCode) { | ||
| 189 | + return; | ||
| 190 | + } | ||
| 191 | + // 校验手机号 | ||
| 192 | + this.$refs.form.validateField('mobile', errors => { | ||
| 193 | + if (errors.length > 0) { | ||
| 194 | + uni.$u.toast(errors[0].message); | ||
| 195 | + return; | ||
| 196 | + } | ||
| 197 | + // 发送验证码 TODO 芋艿，枚举类 | ||
| 198 | + sendSmsCode(this.form.mobile, 1).then(data => { | ||
| 195 | uni.$u.toast('验证码已发送'); | 199 | uni.$u.toast('验证码已发送'); |
| 196 | // 通知验证码组件内部开始倒计时 | 200 | // 通知验证码组件内部开始倒计时 |
| 197 | this.$refs.uCode.start(); | 201 | this.$refs.uCode.start(); |
| 198 | - }, 2000); | ||
| 199 | - } else { | ||
| 200 | - uni.$u.toast('倒计时结束后再发送'); | ||
| 201 | - } | 202 | + }).catch(erros => { |
| 203 | + }) | ||
| 204 | + }) | ||
| 202 | }, | 205 | }, |
| 203 | } | 206 | } |
| 204 | } | 207 | } |
| @@ -243,41 +246,9 @@ | @@ -243,41 +246,9 @@ | ||
| 243 | .left-top-sign { | 246 | .left-top-sign { |
| 244 | font-size: 120rpx; | 247 | font-size: 120rpx; |
| 245 | color: #f8f8f8; | 248 | color: #f8f8f8; |
| 246 | - position:relative; | 249 | + position: relative; |
| 247 | left: -12rpx; | 250 | left: -12rpx; |
| 248 | } | 251 | } |
| 249 | - .left-bottom-sign { | ||
| 250 | - position: absolute; | ||
| 251 | - left: -270rpx; | ||
| 252 | - bottom: -320rpx; | ||
| 253 | - border: 100rpx solid #d0d1fd; | ||
| 254 | - border-radius: 50%; | ||
| 255 | - padding: 180rpx; | ||
| 256 | - } | ||
| 257 | - .right-top-sign { | ||
| 258 | - position:absolute; | ||
| 259 | - top: 80rpx; | ||
| 260 | - right: -30rpx; | ||
| 261 | - z-index: 95; | ||
| 262 | - &:before, &:after{ | ||
| 263 | - display:block; | ||
| 264 | - content:""; | ||
| 265 | - width: 400rpx; | ||
| 266 | - height: 80rpx; | ||
| 267 | - background: #b4f3e2; | ||
| 268 | - } | ||
| 269 | - &:before{ | ||
| 270 | - transform: rotate(50deg); | ||
| 271 | - border-top-right-radius: 50px; | ||
| 272 | - } | ||
| 273 | - &:after{ | ||
| 274 | - position: absolute; | ||
| 275 | - right: -198rpx; | ||
| 276 | - top: 0; | ||
| 277 | - transform: rotate(-50deg); | ||
| 278 | - border-top-left-radius: 50px; | ||
| 279 | - } | ||
| 280 | - } | ||
| 281 | 252 | ||
| 282 | /** 手机登录部分 */ | 253 | /** 手机登录部分 */ |
| 283 | .input-content { | 254 | .input-content { |