Cxx0822/food-hub-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:更新个人中心UI

Browse Source
This commit is contained in:
Cxx0822
2025-06-30 22:52:28 +08:00
parent 50991bb49a
commit be8e105a55
13 changed files with 302 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
src/views/profile/index.vue
View File

@@ -2,61 +2,74 @@
<div class="profile-view common-mobile-view">
<profile-card />
<div class="menu-card card-item">
<div class="menu-item" @click="infoClick">
<i class="fas fa-user"></i>
<span>基本资料</span>
<i class="fas fa-chevron-right"></i>
</div>
<el-tabs v-model="activeName"
stretch class="profile-tabs"
@tab-click="handleClick">
<el-tab-pane label="基本资料" name="basic">
<div class="menu-card card-item">
<div class="menu-item" @click="infoClick">
<i class="fas fa-user"></i>
<span>基本资料</span>
<i class="fas fa-chevron-right"></i>
</div>
<div class="menu-divider"></div>
<div class="menu-divider"></div>
<div class="menu-item">
<i class="fas fa-cog"></i>
<span>账户设置</span>
<i class="fas fa-chevron-right"></i>
</div>
<div class="menu-item">
<i class="fas fa-cog"></i>
<span>账户设置</span>
<i class="fas fa-chevron-right"></i>
</div>
<div class="menu-divider"></div>
<div class="menu-divider"></div>
<div class="menu-item">
<i class="fa-solid fa-comment-dots"></i>
<span>反馈意见</span>
<i class="fas fa-chevron-right"></i>
</div>
<div class="menu-item" @click="passwordClick">
<i class="fas fa-key"></i>
<span>更改密码</span>
<i class="fas fa-chevron-right"></i>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="朋友圈" name="moment">
<moment-list />
</el-tab-pane>
<el-tab-pane label="菜谱收藏" name="recipe">
<div class="menu-divider"></div>
</el-tab-pane>
<el-tab-pane label="系统设置" name="system">
<div class="menu-card card-item">
<div class="menu-item">
<i class="fa-solid fa-comment-dots"></i>
<span>反馈意见</span>
<i class="fas fa-chevron-right"></i>
</div>
<div class="menu-item" @click="passwordClick">
<i class="fas fa-key"></i>
<span>更改密码</span>
<i class="fas fa-chevron-right"></i>
</div>
<div class="menu-divider"></div>
<div class="menu-divider"></div>
<div class="menu-item">
<i class="fa-solid fa-file-arrow-down"></i>
<span>软件下载</span>
<i class="fas fa-chevron-right"></i>
</div>
<div class="menu-item">
<i class="fa-solid fa-file-arrow-down"></i>
<span>软件下载</span>
<i class="fas fa-chevron-right"></i>
</div>
<div class="menu-divider"></div>
<div class="menu-divider"></div>
<div class="menu-item" @click="refreshClick">
<i class="fa-solid fa-arrows-rotate"></i>
<span>检查更新</span>
<i class="fas fa-chevron-right"></i>
</div>
<div class="menu-item" @click="refreshClick">
<i class="fa-solid fa-arrows-rotate"></i>
<span>检查更新</span>
<i class="fas fa-chevron-right"></i>
</div>
<div class="menu-divider"></div>
<div class="menu-divider"></div>
<div class="menu-item" @click="logoutClick">
<i class="fas fa-sign-out-alt"></i>
<span>退出登录</span>
<i class="fas fa-chevron-right"></i>
</div>
</div>
<div class="menu-item" @click="logoutClick">
<i class="fas fa-sign-out-alt"></i>
<span>退出登录</span>
<i class="fas fa-chevron-right"></i>
</div>
</div>
</el-tab-pane>
</el-tabs>
<div class="version">版本号 {{ appStore.version }}</div>
</div>
@@ -64,18 +77,24 @@
<script lang="ts" setup>
import ProfileCard from '@/components/Profile/ProfileCard.vue'
import MomentList from '@/components/Moment/MomentList.vue'
import { useUserStore } from '@/store/user.ts'
import { useAppStore } from '@/store/app.ts'
import { useAuthStore } from '@/store/auth'
import { useFoodStore } from '@/store/food.ts'
import { useRouter } from 'vue-router'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
const userStore = useUserStore()
const authStore = useAuthStore()
const appStore = useAppStore()
const foodStore = useFoodStore()
const router = useRouter()
const activeName = ref('basic')
onMounted(() => {
userStore.queryUser(userStore.getUserId() as number)
})
@@ -89,6 +108,16 @@ const passwordClick = () => {
// router.push('/mobile-home/profile/password')
}
const handleClick = async (tab: TabsPaneContext) => {
switch (tab.paneName) {
case 'moment':
await foodStore.queryMoment(userStore.getUserId())
break
default:
break
}
}
const refreshClick = async () => {
await router.push('/')
location.reload()