feat: 用户端个人中心(用户信息 + 功能菜单)
This commit is contained in:
@@ -1,3 +1,85 @@
|
|||||||
<template>
|
<template>
|
||||||
<view><text>页面占位 - 后续任务实现</text></view>
|
<view class="page">
|
||||||
|
<view class="user-card">
|
||||||
|
<view class="avatar-wrap">
|
||||||
|
<image class="avatar" :src="userStore.userInfo?.avatarUrl || defaultAvatar" mode="aspectFill" />
|
||||||
|
</view>
|
||||||
|
<view class="user-info">
|
||||||
|
<text class="nickname">{{ userStore.userInfo?.nickname || '未登录' }}</text>
|
||||||
|
<text class="user-desc" v-if="userStore.isLogin">欢迎使用湖南12301文旅专区</text>
|
||||||
|
<text class="user-desc" v-else @click="goLogin">点击登录</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="menu-card">
|
||||||
|
<view class="menu-item" @click="goTo('/packages/user/pages/card/bind')">
|
||||||
|
<text class="menu-icon">🎫</text>
|
||||||
|
<text class="menu-text">我的年卡</text>
|
||||||
|
<text class="menu-arrow">›</text>
|
||||||
|
</view>
|
||||||
|
<view class="menu-item" @click="showComingSoon">
|
||||||
|
<text class="menu-icon">📦</text>
|
||||||
|
<text class="menu-text">订单管理</text>
|
||||||
|
<text class="menu-arrow">›</text>
|
||||||
|
</view>
|
||||||
|
<view class="menu-item" @click="showComingSoon">
|
||||||
|
<text class="menu-icon">📋</text>
|
||||||
|
<text class="menu-text">使用记录</text>
|
||||||
|
<text class="menu-arrow">›</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="btn-area" v-if="userStore.isLogin">
|
||||||
|
<button class="btn-logout" @click="handleLogout">退出登录</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useUserStore } from '../../../../store/user'
|
||||||
|
|
||||||
|
const userStore = useUserStore()
|
||||||
|
const defaultAvatar = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
|
||||||
|
|
||||||
|
/** 跳转登录页 */
|
||||||
|
function goLogin() { uni.navigateTo({ url: '/pages/login/login' }) }
|
||||||
|
|
||||||
|
/** 需要登录的页面跳转 */
|
||||||
|
function goTo(url: string) {
|
||||||
|
if (!userStore.isLogin) { uni.navigateTo({ url: '/pages/login/login' }); return }
|
||||||
|
uni.navigateTo({ url })
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 退出登录 */
|
||||||
|
function handleLogout() {
|
||||||
|
uni.showModal({
|
||||||
|
title: '提示', content: '确定要退出登录吗?',
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
userStore.logout()
|
||||||
|
uni.showToast({ title: '已退出', icon: 'success' })
|
||||||
|
setTimeout(() => { uni.navigateTo({ url: '/pages/login/login' }) }, 1000)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 即将上线提示 */
|
||||||
|
function showComingSoon() { uni.showToast({ title: '即将上线,敬请期待', icon: 'none' }) }
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.page { min-height: 100vh; background: #f5f5f5; }
|
||||||
|
.user-card { background: linear-gradient(135deg, #4A90D9, #357ABD); padding: 50rpx 30rpx 40rpx; display: flex; align-items: center; }
|
||||||
|
.avatar-wrap { margin-right: 24rpx; }
|
||||||
|
.avatar { width: 120rpx; height: 120rpx; border-radius: 50%; border: 4rpx solid rgba(255,255,255,0.5); background: #eee; }
|
||||||
|
.user-info { display: flex; flex-direction: column; }
|
||||||
|
.nickname { font-size: 34rpx; font-weight: bold; color: #fff; margin-bottom: 8rpx; }
|
||||||
|
.user-desc { font-size: 24rpx; color: rgba(255,255,255,0.8); }
|
||||||
|
.menu-card { background: #fff; border-radius: 16rpx; margin: 20rpx; overflow: hidden; }
|
||||||
|
.menu-item { display: flex; align-items: center; padding: 30rpx; border-bottom: 1rpx solid #f0f0f0; }
|
||||||
|
.menu-item:last-child { border-bottom: none; }
|
||||||
|
.menu-icon { font-size: 36rpx; margin-right: 20rpx; }
|
||||||
|
.menu-text { flex: 1; font-size: 28rpx; color: #333; }
|
||||||
|
.menu-arrow { font-size: 36rpx; color: #ccc; }
|
||||||
|
.btn-area { padding: 40rpx 20rpx; }
|
||||||
|
.btn-logout { width: 100%; height: 88rpx; line-height: 88rpx; background: #fff; color: #E74C3C; border-radius: 44rpx; font-size: 30rpx; border: 1rpx solid #f0f0f0; }
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user