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

hookehuyr
Commit 2df4c4999e6f71b8a4a9dae8b0b4a2202819b598 2df4c499 1 parent 77d416ff
Showing 2 changed files with 28 additions and 42 deletions
src/composables/useLogin.js
src/views/business/login.vue
--- a/src/composables/useLogin.js
View file @2df4c49
+++ b/src/composables/useLogin.js
View file @2df4c49
 /*
  * @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 refForm = ref(null);
-  const submit = () => {
+  const validateForm = () => {
-    let valid = form.value.validate();
+    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,
+    sms_disabled,
-    validator,
+    phoneValidator,
     keyboardBlur,
     keyboard_show,
     showKeyboard,
     refPhone,
-    form,
+    refForm,
-    submit,
+    validateForm,
-    formatter,
+    smsFormatter,
     limitSeconds,
     countDown,
     sendCode,
--- a/src/views/business/login.vue
View file @2df4c49
+++ b/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="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 { ref } from 'vue';
-import { useRouter } from 'vue-router'
 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 { phone, code, onSubmit, use_widget, phoneValidator, keyboardBlur, sms_disabled, keyboard_show, refPhone, showKeyboard, refForm, validateForm, smsFormatter, limitSeconds, countDown, sendCode, } = useLogin();
-const $router = useRouter();
 // 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) => {