qiming/qiming-mobile/subpackages/pages/about-me/about-me.uvue

<template>
  <view class="about-me-container">
    <!-- 顶部导航栏 -->
    <custom-nav-bar :title="t('Mobile.Profile.title')">
      <template v-slot:left>
        <view class="header-icon-box" @tap="jumpNavigateBack">
          <text class="iconfont icon-a-Chevronleft"></text>
        </view>
      </template>
    </custom-nav-bar>
    <view class="header">
      <view class="avatar-box">
        <image
          :src="currentAvatar"
          mode="aspectFill"
          class="avatar-image"
          :alt="t('Mobile.Common.avatarAlt')"
          @error="handleImageError"
        />
      </view>
      <text class="user-name">{{ userInfo?.nickName }}</text>
    </view>
    <view class="user-info-box">
      <view class="info-section">
        <text class="label">{{ t("Mobile.Profile.userName") }}</text>
        <text class="value text-ellipsis">{{ userInfo?.userName }}</text>
      </view>
      <view class="info-section">
        <text class="label">{{ t("Mobile.Profile.phone") }}</text>
        <text class="value">{{ userInfo?.phone }}</text>
      </view>
      <view class="info-section">
        <text class="label">{{ t("Mobile.Profile.email") }}</text>
        <text class="value">{{
          userInfo?.email || t("Mobile.Profile.pendingBind")
        }}</text>
      </view>
      <!-- 语言切换 -->
      <LanguagePicker />
      <view class="info-section" v-if="dynamicCode">
        <text class="label">{{
          t("Mobile.Profile.dynamicCodeExpire", {
            expire: dynamicCodeExpire,
          })
        }}</text>
        <text class="value">{{ dynamicCode }}</text>
      </view>
      <view class="info-section">
        <text class="label">{{ t("Mobile.Profile.version") }}</text>
        <text class="value">{{ VERSION }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">
  import { SUCCESS_CODE } from "@/constants/codes.constants.uts";
  import { apiUserInfo, apiUserDynamicCode } from "@/servers/account";
  import type { UserInfo } from "@/types/interfaces/login";
  import defaultAvatar from "@/static/assets/avatar.png";
  import { jumpNavigateBack } from "@/utils/common";
  import { VERSION } from "@/constants/config";
  import { setCurrentPageNavigationBarTitle } from "@/utils/system.uts";
  import { useI18n } from "@/utils/i18n";
  import LanguagePicker from "./language-picker/language-picker.uvue";

  const { t, ensureLangList } = useI18n();

  // 用户信息
  const userInfo = ref<UserInfo>(null);

  // 动态认证码
  const dynamicCode = ref("");
  // 动态认证码过期时间
  const dynamicCodeExpire = ref("");

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

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

  // 查询当前登录用户信息
  const fetchUserInfo = async () => {
    const res = await apiUserInfo();
    const { code, data } = res || {};
    if (code === SUCCESS_CODE) {
      userInfo.value = data;
      currentAvatar.value = data?.avatar || defaultAvatar;
    }
  };

  // 格式化日期
  const formatDate = (date: Date): string => {
    const pad = (n: number) => (n < 10 ? `0${n}` : n);
    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
  };

  // 获取动态认证码
  const fetchDynamicCode = async () => {
    try {
      const res = await apiUserDynamicCode();
      if (res.code === SUCCESS_CODE) {
        dynamicCode.value = res.data || "";
        // 过期时间为当前时间 + 5分钟
        const expireTime = new Date(Date.now() + 5 * 60 * 1000);
        dynamicCodeExpire.value = formatDate(expireTime);
      }
    } catch (e) {
      console.error("获取动态认证码失败", e);
    }
  };

  onLoad(() => {
    fetchUserInfo();
    fetchDynamicCode();
    // 确保语言列表已加载，供 H5 端的语言切换功能使用
    ensureLangList();
    // 设置当前页面导航栏标题
    setCurrentPageNavigationBarTitle();
  });
</script>

<style lang="scss" scoped>
  .about-me-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f9f9f9;

    .header-icon-box {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 56rpx;
      height: 56rpx;

      .iconfont {
        font-size: 32rpx;
        color: #666;
      }
    }
  }

  .header {
    height: 400rpx;
    background-color: #fff;
    opacity: 0.8;
    border-radius: 0 0 20rpx 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
      180deg,
      rgb(150, 136, 230) 0%,
      rgb(164, 170, 232) 100%
    );
    gap: 30rpx;

    .avatar-box {
      background-color: white;
      border-radius: 50%;
      width: 160rpx;
      height: 160rpx;
      overflow: hidden;

      .avatar-image {
        width: 100%;
        height: 100%;
      }
    }

    .user-name {
      font-size: 32rpx;
      font-weight: 600;
      color: #fff;
    }
  }

  .user-info-box {
    margin-top: 20rpx;
    background-color: #fff;
    padding: 0 30rpx;

    .info-section {
      height: 80rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      gap: 30rpx;
      font-size: 28rpx;
      color: #333;
      border-bottom: 1rpx solid rgba(12, 20, 102, 0.04);

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

      .label {
        font-size: 24rpx;
      }

      .value {
        flex: 1;
        text-align: right;
        font-size: 24rpx;
        color: #666;
      }
    }
  }
</style>