LOGIN_CLIENT

wujingjing

2024-10-31 a5de052620b80ac4043e9c8d87341ac98272a785

 src/views/login/component/mobile.vue

@@ -1,15 +1,22 @@
<template>
   <el-form size="large" class="login-content-form">
      <el-form-item class="login-animation1">
   <el-form size="large" ref="dialogFormRef" :model="state.ruleForm" :rules="formRules" class="login-content-form">
      <el-form-item class="login-animation1" prop="userName">
         <el-input text :placeholder="$t('message.mobile.placeholder1')" v-model="state.ruleForm.userName" clearable autocomplete="off">
            <template #prefix>
               <i class="iconfont icon-dianhua el-input__icon"></i>
               <i class="myiconfont icon-dianhua el-input__icon"></i>
            </template>
         </el-input>
      </el-form-item>
      <el-form-item class="login-animation2">
      <el-form-item class="login-animation2" prop="code">
         <el-col :span="15">
            <el-input text maxlength="4" :placeholder="$t('message.mobile.placeholder2')" v-model="state.ruleForm.code" clearable autocomplete="off">
            <el-input
               text
               maxlength="4"
               :placeholder="$t('message.mobile.placeholder2')"
               v-model="state.ruleForm.code"
               clearable
               autocomplete="off"
            >
               <template #prefix>
                  <el-icon class="el-input__icon"><ele-Position /></el-icon>
               </template>
@@ -17,7 +24,7 @@
         </el-col>
         <el-col :span="1"></el-col>
         <el-col :span="8">
            <el-button v-waves class="login-content-code">{{ $t('message.mobile.codeText') }}</el-button>
            <el-button  v-waves class="login-content-code" @click="sendSMS">{{ sendCodeMsg }}</el-button>
         </el-col>
      </el-form-item>
      <el-form-item class="login-animation3">
@@ -25,20 +32,82 @@
            <span>{{ $t('message.mobile.btnText') }}</span>
         </el-button>
      </el-form-item>
      <div class="font12 mt30 login-animation4 login-msg">{{ $t('message.mobile.msgText') }}</div>
      <!-- <div class="font12 mt30 login-animation4 login-msg">{{ $t('message.mobile.msgText') }}</div> -->
   </el-form>
</template>

<script setup lang="ts" name="loginMobile">
import { reactive } from 'vue';
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';

// 定义变量内容
const state = reactive({
   ruleForm: {
      userName: '',
      code: '',
      countNum: null,
      countTimer: null,
   },
});

const validatePhoneNum = (_rule: any, value: any, callback: any) => {
   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' }],
});
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() {
   stopCount();
   state.ruleForm.countNum = 60;
   state.ruleForm.countTimer = setInterval(() => {
      if (state.ruleForm.countNum === 0) {
         state.ruleForm.countNum = null;
         clearInterval(state.ruleForm.countTimer);
         return;
      }
      state.ruleForm.countNum--;
   }, 1000);
}

const dialogFormRef = ref<FormInstance>(null);

const sendSMS = async () => {
   if (state.ruleForm.countNum !== null) {
      return;
   }
   const valid = await dialogFormRef.value.validateField(['userName']).catch(() => {});
   if (!valid) return;

   state.ruleForm.code = '';

   await loginVerifyMessage(
      {
         phone: state.ruleForm.userName,
      },
      {
         noAuth: true,
      }
   );

   startCount();
};
</script>

<style scoped lang="scss">