You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
3.6 KiB
134 lines
3.6 KiB
<template>
|
|
<div class="login-layout mt-[100px] m-auto w-screen-xl">
|
|
<el-container class="mt-[100px] m-auto p-">
|
|
<el-aside width="170px" class="bg-white p-3 hover:shadow">
|
|
<div class="flex justify-center pb-4">
|
|
<img src="https://oss.wsdns.cn/20240328/797a8e323bba4fc6827abf9d8b98ba45.png" class="w-[80px] h-[80px] rounded-full" />
|
|
</div>
|
|
<div class="menu">
|
|
<el-menu
|
|
default-active="1"
|
|
style="border: none"
|
|
>
|
|
<el-menu-item v-for="(item,index) in activities" :index="`${index+1}`" style="border-bottom: 1px solid #f3f3f3">
|
|
<span class="text-center">{{ item.name }}</span>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
</div>
|
|
</el-aside>
|
|
<div shadow="hover" class="flash bg-white hover:shadow h-[500px] w-full ml-6">
|
|
={{ userInfo }}=
|
|
</div>
|
|
</el-container>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {useConfigInfo, useToken, useUserInfo, useWebsite} from "~/composables/configState";
|
|
import useFormData from '@/utils/use-form-data';
|
|
import type { User } from '@/api/system/user/model';
|
|
import { ref } from 'vue'
|
|
import {getCaptcha} from "~/api/passport/login";
|
|
import {useServerRequest} from "~/composables/useServerRequest";
|
|
import type {ApiResult} from "~/api";
|
|
import type {Website} from "~/api/cms/website/model";
|
|
import type {CaptchaResult, LoginResult} from "~/api/passport/login/model";
|
|
|
|
// 配置信息
|
|
const runtimeConfig = useRuntimeConfig();
|
|
const website = useWebsite()
|
|
const config = useConfigInfo();
|
|
const token = useToken();
|
|
const userInfo = useUserInfo();
|
|
|
|
const value = ref('登录')
|
|
const options = ['登录', '注册']
|
|
const activeName = ref('first')
|
|
|
|
const activities = [
|
|
{
|
|
name: '账号信息'
|
|
},
|
|
{
|
|
name: '实名认证'
|
|
},
|
|
{
|
|
name: '订单列表'
|
|
},
|
|
{
|
|
name: '退出登录'
|
|
},
|
|
]
|
|
const activeNames = ref(['1'])
|
|
const handleChange = (val: string[]) => {
|
|
console.log(val)
|
|
}
|
|
// 验证码 base64 数据
|
|
const captcha = ref('');
|
|
// 验证码内容, 实际项目去掉
|
|
const text = ref('');
|
|
// 是否显示图形验证码弹窗
|
|
const visible = ref(false);
|
|
// 图形验证码
|
|
const imgCode = ref('');
|
|
// 发送验证码按钮loading
|
|
const codeLoading = ref(false);
|
|
// 验证码倒计时时间
|
|
const countdownTime = ref(0);
|
|
// 验证码倒计时定时器
|
|
let countdownTimer: number | null = null;
|
|
|
|
// 配置信息
|
|
const { form } = useFormData<User>({
|
|
username: '',
|
|
phone: '',
|
|
password: '',
|
|
code: '',
|
|
smsCode: '',
|
|
remember: true,
|
|
isAdmin: true
|
|
});
|
|
|
|
|
|
const navigateTo = (url: string) => {
|
|
window.location.href = url;
|
|
}
|
|
|
|
/**
|
|
* 执行登录
|
|
*/
|
|
const onSubmit = async () => {
|
|
const {data: response} = await useServerRequest<ApiResult<LoginResult>>('/login',{baseURL: runtimeConfig.public.apiServer,method: "post",body: form})
|
|
if (response.value?.code == 0) {
|
|
if(response.value.data){
|
|
const access_token = response.value.data?.access_token
|
|
const user = response.value.data?.user
|
|
if(access_token){
|
|
token.value = access_token;
|
|
}
|
|
if(user){
|
|
userInfo.value = user;
|
|
}
|
|
}
|
|
ElMessage.success(response.value.message)
|
|
setTimeout(() => {
|
|
navigateTo('/')
|
|
return;
|
|
},1000)
|
|
}
|
|
console.log(response.value?.data,'>>>>>sfd')
|
|
ElMessage.error(response.value?.message)
|
|
return false;
|
|
}
|
|
|
|
useHead({
|
|
title: `用户中心 - ${config.value?.siteName}`,
|
|
meta: [{ name: website.value.keywords, content: website.value.comments }]
|
|
});
|
|
|
|
</script>
|
|
<style lang="less">
|
|
body{
|
|
background: url("https://oss.wsdns.cn/20240328/797a8e323bba4fc6827abf9d8b98ba45.png");
|
|
background-size: 100%;
|
|
}
|
|
</style>
|