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

- 使用VanCol和VanRow组件重构页面布局，实现更灵活的响应式设计
- 将功能按钮区域改为flex布局，优化间距和排列
- 重做余额卡片和个人中心按钮组的样式和交互
- 添加新的自定义按钮样式，提升视觉一致性

src/pages/me/index.vue

@@ -33,75 +33,109 @@ const handleLogout = () => {
 </script>
 
 <template>
-  <div un-py-16px>
+  <div>
-    <van-cell-group class="user-card">
+    <div class="user-card flex items-start p-4 bg-white rounded-lg shadow-sm">
-      <van-cell :border="false">
+      <div class="flex items-center pl-2">
-        <template #title>
+        <van-image round width="40" height="40" :src="userAvatar" class="mr-3" @click="handleLogout" />
-          <div class="flex items-center p-4">
+        <div class="flex-1">
-            <van-image 
+          <div class="text-sm font-medium mb-1">{{ name }}</div>
-              round
+          <van-tag type="primary">{{ userSex }}</van-tag>
-              width="80"
+        </div>
-              height="80"
+      </div>
-              :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">
+      <div class="func-buttons flex flex-wrap justify-between">
-      <van-grid-item
+        <div v-for="(item, index) in [
-        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" class="flex flex-col items-center w-1/6 mb-12px">
-        :key="index"
+          <van-icon :name="item.icon" size="26px" :style="{ background: item.color }"
-      >
+            class="un-p-8px un-rounded-full un-text-white" />
-        <van-icon 
+          <div class="un-mt-8px un-text-12px un-color-hex-666">{{ item.text }}</div>
-          :name="item.icon" 
+        </div>
-          size="28px" 
+      </div>
-          :style="{ background: item.color }"
+    </div>
-          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>
 
     <!-- 余额区域 -->
-    <van-cell 
+    <div class="balance-card flex flex-wrap justify-between items-center p-4 bg-white rounded-lg shadow-sm un-mt-16px">
-      title="账户余额"
+      <van-icon name="gold-coin" size="28px" class="un-mr-8px un-color-#ffb300!" />
-      :value="`¥${balance}`"
+      <div class="flex-1 ml-2">
-      class="un-mt-16px! un-rounded-8px!"
+        <div class="text-sm text-gray-700">余额</div>
-      title-class="un-text-14px! un-color-hex-333!"
+        <div class="text-lg font-bold text-primary">{{ balance }}</div>
-      value-class="un-text-16px! un-fw-600! un-color-primary!"
+      </div>
-    >
+    </div>
-      <template #icon>
-        <van-icon 
-          name="gold-coin" 
-          size="20px" 
-          class="un-mr-8px un-color-#ffb300!"
-        />
-      </template>
-    </van-cell>
 
     <!-- 个人中心按钮 -->
-    <van-cell-group>
+    <van-row gutter="12" class="button-group p-4 bg-white rounded-lg shadow-sm un-mt-16px">
-      <van-cell title="订单列表" is-link @click="router.push('/order-list')" />
+      <van-col span="24">
-      <van-cell title="柜机管理" is-link @click="router.push('/cabinet')" v-if="wxStore.isCabinetAdmin"/>
+        <div class="section-title text-sm font-bold pb-2">个人中心</div>
-      <van-cell title="审批中心" is-link @click="router.push('/approval/list')" v-if="wxStore.isCabinetAdmin"/>
+      </van-col>
-    </van-cell-group>
+      <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>

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']