对话日志

wujingjing

2024-10-31 bb4170bb6bf4af9cd76f976b1460ea76d33b3bb9

 src/views/login/component/mobile.vue

@@ -24,11 +24,11 @@
         </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="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>
@@ -38,11 +38,11 @@

<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 { 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: {
@@ -53,27 +53,26 @@
   },
});

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' }],
   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 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(() => {
@@ -84,7 +83,7 @@
      }
      state.ruleForm.countNum--;
   }, 1000);
}
};

const dialogFormRef = ref<FormInstance>(null);

@@ -103,10 +102,35 @@
      },
      {
         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>

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