添加手机号登录

yangyin

2024-10-31 57ef6e56360f0b84b6adb53220e4f556405cdce3

 src/views/login/component/mobile.vue

@@ -24,11 +24,13 @@
         </el-col>
         <el-col :span="1"></el-col>
         <el-col :span="8">
            <el-button  v-waves class="login-content-code" @click="sendSMS">{{ sendCodeMsg }}</el-button>
            <el-button v-waves class="login-content-code" @click="sendSMS" :disabled="state.ruleForm.countNum > 0">{{
               state.ruleForm.countNum > 0 ? `${state.ruleForm.countNum}秒后重试` : '获取验证码'
            }}</el-button>
         </el-col>
      </el-form-item>
      <el-form-item class="login-animation3">
         <el-button round type="primary" v-waves class="login-content-submit">
         <el-button round type="primary" v-waves class="login-content-submit" @click="onSignIn">
            <span>{{ $t('message.mobile.btnText') }}</span>
         </el-button>
      </el-form-item>
@@ -39,10 +41,9 @@
<script setup lang="ts" name="loginMobile">
import { FormInstance, FormRules } from 'element-plus';
import { reactive, ref } from 'vue';
import { verifyPhone } from '/@/utils/toolsValidate';
import { loginVerifyMessage } from '/@/api/ai/user';
import { computed } from 'vue';

import { PostPhoneLogin, loginVerifyMessage } from '/@/api/ai/user';
import { accessSessionKey } from '/@/utils/request';
import { Local } from '/@/utils/storage';
// 定义变量内容
const state = reactive({
   ruleForm: {
@@ -53,28 +54,19 @@
   },
});

const validatePhoneNum = (_rule: any, value: any, callback: any) => {
   console.log("🚀 ~ value:", value)
   if (!value) {
      callback('请输入手机号');
   } else if (!verifyPhone(value)) {
      callback(new Error('请输入正确的手机号'));
   } else {
      callback();
   }
};
const formRules = ref<FormRules>({
   code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
   userName: [{ required: true, validator: validatePhoneNum, trigger: 'blur' }],
   userName: [
      { required: true, message: '请输入手机号码', trigger: 'blur' },
      { pattern: /^1\d{10}$/, message: '请输入正确的手机号码', trigger: 'blur' },
   ],
});
function stopCount() {
   state.ruleForm.countNum = null;
   clearInterval(state.ruleForm.countTimer);
}

const hasSended = computed(() => state.ruleForm.countNum !== null);
const sendCodeMsg = computed(() => (hasSended ? '获取验证码' : `${state.ruleForm.countNum} 秒后重试`));
function startCount() {
const startCount = () => {
   stopCount();
   state.ruleForm.countNum = 60;
   state.ruleForm.countTimer = setInterval(() => {
@@ -85,7 +77,7 @@
      }
      state.ruleForm.countNum--;
   }, 1000);
}
};

const dialogFormRef = ref<FormInstance>(null);

@@ -94,7 +86,6 @@
      return;
   }
   const valid = await dialogFormRef.value.validateField(['userName']).catch(() => {});
   console.log("🚀 ~ valid:", valid)
   if (!valid) return;

   state.ruleForm.code = '';
@@ -109,6 +100,53 @@
   );

   startCount();
};
const LOGIN_CLIENT = '后台管理';
// 登录
const onSignIn = async () => {
   dialogFormRef.value.validate(async (valid) => {
      if (!valid) return false;
      let params = {
         phone: state.ruleForm.userName,
         code: state.ruleForm.code,
         client: LOGIN_CLIENT,
      };
      const res = await PostPhoneLogin(params, {
         noAuth: true,
         loading: false,
      });

      Local.set(accessSessionKey, res.hswatersession);
      return
      await useUserInfo().setUserInfos({
         userName: ruleForm.value.account,
         phoneNumber: '',
         photo: profileMan,
      }); //缓存用户信息
      state.loading.signIn = true;
      if (!themeConfig.value.isRequestRoutes) {
         // 前端控制路由，2、请注意执行顺序
         const isNoPower = await initFrontEndControlRoutes();
         // console.log(isNoPower,172)
         signInSuccess(isNoPower);
      } else {
         // 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
         // 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
         const isNoPower = await initBackEndControlRoutes();
         // 执行完 initBackEndControlRoutes，再执行 signInSuccess
         // console.log(isNoPower,178)
         signInSuccess(isNoPower);
      }

      // 登录校验
      // await apiSysAuthLoginPost(params)
      //    .then(async (res: any) => {

      //    })
      //    .catch((err: any) => {
      //       console.log(err);
      //    });
   });
};
</script>

@@ -139,3 +177,5 @@
   }
}
</style>
import { initBackEndControlRoutes } from '/@/router/backEnd'; import { initFrontEndControlRoutes } from '/@/router/frontEnd'; import {
useUserInfo } from '/@/stores/userInfo';