<template>
  <div style="margin-top: 30vh">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
              style="font-size: 16px"
              v-model="username"
              name="用户名"
              label="用户名"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
              style="font-size: 16px"
              v-model="password"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            登录
          </van-button>
        </div>
      </van-form>
    </div>
</template>

<script lang="ts" setup>
import { ref,onMounted } from "vue";
import { showFailToast, showSuccessToast } from "vant";
import { postAction } from "../../common/http";

onMounted(()=>{
})
//手机
const username = ref('');
const password = ref('');
const onSubmit = () => {
  let data={
    'username':username.value,
    'password':password.value,
  }
  postAction('/v1/auth/login',data,{'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}).then((res:any) => {
    if (res.code === 200) {
      const token = res.data;
      localStorage.setItem("token", token);
      showSuccessToast('登录成功！')
        setTimeout(()=>{
			uni.reLaunch({
				url:'/pages/index/index'
			})
        },500)
    } else {
      showFailToast(res.msg)
    }
  })
};
</script>

<style lang="scss" scoped>
.login-box {
  width: 100vm;
  height: 100vh;
  background: url(../assets/loginBackground.png);
  text-align: center;
  background-size: cover;
  overflow: hidden;
  .login-form {
    width: 500px;
    margin: 200px auto;
    background-color: #ffffff;
    padding: 30px;
    border-radius: 20px;

    .login-button {
      width: 33%;
      margin-left: 26%;
      margin-right: 33%;
    }
    h2 {
      margin-bottom: 5px;
    }
  }
}
</style>
