hookehuyr

✨ feat(登录模块): 优化逻辑条件,授权条件调整

/*
* @Date: 2022-06-22 00:07:42
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-06-22 01:28:42
* @LastEditTime: 2022-06-22 08:51:37
* @FilePath: /tswj/src/composables/useLogin.js
* @Description: 文件描述
*/
......@@ -17,12 +17,12 @@ export const useLogin = () => {
const phone = ref('');
const code = ref('')
const form = ref(null);
const submit = () => {
let valid = form.value.validate();
const refForm = ref(null);
const validateForm = () => {
const valid = refForm.value.validate();
valid
.then(() => {
form.value.submit();
refForm.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 formatter = (value) => value.substring(0, 4);
const smsFormatter = (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,
validator,
sms_disabled,
phoneValidator,
keyboardBlur,
keyboard_show,
showKeyboard,
refPhone,
form,
submit,
formatter,
refForm,
validateForm,
smsFormatter,
limitSeconds,
countDown,
sendCode,
......
......@@ -11,20 +11,21 @@
</div>
<div class="login-section">
<van-config-provider :theme-vars="loginTheme">
<van-form ref="form" @submit="onSubmit">
<van-form ref="refForm" @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="formatter" :rules="[{ required: true, message: '请填写验证码' }]">
:formatter="smsFormatter" :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">
登&nbsp;录
</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) => {
......