对话日志

wujingjing

2024-10-31 bb4170bb6bf4af9cd76f976b1460ea76d33b3bb9

 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,28 +24,114 @@
         </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" :disabled="hasSended">{{ sendCodeMsg }}</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>
      <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 { computed, reactive, ref } from 'vue';
import { PostPhoneLogin, loginVerifyMessage } from '/@/api/ai/user';
import { formatAxis } from '/@/utils/formatTime';

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

const formRules = ref<FormRules>({
   code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
   userName: [
      { required: true, message: '请输入手机号码', trigger: 'blur' },
      { pattern: /^1\d{10}$/, message: '请输入正确的手机号码', trigger: 'blur' },
   ],
});

const hasSended = computed(() => {
   return state.ruleForm.countNum !== null;
});
const sendCodeMsg = computed(() => {
   return !hasSended.value ? '获取验证码' : `${state.ruleForm.countNum} 秒后重试`;
});
function stopCount() {
   state.ruleForm.countNum = null;
   clearInterval(state.ruleForm.countTimer);
}

const 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,
         loading: false,
      }
   );

   startCount();
};

const currentTime = computed(() => {
   return formatAxis(new Date());
});
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,
      });

      // state.loading.signIn = true;
      await emit('login', res, currentTime.value);
      // state.loading.signIn = false;
   });
};
</script>

<style scoped lang="scss">
@@ -68,3 +161,5 @@
   }
}
</style>
import { initBackEndControlRoutes } from '/@/router/backEnd'; import { initFrontEndControlRoutes } from '/@/router/frontEnd'; import {
useUserInfo } from '/@/stores/userInfo';