iot-wap/src/pages/login/Index.vue

<template>


  <div style="height: 100vh; overflow: hidden; display: flex; flex-direction: column;">

    <!-- 用户名称 -->
    <div style="background-image: url('static/images/bg-login.png');
      background-repeat: no-repeat;
      background-position-y: 0px;
      background-size: 100%">

      <div style="padding: 100px 16px 30px 32px; display: flex; 
        justify-content:space-between; 
        align-items:center;">
        <div>
          <div style="color: #5C677C; height: 30px;">
            <van-tag type="primary" size="large">欢迎登录</van-tag>
          </div>
          <div style="font-size: 1.1rem; font-weight: bold;">
            <span>驼人物联网平台</span>
          </div>
        </div>
      </div>


      <div style="margin-top: 60px;">
        <van-form ref="formRef" @submit="onSubmit">
          <van-cell-group inset>
            <van-field
              v-model="username"
              name="username"
              label="账号"
              label-width="70"
              placeholder="请输入账号"
              :rules="[{ required: true, message: '请填写账号' }]"
            />
            <van-field
              v-model="password"
              name="password"
              center
              clearable
              label="密码"
              label-width="70"
              type="password"
              placeholder="请输入密码"
              :rules="[{ required: true, message: '请输入密码' }]"
            >
            </van-field>
            <van-field style="align-items: center;"
              v-model="captchaCode"
              name="captchaCode"
              label="验证码"
              label-width="70"
              placeholder="请输入验证码"
              :rules="[{ required: true, message: '请填写账号' }]">
              <template #button>
                <van-image
                  width="100"
                  height="30"
                  fit="contain"
                  :src="captchaSrc"
                  @click="onClickVerifyCode"
                />
              </template>
            </van-field>
            <div style="padding: 16px;">
              <van-checkbox v-model="rememberPasswordChecked" shape="square">记住密码</van-checkbox>
            </div>
          </van-cell-group>
          <div style="margin: 16px;">
            <van-button
              round block type="primary" size="large"
              native-type="submit">登录</van-button>
          </div>
          <div style="padding: 0px 16px; display: flex; justify-content: space-between;">
            <div>
              <a @click="onFindpassword">忘记密码?</a>
            </div>
            <div>
              <a @click="onRegister">注册账号</a>
            </div>
          </div>
        </van-form>
      </div>



    </div>





  </div>




</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue'
  import { useLocalStore } from '@/store';
  import { useRouter } from 'vue-router'
  import { post, post_promise } from '@/network/axios';
  import type { FormInstance } from 'vant';
  // 路由
  const router = useRouter();
  const localStore = useLocalStore();
  // 表单实例
  const formRef = ref<FormInstance>();
  // 用户名和验证码
  const username = ref('')
  const password = ref('')
  const captchaCode = ref('')
  const captchaKey = ref('')
  const rememberPasswordChecked = ref(true);


  // 验证吗
  const captchaSrc = ref<string>('');
    const refreshVerifycode = () => {
    post({url: '/open/getCaptcha'}, (result: any) => {
      console.log(result.data.captchaImg)
      captchaSrc.value = result.data.captchaImg
      captchaKey.value = result.data.captchaKey
    });
  }

  // 点击了验证码
  const onClickVerifyCode = (event: any) => {
    console.log(event)
    refreshVerifycode();
  }


  // 点击了注册
  const onRegister = () => {
    // 跳转到注册
    router.replace('/register');
  }

  // 点击了忘记密码
  const onFindpassword = () => {
    // 跳转到注册
    router.replace('/findpassword');
  }
  
  // 生命周期
  onMounted(() => {
    console.log('onMounted');
    refreshVerifycode();
    rememberPasswordChecked.value = localStore.$state.rememberPassword;
    if(rememberPasswordChecked.value){
      username.value = localStore.$state.username
      password.value = localStore.$state.password
    }
  })
  // 登录提交
  const onSubmit = () => {
    formRef.value?.validate().then(() => {
      // 记住密码
      localStore.$patch({
        rememberPassword: rememberPasswordChecked.value
      })
      // 记住账号密码
      if(rememberPasswordChecked.value){
        localStore.$patch({
          username: username.value,
          password: password.value
        })
      }
      // 登录
      post_promise({url: '/user/login', data: {
        username: username.value,
        password: password.value,
      }})
      .then(({data}) => {
        console.log(data)
        if(data.code == 0){
          // 存储token
          localStore.$patch((state) => {
            state.token = data.data.token
          })
          // 跳转到首页
          router.push('/')
        }
      })
    }).catch((ex) => {
      console.log(ex)
    })
  }

  

</script>

<style scoped>
  .van-tabbar--fixed{
    left: auto;
    max-width: 475px;
  }

</style>