wallet_app/src/views/me/index.vue

<template>
  <div class="container">
    <div class="head-bg"/>
    <div class="head-body">
      <div class="user-info-body">
        <van-image
          width="46px"
          height="46px"
          fit="cover"
          round
          :src="walletStore.avatar"
        />
        <div class="user-info">
          <div class="user-info-name">{{ walletStore.username  }}</div>
          <div class="user-info-key-body">
            <span>{{ formatAddress(walletStore.account) }}</span>
            <svg-icon style="width: 24px; height: 24px;" name="copy" />
          </div>
        </div>
      </div>

      <van-row justify="end" class="user-info-row">
        <van-col span="6"  >
          <div class="user-bar-icon-box">
            <svg-icon class="user-bar-icon"  name="address-book" @click="goToaPage('meAddressManagement')"/> 
            <span class="user-info-text">地址薄</span> 
          </div>
        </van-col>
        <van-col span="6">
          <div class="user-bar-icon-box">
            <svg-icon class="user-bar-icon"  name="bar-url" @click="goToaPage('download')"/> 
            <span class="user-info-text">下载链接</span> 
          </div>
        </van-col>
        <van-col span="6">
          <div class="user-bar-icon-box" @click="goToaPage('walletManagement')">
            <svg-icon class="user-bar-icon"  name="wallet"/> 
            <span class="user-info-text">钱包管理</span> 
          </div>
        </van-col>
        <van-col span="6">
          <div class="user-bar-icon-box" @click="goToaPage('personalInformation')">
            <svg-icon class="user-bar-icon"  name="id-card"/> 
            <span class="user-info-text">个人资料</span> 
          </div>
        </van-col>
      </van-row>
    </div>

    <!-- 用户索引栏 -->
    <van-list class="user-bar-list">
      <van-cell 
        v-for="(item, index) in filteredVanList" 
        :key="index" 
        :class="index == filteredVanList.length - 1 ? 'user-bar-list-last' : ''"
        :title="item.title"
        is-link
        @click="evGoPath(item.url)"
      > 
        <template #icon>
          <svg-icon  class="cell-icon" :name="item.icon" />
        </template> 
      </van-cell> 
    </van-list>
  </div>
</template>

<script setup> 
import { useSystemStore } from "@/stores/modules/systemStore"
import { useWalletStore } from "@/stores/modules/walletStore";
const systemStore = useSystemStore();
const walletStore = useWalletStore();
const router = useRouter();

const vanListConfig = [
  { title: '元宝兑换', icon:"ingot",  url: 'exchange',status:true },
  { title: '竞赛', icon:"competition",  url: '/',status:true },
  { title: '节点分红', icon:"red-envelope",  url: 'nodeDividend',status:systemStore.Administrator.is_white },
  // { title: '帮助中心', icon:"help",  url: '/' },
  { title: $t('router.AboutUs'), icon:"me",  url: 'aboutUs',status:true },
  { title: '系统设置', icon:"set",  url: 'systemSettings',status:true },
  { title: '管理员设置', icon:"admin-set",  url: 'administratorSettings',status:systemStore.Administrator.is_super },
]
const filteredVanList = computed(() => {
  return vanListConfig.filter(item => item.status !== false);
});
const formatAddress = (address) => {
  if (!address) return '';
  return address.slice(0, 8) + '...' + address.slice(-6);
};
const evGoPath = (path)=>{
  router.push(path)
}
const goToaPage = (url) => {
  router.push(url)
}
</script>

<style lang="less" scoped>

.head-bg {
  .fn-head-bg()
}
.head-body {
  width: 100%;
  display: flex;
  flex-direction: column;
 
  .user-info-body {
    flex: 1;
    display: flex;
    padding: 44px 17px 0 17px;
    .user-info {
      margin-left: 17px;
      .user-info-name {
        font-size: 1.1rem;
        font-weight: 500;
        color: @theme-color1;
      }
      .user-info-key-body{
        display: flex;
        align-items: center; 
        font-weight: 400;
        font-size: 12px;
        color: @font-color2; 
        span { 
          margin-top: 4px;
          margin-right: 4px;
        }
      }
    }
  }
  .user-info-row {
    margin: 27px 17px 0 17px;
    height: 78px;
    min-height: 78px;
    background: @bg-color1;
    box-shadow: 0px 4px 8px -2px rgba(25, 75, 137, 0.25);
    border-radius: 17px 17px 17px 17px;
  }
  .user-bar-icon-box{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .user-bar-icon{
      width: 25px;
      height: 25px;
    }
    .user-info-text{
      font-weight: 400;
      font-size: 12px;
      color: #000000;
      margin-top: 5px;
    }
  }
}
.van-cell{
  height: 42px;
  background: @bg-color1;
  border-bottom: 1px solid @bg-color1;
  font-size: 15px ;
  &::after{
    border-bottom: 1px solid #F2F2F2;
  }
}
.user-bar-list-last::after{
  border-bottom: 0;
}

.user-bar-list{
  margin: 37px 17px 0 17px;
  border-radius: 12px 12px 12px 12px;
  overflow: hidden; 

  .cell-icon{
    width: 21px;
    height: 21px;
    margin-right: 4px;
  }
}
</style>