ieplus-app/src/pagesMain/pages/me/components/me-menu.vue

<template>
  <view class="">
    <view class="mx-30">
      <view class="mt-40 text-30 text-fore-title font-bold mb-16">常用功能</view>
      <view class="shadow-card rounded-8 py-20 grid grid-cols-4 bg-white">
        <view v-for="item in menus" :key="item.name" class="flex flex-col items-center" @click="handleClick(item)">
          <ie-image :src="item.icon" custom-class="w-70 h-70 rounded-full" />
          <view class="mt-10 text-28 text-fore-subtitle">{{ item.name }}</view>
        </view>
      </view>
      <view class="mt-40 text-30 text-fore-title font-bold">其他功能</view>
      <view class="mt-16 shadow-card rounded-8 bg-white overflow-hidden">
        <uv-cell-group :border="false">
          <uv-cell isLink :cellStyle="cellStyle"
            @click="handleNavigate('/pagesSystem/pages/edit-profile/edit-profile', '基本资料')">
            <template #title>
              <view class="flex items-center gap-x-10">
                <ie-image src="/static/personal/icon-profile.png" custom-class="w-34 h-34" />
                <text class="text-30 text-fore-subtitle">基本资料</text>
              </view>
            </template>
          </uv-cell>
          <uv-cell isLink :cellStyle="cellStyle" @click="handleQuestion" :border="true">
            <template #title>
              <view class="flex items-center gap-x-10">
                <uv-icon name="question-circle" size="32rpx" color="#888888" />
                <text class="text-30 text-fore-subtitle">常见问题</text>
              </view>
            </template>
          </uv-cell>
          <uv-cell isLink :cellStyle="cellStyle" @click="handlePhone" :border="false">
            <template #title>
              <view class="flex items-center gap-x-10">
                <uv-icon name="phone" size="34rpx" color="#888888" />
                <text class="text-30 text-fore-subtitle">客服电话</text>
              </view>
            </template>
            <template #value>
              <text class="text-30 text-fore-subtitle">{{ contactPhone }}</text>
            </template>
          </uv-cell>
        </uv-cell-group>
      </view>
    </view>
    <view v-if="userStore.isLogin" class="mt-80 mb-40 px-30">
      <ie-button type="primary" custom-class="w-full" @click="handleLogout">退出登陆</ie-button>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { useTransferPage } from '@/hooks/useTransferPage';
import { useUserStore } from '@/store/userStore';
import config from '@/config';

const { transferTo, routes } = useTransferPage();
const userStore = useUserStore();

const contactPhone = computed(() => userStore.orgInfo.contactPhone);

type MenuItem = {
  name: string;
  icon: string;
  pagePath: string;
};

const menus = [
  {
    name: '测评报告',
    icon: '/static/personal/test_report.png',
    pagePath: '/pagesOther/pages/test-center/list/list',
  },
  {
    name: '我的收藏',
    icon: '/static/personal/my_collected.png',
    pagePath: routes.pageCollect,
  },
  {
    name: '我的志愿表',
    icon: '/static/personal/my_simulated.png',
    pagePath: routes.voluntaryList,
  },
  {
    name: '绑定会员卡',
    icon: '/static/personal/bind_card.png',
    pagePath: routes.pageCardVerify,
  }
];
const cellStyle = {
  padding: '30rpx 30rpx'
}
const handleClick = async (item: MenuItem) => {
  const isLogin = await userStore.checkLogin();
  if (isLogin) {
    if (item.name === '绑定会员卡' && userStore.isVip) {
      uni.$ie.showToast('您已是会员');
      return;
    }
    transferTo(item.pagePath);
  }
}
const handleNavigate = async (pagePath: string, title: string) => {
  const isLogin = await userStore.checkLogin();
  if (isLogin) {
    transferTo(pagePath, {
      data: {
        settingName: title
      }
    });
  }
}
const handleQuestion = async () => {
  transferTo(routes.pageWebview, {
    data: {
      title: '常见问题',
      url: config.faqUrl
    }
  });
}
const handleLogout = async () => {
  const confirm = await userStore.askLogout();
  if (confirm) {

  }
}
const handlePhone = async () => {
  userStore.callContactPhone();
}
</script>
<style lang="scss" scoped></style>