health-mp/src/pages/user/index.vue

<template>
  <wd-config-provider :theme-vars="getTheme(appStore.themeColor)">
    <view class="min-h-screen bg-[#f2f4f3] pb-10">
      <wd-card title="个人信息" type="rectangle">
        <view class="flex items-center gap-4">
          <wd-avatar :text="profile.name ? profile.name.charAt(0).toUpperCase() : '我'"
                     :bg-color="getThemePrimaryColor[appStore.themeColor]" />

          <view class="flex flex-col">
            <text class="text-lg text-gray-800 font-semibold">
              {{ profile.name || '未设置姓名' }}
            </text>
            <text class="mt-0.5 text-xs text-gray-400">
              {{ genderText }} · {{ profile.height ? `${profile.height} cm` : '身高未填' }}
            </text>
          </view>
          <view class="ml-auto">
            <wd-button size="small" plain type="primary" @click="openProfile">
              编辑
            </wd-button>
          </view>
        </view>
      </wd-card>

      <wd-card title="积分成就" type="rectangle">
        <view class="flex items-center justify-between">
          <view class="mt-2 space-y-1 text-gray-600">
            <view>✨ 当前积分：{{ appStore.points }}分</view>
            <view>📊 记录次数：{{ appStore.recordCount }}次</view>
            <view>🏆 当前成就：{{ appStore.achievement }}</view>
          </view>

          <wd-button size="small" plain type="primary" @click="openPointPopup">
            查看说明
          </wd-button>
        </view>

        <view class="mt-2 text-xs text-gray-400">
          坚持记录健康数据，解锁更多成就
        </view>
      </wd-card>

      <wd-cell-group>
        <wd-cell size="large" title="记录默认值" is-link @click="openDefaultPopup"/>
        <wd-cell size="large" title="今日概览" is-link @click="openOverviewPopup"/>
        <wd-cell size="large" title="今日计划" is-link @click="openPlanPopup"/>
        <wd-cell size="large" title="数据统计" is-link @click="openStatsPopup"/>
        <wd-cell size="large" title="主题色" is-link @click="openThemePopup"/>
        <wd-cell size="large" title="存储详情" is-link @click="openStoragePopup"/>
        <wd-cell size="large" title="关于我们" is-link @click="openAboutPopup"/>
      </wd-cell-group>

      <wd-text :text="`版本号：${appStore.version}`" custom-style="margin-top: 5px;display:block; text-align:center;"></wd-text>

      <profile-popup />

      <storage-popup />

      <overview-popup />

      <plan-popup />

      <stats-popup />

      <default-popup />

      <point-popup />

      <theme-popup />
      <about-popup />
    </view>
  </wd-config-provider>
</template>

<script lang="ts" setup>
import ProfilePopup from "@/components/Profile/ProfilePopup.vue";
import StoragePopup from "@/components/Profile/StoragePopup.vue";
import OverviewPopup from "@/components/Profile/OverviewPopup.vue";
import PlanPopup from "@/components/Profile/PlanPopup.vue";
import { computed, ref, watch } from 'vue'
import { getDefaultRecordValue, getOverview, getPlan, getProfile, getStats } from '@/utils/profile'
import { useProfileStore } from '@/store/profile'
import { useAppStore } from "@/store/app";
import type { IProfile } from "@/type/profile";
import DefaultPopup from "@/components/Profile/DefaultPopup.vue";
import { getAchievement, getPoints, getRecordCount } from "@/utils/points";
import { onShow } from "@dcloudio/uni-app";
import PointPopup from "@/components/Profile/PointPopup.vue";
import StatsPopup from "@/components/Profile/StatsPopup.vue";
import { getTheme, getThemePrimaryColor } from "@/utils/themes";
import ThemePopup from "@/components/Profile/ThemePopup.vue";
import AboutPopup from "@/components/Profile/AboutPopup.vue";
import { share } from '@/utils/share'

const { onShareAppMessage } = share()
onShareAppMessage()

const profileStore = useProfileStore()
const appStore = useAppStore()

const profile = ref<IProfile>(getProfile())

const genderText = computed(() => {
  if (profile.value.gender === 'male')
    return '男'
  if (profile.value.gender === 'female')
    return '女'

  return '性别未填'
})

onShow(() => {
  appStore.points = getPoints()
  appStore.recordCount = getRecordCount()
  appStore.achievement = getAchievement()
})

watch(() => profileStore.isRefresh, () => {
  profile.value = getProfile()
})

function openProfile() {
  Object.assign(profileStore.profileForm, profile.value)

  profileStore.showProfilePopup = true
}

function openDefaultPopup() {
  profileStore.defaultRecordValueForm = getDefaultRecordValue()
  profileStore.showDefaultRecordValuePopup = true
}

function openOverviewPopup() {
  profileStore.overviewList = getOverview()
  profileStore.showOverviewPopup = true
}

function openPlanPopup() {
  profileStore.planList = getPlan()
  profileStore.showPlanPopup = true
}

function openStatsPopup() {
  profileStore.statsList = getStats()
  profileStore.showStatsPopup = true
}

function openThemePopup() {
  profileStore.showThemePopup = true
}

function openStoragePopup() {
  profileStore.refreshStorage()
  profileStore.showStoragePopup = true
}

function openAboutPopup() {
  profileStore.showAboutPopup = true
}

function openPointPopup() {
  profileStore.showPointPopup = true
}
</script>