ckgl/pages/login/login.vue
2024-12-21 18:03:43 +08:00

90 lines
2.1 KiB
Vue

<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>