qiming/qiming-mobile/pages/index/header-menu/header-menu.uvue

<template>
  <x-dropdown v-if="userInfo" ref="dropdown" @open="checkSubscriptionEnable">
    <view class="trigger">
      <image
        :src="currentAvatar"
        mode="aspectFill"
        class="avatar"
        :alt="t('Mobile.Common.avatarAlt')"
        @error="handleImageError"
      />
      <text class="iconfont icon-a-Chevrondown icon-down"></text>
    </view>

    <template #menu>
      <view class="custom-menu-wrapper">
        <view class="custom-menu">
          <view class="flex flex-col user-info-box">
            <!-- 用户名 -->
            <text class="user-label text-ellipsis">{{
              userInfo.nickName || userInfo.userName
            }}</text>
            <!-- 手机号或邮箱 -->
            <text class="user-name text-ellipsis">{{
              userInfo.phone || userInfo.email
            }}</text>
          </view>

          <!-- 我的订阅 -->
          <view
            v-if="isSubscriptionEnabled"
            class="custom-menu-item"
            hover-class="custom-menu-item-active"
            @click="handleMySubscriptions"
          >
            <text class="iconfont icon-stars"></text>
            <text class="menu-text">{{
              t("Mobile.Header.mySubscriptions")
            }}</text>
          </view>

          <!-- 个人资料 -->
          <view
            class="custom-menu-item"
            hover-class="custom-menu-item-active"
            @click="handlePersonalInfo"
          >
            <text class="iconfont icon-User"></text>
            <text class="menu-text">{{ t("Mobile.Header.profile") }}</text>
          </view>

          <!-- 退出登录 -->
          <view
            class="custom-menu-item"
            hover-class="custom-menu-item-active"
            @click="handleLogout"
          >
            <text class="iconfont icon-Exit"></text>
            <text class="menu-text">{{ t("Mobile.Header.logout") }}</text>
          </view>
        </view>
      </view>
    </template>
  </x-dropdown>
</template>

<script setup lang="uts">
  import type { MenuListItem } from "@/types/interfaces/common";
  import type { UserInfo, TenantConfigInfo } from "@/types/interfaces/login";
  import { SUCCESS_CODE } from "@/constants/codes.constants.uts";
  import { apiLogout, apiTenantConfig } from "@/servers/account";
  import defaultAvatar from "@/static/assets/avatar.png";
  import { ACCESS_TOKEN, TENANT_CONFIG_INFO } from "@/constants/home.constants";
  import { useI18n } from "@/utils/i18n";

  const { t, loadI18n } = useI18n();

  interface Props {
    userInfo: UserInfo;
  }

  // 接收组件属性，设置默认值
  const props = withDefaults(defineProps<Props>(), {
    userInfo: null,
  });

  // 当前显示的头像，默认使用传入的 avatar
  const currentAvatar = ref<string>(defaultAvatar);

  // 新增 ref
  const dropdown = ref<any>(null);

  // 是否开启订阅
  const isSubscriptionEnabled = ref<boolean>(false);

  const checkSubscriptionEnable = async () => {
    const tenantConfigInfoString = uni.getStorageSync(TENANT_CONFIG_INFO);
    if (tenantConfigInfoString) {
      try {
        const tenantConfig = JSON.parse(
          tenantConfigInfoString,
        ) as TenantConfigInfo;
        isSubscriptionEnabled.value = tenantConfig.enableSubscription === 1;
      } catch (error) {
        console.error("解析租户配置失败:", error);
      }
    }

    try {
      const res = await apiTenantConfig();
      if (res.code === SUCCESS_CODE && res.data != null) {
        const latestConfig = res.data!;
        isSubscriptionEnabled.value = latestConfig.enableSubscription === 1;
        uni.setStorageSync(TENANT_CONFIG_INFO, JSON.stringify(latestConfig));
      }
    } catch (e) {
      console.error("同步最新租户配置失败:", e);
    }
  };

  // 监听 userInfo 变化，更新当前头像和订阅状态
  watch(
    () => props.userInfo,
    (newUserInfo) => {
      currentAvatar.value = newUserInfo?.avatar || defaultAvatar;
      checkSubscriptionEnable();
    },
    { immediate: true },
  );

  const handlePersonalInfo = () => {
    uni.navigateTo({
      url: "/subpackages/pages/about-me/about-me",
    });
  };

  const handleMySubscriptions = () => {
    uni.navigateTo({
      url: "/subpackages/pages/my-subscriptions/my-subscriptions",
    });
  };

  // 图片加载错误时触发，切换为默认图片
  const handleImageError = () => {
    currentAvatar.value = defaultAvatar;
  };

  // 退出登录
  const handleLogout = async () => {
    try {
      const result = await apiLogout();
      if (result.code === SUCCESS_CODE) {
        uni.showToast({
          title: t("Mobile.Header.logoutSuccess"),
          icon: "success",
        });
        setTimeout(() => {
          uni.setStorageSync(ACCESS_TOKEN, ""); // 清空token【兼容鸿蒙系统】
          uni.clearStorageSync(); // 清空所有缓存
          globalThis.appConfig.redirectUrl = null;
          // 获取一次语言
          loadI18n(false);

          // #ifdef H5 || WEB
          uni.reLaunch({ url: "/subpackages/pages/login/login" });
          // #endif

          // #ifdef MP-WEIXIN
          uni.reLaunch({ url: "/subpackages/pages/login-weixin/login-weixin" });
          // #endif
        }, 1000);
      }
    } catch (error) {
      uni.showToast({
        title: t("Mobile.Header.logoutFailed"),
        icon: "none",
      });
    }
  };

  // 暴露关闭方法
  defineExpose({
    closeDropdown: () => {
      if (dropdown.value) {
        dropdown.value.close();
      }
    },
  });
</script>

<style lang="scss" scoped>
  .trigger {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8rpx;
    padding: 8rpx 16rpx;

    .avatar {
      width: 56rpx;
      height: 56rpx;
      border-radius: 50%;
    }

    .icon-down {
      font-size: 28rpx;
      color: #666;
    }
  }

  .custom-menu-wrapper {
    .custom-menu {
      width: 320rpx;
      background: #ffffff;
      border-radius: 16rpx;
      border: 2rpx solid rgba(81, 71, 255, 0.1);
      overflow: hidden;

      .user-info-box {
        gap: 12rpx;
        padding: 28rpx 20rpx 20rpx 20rpx;
        border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);

        .user-label {
          font-size: 32rpx;
          font-weight: 600;
          color: #333;
        }

        .user-name {
          font-size: 26rpx;
          color: #666;
        }
      }

      .custom-menu-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 24rpx 20rpx;
        gap: 12rpx;
        border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
        transition: background-color 0.2s ease;

        &-active {
          background: rgba(81, 71, 255, 0.05);
        }

        &:last-child {
          border-bottom: none;
        }

        .iconfont {
          font-size: 32rpx;
        }

        .menu-text {
          flex: 1;
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
</style>