991 lines
46 KiB
Vue
991 lines
46 KiB
Vue
<template>
|
||
<scroll-view scroll-y class="scroll-container theme-light">
|
||
<view class="member-page">
|
||
<!-- Header: 用户信息区 -->
|
||
<view class="profile-header">
|
||
<!-- 使用公共页面头部，背景色 #F5F7FA -->
|
||
<view class="member-center-page-header">
|
||
<PageHeader title="个人中心" subtitle="" />
|
||
</view>
|
||
<view class="profile-card" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="goUserInfo">
|
||
<view class="profile-card__main">
|
||
<view class="profile-avatar">
|
||
<image
|
||
class="profile-avatar__img"
|
||
:key="userInfo.avatar"
|
||
:src="displayAvatar"
|
||
mode="aspectFill"
|
||
/>
|
||
</view>
|
||
<view class="profile-info">
|
||
<view class="profile-info__row">
|
||
<text class="profile-info__name">{{ userInfo.name }}</text>
|
||
<view class="profile-info__badge">
|
||
<image class="profile-info__badge-icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/crown0.png" mode="aspectFit" />
|
||
<text class="profile-info__level">{{ userInfo.memberLevel }}</text>
|
||
</view>
|
||
</view>
|
||
<text class="profile-info__phone">{{ userInfo.phone }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="profile-card__stats">
|
||
<view class="profile-stat">
|
||
<text class="profile-stat__value">{{ stats.checkInCount ?? 0 }}</text>
|
||
<text class="profile-stat__label">累计签到</text>
|
||
</view>
|
||
<view class="profile-stat">
|
||
<text class="profile-stat__value">{{ stats.courseCount ?? 0 }}</text>
|
||
<text class="profile-stat__label">报课次数</text>
|
||
</view>
|
||
<view class="profile-stat">
|
||
<text class="profile-stat__value">{{ stats.pointsBalance ?? 0 }}</text>
|
||
<text class="profile-stat__label">累计积分</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="member-page__body">
|
||
<view class="member-page__sections">
|
||
<!-- 快过期会员卡提醒 -->
|
||
<view class="expiring-cards-section" v-if="expiringCards.length > 0">
|
||
<view class="expiring-cards__inner">
|
||
<view class="expiring-cards__header">
|
||
<view class="expiring-cards__header-inner">
|
||
<view class="expiring-cards__title-row">
|
||
<image class="expiring-cards__warn-icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/clock1.png" mode="aspectFit" />
|
||
<text class="expiring-cards__title">会员卡即将到期</text>
|
||
</view>
|
||
<view class="expiring-cards__link" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="goMemberCard">
|
||
<text class="expiring-cards__link-text">查看全部</text>
|
||
<image class="expiring-cards__link-arrow" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright12.png" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="expiring-cards__list">
|
||
<view
|
||
v-for="(card, index) in expiringCards"
|
||
:key="card.id || index"
|
||
class="expiring-card-item"
|
||
hover-class="mi-tap-row--hover"
|
||
:hover-stay-time="150"
|
||
@tap="goMemberCard"
|
||
>
|
||
<view class="expiring-card-item__inner">
|
||
<view class="expiring-card-item__icon-wrap">
|
||
<image class="expiring-card-item__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/ticket.png" mode="aspectFit" />
|
||
</view>
|
||
<view class="expiring-card-item__info">
|
||
<text class="expiring-card-item__name">{{ card.name }}</text>
|
||
<text class="expiring-card-item__validity">{{ card.validity }}</text>
|
||
</view>
|
||
<view class="expiring-card-item__days">
|
||
<text class="expiring-card-item__days-num">{{ computeRemainingDays(card.validityEnd) }}</text>
|
||
<text class="expiring-card-item__days-unit">天后到期</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 会员卡区域 -->
|
||
<view class="member-card-section">
|
||
<view class="member-card-section__inner">
|
||
<view class="member-card-section__head">
|
||
<view class="member-card-section__head-inner">
|
||
<text class="member-card-section__title">我的会员卡</text>
|
||
<view class="member-card-section__link" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="goMemberCard">
|
||
<text class="member-card-section__link-text">查看全部</text>
|
||
<image class="member-card-section__link-arrow" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright12.png" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="member-card-preview" hover-class="mi-tap-card--hover" :hover-stay-time="150" @tap="goMemberCard">
|
||
<view class="member-card-preview__inner">
|
||
<view class="member-card-preview__head">
|
||
<view class="member-card-preview__head-inner">
|
||
<view class="member-card-preview__type-row">
|
||
<view class="member-card-preview__icon-wrap">
|
||
<view class="member-card-preview__icon-border">
|
||
<view class="member-card-preview__icon-bg"></view>
|
||
<view class="member-card-preview__icon-stroke"></view>
|
||
</view>
|
||
<image class="member-card-preview__icon-line" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Line_2_468.png" mode="aspectFill" />
|
||
</view>
|
||
<text class="member-card-preview__name">{{ cardInfo.name }}</text>
|
||
</view>
|
||
<view class="member-card-preview__tag">
|
||
<text class="member-card-preview__tag-text">{{ cardInfo.detailTag || '详情' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<text class="member-card-preview__expire">{{ cardInfo.expireDate }}</text>
|
||
<view class="member-card-preview__footer">
|
||
<view class="member-card-preview__footer-inner">
|
||
<view class="member-card-preview__days">
|
||
<text class="member-card-preview__days-num">{{ cardInfo.remainingDays }}</text>
|
||
<text class="member-card-preview__days-unit">天剩余</text>
|
||
</view>
|
||
<view class="member-card-preview__renew" hover-class="mi-tap-btn--hover" :hover-stay-time="150" @tap.stop="onRenewCard">
|
||
<text class="member-card-preview__renew-text">续费</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="member-card-tip">
|
||
<view class="member-card-tip__inner">
|
||
<view class="member-card-tip__content">
|
||
<image class="member-card-tip__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/clock1.png" mode="aspectFit" />
|
||
<text class="member-card-tip__text">{{ cardInfo.tip }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="member-card-tip__border"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 快捷操作区域 -->
|
||
<view class="quick-actions">
|
||
<view class="quick-actions__inner">
|
||
<view class="quick-actions__grid">
|
||
<view class="quick-actions__grid-inner">
|
||
<view v-for="item in quickActionsRow1" :key="item.key" class="quick-actions__item" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="onQuickAction(item.key)">
|
||
<view class="quick-actions__item-inner">
|
||
<view class="quick-actions__icon-wrap">
|
||
<view class="quick-actions__icon-wrap-inner">
|
||
<view v-if="item.key === 'booking'" class="quick-actions__icon">
|
||
<image class="quick-actions__icon-part" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Vector_2_490.png" mode="aspectFit" />
|
||
<image class="quick-actions__icon-part" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Vector_2_491.png" mode="aspectFit" />
|
||
<view class="quick-actions__border-wrap">
|
||
<view class="quick-actions__rect"></view>
|
||
<view class="quick-actions__border"></view>
|
||
</view>
|
||
<image class="quick-actions__icon-part" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Vector_2_493.png" mode="aspectFit" />
|
||
<image class="quick-actions__icon-part" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Vector_2_494.png" mode="aspectFit" />
|
||
</view>
|
||
<image v-else class="quick-actions__icon-img" :src="item.icon" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
<text :class="item.textClass">{{ item.label }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="quick-actions__divider"></view>
|
||
<view class="quick-actions__grid">
|
||
<view class="quick-actions__grid-inner">
|
||
<view v-for="item in quickActionsRow2" :key="item.key" class="quick-actions__item" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="onQuickAction(item.key)">
|
||
<view class="quick-actions__item-inner">
|
||
<view class="quick-actions__icon-wrap">
|
||
<view class="quick-actions__icon-wrap-inner">
|
||
<image class="quick-actions__icon-img" :src="item.icon" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
<text :class="item.textClass">{{ item.label }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 体测报告区域 -->
|
||
<view class="body-report-section">
|
||
<view class="body-report-section__inner">
|
||
<view class="body-report-section__header">
|
||
<view class="body-report-section__header-inner">
|
||
<text class="body-report-section__title">体测报告</text>
|
||
<view class="body-report-section__link" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="goBodyTestHistory">
|
||
<text class="body-report-section__history-link">历史记录</text>
|
||
<image class="body-report-section__link-arrow" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright3.png" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="body-report-section__card">
|
||
<view class="body-report-section__card-inner">
|
||
<view class="body-report-section__card-head">
|
||
<view class="body-report-section__card-head-inner">
|
||
<text class="body-report-section__desc">最新数据 · {{ bodyReport.date }}</text>
|
||
<view class="body-report-section__view-btn" hover-class="mi-tap-btn--hover" :hover-stay-time="150" @tap="goBodyReport">
|
||
<image class="body-report-section__view-icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/filetext.png" mode="aspectFit" />
|
||
<text class="body-report-section__view-report">查看报告</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="body-report-section__metrics">
|
||
<view class="body-report-section__metrics-inner">
|
||
<view class="body-report-section__metric">
|
||
<view class="body-report-section__metric-inner">
|
||
<text class="body-report-section__text">{{ bodyReport.weight }}</text>
|
||
<text class="body-report-section__metric-value">体重(kg)</text>
|
||
</view>
|
||
</view>
|
||
<view class="body-report-section__metric-divider"></view>
|
||
<view class="body-report-section__metric">
|
||
<view class="body-report-section__metric-inner">
|
||
<text class="body-report-section__text-2">{{ bodyReport.bmi }}</text>
|
||
<text class="body-report-section__text-3">BMI</text>
|
||
</view>
|
||
</view>
|
||
<view class="body-report-section__metric-divider"></view>
|
||
<view class="body-report-section__metric">
|
||
<view class="body-report-section__metric-inner">
|
||
<text class="body-report-section__text-4">{{ bodyReport.bodyFat }}</text>
|
||
<text class="body-report-section__metric-label">体脂率</text>
|
||
</view>
|
||
</view>
|
||
<view class="body-report-section__metric-divider"></view>
|
||
<view class="body-report-section__metric">
|
||
<view class="body-report-section__metric-inner">
|
||
<text class="body-report-section__num">{{ bodyReport.bmr }}</text>
|
||
<text class="body-report-section__text-5">BMR</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="body-report-section__summary">
|
||
<view class="body-report-section__summary-inner">
|
||
<view class="body-report-section__goal">
|
||
<image class="body-report-section__goal-icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/target.png" mode="aspectFit" />
|
||
<text class="body-report-section__goal-text">状态：{{ bodyReport.status }}</text>
|
||
</view>
|
||
<view class="body-report-section__change">
|
||
<image class="body-report-section__change-icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/trendingdown.png" mode="aspectFit" />
|
||
<text class="body-report-section__metric-value-2">较上次 {{ bodyReport.change }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 优惠券&积分区域 -->
|
||
<view class="coupon-section">
|
||
<view class="coupon-section__inner">
|
||
<view class="coupon-section__header">
|
||
<view class="coupon-section__header-inner">
|
||
<text class="coupon-section__title">优惠券 & 积分</text>
|
||
<view class="coupon-section__link" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="goCoupons">
|
||
<text class="coupon-section__view-all">更多详情</text>
|
||
<image class="coupon-section__link-arrow" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright5.png" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="coupon-section__cards">
|
||
<view class="coupon-section__cards-inner">
|
||
<view class="coupon-section__coupon" hover-class="mi-tap-card--hover" :hover-stay-time="150" @tap="goCoupons">
|
||
<view class="coupon-section__coupon-inner">
|
||
<text class="coupon-section__amount">{{ couponPoints.amount }}</text>
|
||
<text class="coupon-section__desc">{{ couponPoints.couponDesc }}</text>
|
||
<view class="coupon-section__coupon-status">
|
||
<text class="coupon-section__status">{{ couponPoints.couponAction }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="coupon-section__points" hover-class="mi-tap-card--hover" :hover-stay-time="150" @tap="goPoints">
|
||
<view class="coupon-section__points-inner">
|
||
<text class="coupon-section__num">{{ couponPoints.points }}</text>
|
||
<text class="coupon-section__points-label">{{ couponPoints.pointsLabel }}</text>
|
||
<view class="coupon-section__points-action">
|
||
<text class="coupon-section__text">{{ couponPoints.pointsAction }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 推荐奖励区域 -->
|
||
<view class="referral-section">
|
||
<view class="referral-section__inner">
|
||
<view class="referral-section__header">
|
||
<text class="referral-section__title">推荐奖励</text>
|
||
<view class="referral-section__link" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="goReferral">
|
||
<text class="referral-section__records-link">规则说明</text>
|
||
<image class="referral-section__link-arrow" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright11.png" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
<view class="referral-section__code-row">
|
||
<view class="referral-section__code-box">
|
||
<text class="referral-section__code-label">我的邀请码</text>
|
||
<text class="referral-section__code-value">{{ referral.code }}</text>
|
||
</view>
|
||
<view class="referral-section__copy-btn" hover-class="mi-tap-btn--hover" :hover-stay-time="150" @tap="copyReferralCode">
|
||
<view class="referral-section__copy-icon">
|
||
<view class="referral-section__copy-sheet referral-section__copy-sheet--back"></view>
|
||
<view class="referral-section__copy-sheet referral-section__copy-sheet--front"></view>
|
||
</view>
|
||
<text class="referral-section__copy-text">复制</text>
|
||
</view>
|
||
</view>
|
||
<view class="referral-section__stats">
|
||
<view class="referral-section__stat">
|
||
<text class="referral-section__stat-num referral-section__stat-num--orange">{{ referral.invited }}</text>
|
||
<text class="referral-section__stat-label">已推荐</text>
|
||
</view>
|
||
<view class="referral-section__stat-divider"></view>
|
||
<view class="referral-section__stat">
|
||
<text class="referral-section__stat-num referral-section__stat-num--green">{{ referral.registered }}</text>
|
||
<text class="referral-section__stat-label">已注册</text>
|
||
</view>
|
||
<view class="referral-section__stat-divider"></view>
|
||
<view class="referral-section__stat">
|
||
<text class="referral-section__stat-num referral-section__stat-num--amber">{{ referral.purchased }}</text>
|
||
<text class="referral-section__stat-label">已购课</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 设置区域 -->
|
||
<view class="settings-section">
|
||
<view class="settings-section__inner">
|
||
<text class="settings-section__title">设置与安全</text>
|
||
<view class="settings-section__list">
|
||
<view class="settings-section__list-inner">
|
||
<view v-for="(item, index) in settingsItems" :key="item.key">
|
||
<view v-if="index > 0" class="settings-section__item-divider"></view>
|
||
<view class="settings-section__item" :class="{ 'settings-section__item--tall': item.subtitle }" hover-class="mi-tap-row--hover" :hover-stay-time="150" @tap="onSetting(item.key)">
|
||
<view class="settings-section__item-inner">
|
||
<view class="settings-section__item-icon-wrap" :class="item.iconWrapClass">
|
||
<image class="settings-section__item-icon" :src="item.icon" mode="aspectFit" />
|
||
</view>
|
||
<view v-if="item.subtitle" class="settings-section__item-texts">
|
||
<text class="settings-section__item-title">{{ item.label }}</text>
|
||
<text class="settings-section__item-desc">{{ item.subtitle }}</text>
|
||
</view>
|
||
<text v-else class="settings-section__item-label" :class="item.labelClass">{{ item.label }}</text>
|
||
<image class="settings-section__item-arrow" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright10.png" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 退出登录 -->
|
||
<view class="logout-section">
|
||
<view class="logout-section__btn" hover-class="mi-tap-btn--hover" :hover-stay-time="150" @tap="handleLogout">
|
||
<image class="logout-section__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/logout.png" mode="aspectFit" />
|
||
<text class="logout-section__text">退出登录</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 固定 TabBar -->
|
||
<view class="tabbar-fixed">
|
||
<TabBar />
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted } from 'vue'
|
||
import { onShow } from '@dcloudio/uni-app'
|
||
import { PAGE, navigateToPage } from '@/common/constants/routes.js'
|
||
import { getCenterPageData, renewMemberCard, computeRemainingDays, saveMemberStore, loadMemberStore } from '@/common/memberInfo/store.js'
|
||
import { getMemberId } from '@/utils/request.js'
|
||
import { getMyMemberCards, getCheckInStats, getMemberDetail } from '@/api/main.js'
|
||
import { getMemberBookings } from '@/api/groupCourse.js'
|
||
import TabBar from '@/components/TabBar.vue'
|
||
import PageHeader from '@/components/index/PageHeader.vue'
|
||
|
||
// 页面数据
|
||
const userInfo = ref({})
|
||
const stats = ref({})
|
||
const cardInfo = ref({})
|
||
const expiringCards = ref([])
|
||
const bodyReport = ref({})
|
||
const couponPoints = ref({})
|
||
const referral = ref({})
|
||
|
||
// 快捷操作配置
|
||
const quickActionsRow1 = ref([
|
||
{ key: 'booking', label: '预约课程', textClass: 'quick-actions__title', icon: '' },
|
||
{ key: 'bodyTest', label: '智能体测', textClass: 'quick-actions__title-2', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/mappin2.png' },
|
||
{ key: 'bodyReport', label: '体测报告', textClass: 'quick-actions__title-3', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/activity.png' },
|
||
{ key: 'trainReport', label: '训练报告', textClass: 'quick-actions__coach', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/usercheck.png' }
|
||
])
|
||
|
||
const quickActionsRow2 = ref([
|
||
{ key: 'coupon', label: '我的优惠券', textClass: 'quick-actions__text', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/ticket.png' },
|
||
{ key: 'points', label: '我的积分', textClass: 'quick-actions__points-desc', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/star.png' },
|
||
{ key: 'referral', label: '邀请好友', textClass: 'quick-actions__title-4', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/share2.png' },
|
||
{ key: 'course', label: '我的课程', textClass: 'quick-actions__text-2', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/play.png' }
|
||
])
|
||
|
||
// 设置项配置
|
||
const settingsItems = ref([
|
||
{
|
||
key: 'notify',
|
||
label: '通知设置',
|
||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/bell.png',
|
||
iconWrapClass: ''
|
||
},
|
||
{
|
||
key: 'password',
|
||
label: '修改密码',
|
||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Vector_2_727.png',
|
||
iconWrapClass: 'settings-section__item-icon-wrap--blue'
|
||
},
|
||
{
|
||
key: 'privacy',
|
||
label: '隐私政策',
|
||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/shield.png',
|
||
iconWrapClass: 'settings-section__item-icon-wrap--green'
|
||
},
|
||
{
|
||
key: 'nfc',
|
||
label: 'NFC 门禁卡',
|
||
subtitle: '已绑定',
|
||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/ticket.png',
|
||
iconWrapClass: ''
|
||
},
|
||
{
|
||
key: 'delete',
|
||
label: '注销账户',
|
||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/userx.png',
|
||
iconWrapClass: 'settings-section__item-icon-wrap--red',
|
||
labelClass: 'settings-section__item-label--danger'
|
||
}
|
||
])
|
||
|
||
// 计算属性
|
||
const displayAvatar = computed(() => {
|
||
return userInfo.value.avatar || 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/AvatarEditWrap.png'
|
||
})
|
||
|
||
// 方法
|
||
function refreshFromStore() {
|
||
const store = loadMemberStore()
|
||
const pageData = getCenterPageData(store)
|
||
userInfo.value = pageData.userInfo
|
||
stats.value = pageData.stats
|
||
cardInfo.value = pageData.cardInfo
|
||
expiringCards.value = pageData.expiringCards || []
|
||
bodyReport.value = pageData.bodyReport
|
||
couponPoints.value = pageData.couponPoints
|
||
referral.value = pageData.referral
|
||
}
|
||
|
||
async function refreshStatsFromServer() {
|
||
const store = loadMemberStore()
|
||
let changed = false
|
||
|
||
// 获取签到统计（累计签到 = 团课签到次数）
|
||
try {
|
||
const statsRes = await getCheckInStats()
|
||
console.log('[MemberCenter] getCheckInStats 原始响应:', JSON.stringify(statsRes))
|
||
// 兼容多种后端响应格式
|
||
const statsData = statsRes?.data || statsRes || {}
|
||
const totalCount = Number(statsData.totalCount ?? statsData.total ?? 0)
|
||
console.log('[MemberCenter] 解析后 totalCount:', totalCount)
|
||
if (store.stats.checkInCount !== totalCount) {
|
||
store.stats.checkInCount = totalCount
|
||
changed = true
|
||
}
|
||
} catch (e) {
|
||
console.error('[MemberCenter] 获取签到统计失败:', e)
|
||
}
|
||
|
||
// 获取报课次数（会员预约数）
|
||
try {
|
||
const memberId = getMemberId()
|
||
console.log('[MemberCenter] getMemberId 结果:', memberId)
|
||
if (memberId) {
|
||
const bookingsRes = await getMemberBookings(memberId)
|
||
console.log('[MemberCenter] getMemberBookings 原始响应:', JSON.stringify(bookingsRes))
|
||
// 兼容多种后端响应格式：
|
||
// 1. [{...}, {...}] → 直接数组
|
||
// 2. { data: [{...}] } → data 是数组
|
||
// 3. { data: { content: [...] } } → Spring 分页双层包装
|
||
// 4. { content: [...] } → Spring Page 扁平原样
|
||
let bookings = []
|
||
const raw = bookingsRes || {}
|
||
if (Array.isArray(raw)) {
|
||
bookings = raw
|
||
} else if (Array.isArray(raw.data)) {
|
||
bookings = raw.data
|
||
} else if (raw.data && Array.isArray(raw.data.content)) {
|
||
bookings = raw.data.content
|
||
} else if (Array.isArray(raw.content)) {
|
||
bookings = raw.content
|
||
} else if (raw.data && typeof raw.data === 'object' && raw.data.data && Array.isArray(raw.data.data)) {
|
||
bookings = raw.data.data
|
||
} else if (raw.data && typeof raw.data === 'object' && raw.data.data && raw.data.data.content && Array.isArray(raw.data.data.content)) {
|
||
bookings = raw.data.data.content
|
||
}
|
||
const bookingCount = bookings.length
|
||
console.log('[MemberCenter] 解析后 bookingCount:', bookingCount, 'bookings:', JSON.stringify(bookings?.slice?.(0, 2)))
|
||
if (store.stats.courseCount !== bookingCount) {
|
||
store.stats.courseCount = bookingCount
|
||
changed = true
|
||
}
|
||
} else {
|
||
console.warn('[MemberCenter] getMemberId 返回 null/undefined，无法获取报课次数')
|
||
}
|
||
} catch (e) {
|
||
console.error('[MemberCenter] 获取报课次数失败:', e)
|
||
}
|
||
|
||
// 获取积分
|
||
try {
|
||
const detailRes = await getMemberDetail()
|
||
console.log('[MemberCenter] getMemberDetail 原始响应:', JSON.stringify(detailRes))
|
||
const detailData = detailRes?.data || detailRes || {}
|
||
const points = Number(detailData.pointsBalance ?? detailData.points ?? 0)
|
||
console.log('[MemberCenter] 解析后 points:', points)
|
||
if (store.stats.pointsBalance !== points) {
|
||
store.stats.pointsBalance = points
|
||
changed = true
|
||
}
|
||
} catch (e) {
|
||
console.error('[MemberCenter] 获取积分失败:', e)
|
||
}
|
||
|
||
console.log('[MemberCenter] 最终 stats:', JSON.stringify(store.stats))
|
||
|
||
if (changed) {
|
||
saveMemberStore(store)
|
||
refreshFromStore()
|
||
}
|
||
}
|
||
|
||
async function refreshCardsFromServer() {
|
||
const memberId = getMemberId()
|
||
if (!memberId) return
|
||
|
||
try {
|
||
const res = await getMyMemberCards(memberId)
|
||
let cards = []
|
||
if (Array.isArray(res)) {
|
||
cards = res
|
||
} else if (res.code === 200 && res.data) {
|
||
cards = res.data
|
||
} else if (Array.isArray(res.data)) {
|
||
cards = res.data
|
||
}
|
||
|
||
if (cards.length > 0) {
|
||
const allCards = cards.map(myCard => {
|
||
const cardName = myCard.memberCardName || myCard.cardName || myCard.name || `会员卡#${myCard.memberCardId || myCard.id}`
|
||
const validityEnd = myCard.validityEnd || myCard.expireTime
|
||
const validityStart = myCard.validityStart || myCard.purchaseTime || myCard.createdAt
|
||
return {
|
||
id: myCard.id,
|
||
name: cardName,
|
||
status: myCard.status || 'active',
|
||
validity: validityEnd ? `有效期至 ${validityEnd}` : '永久有效',
|
||
validityEnd: validityEnd,
|
||
validityStart: validityStart
|
||
}
|
||
})
|
||
|
||
store.cards = allCards
|
||
|
||
const myCard = cards[0]
|
||
const cardName = myCard.memberCardName || myCard.cardName || myCard.name || `会员卡#${myCard.memberCardId || myCard.id}`
|
||
const validityEnd = myCard.validityEnd || myCard.expireTime
|
||
const validityStart = myCard.validityStart || myCard.purchaseTime || myCard.createdAt
|
||
|
||
store.card = {
|
||
id: myCard.id,
|
||
name: cardName,
|
||
status: myCard.status || 'active',
|
||
validity: validityEnd ? `有效期至 ${validityEnd}` : '永久有效',
|
||
validityEnd: validityEnd,
|
||
validityStart: validityStart
|
||
}
|
||
store.cardInfo = {
|
||
expireDate: validityEnd ? `有效期至 ${validityEnd}` : '永久有效',
|
||
remainingDays: computeRemainingDays(validityEnd)
|
||
}
|
||
|
||
saveMemberStore(store)
|
||
refreshFromStore()
|
||
}
|
||
} catch (e) {
|
||
console.error('[MemberCenter] 刷新会员卡数据失败:', e)
|
||
}
|
||
}
|
||
|
||
function goUserInfo() {
|
||
navigateToPage(PAGE.USER_INFO)
|
||
}
|
||
|
||
function goMemberCard() {
|
||
navigateToPage(PAGE.MEMBER_CARD)
|
||
}
|
||
|
||
function goBodyTestHistory() {
|
||
navigateToPage(PAGE.BODY_TEST_HISTORY)
|
||
}
|
||
|
||
function goBodyReport() {
|
||
const id = bodyReport.value?.recordId
|
||
const url = id ? `${PAGE.BODY_TEST_REPORT}?id=${id}` : PAGE.BODY_TEST_HISTORY
|
||
navigateToPage(url)
|
||
}
|
||
|
||
function goCoupons() {
|
||
navigateToPage(PAGE.COUPONS)
|
||
}
|
||
|
||
function goPoints() {
|
||
navigateToPage(PAGE.POINTS)
|
||
}
|
||
|
||
function goReferral() {
|
||
navigateToPage(PAGE.REFERRAL)
|
||
}
|
||
|
||
function onRenewCard() {
|
||
uni.showModal({
|
||
title: '续费会员卡',
|
||
content: '确认续费 90 天？',
|
||
success: (res) => {
|
||
if (!res.confirm) return
|
||
const store = loadMemberStore()
|
||
renewMemberCard(store, 90)
|
||
refreshFromStore()
|
||
uni.showToast({ title: '续费成功', icon: 'success' })
|
||
}
|
||
})
|
||
}
|
||
|
||
function onQuickAction(type) {
|
||
const routes = {
|
||
booking: PAGE.COURSE_LIST,
|
||
bodyTest: PAGE.BODY_TEST_HOME,
|
||
bodyReport: PAGE.BODY_TEST_HISTORY,
|
||
trainReport: PAGE.TRAIN_REPORT,
|
||
coupon: PAGE.COUPONS,
|
||
points: PAGE.POINTS,
|
||
referral: PAGE.REFERRAL,
|
||
course: PAGE.MY_COURSES
|
||
}
|
||
if (routes[type]) {
|
||
navigateToPage(routes[type])
|
||
}
|
||
}
|
||
|
||
function copyReferralCode() {
|
||
uni.setClipboardData({
|
||
data: referral.value.code,
|
||
success: () => {
|
||
uni.showToast({ title: '已复制', icon: 'success' })
|
||
}
|
||
})
|
||
}
|
||
|
||
function onSetting(key) {
|
||
const labels = {
|
||
notify: '通知设置',
|
||
password: '修改密码',
|
||
privacy: '隐私政策',
|
||
nfc: 'NFC 门禁卡',
|
||
delete: '注销账户'
|
||
}
|
||
if (key === 'delete') {
|
||
uni.showModal({
|
||
title: '注销账户',
|
||
content: '注销后数据将无法恢复，确定继续吗？',
|
||
confirmColor: '#E74C3C'
|
||
})
|
||
return
|
||
}
|
||
if (key === 'privacy') {
|
||
uni.showModal({
|
||
title: '隐私政策',
|
||
content: '我们重视您的隐私，详细政策请前往官网查看。',
|
||
showCancel: false
|
||
})
|
||
return
|
||
}
|
||
uni.showToast({
|
||
title: `${labels[key] || '设置'}开发中`,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
|
||
function handleLogout() {
|
||
uni.showModal({
|
||
title: '退出登录',
|
||
content: '确定要退出登录吗？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.showToast({ title: '已退出', icon: 'success' })
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
onMounted(() => {
|
||
refreshFromStore()
|
||
})
|
||
|
||
onShow(async () => {
|
||
await refreshStatsFromServer()
|
||
refreshCardsFromServer()
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import '@/common/style/base.css';
|
||
@import '@/common/style/memberInfo/member-info-component-reset.css';
|
||
@import '@/common/style/memberInfo/member-info-tap.css';
|
||
@import '@/common/style/memberInfo/member-info-page.css';
|
||
@import '@/common/style/memberInfo/member-info-member-card.css';
|
||
@import '@/common/style/memberInfo/member-info-quick-actions.css';
|
||
@import '@/common/style/memberInfo/member-info-body-report.css';
|
||
@import '@/common/style/memberInfo/member-info-coupon-points.css';
|
||
@import '@/common/style/memberInfo/member-info-referral.css';
|
||
@import '@/common/style/memberInfo/member-info-settings.css';
|
||
@import '@/common/style/memberInfo/member-info-logout.css';
|
||
|
||
/* 个人中心页面头部背景 */
|
||
.member-center-page-header {
|
||
background: #F5F7FA;
|
||
}
|
||
|
||
/* 简约个人信息卡片 */
|
||
.profile-card {
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
padding: 28rpx 28rpx 24rpx;
|
||
box-shadow: 0 4rpx 20rpx rgba(45, 74, 90, 0.06);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24rpx;
|
||
margin: 0 24rpx;
|
||
}
|
||
|
||
.profile-card__main {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.profile-avatar {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
flex-shrink: 0;
|
||
border: 3rpx solid #E8F4F8;
|
||
}
|
||
|
||
.profile-avatar__img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.profile-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.profile-info__row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
margin-bottom: 6rpx;
|
||
}
|
||
|
||
.profile-info__name {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #1A202C;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.profile-info__badge {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4rpx;
|
||
background: linear-gradient(135deg, #FFF7ED, #FFF1E6);
|
||
border-radius: 20rpx;
|
||
padding: 4rpx 14rpx;
|
||
}
|
||
|
||
.profile-info__badge-icon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
}
|
||
|
||
.profile-info__level {
|
||
font-size: 20rpx;
|
||
font-weight: 600;
|
||
color: #ED8936;
|
||
}
|
||
|
||
.profile-info__phone {
|
||
font-size: 24rpx;
|
||
color: #A0AEC0;
|
||
}
|
||
|
||
.profile-card__stats {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding-top: 20rpx;
|
||
border-top: 1rpx solid #F0F4F8;
|
||
}
|
||
|
||
.profile-stat {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 4rpx;
|
||
}
|
||
|
||
.profile-stat__value {
|
||
font-size: 36rpx;
|
||
font-weight: 700;
|
||
color: #2D4A5A;
|
||
}
|
||
|
||
.profile-stat__label {
|
||
font-size: 22rpx;
|
||
color: #A0AEC0;
|
||
}
|
||
|
||
.tabbar-fixed {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 1000;
|
||
background-color: transparent;
|
||
}
|
||
|
||
.expiring-cards-section {
|
||
margin: 0 16px 12px;
|
||
background: linear-gradient(135deg, #FFF7E6 0%, #FFE4CC 100%);
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.expiring-cards__inner {
|
||
padding: 16px;
|
||
}
|
||
|
||
.expiring-cards__header {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.expiring-cards__header-inner {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.expiring-cards__title-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.expiring-cards__warn-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
.expiring-cards__title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #D46B08;
|
||
}
|
||
|
||
.expiring-cards__link {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.expiring-cards__link-text {
|
||
font-size: 13px;
|
||
color: #D46B08;
|
||
}
|
||
|
||
.expiring-cards__link-arrow {
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
|
||
.expiring-cards__list {
|
||
background: rgba(255, 255, 255, 0.6);
|
||
border-radius: 12px;
|
||
padding: 4px 0;
|
||
}
|
||
|
||
.expiring-card-item {
|
||
padding: 12px;
|
||
}
|
||
|
||
.expiring-card-item__inner {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.expiring-card-item__icon-wrap {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 10px;
|
||
background: #FFFFFF;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.expiring-card-item__icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
|
||
.expiring-card-item__info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.expiring-card-item__name {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #1A202C;
|
||
}
|
||
|
||
.expiring-card-item__validity {
|
||
font-size: 12px;
|
||
color: #718096;
|
||
}
|
||
|
||
.expiring-card-item__days {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
gap: 2px;
|
||
}
|
||
|
||
.expiring-card-item__days-num {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: #E74C3C;
|
||
}
|
||
|
||
.expiring-card-item__days-unit {
|
||
font-size: 11px;
|
||
color: #E74C3C;
|
||
}
|
||
</style>
|