92 lines
2.7 KiB
Vue
92 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { reactive, ref } from 'vue';
|
|
import { onLoad } from '@dcloudio/uni-app';
|
|
import { useAuthStore } from '@/state/modules/auth';
|
|
import { Toast } from '@/utils/uniapi/prompt';
|
|
import { useRouter } from '@/hooks/router';
|
|
|
|
const redirect = ref<string | undefined>(undefined);
|
|
onLoad((query) => {
|
|
redirect.value = query.redirect ? decodeURIComponent(query.redirect) : undefined;
|
|
});
|
|
|
|
const router = useRouter();
|
|
|
|
const form = reactive({
|
|
email: 'uni-app@test.com',
|
|
password: 'Vue3_Ts_Vite',
|
|
});
|
|
const authStore = useAuthStore();
|
|
const submit = (e: any) => {
|
|
authStore.login(e.detail.value).then(() => {
|
|
Toast('登录成功', { duration: 1500 });
|
|
setTimeout(() => {
|
|
if (redirect.value) {
|
|
router.go(redirect.value, { replace: true });
|
|
return;
|
|
}
|
|
router.pushTab('/pages/about/index');
|
|
}, 1500);
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<view class="container">
|
|
<view class="title">登录</view>
|
|
<view class="form-wrap">
|
|
<form class="form" @submit="submit">
|
|
<label class="form-item">
|
|
<view class="form-label">邮箱:</view>
|
|
<view class="form-element"><input name="email" :value="form.email" /></view>
|
|
</label>
|
|
<label class="form-item">
|
|
<view class="form-label">密码:</view>
|
|
<view class="form-element"><input type="password" name="password" :value="form.password" /></view>
|
|
</label>
|
|
<button form-type="submit" class="submit-btn" hover-class="none">登录</button>
|
|
</form>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
margin: 0 auto;
|
|
width: 80%;
|
|
.title {
|
|
padding: 320rpx 0 32rpx 0;
|
|
text-align: center;
|
|
}
|
|
.form-wrap {
|
|
padding: 20rpx 24rpx;
|
|
box-shadow: 16rpx 16rpx 30rpx #e5e7eb;
|
|
.form {
|
|
.form-item {
|
|
display: flex;
|
|
height: 88rpx;
|
|
border-bottom: 2rpx solid #dbeafe;
|
|
align-items: center;
|
|
.form-label {
|
|
min-width: 96rpx;
|
|
}
|
|
.form-element {
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
.submit-btn {
|
|
margin-top: 44rpx;
|
|
border: 4rpx solid #bfdbfe;
|
|
background-color: #60a5fa;
|
|
border-radius: 8rpx;
|
|
font-size: 28rpx;
|
|
color: #ffffff;
|
|
:hover {
|
|
background-color: #3b82f6;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|