admin123
/
shop-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(me页面): 重构用户中心页面布局并添加栅格组件 

- 使用VanCol和VanRow组件重构页面布局，实现更灵活的响应式设计
- 将功能按钮区域改为flex布局，优化间距和排列
- 重做余额卡片和个人中心按钮组的样式和交互
- 添加新的自定义按钮样式，提升视觉一致性
This commit is contained in:
dzq 2025-05-27 17:26:05 +08:00
parent c7c8c0ce21
commit 5bf5fd6b0e
2 changed files with 98 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
src/pages/me/index.vue
View File

@ -33,75 +33,109 @@ const handleLogout = () => {
</script>
<template>
<div un-py-16px>
<van-cell-group class="user-card">
<van-cell :border="false">
<template #title>
<div class="flex items-center p-4">
<van-image
round
width="80"
height="80"
:src="userAvatar"
class="mr-4"
@click="handleLogout"
/>
<div>
<div class="text-lg font-bold mb-2">{{ name }}</div>
<van-tag type="primary" class="mr-2">{{ userSex }}</van-tag>
</div>
</div>
</template>
</van-cell>
</van-cell-group>
<!-- 功能按钮区域 -->
<van-grid :column-num="4" :gutter="12" class="func-buttons un-mt-20px">
<van-grid-item
v-for="(item, index) in [
<div>
<div class="user-card flex items-start p-4 bg-white rounded-lg shadow-sm">
<div class="flex items-center pl-2">
<van-image round width="40" height="40" :src="userAvatar" class="mr-3" @click="handleLogout" />
<div class="flex-1">
<div class="text-sm font-medium mb-1">{{ name }}</div>
<van-tag type="primary">{{ userSex }}</van-tag>
</div>
</div>
<!-- 功能按钮区域 -->
<div class="func-buttons flex flex-wrap justify-between">
<div v-for="(item, index) in [
{ icon: 'idcard', text: '身份证', color: 'transparent' },
{ icon: 'phone-o', text: '手机号', color: 'transparent' },
{ icon: 'wechat', text: '微信', color: 'transparent' },
{ icon: 'card', text: '银行卡', color: 'transparent' }
]"
:key="index"
>
<van-icon
:name="item.icon"
size="28px"
:style="{ background: item.color }"
class="un-p-8px un-rounded-full un-text-white"
/>
<div class="un-mt-8px un-text-12px un-color-hex-666">{{ item.text }}</div>
</van-grid-item>
</van-grid>
]" :key="index" class="flex flex-col items-center w-1/6 mb-12px">
<van-icon :name="item.icon" size="26px" :style="{ background: item.color }"
class="un-p-8px un-rounded-full un-text-white" />
<div class="un-mt-8px un-text-12px un-color-hex-666">{{ item.text }}</div>
</div>
</div>
</div>
<!-- 余额区域 -->
<van-cell
title="账户余额"
:value="`¥${balance}`"
class="un-mt-16px! un-rounded-8px!"
title-class="un-text-14px! un-color-hex-333!"
value-class="un-text-16px! un-fw-600! un-color-primary!"
>
<template #icon>
<van-icon
name="gold-coin"
size="20px"
class="un-mr-8px un-color-#ffb300!"
/>
</template>
</van-cell>
<div class="balance-card flex flex-wrap justify-between items-center p-4 bg-white rounded-lg shadow-sm un-mt-16px">
<van-icon name="gold-coin" size="28px" class="un-mr-8px un-color-#ffb300!" />
<div class="flex-1 ml-2">
<div class="text-sm text-gray-700">余额</div>
<div class="text-lg font-bold text-primary">{{ balance }}</div>
</div>
</div>
<!-- 个人中心按钮 -->
<van-cell-group>
<van-cell title="订单列表" is-link @click="router.push('/order-list')" />
<van-cell title="柜机管理" is-link @click="router.push('/cabinet')" v-if="wxStore.isCabinetAdmin"/>
<van-cell title="审批中心" is-link @click="router.push('/approval/list')" v-if="wxStore.isCabinetAdmin"/>
</van-cell-group>
<van-row gutter="12" class="button-group p-4 bg-white rounded-lg shadow-sm un-mt-16px">
<van-col span="24">
<div class="section-title text-sm font-bold pb-2">个人中心</div>
</van-col>
<van-col span="8">
<div class="custom-btn" @click="router.push('/order-list')">
<van-icon name="orders-o" size="20px" />
<span>订单列表</span>
</div>
</van-col>
<van-col span="8">
<div v-if="wxStore.isCabinetAdmin" class="custom-btn" @click="router.push('/cabinet')">
<van-icon name="manager-o" size="20px" />
<span>柜机管理</span>
</div>
</van-col>
<van-col span="8">
<div v-if="wxStore.isCabinetAdmin" class="custom-btn" @click="router.push('/approval/list')">
<van-icon name="comment-o" size="20px" />
<span>审批中心</span>
</div>
</van-col>
</van-row>
</div>
</template>
<style scoped>
/* 移除了已迁移到组件的样式 */
<style lang="scss" scoped>
.func-buttons {
background-color: #fff;
padding: 0px;
margin-top: 12px;
width: 100%;
}
.user-card {
margin: 12px;
flex-direction: column;
}
.balance-card {
margin: 12px;
flex-direction: row;
}
.button-group {
margin: 12px;
}
.custom-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 70px;
padding: 0;
margin: 0 0 12px;
background: #1989fa;
border: 1px solid #1989fa;
border-radius: 4px;
color: white;
cursor: pointer;
span {
margin-top: 8px;
font-size: 12px;
}
}
</style>

2
types/auto/components.d.ts vendored
View File

@ -14,6 +14,7 @@ declare module 'vue' {
VanButton: typeof import('vant/es')['Button']
VanCell: typeof import('vant/es')['Cell']
VanCellGroup: typeof import('vant/es')['CellGroup']
VanCol: typeof import('vant/es')['Col']
VanConfigProvider: typeof import('vant/es')['ConfigProvider']
VanDivider: typeof import('vant/es')['Divider']
VanField: typeof import('vant/es')['Field']
@ -27,6 +28,7 @@ declare module 'vue' {
VanNavBar: typeof import('vant/es')['NavBar']
VanPicker: typeof import('vant/es')['Picker']
VanPopup: typeof import('vant/es')['Popup']
VanRow: typeof import('vant/es')['Row']
VanSearch: typeof import('vant/es')['Search']
VanSidebar: typeof import('vant/es')['Sidebar']
VanSidebarItem: typeof import('vant/es')['SidebarItem']