haha/sbnews
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: align user center with design

Browse Source
This commit is contained in:
hajimi
2026-08-03 03:05:51 +08:00
parent 182c8ce44c
commit f1a58541c6
1 changed files with 3 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
uniapp/src/pages/user/user.vue
+3 -169
View File
@@ -88,9 +88,6 @@
@tap="handleMenuTap(item)">
<view class="user-list__icon"><u-icon :name="item.icon" color="#1468f5" size="34" /></view>
<text class="user-list__label">{{ item.label }}</text>
<view v-if="item.key === 'chat' && stats.chat_unread_count > 0" class="user-list__badge">
{{ stats.chat_unread_count > 99 ? '99+' : stats.chat_unread_count }}
</view>
<u-icon name="arrow-right" color="#9aa0a8" size="26" />
</view>
</view>
@@ -108,34 +105,6 @@
</view>
</view>
<view v-if="serviceMenu.enabled && serviceMenu.data.length" class="user-service-section">
<text class="user-section__title">{{ serviceMenu.title }}</text>
<view v-if="serviceMenu.style === 1" class="user-service-grid">
<view v-for="(item, idx) in serviceMenuList" :key="idx" class="user-service-grid__item"
@tap="goLink(item.link)">
<image v-if="item.image" :src="getImageUrl(item.image)" class="user-service-grid__icon"
mode="aspectFit" />
<text class="user-service-grid__text">{{ item.name }}</text>
</view>
</view>
<view v-else class="user-list">
<view v-for="(item, idx) in serviceMenuList" :key="idx" class="user-list__item"
@tap="goLink(item.link)">
<image v-if="item.image" :src="getImageUrl(item.image)" class="user-list__image" mode="aspectFit" />
<text class="user-list__label">{{ item.name }}</text>
<u-icon name="arrow-right" color="#9aa0a8" size="26" />
</view>
</view>
</view>
<view v-if="bannerData.enabled && bannerList.length" class="user-banner">
<swiper class="user-banner__swiper" :autoplay="true" :interval="4000" :circular="true" indicator-dots
indicator-color="rgba(255,255,255,0.4)" indicator-active-color="#fff">
<swiper-item v-for="(item, idx) in bannerList" :key="idx" @tap="goLink(item.link)">
<image :src="getImageUrl(item.image)" class="user-banner__img" mode="aspectFill" />
</swiper-item>
</swiper>
</view>
</view>
</view>
</template>
@@ -146,7 +115,6 @@ import { onShow } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { ref, reactive, computed } from 'vue'
import { getToken } from '@/utils/auth'
import { getDecorate } from '@/api/shop'
import request from '@/utils/request'
import { useAppStore } from '@/stores/app'
@@ -166,25 +134,20 @@ const stats = reactive({
follow_count: 0,
fans_count: 0,
collect_count: 0,
user_points: 0,
chat_unread_count: 0
user_points: 0
})
const contentMenus = [
{ key: 'posts', label: '我的帖子', icon: 'file-text', url: '/pages/my_posts/my_posts' },
{ key: 'comments', label: '我的评论', icon: 'chat', toast: '我的评论功能即将上线' },
{ key: 'collection', label: '我的收藏', icon: 'star', url: '/pages/collection/collection' },
{ key: 'notice', label: '消息通知', icon: 'bell', toast: '消息通知功能即将上线' },
{ key: 'assistant', label: '世博头条 AI 助手', icon: 'robot', url: '/pages/ai_assistant/ai_assistant' },
{ key: 'chat', label: '私聊消息', icon: 'chat' }
{ key: 'notice', label: '消息通知', icon: 'bell', toast: '消息通知功能即将上线' }
]
const accountMenus = [
{ key: 'wallet', label: '钱包与订单', icon: 'wallet', url: '/packages/pages/user_wallet/user_wallet' },
{ key: 'invite', label: '邀请记录', icon: 'account', url: '/pages/distribution/distribution' },
{ key: 'lottery', label: 'AI 彩票分析', icon: 'file-text', url: '/pages/lottery_analysis/lottery_analysis' },
{ key: 'customer', label: '帮助与客服', icon: 'kefu-ermai', url: '/pages/customer_service/customer_service' },
{ key: 'about', label: '关于我们', icon: 'info-circle', toast: '关于我们页面即将上线' },
{ key: 'setting', label: '设置', icon: 'setting', url: '/pages/user_set/user_set' }
]
@@ -198,20 +161,6 @@ const memberStatusText = computed(() => userInfo.value?.vip_info?.is_vip
? (userInfo.value.vip_info.vip_level_name || '尊享会员')
: '普通会员')
const serviceMenu = reactive({
enabled: false,
style: 1,
title: '我的服务',
data: [] as any[]
})
const serviceMenuList = computed(() => serviceMenu.data.filter((item: any) => item.is_show === '1' || item.is_show === 1))
const bannerData = reactive({
enabled: false,
data: [] as any[]
})
const bannerList = computed(() => bannerData.data.filter((item: any) => item.is_show === '1' || item.is_show === 1))
const promptPasswordChange = (userInfoData: Record<string, any>) => {
const mobile = String(userInfoData?.mobile || '')
const initialPassword = mobile.slice(-6)
@@ -232,40 +181,6 @@ const promptPasswordChange = (userInfoData: Record<string, any>) => {
})
}
const fetchDecorate = async () => {
try {
const res = await getDecorate({ id: 2 })
let pageData: any[] = []
if (Array.isArray(res)) {
pageData = res
} else if (res?.data) {
pageData = typeof res.data === 'string' ? JSON.parse(res.data) : res.data
if (!Array.isArray(pageData)) pageData = []
}
console.log('[user] decorate pageData:', JSON.stringify(pageData.map((w: any) => w.name)))
const myService = pageData.find((w: any) => w.name === 'my-service')
if (myService?.content) {
serviceMenu.enabled = !!myService.content.enabled && myService.content.enabled !== '0'
serviceMenu.style = myService.content.style || 1
serviceMenu.title = myService.content.title || '我的服务'
serviceMenu.data = myService.content.data || []
}
const userBanner = pageData.find((w: any) => w.name === 'user-banner')
if (userBanner?.content) {
bannerData.enabled = !!userBanner.content.enabled && userBanner.content.enabled !== '0'
bannerData.data = userBanner.content.data || []
}
} catch (e) {
// 装修数据获取失败时静默处理
}
}
const getImageUrl = (path: string) => {
if (!path) return ''
if (path.startsWith('http')) return path
return `http://129.204.53.249:8090${path}`
}
onShow(async () => {
const sysInfo = uni.getSystemInfoSync()
// #ifdef APP-PLUS || MP
@@ -280,7 +195,6 @@ onShow(async () => {
promptPasswordChange(userData)
}
}
fetchDecorate()
if (getToken()) {
fetchStats()
}
@@ -297,7 +211,6 @@ const fetchStats = async () => {
stats.fans_count = res.data.fans_count || 0
stats.collect_count = res.data.collect_count || 0
stats.user_points = res.data.user_points || 0
stats.chat_unread_count = res.data.chat_unread_count || 0
}
} catch (e) {
// 静默处理
@@ -320,14 +233,6 @@ const goVip = () => {
uni.navigateTo({ url: '/pages/vip/vip' })
}
const openChatList = () => {
if (!isLogin.value) {
uni.navigateTo({ url: '/pages/login/login' })
return
}
uni.navigateTo({ url: '/pages/private_chat/list' })
}
const goPage = (url: string) => {
uni.navigateTo({ url })
}
@@ -337,10 +242,6 @@ const openProfile = () => {
}
const handleMenuTap = (item: any) => {
if (item.key === 'chat') {
openChatList()
return
}
if (item.url) {
goPage(item.url)
return
@@ -350,10 +251,6 @@ const handleMenuTap = (item: any) => {
}
}
const goLink = (link: any) => {
if (!link?.path) return
uni.navigateTo({ url: link.path })
}
</script>
<style lang="scss" scoped>
@@ -514,8 +411,7 @@ const goLink = (link: any) => {
padding: 0 36rpx;
}
.user-section,
.user-service-section {
.user-section {
margin-bottom: 24rpx;
padding: 24rpx 16rpx 18rpx;
border-radius: 22rpx;
@@ -657,12 +553,6 @@ const goLink = (link: any) => {
flex-shrink: 0;
}
&__image {
width: 42rpx;
height: 42rpx;
flex-shrink: 0;
}
&__label {
flex: 1;
min-width: 0;
@@ -671,61 +561,5 @@ const goLink = (link: any) => {
font-size: 28rpx;
}
&__badge {
min-width: 30rpx;
height: 30rpx;
margin-right: 14rpx;
padding: 0 8rpx;
border-radius: 15rpx;
color: #fff;
background: #f04444;
font-size: 18rpx;
line-height: 30rpx;
text-align: center;
}
}
.user-service-section {
padding-bottom: 24rpx;
}
.user-service-grid {
display: flex;
flex-wrap: wrap;
&__item {
width: 25%;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 16rpx;
}
&__icon {
width: 50rpx;
height: 50rpx;
}
&__text {
margin-top: 10rpx;
color: #374151;
font-size: 22rpx;
}
}
.user-banner {
margin: 0 0 24rpx;
border-radius: 16rpx;
overflow: hidden;
&__swiper {
height: 200rpx;
}
&__img {
width: 100%;
height: 200rpx;
border-radius: 16rpx;
}
}
</style>