recreational-centre-master-mini/src/views/login/index.vue

<template>
  <div class="login-container">
    <div class="login-weaper">
      <div class="login-left">
        <img src="@/assets/img/login-page.png" alt="">
      </div>
      <div class="login-right">
        <el-tabs v-model="data.activeName" class="demo-tabs">
          <el-tab-pane label="登录" name="password"></el-tab-pane>
          <!-- <el-tab-pane label="验证码登录" name="code"></el-tab-pane> -->
        </el-tabs>
        <el-form ref="loginForm" :model="data.loginForm" :rules="data.loginRules" :hide-required-asterisk="true"
          class="login-ruleForm" :size="formSize">
          <el-form-item label="账号" prop="phone">
            <el-input v-model="data.loginForm.phone" clearable maxlength="11" placeholder="请输入账号"
              class="login-input"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" v-if="data.activeName == 'password'">
            <el-input v-model="data.loginForm.password" @keyup.enter.native="login(loginForm)" clearable show-password
              type="password" placeholder="请输入密码" class="login-input"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="code" v-if="data.activeName == 'code'">
            <el-input v-model="data.loginForm.code" clearable placeholder="请输入验证码" class="login-input">
              <template #append>
                <el-button @click="setCode" :disabled="data.changeBtn" class="btn-code">{{ data.btnTitle }}</el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login(loginForm)" class="login-btn"><span>登录</span></el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { useRouter, useRoute } from 'vue-router'
import { useCounterStore } from '@/stores/counter.js'
import { openLoading, closeLoading } from '@/utils/loading.js'
const $route = useRoute()
const $router = useRouter()
import { $ls } from "@/storage";
import { getAssetsFile } from '@/utils'
import { passwordLogin } from "@/apis/user.js"
import { ElMessage } from 'element-plus'

const store = useCounterStore();
const data = reactive({
  socialForm: {},
  loginForm: {
    phone: '',
    password: '',
    code: ''
  },
  loginRules: {
    phone: [
      { required: true, message: "请输入账号", trigger: "blur" }
    ],
    password: [
      { required: true, message: "请输入密码", trigger: "blur" },
      { min: 6, max: 15, message: "长度在6 ~ 15个字节", trigger: "blur" }
    ],
    code: [
      { required: true, message: "请输入验证码", trigger: 'blur' }
    ]
  },
  activeName: 'password',
  btnTitle: '发送验证码',
  send: true,
  time: null,
  count: '',
  changeBtn: false,
});
const loginForm = ref();
const formSize = ref('default')
const logo = getAssetsFile('logo.png');
$ls.setItem('isToken', true)

const setCode = (() => {

})

const getCode = (() => {

})

const login = async (formEl) => {
  formEl.validate((valid) => {
    if(valid){
      let params = {
        password: data.loginForm.password,
        username: data.loginForm.phone
      }
      store.LoginUsername(params);
    }
  })
  
  // const res = await passwordLogin(params)
  // if (res.code === 1) {
  //   getMenu()
  //   $ls.setItem('token', res.data)
  //   $router.push('/home')
  // } else {
  //   ElMessage.error(res.message)
  // }
}

// const getMenu = async () =>{
//   const res = await userMenu(data.loginForm.phone)
//   if(res.code === 1){
//     $ls.setItem('menu',res.data)
//   }
  
// }
</script>

<style lang="scss" scoped>
.login-container {
  height: 100vh;
  background: url('@/assets/img/login.png') no-repeat center;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* position: relative; */

  .login-weaper {
    width: 718px;
    height: 399px;
    background: #FFFFFF;
    box-shadow: 0px 0px 11px 0px rgba(117, 154, 193, 0.24);
    border-radius: 5px;
    display: flex;
    align-items: center;

    .login-left {
      width: 399px;
      height: 100%;

      img {
        width: 100%;
      }
    }

    .login-right {
      flex: 1;
      align-self: start;
      margin-top: 30px;

      :deep(.el-tabs) {
        .el-tabs__nav {
          width: 100%;
          display: flex;
          justify-content: center;
        }
      }

      :deep(.el-tabs__nav-wrap::after) {
        height: 0;
      }

      :deep(.el-tabs__content) {
        display: none;
      }

      :deep(.el-tabs__item) {
        font-weight: 500;
        font-size: 16px;
        color: #707476;
      }

      :deep(.el-tabs__active-bar) {
        height: 3px;
      }

      :deep(.el-tabs__item.is-active) {
        color: #17163D;
        font-weight: bold;
      }

      h3 {
        font-size: 20px;
        font-weight: 600;
        letter-spacing: 1px;
        color: #333333;
      }

      .login-ruleForm {
        /* margin-left: 39px; */
        margin-top: 35px;
        padding: 0 30px;
        /* width: 76%; */

        :deep(.el-form-item) {
          display: block;
          margin-bottom: 19px;
          .el-form-item__label {
            font-weight: 600;
            color: #333333;
            letter-spacing: 1px;
          }
          .el-form-item__content {
            .el-input {
              height: 37px;
            }
          }
          .login-btn {
            width: 100%;
            height: 37px;
            margin-top: 37px;
            font-size: 14px;
          }
          .btn-code {
            color: #0BA0FF;
            font-size: 12px;
            letter-spacing: 1px;
            width: 100px;
          }
        }
      }
    }
  }

  @media screen and (max-width: 700px) {
    .login-weaper {
      box-sizing: border-box;
      width: 319px;
      background: #fff;

      .login-left {
        display: none;
      }

      .login-right {
        width: 100%;
      }
    }
  }
}
</style>