整合api请求、添加购买会员卡页面、登陆页面
This commit is contained in:
future
@@ -0,0 +1,758 @@
|
||||
<template>
|
||||
<scroll-view scroll-y class="scroll-container theme-light">
|
||||
<view class="member-page">
|
||||
<!-- Header: 用户信息区 -->
|
||||
<view class="profile-header">
|
||||
<view class="profile-header__toolbar" :style="toolbarStyle">
|
||||
<view class="profile-header__nav">
|
||||
<view class="profile-header__nav-left">
|
||||
<image
|
||||
class="profile-header__icon-bell"
|
||||
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/bell.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<image
|
||||
class="profile-header__icon-settings"
|
||||
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/settings.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
</view>
|
||||
<text class="profile-header__title">个人中心</text>
|
||||
<view class="profile-header__nav-right" :style="navRightStyle"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="profile-header__toolbar-spacer" :style="toolbarSpacerStyle"></view>
|
||||
<view class="profile-header__hero">
|
||||
<view class="profile-header__inner">
|
||||
<view class="profile-header__user" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="goUserInfo">
|
||||
<view class="profile-header__user-inner">
|
||||
<view class="profile-header__avatar-wrap">
|
||||
<view class="profile-header__avatar-ring">
|
||||
<image
|
||||
class="profile-header__avatar"
|
||||
:key="userInfo.avatar"
|
||||
:src="displayAvatar"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
</view>
|
||||
<view class="profile-header__avatar-badge">
|
||||
<image
|
||||
class="profile-header__avatar-badge-icon"
|
||||
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/camera.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="profile-header__user-meta">
|
||||
<view class="profile-header__user-meta-inner">
|
||||
<text class="profile-header__name">{{ userInfo.name }}</text>
|
||||
<text class="profile-header__phone">{{ userInfo.phone }}</text>
|
||||
<view class="profile-header__badge">
|
||||
<image
|
||||
class="profile-header__badge-icon"
|
||||
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/crown0.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text class="profile-header__level">{{ userInfo.memberLevel }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="profile-header__stats">
|
||||
<view class="profile-header__stats-inner">
|
||||
<view class="profile-header__stat">
|
||||
<view class="profile-header__stat-inner">
|
||||
<text class="profile-header__stat-value">{{ stats.checkInCount }}</text>
|
||||
<text class="profile-header__stat-label">累计签到</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="profile-header__stat-divider"></view>
|
||||
<view class="profile-header__stat">
|
||||
<view class="profile-header__stat-inner">
|
||||
<text class="profile-header__stat-value">{{ stats.trainingHours }}</text>
|
||||
<text class="profile-header__stat-label">训练时长</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="profile-header__stat-divider"></view>
|
||||
<view class="profile-header__stat">
|
||||
<view class="profile-header__stat-inner">
|
||||
<text class="profile-header__stat-value">{{ stats.pointsBalance }}</text>
|
||||
<text class="profile-header__stat-label">累计积分</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="member-page__body">
|
||||
<view class="member-page__sections">
|
||||
<!-- 会员卡区域 -->
|
||||
<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="booking-section">
|
||||
<view class="booking-section__inner">
|
||||
<view class="booking-section__header">
|
||||
<view class="booking-section__header-inner">
|
||||
<text class="booking-section__title">我的预约</text>
|
||||
<view class="booking-section__link" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="goBooking">
|
||||
<text class="booking-section__view-all">预约记录</text>
|
||||
<image class="booking-section__link-arrow" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright4.png" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-for="item in bookingPreview" :key="item.id" class="booking-section__item" hover-class="mi-tap-row--hover" :hover-stay-time="150" @tap="goBooking">
|
||||
<view class="booking-section__item-inner">
|
||||
<view class="booking-section__date">
|
||||
<view class="booking-section__date-inner">
|
||||
<text class="booking-section__num">{{ item.dateDay }}</text>
|
||||
<text class="booking-section__date-sub">{{ item.dateMonth }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="booking-section__content">
|
||||
<view class="booking-section__content-inner">
|
||||
<text class="booking-section__desc">{{ item.desc }}</text>
|
||||
<view class="booking-section__meta">
|
||||
<view class="booking-section__meta-inner">
|
||||
<image class="booking-section__icon-coach" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/user2.png" mode="aspectFit" />
|
||||
<text class="booking-section__coach">教练：{{ item.coach }}</text>
|
||||
<image class="booking-section__icon-location" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/mappin1.png" mode="aspectFit" />
|
||||
<text class="booking-section__text">{{ item.location }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="booking-section__status-wrap">
|
||||
<view class="booking-section__status-badge" :class="'booking-section__status-badge--' + item.status">
|
||||
<text class="booking-section__status-text" :class="{ 'booking-section__status-text--pending': item.status === 'pending' }">{{ item.statusLabel }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="!bookingPreview.length" class="booking-section__empty">
|
||||
<text class="booking-section__empty-text">暂无进行中的预约</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 签到记录区域 -->
|
||||
<view class="checkin-section">
|
||||
<view class="checkin-section__inner">
|
||||
<view class="checkin-section__header">
|
||||
<view class="checkin-section__header-inner">
|
||||
<text class="checkin-section__title">签到记录</text>
|
||||
<view class="checkin-section__link" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="goCheckInHistory">
|
||||
<text class="checkin-section__view-all">查看全部</text>
|
||||
<image class="checkin-section__link-arrow" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright2.png" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="checkin-section__list">
|
||||
<view class="checkin-section__list-inner">
|
||||
<view v-for="(item, index) in checkIns" :key="item.id" class="checkin-section__row">
|
||||
<view v-if="index > 0" class="checkin-section__divider"></view>
|
||||
<view class="checkin-section__item" hover-class="mi-tap-row--hover" :hover-stay-time="150" @tap="onCheckInTap(item)">
|
||||
<view class="checkin-section__item-inner">
|
||||
<view class="checkin-section__dot" :class="'checkin-section__dot--' + item.tagTheme"></view>
|
||||
<view class="checkin-section__content">
|
||||
<view class="checkin-section__content-inner">
|
||||
<text class="checkin-section__desc">{{ item.title }}</text>
|
||||
<text class="checkin-section__text">{{ item.time }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="checkin-section__tag-badge" :class="'checkin-section__tag-badge--' + item.tagTheme">
|
||||
<text class="checkin-section__tag-text" :class="'checkin-section__tag-text--' + item.tagTheme">{{ item.tag }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</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 { PAGE, navigateToPage } from '@/common/constants/routes.js'
|
||||
import { loadMemberStore, getCenterPageData, renewMemberCard } from '@/common/memberInfo/store.js'
|
||||
import TabBar from '@/components/TabBar.vue'
|
||||
|
||||
// 页面数据
|
||||
const userInfo = ref({})
|
||||
const stats = ref({})
|
||||
const cardInfo = ref({})
|
||||
const bookingPreview = ref([])
|
||||
const checkIns = ref([])
|
||||
const bodyReport = ref({})
|
||||
const couponPoints = ref({})
|
||||
const referral = ref({})
|
||||
|
||||
// 导航栏样式
|
||||
const toolbarStyle = ref({})
|
||||
const toolbarSpacerStyle = ref({})
|
||||
const navRightStyle = 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 syncNavSafeArea() {
|
||||
try {
|
||||
const sys = uni.getSystemInfoSync()
|
||||
const statusBarHeight = sys.statusBarHeight || 0
|
||||
const navHeight = 44
|
||||
const menu = uni.getMenuButtonBoundingClientRect?.()
|
||||
|
||||
toolbarStyle.value = {
|
||||
paddingTop: `${statusBarHeight}px`
|
||||
}
|
||||
|
||||
toolbarSpacerStyle.value = {
|
||||
height: `${statusBarHeight + navHeight}px`
|
||||
}
|
||||
|
||||
if (menu && menu.width) {
|
||||
const capsuleGap = sys.windowWidth - menu.left + 8
|
||||
navRightStyle.value = {
|
||||
width: `${capsuleGap}px`,
|
||||
minWidth: `${capsuleGap}px`
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
toolbarSpacerStyle.value = { height: '44px' }
|
||||
}
|
||||
}
|
||||
|
||||
function refreshFromStore() {
|
||||
const store = loadMemberStore()
|
||||
const pageData = getCenterPageData(store)
|
||||
userInfo.value = pageData.userInfo
|
||||
stats.value = pageData.stats
|
||||
cardInfo.value = pageData.cardInfo
|
||||
bookingPreview.value = pageData.bookingPreview
|
||||
checkIns.value = pageData.checkIns
|
||||
bodyReport.value = pageData.bodyReport
|
||||
couponPoints.value = pageData.couponPoints
|
||||
referral.value = pageData.referral
|
||||
}
|
||||
|
||||
function goUserInfo() {
|
||||
navigateToPage(PAGE.USER_INFO)
|
||||
}
|
||||
|
||||
function goMemberCard() {
|
||||
navigateToPage(PAGE.MEMBER_CARD)
|
||||
}
|
||||
|
||||
function goBooking() {
|
||||
navigateToPage(PAGE.BOOKING)
|
||||
}
|
||||
|
||||
function goCheckInHistory() {
|
||||
navigateToPage(PAGE.CHECK_IN_HISTORY)
|
||||
}
|
||||
|
||||
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 onCheckInTap(item) {
|
||||
uni.showModal({
|
||||
title: item.title,
|
||||
content: item.time,
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
|
||||
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(() => {
|
||||
syncNavSafeArea()
|
||||
refreshFromStore()
|
||||
})
|
||||
</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-header.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-booking-list.css';
|
||||
@import '@/common/style/memberInfo/member-info-check-in-list.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';
|
||||
|
||||
.tabbar-fixed {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.booking-section__empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.booking-section__empty-text {
|
||||
font-size: 14px;
|
||||
color: #8A99B4;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user