shop-web/src/pages/me/index.vue

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useWxStore } from '@/pinia/stores/wx'
import { computed } from 'vue'

const router = useRouter()
const wxStore = useWxStore()
const balance = computed(() => wxStore.balance)
</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="/img/1.jpg"
              class="mr-4"
            />
            <div>
              <div class="text-lg font-bold mb-2">{{ '' }}</div>
              <van-tag type="primary" class="mr-2">{{ 20 }}岁</van-tag>
              <van-tag type="success">{{ '男' }}</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 [
          { 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>
    
    <!-- 余额区域 -->
    <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>
    
    <!-- 个人中心按钮 -->
    <van-cell-group>
      <van-cell title="订单列表" is-link @click="router.push('/order-list')" />
    </van-cell-group>
  </div>
</template>

<style scoped>
/* 移除了已迁移到组件的样式 */
</style>