blog/src/components/Login.vue

<template>
  <n-card class="mt-10 rounden-[10px] w-[500px]" shadow="never">
    <n-tabs v-model:value="tid" justify-content="space-evenly" animated>
      <n-tab-pane name="tab1" tab="登录">
        <n-form ref="formLogin" layout="vertical" :data="loginData" :rules="rules">
          <n-form-item field="username">
            <n-input v-model:value="loginData.username" placeholder="请输入用户名" />
          </n-form-item>
          <n-form-item field="password">
            <n-input v-model:value="loginData.password" type="password" show-password-on="click" placeholder="请输入密码" />
          </n-form-item>
          <n-form-item class="form-operation-wrap">
            <n-button class="w-full" type="primary" @click="login">登 录</n-button>
          </n-form-item>
        </n-form>
      </n-tab-pane>
      <n-tab-pane name="tab2" tab="注册">
        <n-form ref="formReg" layout="vertical" :data="regData" :rules="rrules">
          <n-form-item field="username">
            <n-input v-model:value="regData.username" placeholder="请输入用户名" />
          </n-form-item>
          <n-form-item field="password">
            <n-input v-model:value="regData.password" type="password" show-password-on="click" placeholder="请输入用密码" />
          </n-form-item>
          <n-form-item field="nickname">
            <n-input v-model:value="regData.nickname" placeholder="请输入昵称" />
          </n-form-item>
          <n-form-item class="form-operation-wrap">
            <n-button class="w-full" type="primary" @click="register">注册</n-button>
          </n-form-item>
        </n-form>
      </n-tab-pane>
    </n-tabs>
  </n-card>
</template>

<script setup lang="ts">
const router = useRouter()
const props = defineProps({
  setVisible: {
    type: Function,
    default: () => { },
  }
})
// 登录注册逻辑
const tid = ref("tab1");
const formLogin: any = ref(null);
const loginData = reactive({
  username: "",
  password: ""
});

const formReg: any = ref(null);
const regData = reactive({
  username: "",
  password: "",
  nickname: ""
});

const usrLog = $store.log.useLogStore()

const rules: any = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { validator: validateUsername, trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { validator: validatePassword, trigger: 'blur' }
  ]
})
const rrules: any = reactive({
  username: [
    { validator: validateUsername, trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { validator: validatePassword, trigger: 'blur' }
  ]
})
function login() {
  console.log('>>> --> login --> formLogin.value:', usrLog.isLogin)
  formLogin.value?.validate(async (is: boolean) => {
    if (is) {
      $msg.error('信息填写不正确，请检查后再提交')
    } else {
      const res = await $http.user.login(loginData)
      if (res?.code !== 200) {
        $msg.error('登录失败')
        return
      }
      $cookies.set('token', res.data.token, '1d')
      $cookies.set('userinfo', res.data.userinfo, '1d')
      $msg.success(res.msg)
      usrLog.setIsLogin(true)
      props.setVisible(false)
    }
  })

}
function register() {
  formReg.value.validate(async (is: boolean) => {
    if (is) {
      $msg.error('信息填写不正确，请检查后再提交')
    } else {
      const res = await $http.user.register(regData)
      if (res?.code !== 200) {
        $msg.error('注册失败')
        return
      }
      $msg.success(res.msg)
      tid.value = 'tab1'
      loginData.username = regData.username
      regData.username = ''
      regData.nickname = ''
      regData.password = ''
    }
  })
}

function validateUsername(rule: any, value: string, callback: Function) {
  if (/^[a-zA-Z][a-zA-Z0-9]{3,15}$/.test(value)) return callback()
  else return callback(new Error('请输入4-16位字母或数字,且以字母开头'))
}
function validatePassword(rule: any, value: string, callback: Function) {
  if (/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/.test(value)) return callback()
  else return callback(new Error('密码长度为6-12位，且必须包含数字和字母'))
}

</script>

<style scoped lang="less">
:deep(.devui-tabs__nav) {
  display: flex;
  justify-content: center;

  li a span {
    // width: 20%;
    font-size: 18px !important;
    font-weight: 500;
  }
}

:deep(.devui-form__item--horizontal) {
  margin-top: 30px;
}
</style>