327 lines
8.1 KiB
Vue
327 lines
8.1 KiB
Vue
<!-- 个人中心：用户信息页面 -->
|
||
<template>
|
||
<s-layout title="我的">
|
||
<view class="user-page">
|
||
<!-- 渐变背景装饰 -->
|
||
<view class="gradient-bg"></view>
|
||
|
||
<!-- 顶部用户信息卡片 -->
|
||
<view class="user-card-box">
|
||
<view class="user-card">
|
||
<!-- 头像 -->
|
||
<image class="avatar" :src="userInfo.avatar" mode="aspectFill" />
|
||
|
||
<!-- 用户信息 -->
|
||
<view class="user-info">
|
||
<text class="nickname">{{ userInfo.nickname || '未登录' }}</text>
|
||
<view class="address">
|
||
<image class="location-icon me-icon7" src="/static/img/me-icon7.png" mode="aspectFit" />
|
||
<text class="address-text">{{ userInfo.communityAddress || '未设置地址' }}</text>
|
||
</view>
|
||
<text class="phone">{{ userInfo.mobile || '未绑定手机号' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 账户信息 -->
|
||
<view class="section">
|
||
<view class="section-title">账户信息</view>
|
||
<view class="menu-card">
|
||
<view class="menu-item" @tap="navigateTo('/pages/user/info')">
|
||
<view class="menu-item-left">
|
||
<image class="menu-icon" src="/static/img/me-icon1.png" mode="aspectFit" />
|
||
<text class="menu-label">个人资料</text>
|
||
</view>
|
||
<image class="right-icon" src="/static/img/right-icon.png" mode="aspectFit" />
|
||
</view>
|
||
<view class="divider"></view>
|
||
<view class="menu-item">
|
||
<view class="menu-item-left">
|
||
<image class="menu-icon" src="/static/img/me-icon2.png" mode="aspectFit" />
|
||
<text class="menu-label">消息通知</text>
|
||
</view>
|
||
<image class="right-icon" src="/static/img/right-icon.png" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 其他信息 -->
|
||
<view class="section">
|
||
<view class="section-title">其他信息</view>
|
||
<view class="menu-card">
|
||
<view class="menu-item" @tap="navigateTo('/pages/public/setting')">
|
||
<view class="menu-item-left">
|
||
<image class="menu-icon-small" src="/static/img/me-icon3.png" mode="aspectFit" />
|
||
<text class="menu-label">系统设置</text>
|
||
</view>
|
||
<image class="right-icon" src="/static/img/right-icon.png" mode="aspectFit" />
|
||
</view>
|
||
<view class="divider"></view>
|
||
<view class="menu-item" @tap="navigateTo('/pages/public/richtext?title=帮助中心')">
|
||
<view class="menu-item-left">
|
||
<image class="menu-icon-small" src="/static/img/me-icon4.png" mode="aspectFit" />
|
||
<text class="menu-label">帮助中心</text>
|
||
</view>
|
||
<image class="right-icon" src="/static/img/right-icon.png" mode="aspectFit" />
|
||
</view>
|
||
<view class="divider"></view>
|
||
<view class="menu-item" @tap="navigateTo('/pages/public/richtext?title=关于我们')">
|
||
<view class="menu-item-left">
|
||
<image class="menu-icon-small" src="/static/img/me-icon5.png" mode="aspectFit" />
|
||
<text class="menu-label">关于我们</text>
|
||
</view>
|
||
<image class="right-icon" src="/static/img/right-icon.png" mode="aspectFit" />
|
||
</view>
|
||
<view class="divider"></view>
|
||
<view class="menu-item" @tap="navigateTo('/pages/public/richtext?title=隐私设置')">
|
||
<view class="menu-item-left">
|
||
<image class="menu-icon-small" src="/static/img/me-icon6.png" mode="aspectFit" />
|
||
<text class="menu-label">隐私设置</text>
|
||
</view>
|
||
<image class="right-icon" src="/static/img/right-icon.png" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 退出登录按钮 -->
|
||
<view class="logout-btn" @tap="handleLogout">
|
||
<text class="logout-text">退出登录</text>
|
||
</view>
|
||
</view>
|
||
</s-layout>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue';
|
||
import { onShow } from '@dcloudio/uni-app';
|
||
import sheep from '@/sheep';
|
||
import AuthUtil from '@/sheep/api/member/auth';
|
||
|
||
// 用户信息
|
||
const userInfo = ref({
|
||
avatar: '',
|
||
nickname: '',
|
||
mobile: '',
|
||
communityAddress: ''
|
||
});
|
||
|
||
// 页面显示时更新数据
|
||
onShow(() => {
|
||
updateUserInfo();
|
||
});
|
||
|
||
// 更新用户信息
|
||
const updateUserInfo = () => {
|
||
const user = sheep.$store('user').userInfo || {};
|
||
userInfo.value = {
|
||
avatar: user.avatar || '/static/img/login_img.png',
|
||
nickname: user.nickname || '未登录',
|
||
mobile: user.mobile || '',
|
||
communityAddress: user.communityAddress || '未设置地址'
|
||
};
|
||
};
|
||
|
||
// 页面跳转
|
||
const navigateTo = (url) => {
|
||
if (!url) return;
|
||
sheep.$router.go(url);
|
||
};
|
||
|
||
// 退出登录
|
||
const handleLogout = () => {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定要退出登录吗？',
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
const { code } = await AuthUtil.logout();
|
||
if (code === 0) {
|
||
sheep.$store('user').logout();
|
||
sheep.$router.go('/pages/index/login-page');
|
||
} else {
|
||
uni.showToast({ title: '退出登录失败', icon: 'none' });
|
||
}
|
||
}
|
||
}
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.user-page {
|
||
min-height: 100vh;
|
||
background-color: #f5f5f5;
|
||
position: relative;
|
||
padding-bottom: 40rpx;
|
||
}
|
||
|
||
// 渐变背景装饰
|
||
.gradient-bg {
|
||
width: 750rpx;
|
||
height: 660rpx;
|
||
background: linear-gradient(180deg, #FA7E49 0%, #f5f5f5 100%);
|
||
opacity: 0.1;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 0;
|
||
}
|
||
|
||
// 顶部用户卡片
|
||
.user-card-box {
|
||
padding: 75rpx 34rpx;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.user-card {
|
||
padding: 40rpx;
|
||
background: #ffffff;
|
||
border-radius: 24rpx;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.avatar {
|
||
width: 153rpx;
|
||
height: 153rpx;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.user-info {
|
||
flex: 1;
|
||
margin-left: 30rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
|
||
.nickname {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.address {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 8rpx;
|
||
|
||
.location-icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.address-text {
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
}
|
||
}
|
||
|
||
.phone {
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 区块样式
|
||
.section {
|
||
position: relative;
|
||
z-index: 1;
|
||
margin: 0 38rpx 24rpx;
|
||
|
||
.section-title {
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
margin-bottom: 20rpx;
|
||
padding-left: 8rpx;
|
||
}
|
||
|
||
.menu-card {
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
padding: 0 32rpx;
|
||
box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
|
||
}
|
||
}
|
||
|
||
// 菜单项
|
||
.menu-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 32rpx 0;
|
||
|
||
.menu-item-left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.menu-icon {
|
||
width: 76rpx;
|
||
height: 76rpx;
|
||
background: #FF9966;
|
||
border-radius: 19rpx;
|
||
margin-right: 24rpx;
|
||
}
|
||
|
||
.menu-icon-small {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
border-radius: 0;
|
||
margin-right: 24rpx;
|
||
}
|
||
|
||
.menu-label {
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.right-icon {
|
||
width: 31rpx;
|
||
height: 31rpx;
|
||
}
|
||
}
|
||
|
||
// 定位图标
|
||
.location-icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
// 分割线
|
||
.divider {
|
||
height: 1rpx;
|
||
background-color: #f0f0f0;
|
||
margin: 0;
|
||
}
|
||
|
||
// 退出登录按钮
|
||
.logout-btn {
|
||
margin: 40rpx 40rpx 0;
|
||
height: 107rpx;
|
||
background: #EEEEEE;
|
||
border-radius: 31rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.logout-text {
|
||
height: 38rpx;
|
||
font-family: Source Han Sans SC, Source Han Sans SC;
|
||
font-weight: 400;
|
||
font-size: 27rpx;
|
||
color: #262626;
|
||
line-height: 38rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
}
|
||
</style>
|