Commit e10b7075881497c33e10acd0c770d2576ac1893c
1 parent
7fd8e0dd
初步完善密码登录和验证码登录的逻辑
Showing
3 changed files
with
130 additions
and
45 deletions
yudao-ui-app/common/api.js
| 1 | const { http } = uni.$u | 1 | const { http } = uni.$u |
| 2 | 2 | ||
| 3 | +/* login */ | ||
| 4 | +//使用手机 + 密码登录 | ||
| 5 | +export const passwordLogin = params => http.post('/app-api/member/user/login', params) | ||
| 6 | +//发送手机验证码 | ||
| 7 | +export const sendSmsCode = params => http.post('/app-api/member/send-sms-code', params) | ||
| 8 | +//使用手机 + 验证码登录 | ||
| 9 | +export const smsLogin = params => http.post('/app-api/member/sms-login', params) | ||
| 10 | + | ||
| 3 | /* index */ | 11 | /* index */ |
| 4 | // 获取滚动图数据 | 12 | // 获取滚动图数据 |
| 5 | -export const getBannerData = params => http.get('/api/index', params) | 13 | +export const getBannerData = params => http.get('/app-api/index', params) |
| 6 | // 获取滚动通知数据 | 14 | // 获取滚动通知数据 |
| 7 | -export const getNoticeData = params => http.get('/api/notice', params) | 15 | +export const getNoticeData = params => http.get('/app-api/notice', params) |
yudao-ui-app/pages/login/login.vue
| @@ -8,15 +8,22 @@ | @@ -8,15 +8,22 @@ | ||
| 8 | </view> | 8 | </view> |
| 9 | 9 | ||
| 10 | <view class="unp-box"> | 10 | <view class="unp-box"> |
| 11 | + <!-- 登录方式选择 --> | ||
| 12 | + <view class="mode-section"> | ||
| 13 | + <u-subsection mode="subsection" fontSize="15" :list="loginModeList" :current="currentModeIndex" @change="handleModeChange"></u-subsection> | ||
| 14 | + </view> | ||
| 15 | + <u-gap height="40"></u-gap> | ||
| 16 | + | ||
| 17 | + <!-- 登录表单 --> | ||
| 11 | <u--form class="unp-form" labelPosition="left" :model="formData" :rules="rules" ref="form"> | 18 | <u--form class="unp-form" labelPosition="left" :model="formData" :rules="rules" ref="form"> |
| 12 | - <u-form-item label="账号" prop="username" borderBottom ref="item-username"> | ||
| 13 | - <u-input type="text" maxlength="20" v-model="formData.username" clearable placeholder="账号由数字和字母组成" border="none" @change="handleUsernameChange"></u-input> | 19 | + <u-form-item label="手机号" prop="mobile" labelWidth="60" borderBottom ref="item-mobile"> |
| 20 | + <u-input type="number" maxlength="11" v-model="formData.mobile" clearable placeholder="请填写手机号" border="none"></u-input> | ||
| 14 | </u-form-item> | 21 | </u-form-item> |
| 15 | 22 | ||
| 16 | <u-gap height="20"></u-gap> | 23 | <u-gap height="20"></u-gap> |
| 17 | 24 | ||
| 18 | - <u-form-item label="密码" prop="password" borderBottom ref="item-password"> | ||
| 19 | - <u-input :type="inputType" maxlength="20" v-model="formData.password" placeholder="密码由数字、字母和符号组成" border="none" @change="handlePasswordChange"> | 25 | + <u-form-item v-if="currentModeIndex === 0" label="密码" prop="password" labelWidth="60" borderBottom ref="item-password"> |
| 26 | + <u-input :type="inputType" maxlength="16" v-model="formData.password" placeholder="请填写密码" border="none"> | ||
| 20 | <template slot="suffix"> | 27 | <template slot="suffix"> |
| 21 | <u-icon v-if="inputType === 'password'" size="20" color="#666666" name="eye-fill" @click="inputType = 'text'"></u-icon> | 28 | <u-icon v-if="inputType === 'password'" size="20" color="#666666" name="eye-fill" @click="inputType = 'text'"></u-icon> |
| 22 | <u-icon v-if="inputType === 'text'" size="20" color="#666666" name="eye-off" @click="inputType = 'password'"></u-icon> | 29 | <u-icon v-if="inputType === 'text'" size="20" color="#666666" name="eye-off" @click="inputType = 'password'"></u-icon> |
| @@ -24,55 +31,75 @@ | @@ -24,55 +31,75 @@ | ||
| 24 | </u-input> | 31 | </u-input> |
| 25 | </u-form-item> | 32 | </u-form-item> |
| 26 | 33 | ||
| 27 | - <view class="lk-group"> | ||
| 28 | - <navigator url="/pages/register/register" hover-class="none"> | ||
| 29 | - <text class="register">注册账号</text> | ||
| 30 | - </navigator> | ||
| 31 | - <navigator url="/pages/forgot/forgot" hover-class="none"> | ||
| 32 | - <text class="forgot">忘记密码</text> | ||
| 33 | - </navigator> | ||
| 34 | - </view> | ||
| 35 | - | ||
| 36 | - <u-button | ||
| 37 | - type="primary" | ||
| 38 | - text="登录" | ||
| 39 | - customStyle="margin-top: 50px" | ||
| 40 | - @click="handleSubmit" | ||
| 41 | - ></u-button> | 34 | + <u-form-item v-else label="验证码" prop="code" labelWidth="60" borderBottom> |
| 35 | + <u--input type="number" maxlength="4" v-model="formData.code" border="none" placeholder="请填写验证码"></u--input> | ||
| 36 | + <u-button slot="right" @tap="getCode" :text="codeTips" type="success" size="mini" :disabled="codeDisabled"></u-button> | ||
| 37 | + <u-code ref="uCode" @change="codeChange" seconds="60" @start="codeDisabled = true" @end="codeDisabled = false"></u-code> | ||
| 38 | + </u-form-item> | ||
| 39 | + | ||
| 40 | + <u-button type="primary" text="登录" customStyle="margin-top: 50px" @click="handleSubmit"></u-button> | ||
| 42 | 41 | ||
| 43 | <u-gap height="20"></u-gap> | 42 | <u-gap height="20"></u-gap> |
| 44 | <u-button type="info" text="返回" @click="navigateBack()"></u-button> | 43 | <u-button type="info" text="返回" @click="navigateBack()"></u-button> |
| 45 | 44 | ||
| 46 | </u--form> | 45 | </u--form> |
| 47 | 46 | ||
| 48 | - | ||
| 49 | </view> | 47 | </view> |
| 50 | 48 | ||
| 51 | </view> | 49 | </view> |
| 52 | </template> | 50 | </template> |
| 53 | 51 | ||
| 54 | <script> | 52 | <script> |
| 55 | - export default { | 53 | +import {passwordLogin,sendSmsCode,smsLogin} from "../../common/api"; |
| 54 | + | ||
| 55 | + export default { | ||
| 56 | data() { | 56 | data() { |
| 57 | return { | 57 | return { |
| 58 | + //租户ID | ||
| 59 | + agent: 1, | ||
| 60 | + currentModeIndex: 0, | ||
| 61 | + loginModeList: ['密码登录', '验证码登录'], | ||
| 58 | inputType: 'password', | 62 | inputType: 'password', |
| 63 | + codeDisabled: false, | ||
| 64 | + codeTips: '', | ||
| 59 | formData: { | 65 | formData: { |
| 60 | - username: '', | 66 | + mobile: '15601691234', |
| 61 | password: '', | 67 | password: '', |
| 68 | + code: '' | ||
| 62 | }, | 69 | }, |
| 63 | rules: { | 70 | rules: { |
| 64 | - 'username': { | 71 | + 'mobile': [ |
| 72 | + { | ||
| 73 | + type: 'integer', | ||
| 74 | + required: true, | ||
| 75 | + message: '请填写手机号', | ||
| 76 | + trigger: ['blur', 'change'] | ||
| 77 | + }, | ||
| 78 | + { | ||
| 79 | + // 自定义验证函数，见上说明 | ||
| 80 | + validator: (rule, value, callback) => { | ||
| 81 | + // 上面有说，返回true表示校验通过，返回false表示不通过 | ||
| 82 | + // uni.$u.test.mobile()就是返回true或者false的 | ||
| 83 | + return uni.$u.test.mobile(value); | ||
| 84 | + }, | ||
| 85 | + message: '手机号码不正确', | ||
| 86 | + // 触发器可以同时用blur和change | ||
| 87 | + trigger: ['change','blur'], | ||
| 88 | + } | ||
| 89 | + ], | ||
| 90 | + 'password': { | ||
| 65 | type: 'string', | 91 | type: 'string', |
| 66 | - max: 20, | 92 | + min: 4, |
| 93 | + max: 16, | ||
| 67 | required: true, | 94 | required: true, |
| 68 | - message: '请输入您的账号', | 95 | + message: '密码长度4-16位密码', |
| 69 | trigger: ['blur', 'change'] | 96 | trigger: ['blur', 'change'] |
| 70 | }, | 97 | }, |
| 71 | - 'password': { | ||
| 72 | - type: 'string', | ||
| 73 | - max: 20, | 98 | + 'code': { |
| 99 | + type: 'integer', | ||
| 100 | + len: 4, | ||
| 74 | required: true, | 101 | required: true, |
| 75 | - message: '请输入您的密码', | 102 | + message: '请填写4位验证码', |
| 76 | trigger: ['blur', 'change'] | 103 | trigger: ['blur', 'change'] |
| 77 | } | 104 | } |
| 78 | } | 105 | } |
| @@ -80,25 +107,69 @@ | @@ -80,25 +107,69 @@ | ||
| 80 | }, | 107 | }, |
| 81 | onLoad() { | 108 | onLoad() { |
| 82 | 109 | ||
| 83 | - }, | 110 | + },onReady(){ |
| 111 | + // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则 | ||
| 112 | + this.$refs.form.setRules(this.rules) | ||
| 113 | + }, | ||
| 84 | methods: { | 114 | methods: { |
| 85 | - handleUsernameChange(e){ | ||
| 86 | - let str = uni.$u.trim(e, 'all'); | ||
| 87 | - this.$nextTick(() => { | ||
| 88 | - this.formData.username = str | ||
| 89 | - }) | 115 | + handleModeChange(index) { |
| 116 | + if (index !== this.currentModeIndex){ | ||
| 117 | + this.currentModeIndex = index; | ||
| 118 | + this.$refs.form.clearValidate(); | ||
| 119 | + } | ||
| 90 | }, | 120 | }, |
| 91 | - handlePasswordChange(e){ | ||
| 92 | - let str = uni.$u.trim(e, 'all'); | ||
| 93 | - this.$nextTick(() => { | ||
| 94 | - this.formData.password = str | ||
| 95 | - }) | 121 | + codeChange(text) { |
| 122 | + this.codeTips = text; | ||
| 123 | + }, | ||
| 124 | + getCode() { | ||
| 125 | + const mobile = this.formData.mobile; | ||
| 126 | + if (!mobile) { | ||
| 127 | + uni.$u.toast('请填写手机号'); | ||
| 128 | + } else if (!uni.$u.test.mobile(mobile)){ | ||
| 129 | + uni.$u.toast('手机号格式不正确'); | ||
| 130 | + } else if (this.$refs.uCode.canGetCode) { | ||
| 131 | + // 模拟向后端请求验证码 | ||
| 132 | + uni.showLoading({ | ||
| 133 | + title: '正在获取验证码' | ||
| 134 | + }); | ||
| 135 | + | ||
| 136 | + //scene:1登陆获取验证码场景 | ||
| 137 | + sendSmsCode({agent: 1, mobile:mobile, scene:1 }).then(res => { | ||
| 138 | + //console.log(res) | ||
| 139 | + uni.hideLoading(); | ||
| 140 | + if (res.data.code === 0){ | ||
| 141 | + // 这里此提示会被this.start()方法中的提示覆盖 | ||
| 142 | + uni.$u.toast('验证码已发送'); | ||
| 143 | + // 通知验证码组件内部开始倒计时 | ||
| 144 | + this.$refs.uCode.start(); | ||
| 145 | + } else { | ||
| 146 | + uni.$u.toast(res.data.msg); | ||
| 147 | + } | ||
| 148 | + }).catch(err => { | ||
| 149 | + uni.$u.toast('服务器接口请求异常'); | ||
| 150 | + }) | ||
| 151 | + } else { | ||
| 152 | + uni.$u.toast('倒计时结束后再发送'); | ||
| 153 | + } | ||
| 96 | }, | 154 | }, |
| 97 | handleSubmit() { | 155 | handleSubmit() { |
| 98 | this.$refs.form.validate().then(res => { | 156 | this.$refs.form.validate().then(res => { |
| 99 | - uni.$u.toast('点击了登录') | ||
| 100 | - }).catch(err => { | ||
| 101 | - | 157 | + uni.$u.toast('登录'); |
| 158 | + if (this.currentModeIndex === 0){ | ||
| 159 | + passwordLogin({agent: 1, mobile:this.formData.mobile, password:this.formData.password}).then(res => { | ||
| 160 | + if (res.data.code === 0){ | ||
| 161 | + uni.$u.toast('登录成功'); | ||
| 162 | + // TODO 登录成功，保存toke | ||
| 163 | + } else { | ||
| 164 | + uni.$u.toast(res.data.msg); | ||
| 165 | + // TODO 登录失败 | ||
| 166 | + } | ||
| 167 | + }).catch(err => { | ||
| 168 | + uni.$u.toast('服务器接口请求异常'); | ||
| 169 | + }) | ||
| 170 | + } else if (this.currentModeIndex === 1) { | ||
| 171 | + smsLogin({agent: 1, mobile:this.formData.mobile, code:this.formData.code}) | ||
| 172 | + } | ||
| 102 | }) | 173 | }) |
| 103 | }, | 174 | }, |
| 104 | navigateBack() { | 175 | navigateBack() { |
| @@ -123,11 +194,16 @@ | @@ -123,11 +194,16 @@ | ||
| 123 | } | 194 | } |
| 124 | } | 195 | } |
| 125 | 196 | ||
| 197 | + | ||
| 126 | .unp-box { | 198 | .unp-box { |
| 127 | display: flex; | 199 | display: flex; |
| 128 | flex-direction: column; | 200 | flex-direction: column; |
| 129 | align-items: center; | 201 | align-items: center; |
| 130 | justify-content: center; | 202 | justify-content: center; |
| 203 | + | ||
| 204 | + .mode-section{ | ||
| 205 | + width: 560rpx; | ||
| 206 | + } | ||
| 131 | .unp-form{ | 207 | .unp-form{ |
| 132 | width: 560rpx; | 208 | width: 560rpx; |
| 133 | } | 209 | } |
yudao-ui-app/pages/user/user.vue
| @@ -65,6 +65,7 @@ | @@ -65,6 +65,7 @@ | ||
| 65 | }, | 65 | }, |
| 66 | methods: { | 66 | methods: { |
| 67 | handleUserInfoClick(){ | 67 | handleUserInfoClick(){ |
| 68 | + // TODO 判断是否已经登录逻辑 | ||
| 68 | if (!uni.getStorageSync('token')) { | 69 | if (!uni.getStorageSync('token')) { |
| 69 | uni.$u.route('/pages/login/login'); | 70 | uni.$u.route('/pages/login/login'); |
| 70 | } else { | 71 | } else { |