效果图
、
概述
用vue3和Vant4开发的个人中心界面
全部代码
<template>
<div class="center-container">
<div class="center-info">
<van-image class="center-headImg"
radius="20px"
width="120"
height="120"
:src="loginStore.user.headImg"
/>
<div class="center-text">
<p>用户名:{{ loginStore.user.username }}</p>
<p> 邮箱:{{ loginStore.user.email }}</p>
<p> 手机号:{{ loginStore.user.phone }}</p>
</div>
</div>
<!-- <div class="center-edit">-->
<!-- <el-button size="large" type="primary" round>修改个人信息</el-button>-->
<!-- </div>-->
<div class="center-detail">
<van-collapse v-model="activeNames">
<van-collapse-item title="我的订单" name="1">
我的订单
</van-collapse-item>
<van-collapse-item title="我的收藏" name="2">
我的收藏
</van-collapse-item>
<van-collapse-item title="我的评论" name="3">
我的评论
</van-collapse-item>
</van-collapse>
</div>
<div class="center-logout">
<van-cell is-link title="设置" @click="show = true"/>
<van-action-sheet v-model:show="show">
<div class="content"
style="padding: 30px; background-image: linear-gradient(120deg, #00e4d0, #5983e8) !important;">
<el-button plain style="margin-bottom: 30px;margin-left: -20px;width: 100%" size="large" type="primary" round
@click="editInfoHandler()">修改信息
</el-button>
<br>
<el-button plain style="margin-left: -20px;width: 100%" size="large" type="danger" round
@click="logoutHandler()">
退出登录
</el-button>
</div>
</van-action-sheet>
</div>
</div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router" //router
import {useLoginStore} from "@/stores/loginStore.js" //stores
const loginStore = useLoginStore()
const activeNames = ref(['0']);
const show = ref(false);
onMounted(() => {
})
//获取路由对象
const router = useRouter()
/*
退出登录
*/
const logoutHandler = () => {
loginStore.isLogin = false
loginStore.user = ""
ElMessage.success("成功退出")
router.push("/")
}
/**
* 修改个人信息
*/
const editInfoHandler = () => {
router.push("/pages/editInfo")
}
</script>
<style scoped>
.center-container {
background-image: linear-gradient(135deg, #EE9AE5 10%, #5961F9 100%) !important;
width: 100%;
height: 600px;
}
.center-info {
display: flex;
}
.center-headImg {
margin-top: 20px;
margin-left: 20px;
}
.center-text {
margin: 20px;
}
.center-text p {
line-height: 40px;
text-align: left;
font-size: 16px;
font-family: 楷体;
}
.center-edit {
margin: 20px;
}
</style>