fix

src/components/layout/header.vue

@@ -41,7 +41,7 @@
       </div>
       <div class="user">
         <span v-if="!user.isLogin" class="el-dropdown-link">
-          <img :src="getAssetsFile('gamer.png')" @click="router.push('/login')" />
+          <img :src="getAssetsFile('gamer.png')" @click="loginFormVisible = true" />
         </span>
         <el-dropdown v-else trigger="click" >
           <span class="el-dropdown-link">
@@ -62,6 +62,76 @@
     </div>
   </header>
   <div class="header-hidden"/>
+  <el-dialog
+    v-model="loginFormVisible"
+    :center="true"
+    title="登录"
+    width="30%"
+  >
+    <div class="login-box-header">
+      <el-form
+        ref="ruleFormRef"
+        :rules="rules"
+        class="login_from"
+        label-position="left"
+        :model="loginForm"
+        style="max-width: 400px"
+        @submit.prevent="submitForm(ruleFormRef)">
+        <el-tabs v-model="login_typ" style="width: 50%;" @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="" prop="password">
+            <el-input
+              v-model="loginForm.password"
+              type="password"
+              show-password
+              placeholder="请输入密码"
+              autocomplete="off"
+              :prefix-icon="Lock" />
+            <el-input
+              v-model="loginForm.password"
+              type="hidden"
+              autocomplete="off"
+              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="Cellphone" />
+          </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">
+          <el-button
+            round
+            class="submit_btn"
+            block
+            type="primary"
+            size="large"
+            native-type="submit">登&emsp;录</el-button>
+        </div>
+      </el-form>
+    </div>
+  </el-dialog>
   <van-popup
     v-model:show="show"
     position="top"
@@ -84,9 +154,10 @@ import { useRouter, useRoute } from 'vue-router'
 import { useStore } from '@/store'
 import Message from '@/utils/Message'
 import local from '@/utils/local'
-import { getGameList } from '@/api/index'
-import { Search } from '@element-plus/icons-vue'
 import { getAssetsFile } from '@/utils/imgResolve'
+import { Lock, User, Cellphone, Search } from '@element-plus/icons-vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import { getUserLogin, captchaLogin, getCaptchaHttp, getGameList } from '@/api/index'
 
 // const img:any = inject('img')
 const router = useRouter()
@@ -214,6 +285,139 @@ const toPath = (url: any) => {
   show.value = false
   router.push({ path: url })
 }
+declare let md5: any
+
+const loginFormVisible = ref<boolean>(false)
+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' }
+  ]
+})
+interface login {
+    account: string,
+    password: string,
+    timestamp: number | string,
+    smsCaptcha:string | undefined
+}
+const loginForm = reactive<login>({
+  account: '',
+  password: '',
+  timestamp: parseInt(`${Date.now() / 1000}`),
+  smsCaptcha: undefined
+})
+const ruleFormRef = ref<FormInstance>()
+const login_typ = ref<'pwd'| 'sms'>('sms')
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.resetFields()
+}
+const can_send = ref<boolean>(true)
+const smsMessage = ref<'获取验证码' | number>('获取验证码')
+const VALID = 60
+const settimes = () => {
+  var interval:any
+  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)
+}
+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 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')
+        // eslint-disable-next-line no-undef
+        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
+            sessionStorage.setItem('token', res.data.data.token)
+            sessionStorage.setItem('account', loginForm.account)
+            localStorage.setItem('from', '1')
+            user.isLogin = true
+            await user.getUserProfile()
+            // 跳转我的游戏页面
+            setTimeout(() => {
+              router.push({ path: '/my_game', 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('登录成功')
+            sessionStorage.setItem('token', res.data.data.token)
+            sessionStorage.setItem('account', loginForm.account)
+            localStorage.setItem('from', '2')
+            user.isLogin = true
+            await user.getUserProfile()
+            setTimeout(() => {
+              router.push({ path: '/my_game', query: { account: loginForm.account }})
+              local.set('headerPath', '我的')
+            }, 1000)
+          }
+        }).catch((error) => {
+          console.log(error)
+          Message.error(error.data.msg)
+        })
+      }
+    } else {
+      console.log('登录失败', fields)
+    }
+  })
+}
 </script>
 
 <style lang="scss" scoped>
@@ -288,4 +492,11 @@ const toPath = (url: any) => {
 .header-hidden{
   height: 3rem;
 }
+.login-box-header{
+  padding: 1rem;
+  .submit_btn{
+    width: 100%;
+    display: block;
+  }
+}
 </style>

src/views/login.vue

@@ -4,7 +4,7 @@
       <el-form
         ref="ruleFormRef"
         :rules="rules"
-        class="login_from df fdc aic jcc"
+        class="login_from"
         label-position="left"
         :model="loginForm"
         style="max-width: 400px"