From 5bf5fd6b0e9ccfae0bdf9e8ee70b78372f0b2778 Mon Sep 17 00:00:00 2001
From: dzq <dzq@ys.com>
Date: Tue, 27 May 2025 17:26:05 +0800
Subject: [PATCH] =?UTF-8?q?feat(me=E9=A1=B5=E9=9D=A2):=20=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84=E7=94=A8=E6=88=B7=E4=B8=AD=E5=BF=83=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E5=B9=B6=E6=B7=BB=E5=8A=A0=E6=A0=85=E6=A0=BC?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用VanCol和VanRow组件重构页面布局，实现更灵活的响应式设计
- 将功能按钮区域改为flex布局，优化间距和排列
- 重做余额卡片和个人中心按钮组的样式和交互
- 添加新的自定义按钮样式，提升视觉一致性
---
 src/pages/me/index.vue     | 158 ++++++++++++++++++++++---------------
 types/auto/components.d.ts |   2 +
 2 files changed, 98 insertions(+), 62 deletions(-)

diff --git a/src/pages/me/index.vue b/src/pages/me/index.vue
index ea67f41..4d2f6b6 100644
--- a/src/pages/me/index.vue
+++ b/src/pages/me/index.vue
@@ -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>
diff --git a/types/auto/components.d.ts b/types/auto/components.d.ts
index ae7f7b0..7767bc2 100644
--- a/types/auto/components.d.ts
+++ b/types/auto/components.d.ts
@@ -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']