website/src/view/p_views/login/index.vue

<template>
  <div class="login df fdc aic" :style="{height: viewWidth + 'px'}">
    <div class="login_logo">
      <!-- <img src="http://gm.nkfzs.com/favicon.ico"> -->
      <img v-if="VITEPLA === 'QingQue'" src="@/assets/img/logo.png"/>
    </div>

    <el-form
      ref="ruleFormRef"
      :rules="rules"
      class="login_from df fdc aic jcc"
      label-position="left"
      label-width="80px"
      :model="loginForm"
      style="max-width: 400px"
      @submit.prevent="submitForm(ruleFormRef)">
      <el-tabs v-model="login_typ" style="" @tab-change="resetForm(ruleFormRef)">
        <el-tab-pane label="密码登录" name="pwd" />
        <el-tab-pane label="验证码登录" name="sms" />
      </el-tabs>
      <template v-if="login_typ === 'pwd'">
        <el-form-item label="用户名" prop="account">
          <el-input v-model="loginForm.account" type="text" placeholder="请输入账号" clearable :prefix-icon="User" />
        </el-form-item>
        <el-form-item label="密&emsp;码" prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            show-password
            placeholder="请输入密码"
            :prefix-icon="Lock" />
          <el-input
            v-model="loginForm.password"
            type="hidden"
            id="md5_password"
            show-password
            placeholder="请输入密码"
            :prefix-icon="Lock" />
        </el-form-item>
      </template>
      <template v-else-if="login_typ === 'sms'">
        <el-form-item label="手机号" prop="account">
          <el-input v-model="loginForm.account" type="text" placeholder="请输入账号" clearable :prefix-icon="User" />
        </el-form-item>
        <el-form-item label="验证码" prop="smsCaptcha">
          <el-input v-model="loginForm.smsCaptcha" type="number" placeholder="请输入验证码" :prefix-icon="Lock">
            <template #append>
              <div>
                <el-button @click="getCaptcha" color="#ed8c0f" style="width: 100px;" :disabled ="!can_send">{{smsMessage}}</el-button>
              </div>
            </template>
          </el-input>
        </el-form-item>
      </template>
      <!-- <el-form-item style="margin-top:-10px;margin-bottom:-5px;">
                    <el-checkbox v-model="checked" style="color:#a0a0a0;margin-top:-10px;">记住我</el-checkbox>
                </el-form-item> -->
      <div class="btn df aic jcsb">
        <el-button type="primary" plain round class="submit_btn" @click="resetForm(ruleFormRef)">重&emsp;置</el-button>
        <el-button
          color="#ed8c0f"
          plain
          round
          class="submit_btn"
          native-type="submit">登&emsp;录</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { Lock, User } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
import { getUserLogin, captchaLogin, getCaptchaHttp } from '@/api/index'
// import '@/utils/md5'
import Message from '@/utils/Message'
import checkRestTime from '@/utils/captcha'
import { useRouter } from 'vue-router'
import { useStore } from '@/store/index'
import local from '@/utils/local'

const VITEPLA:'QingQue'|'KuPai' = import.meta.env.VITE_LOGO_VISIBLE

const user = useStore('user')
const router = useRouter()
const VALID = 60
const login_typ = ref<'pwd'| 'sms'>('pwd')
const viewWidth = ref<number>(document.documentElement.clientHeight - 80)
const smsMessage = ref<'获取验证码' | number>('获取验证码')
const ruleFormRef = ref<FormInstance>()
const can_send = ref<boolean>(true)
interface login {
    account: string,
    password: string,
    timestamp: number | string,
    smsCaptcha:number | null
}
const loginForm = reactive<login>({
  account: '',
  password: '',
  timestamp: parseInt(`${Date.now() / 1000}`),
  smsCaptcha: null
})

const rules = reactive<FormRules>({
  account: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 3, max: 255, message: '请正确输入账号', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '请输入6-20位密码', trigger: 'blur,change' }
  ],
  smsCaptcha: [
    { required: true, message: '请输入验证码', trigger: 'blur' }
  ]
})

const submitForm = async(formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async(valid, fields) => {
    if (valid) {
      if (login_typ.value === 'pwd') {
        // 登录密码加密
        let md5Pwd: any = document.querySelector('#md5_password')
        md5Pwd = md5(md5(md5(loginForm.password)) + loginForm.timestamp)

        const params = {
          account: loginForm.account,
          password: md5Pwd,
          timestamp: loginForm.timestamp
        }
        getUserLogin(params).then(async(res) => {
          // console.log('res---->', res);
          if (res.data.code === 200) {
            Message.success('登录成功')
            // 保存用户信息 和 token
            localStorage.setItem('token', res.data.data.token)
            localStorage.setItem('account', loginForm.account)
            localStorage.setItem('from', '1')
            await user.getUserProfile()
            // 跳转我的游戏页面
            setTimeout(() => {
              router.push({ path: '/p_mine', query: { account: loginForm.account }})
              local.set('headerPath', '我的')
            }, 1000)
          }
        }).catch(err => {
          // console.log('err===>', err);
          Message.error(err.data.msg)
        })
      } else if (login_typ.value === 'sms') {
        const params = {
          mobile: loginForm.account,
          captcha: loginForm.smsCaptcha
        }
        console.log(params)

        await captchaLogin(params).then(async(res) => {
          console.log(res)
          if (res.data.code === 200) {
            Message.success('登录成功')
            localStorage.setItem('token', res.data.data.token)
            localStorage.setItem('account', loginForm.account)
            localStorage.setItem('from', '2')
            await user.getUserProfile()
            setTimeout(() => {
              router.push({ path: '/p_mine', query: { account: loginForm.account }})
              local.set('headerPath', '我的')
            }, 1000)
          }
        }).catch((error) => {
          console.log(error)
          Message.error(error.data.msg)
        })
      }
    } else {
      console.log('登录失败', fields)
    }
  })
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const getCaptcha = async() => {
  if (loginForm.account.length !== 11) {
    return Message.error('请输入有效手机号！')
  }
  await getCaptchaHttp({ mobile: loginForm.account }).then((res) => {
    console.log(res)
    can_send.value = false
    smsMessage.value = VALID
    settimes()
    sessionStorage.setItem('LOGIN_CAPTCHA', Math.round(new Date().getTime() / 1000).toString())
    Message.success('验证码已发送，请注意查收')
  }).catch((error) => {
    console.log(error)
    Message.error(error.data.msg)
  })
}
const settimes = () => {
  var interval
  const setTimeFn = () => {
    (smsMessage.value as number)--
    if (smsMessage.value as number < 0 || can_send.value === true) {
      clearInterval(interval)
      can_send.value = true
      smsMessage.value = '获取验证码'
    }
  }
  interval = setInterval(function() {
    setTimeFn()
  }, 1000)
}
onMounted(() => {
  const res = checkRestTime('LOGIN_CAPTCHA', VALID)
  if (res) {
    smsMessage.value = res
    can_send.value = false
    settimes()
  }
})
</script>

<style scoped lang="scss">
.login {
    // background-color: #fff;
    // padding-top: 130px;
    // background: url('https://t7.baidu.com/it/u=3939632370,2791869803&fm=193&f=GIF') no-repeat 100% / 100%;

    .login_logo{
        // width: 500px;
        // height: 200px;
        margin: 30px auto 20px;
        img{
            width: 100%;
            height: 100%;
        }
    }

    .login_from {
        width: 600px;
        height: 280px;
        background-color: rgba(255, 255, 255, .7);
        font-size: 16px;
        border-radius: 10px;
        box-sizing: border-box;

        .el-input {
            width: 280px;
            height: 45px;
        }

        .btn {
            width: 80%;
            height: 35px;
            font-size: 16px;
            margin-top: 20px;

            .submit_btn {
                width: 45%;
                height: 100%;
            }

        }
    }
}

.el-form-item {
    align-items: center;
    height: 50px;
}
</style>