<template>
    <div class="box">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="account.id"
          name="id"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="account.password"
          type="password"
          name="password"
          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 setup lang="ts">
import { reactive} from 'vue';
import { UserType } from '../types/user';
import { userLogin } from '../api/user';

const account = reactive({
  id: "blahblah",
  password:"pwd123"
})
const onSubmit = (account:UserType) => {
  console.log('submit', account);
  userLogin(account).then(res => {
      console.log("登陆成功",res);
      
    })
};

</script>

<style lang="scss" scoped>
.box{
  padding-top: 40px;
}
</style>