79 lines
1.7 KiB
Vue
79 lines
1.7 KiB
Vue
<template>
|
|
<div class="user">
|
|
<van-nav-bar title="我的" fixed placeholder />
|
|
|
|
<div class="user-header">
|
|
<van-image
|
|
round
|
|
width="80"
|
|
height="80"
|
|
src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
|
|
/>
|
|
<div class="user-name">用户名</div>
|
|
</div>
|
|
|
|
<van-cell-group inset class="menu-group">
|
|
<van-cell title="个人信息" is-link @click="showToast('个人信息')" />
|
|
<van-cell title="我的订单" is-link @click="showToast('我的订单')" />
|
|
<van-cell title="收货地址" is-link @click="showToast('收货地址')" />
|
|
<van-cell title="设置" is-link @click="showToast('设置')" />
|
|
</van-cell-group>
|
|
|
|
<van-button type="danger" block class="logout-btn" @click="handleLogout">
|
|
退出登录
|
|
</van-button>
|
|
|
|
<van-tabbar v-model="active" route>
|
|
<van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
|
|
<van-tabbar-item icon="user-o" to="/user">我的</van-tabbar-item>
|
|
</van-tabbar>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { showToast, showDialog } from 'vant'
|
|
|
|
const router = useRouter()
|
|
const active = ref(1)
|
|
|
|
const handleLogout = () => {
|
|
showDialog({
|
|
title: '提示',
|
|
message: '确定要退出登录吗？'
|
|
}).then(() => {
|
|
showToast('已退出')
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.user {
|
|
padding-bottom: 50px;
|
|
}
|
|
|
|
.user-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 40px 0;
|
|
background: #fff;
|
|
}
|
|
|
|
.user-name {
|
|
margin-top: 16px;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #323233;
|
|
}
|
|
|
|
.menu-group {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.logout-btn {
|
|
margin: 24px 16px;
|
|
}
|
|
</style>
|