Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
tswj
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2022-06-22 09:24:20 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
2df4c4999e6f71b8a4a9dae8b0b4a2202819b598
2df4c499
1 parent
77d416ff
✨ feat(登录模块): 优化逻辑条件,授权条件调整
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
28 additions
and
42 deletions
src/composables/useLogin.js
src/views/business/login.vue
src/composables/useLogin.js
View file @
2df4c49
/*
* @Date: 2022-06-22 00:07:42
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-06-22 0
1:28:42
* @LastEditTime: 2022-06-22 0
8:51:37
* @FilePath: /tswj/src/composables/useLogin.js
* @Description: 文件描述
*/
...
...
@@ -17,12 +17,12 @@ export const useLogin = () => {
const
phone
=
ref
(
''
);
const
code
=
ref
(
''
)
const
f
orm
=
ref
(
null
);
const
submit
=
()
=>
{
let
valid
=
f
orm
.
value
.
validate
();
const
refF
orm
=
ref
(
null
);
const
validateForm
=
()
=>
{
const
valid
=
refF
orm
.
value
.
validate
();
valid
.
then
(()
=>
{
f
orm
.
value
.
submit
();
refF
orm
.
value
.
submit
();
})
.
catch
(
error
=>
{
console
.
error
(
error
);
...
...
@@ -41,27 +41,27 @@ export const useLogin = () => {
let
use_widget
=
ref
(
true
);
use_widget
.
value
=
!!
(
wxInfo
().
isiOS
||
wxInfo
().
isAndroid
);
const
disabled
=
ref
(
true
);
/**
* 手机号码校验
* 函数返回 true 表示校验通过,false 表示不通过
* @param {*} val
*/
const
validator
=
(
val
)
=>
{
const
sms_disabled
=
ref
(
true
);
const
phoneValidator
=
(
val
)
=>
{
let
flag
=
false
;
// 简单判断手机号位数
if
(
/1
\d{10}
/
.
test
(
val
)
&&
phone
.
value
.
length
===
11
)
{
disabled
.
value
=
false
;
sms_
disabled
.
value
=
false
;
flag
=
true
;
}
else
{
disabled
.
value
=
true
;
sms_
disabled
.
value
=
true
;
flag
=
false
;
}
return
flag
};
/**
* 数字弹框
*
手机号
数字弹框
*/
const
keyboard_show
=
ref
(
false
);
const
refPhone
=
ref
(
null
)
...
...
@@ -93,11 +93,12 @@ export const useLogin = () => {
};
// 过滤输入的数字 只能四位
const
f
ormatter
=
(
value
)
=>
value
.
substring
(
0
,
4
);
const
smsF
ormatter
=
(
value
)
=>
value
.
substring
(
0
,
4
);
/**
* 用户登录
* @param {*} values
* @param {*} phone
* @param {*} pin
*/
const
$router
=
useRouter
();
const
onSubmit
=
async
(
values
)
=>
{
...
...
@@ -114,15 +115,15 @@ export const useLogin = () => {
code
,
onSubmit
,
use_widget
,
disabled
,
v
alidator
,
sms_
disabled
,
phoneV
alidator
,
keyboardBlur
,
keyboard_show
,
showKeyboard
,
refPhone
,
f
orm
,
submit
,
f
ormatter
,
refF
orm
,
validateForm
,
smsF
ormatter
,
limitSeconds
,
countDown
,
sendCode
,
...
...
src/views/business/login.vue
View file @
2df4c49
...
...
@@ -11,20 +11,21 @@
</div>
<div class="login-section">
<van-config-provider :theme-vars="loginTheme">
<van-form ref="
f
orm" @submit="onSubmit">
<van-form ref="
refF
orm" @submit="onSubmit">
<van-cell-group inset style="border: 1px solid #EAEAEA;">
<van-field v-if="use_widget" ref="refPhone" v-model="phone" name="phone" label="手机号" placeholder="手机号"
readonly clickable :rules="[{ validator, message: '请输入正确手机号' }]" @touchstart.stop="showKeyboard" />
readonly clickable :rules="[{ validator: phoneValidator, message: '请输入正确手机号' }]"
@touchstart.stop="showKeyboard" />
<van-field v-else v-model="phone" name="validator" label="手机号" placeholder="手机号"
:rules="[{ validator, message: '请输入正确手机号', trigger: 'onBlur' }]" />
:rules="[{ validator
: phoneValidator
, message: '请输入正确手机号', trigger: 'onBlur' }]" />
<van-field v-model="code" center clearable name="code" type="digit" label="短信验证码" placeholder="请输入短信验证码"
:formatter="
f
ormatter" :rules="[{ required: true, message: '请填写验证码' }]">
:formatter="
smsF
ormatter" :rules="[{ required: true, message: '请填写验证码' }]">
<template #button>
<van-button v-if="countDown.current.value.total === limitSeconds" size="small" type="primary"
:disabled="disabled" @click="sendCode">
:disabled="
sms_
disabled" @click="sendCode">
<span>发送验证码</span>
</van-button>
<van-button v-else size="small" type="primary" :disabled="disabled">
<van-button v-else size="small" type="primary" :disabled="
sms_
disabled">
<span>{{ countDown.current.value.seconds }} 秒重新发送</span>
</van-button>
</template>
...
...
@@ -33,7 +34,7 @@
</van-form>
</van-config-provider>
</div>
<div class="btn" @click="
submit
">
<div class="btn" @click="
validateForm
">
登 录
</div>
...
...
@@ -44,16 +45,13 @@
</template>
<script setup>
import Cookies from 'js-cookie'
import ImageSliderVerify from '@/components/ImageSliderVerify/index.vue'
import { loginTheme } from '@/theme-vars.js';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router'
import { ref } from 'vue';
import logo_image from '@images/denglu-top@2x.png'
import { useLogin } from '@/composables/useLogin';
const { phone, code, onSubmit, use_widget, validator, keyboardBlur, disabled, keyboard_show, refPhone, showKeyboard, form, submit, formatter, limitSeconds, countDown, sendCode, } = useLogin();
const $router = useRouter();
const { phone, code, onSubmit, use_widget, phoneValidator, keyboardBlur, sms_disabled, keyboard_show, refPhone, showKeyboard, refForm, validateForm, smsFormatter, limitSeconds, countDown, sendCode, } = useLogin();
// TAG: 开发环境测试数据
if (import.meta.env.DEV) {
...
...
@@ -61,19 +59,6 @@ if (import.meta.env.DEV) {
code.value = import.meta.env.VITE_PIN
}
onMounted(() => {
// 判断微信授权状态,进入页面时未授权需要授权跳转
if (!Cookies.get('PHPSESSID')) {
$router.replace({
path: '/auth',
query: {
href: location.hash,
userType: 'b'
}
});
}
})
// 滑块验证成功后回调
const sliderShow = ref(false);
const handleConfirm = (val) => {
...
...
Please
register
or
login
to post a comment