outsource/mi-assessment
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(mine): 按设计图重构我的页面布局

Browse Source 
- 常用功能和其他功能改为列表布局，使用 icon 图片替代 emoji
- 用户头像使用 icon-user.png 作为默认头像
- 未登录状态显示'点击登录'，点击整个区域跳转登录页
- 菜单项统一使用 /static/mine/ 下的 icon 图片
This commit is contained in:
zpc 2026-02-20 22:32:49 +08:00
parent 1b4a56e347
commit 33f806c180
10 changed files with 145 additions and 263 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

408
uniapp/pages/mine/index.vue
View File

@ -13,86 +13,68 @@
<!-- 页面内容 -->
<view class="page-content">
<!-- 用户信息区域 -->
<view class="user-section">
<!-- 未登录状态 -->
<view v-if="!isLoggedIn" class="user-card not-logged">
<view class="avatar-wrapper">
<image class="avatar" src="/static/logo.png" mode="aspectFill" />
</view>
<view class="user-info">
<text class="login-tip">登录后体验更多功能</text>
<button class="btn-login" @click="handleLogin">立即登录</button>
</view>
</view>
<!-- 已登录状态 -->
<view v-else class="user-card logged" @click="goProfile">
<view class="avatar-wrapper">
<image
class="avatar"
:src="userInfo.avatar || '/static/logo.png'"
mode="aspectFill"
/>
</view>
<view class="user-info">
<text class="nickname">{{ userInfo.nickname || '用户' }}</text>
<text class="uid">UID: {{ userInfo.uid || '--' }}</text>
</view>
<view class="arrow-icon">
<text class="iconfont">›</text>
</view>
<view class="user-section" @click="handleUserClick">
<image
class="user-avatar"
:src="isLoggedIn ? (userInfo.avatar || '/static/mine/icon-user.png') : '/static/mine/icon-user.png'"
mode="aspectFill"
/>
<view class="user-info">
<text class="user-name">{{ isLoggedIn ? (userInfo.nickname || '用户') : '点击登录' }}</text>
<text v-if="isLoggedIn" class="user-uid">UID: {{ userInfo.uid || '--' }}</text>
</view>
<text class="user-arrow">›</text>
</view>
<!-- 常用功能区域 -->
<view class="menu-section" v-if="isLoggedIn">
<view class="section-title">常用功能</view>
<view class="menu-grid">
<view class="menu-grid-item" @click="goOrderList">
<view class="menu-icon-wrapper order">
<text class="menu-icon-text">📋</text>
</view>
<text class="menu-text">我的订单</text>
</view>
<view class="menu-grid-item" @click="goAssessmentHistory">
<view class="menu-icon-wrapper history">
<text class="menu-icon-text">📊</text>
</view>
<text class="menu-text">往期测评</text>
</view>
<view class="menu-grid-item" @click="handleContactUs">
<view class="menu-icon-wrapper contact">
<text class="menu-icon-text">📞</text>
</view>
<text class="menu-text">联系我们</text>
</view>
<view class="menu-grid-item" v-if="isPartner" @click="goInvite">
<view class="menu-icon-wrapper invite">
<text class="menu-icon-text">👥</text>
</view>
<text class="menu-text">邀请新用户</text>
</view>
</view>
</view>
<!-- 其他功能区域 -->
<!-- 常用功能 -->
<view class="menu-section">
<view class="section-title">其他</view>
<text class="section-title">常用功能</text>
<view class="menu-list">
<view class="menu-item" @click="goOrderList">
<image class="menu-icon" src="/static/mine/icon-order.png" mode="aspectFit" />
<text class="menu-label">我的订单</text>
<text class="menu-arrow">›</text>
</view>
<view class="menu-item" @click="goAssessmentHistory">
<image class="menu-icon" src="/static/mine/icon-assessment-history.png" mode="aspectFit" />
<text class="menu-label">往期测评</text>
<text class="menu-arrow">›</text>
</view>
<view class="menu-item" @click="handleContactUs">
<image class="menu-icon" src="/static/mine/icon-contact.png" mode="aspectFit" />
<text class="menu-label">联系我们</text>
<text class="menu-arrow">›</text>
</view>
<view v-if="isPartner" class="menu-item" @click="goInvite">
<image class="menu-icon" src="/static/mine/icon-invite.png" mode="aspectFit" />
<text class="menu-label">邀请新用户</text>
<text class="menu-arrow">›</text>
</view>
</view>
</view>
<!-- 其他功能 -->
<view class="menu-section">
<text class="section-title">其他功能</text>
<view class="menu-list">
<view class="menu-item" @click="goAbout">
<text class="menu-title">关于</text>
<image class="menu-icon" src="/static/mine/icon-about.png" mode="aspectFit" />
<text class="menu-label">关于</text>
<text class="menu-arrow">›</text>
</view>
<view class="menu-item" @click="goUserAgreement">
<text class="menu-title">用户协议</text>
<image class="menu-icon" src="/static/mine/icon-user-agreement.png" mode="aspectFit" />
<text class="menu-label">用户协议</text>
<text class="menu-arrow">›</text>
</view>
<view class="menu-item" @click="goPrivacyPolicy">
<text class="menu-title">隐私政策</text>
<image class="menu-icon" src="/static/mine/icon-privacy-policy.png" mode="aspectFit" />
<text class="menu-label">隐私协议</text>
<text class="menu-arrow">›</text>
</view>
<view class="menu-item logout-item" v-if="isLoggedIn" @click="showLogoutPopup">
<text class="menu-title logout-text">退出登录</text>
<view v-if="isLoggedIn" class="menu-item" @click="showLogoutPopup">
<image class="menu-icon" src="/static/mine/icon-logout.png" mode="aspectFit" />
<text class="menu-label">退出登录</text>
<text class="menu-arrow">›</text>
</view>
</view>
@ -155,6 +137,17 @@ const navbarStyle = computed(() => ({
height: totalNavbarHeight.value + 'px'
}))
/**
* 点击用户区域
*/
function handleUserClick() {
if (isLoggedIn.value) {
goProfile()
} else {
handleLogin()
}
}
/**
* 跳转登录页
*/
@ -195,8 +188,6 @@ function goAssessmentHistory() {
* 联系我们
*/
function handleContactUs() {
// 调用微信客服
// 如果没有配置客服，可以显示联系方式
uni.showModal({
title: '联系我们',
content: '如有问题，请联系客服微信：xxxxxx',
@ -233,7 +224,7 @@ function goUserAgreement() {
}
/**
* 跳转隐私政策
* 跳转隐私协议
*/
function goPrivacyPolicy() {
uni.navigateTo({
@ -298,12 +289,12 @@ onMounted(() => {
right: 0;
background-color: $bg-white;
z-index: 999;
.navbar-content {
display: flex;
align-items: center;
justify-content: center;
.navbar-title {
font-size: 34rpx;
font-weight: $font-weight-medium;
@ -324,202 +315,93 @@ onMounted(() => {
// 用户信息区域
.user-section {
display: flex;
align-items: center;
padding: $spacing-xl $spacing-lg;
margin-bottom: $spacing-lg;
.user-card {
background-color: $bg-white;
border-radius: $border-radius-lg;
padding: $spacing-lg;
.user-avatar {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
margin-right: $spacing-lg;
background-color: $bg-gray;
}
.user-info {
flex: 1;
display: flex;
align-items: center;
.avatar-wrapper {
margin-right: $spacing-lg;
.avatar {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
background-color: $bg-gray;
}
flex-direction: column;
.user-name {
font-size: $font-size-xl;
font-weight: $font-weight-medium;
color: $text-color;
}
.user-info {
flex: 1;
}
// 未登录状态
&.not-logged {
.user-info {
display: flex;
flex-direction: column;
align-items: flex-start;
.login-tip {
font-size: $font-size-md;
color: $text-secondary;
margin-bottom: $spacing-sm;
}
.btn-login {
width: 180rpx;
height: 64rpx;
line-height: 64rpx;
background-color: $primary-color;
border-radius: 32rpx;
font-size: $font-size-sm;
color: $text-white;
border: none;
padding: 0;
margin: 0;
&::after {
border: none;
}
&:active {
opacity: 0.8;
}
}
}
}
// 已登录状态
&.logged {
.user-info {
display: flex;
flex-direction: column;
.nickname {
font-size: $font-size-lg;
font-weight: $font-weight-medium;
color: $text-color;
margin-bottom: 8rpx;
}
.uid {
font-size: $font-size-sm;
color: $text-placeholder;
}
}
.arrow-icon {
.iconfont {
font-size: 40rpx;
color: $text-placeholder;
}
}
.user-uid {
font-size: $font-size-sm;
color: $text-placeholder;
margin-top: 8rpx;
}
}
.user-arrow {
font-size: 40rpx;
color: $text-placeholder;
}
}
// 菜单区域
.menu-section {
background-color: $bg-white;
border-radius: $border-radius-lg;
margin-bottom: $spacing-lg;
overflow: hidden;
.section-title {
font-size: $font-size-md;
font-weight: $font-weight-medium;
display: block;
font-size: $font-size-lg;
font-weight: $font-weight-bold;
color: $text-color;
padding: $spacing-lg $spacing-lg $spacing-sm;
padding: 0 $spacing-sm;
margin-bottom: $spacing-md;
}
// 网格菜单
.menu-grid {
display: flex;
flex-wrap: wrap;
padding: $spacing-sm $spacing-lg $spacing-lg;
.menu-grid-item {
width: 25%;
display: flex;
flex-direction: column;
align-items: center;
padding: $spacing-md 0;
&:active {
opacity: 0.7;
}
.menu-icon-wrapper {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: $spacing-xs;
&.order {
background-color: rgba(74, 144, 226, 0.1);
}
&.history {
background-color: rgba(82, 196, 26, 0.1);
}
&.contact {
background-color: rgba(250, 173, 20, 0.1);
}
&.invite {
background-color: rgba(255, 77, 79, 0.1);
}
.menu-icon-text {
font-size: 40rpx;
}
}
.menu-icon {
width: 56rpx;
height: 56rpx;
margin-bottom: $spacing-xs;
}
.menu-text {
font-size: $font-size-xs;
color: $text-color;
}
}
}
// 列表菜单
.menu-list {
.menu-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: $spacing-lg;
border-bottom: 1rpx solid $border-light;
&:last-child {
border-bottom: none;
}
&:active {
background-color: $bg-gray;
}
.menu-title {
font-size: $font-size-md;
color: $text-color;
}
.menu-arrow {
font-size: 32rpx;
color: $text-placeholder;
}
&.logout-item {
.logout-text {
color: $error-color;
}
}
}
background-color: $bg-white;
border-radius: $border-radius-lg;
overflow: hidden;
}
}
// 菜单项
.menu-item {
display: flex;
align-items: center;
padding: $spacing-lg;
border-bottom: 1rpx solid $border-light;
&:last-child {
border-bottom: none;
}
&:active {
background-color: $bg-gray;
}
.menu-icon {
width: 44rpx;
height: 44rpx;
margin-right: $spacing-lg;
}
.menu-label {
flex: 1;
font-size: $font-size-md;
color: $text-color;
}
.menu-arrow {
font-size: 32rpx;
color: $text-placeholder;
}
}
@ -548,11 +430,11 @@ onMounted(() => {
background-color: $bg-white;
border-radius: $border-radius-lg;
overflow: hidden;
.popup-content {
padding: 60rpx 40rpx 40rpx;
text-align: center;
.popup-title {
display: block;
font-size: $font-size-lg;
@ -560,41 +442,41 @@ onMounted(() => {
color: $text-color;
margin-bottom: $spacing-md;
}
.popup-message {
display: block;
font-size: $font-size-md;
color: $text-secondary;
}
}
.popup-buttons {
display: flex;
border-top: 1rpx solid $border-light;
.popup-btn {
flex: 1;
height: 100rpx;
display: flex;
align-items: center;
justify-content: center;
&:active {
background-color: $bg-gray;
}
text {
font-size: $font-size-lg;
}
&.cancel {
border-right: 1rpx solid $border-light;
text {
color: $text-secondary;
}
}
&.confirm {
text {
color: $primary-color;

BIN
uniapp/static/mine/icon-about.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 805 B

BIN
uniapp/static/mine/icon-assessment-history.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 508 B

BIN
uniapp/static/mine/icon-contact.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 857 B

BIN
uniapp/static/mine/icon-invite.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 667 B

BIN
uniapp/static/mine/icon-logout.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 460 B

BIN
uniapp/static/mine/icon-order.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 661 B

BIN
uniapp/static/mine/icon-privacy-policy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 526 B

BIN
uniapp/static/mine/icon-user-agreement.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 764 B

BIN
uniapp/static/mine/icon-user.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB