gym-manage/gym-manage-uniapp/pages/memberInfo/memberInfo.vue

<template>
    <!-- 滚动内容区域 -->
    <scroll-view scroll-y class="scroll-container theme-light">
        <view class="member-page">
            <MemberInfoHeader
                :user-info="userInfo"
                :stats="stats"
                @user-info="goUserInfo"
            />
            <view class="member-page__body">
                <view class="member-page__sections">
                    <MemberInfoMemberCard
                        :card-info="cardInfo"
                        @view-all="goMemberCard"
                        @renew="onRenewCard"
                    />
                    <MemberInfoQuickActions @action="onQuickAction" />
                    <MemberInfoBookingList
                        :items="bookingPreview"
                        @view-all="goBooking"
                        @item-tap="goBooking"
                    />
                    <MemberInfoCheckInList
                        :items="checkIns"
                        @view-all="onCheckInViewAll"
                        @item-tap="onCheckInTap"
                    />
                    <MemberInfoBodyReport
                        :report="bodyReport"
                        @view-history="onBodyReportHistory"
                        @view-report="onBodyReportView"
                    />
                    <MemberInfoCouponPoints
                        :data="couponPoints"
                        @view-all="onCouponViewAll"
                        @use-coupon="onUseCoupon"
                        @redeem-points="onRedeemPoints"
                    />
                    <MemberInfoReferral
                        :data="referral"
                        @view-rules="onReferralRules"
                    />
                    <MemberInfoSettings @setting="onSetting" />
                    <MemberInfoLogout @logout="handleLogout" />
                </view>
            </view>
        </view>
    </scroll-view>
    
    <!-- 固定 TabBar -->
    <view class="tabbar-fixed">
        <TabBar />
    </view>
</template>

<script>
import { PAGE, navigateToPage } from '@/common/constants/routes.js'
import {
    loadMemberStore,
    getCenterPageData,
    renewMemberCard
} from '@/common/memberInfo/store.js'
import MemberInfoHeader from '@/components/memberInfo/MemberInfoHeader.vue'
import MemberInfoMemberCard from '@/components/memberInfo/MemberInfoMemberCard.vue'
import MemberInfoQuickActions from '@/components/memberInfo/MemberInfoQuickActions.vue'
import MemberInfoBookingList from '@/components/memberInfo/MemberInfoBookingList.vue'
import MemberInfoCheckInList from '@/components/memberInfo/MemberInfoCheckInList.vue'
import MemberInfoBodyReport from '@/components/memberInfo/MemberInfoBodyReport.vue'
import MemberInfoCouponPoints from '@/components/memberInfo/MemberInfoCouponPoints.vue'
import MemberInfoReferral from '@/components/memberInfo/MemberInfoReferral.vue'
import MemberInfoSettings from '@/components/memberInfo/MemberInfoSettings.vue'
import MemberInfoLogout from '@/components/memberInfo/MemberInfoLogout.vue'
import TabBar from '@/components/TabBar.vue'

export default {
    components: {
        MemberInfoHeader,
        MemberInfoMemberCard,
        MemberInfoQuickActions,
        MemberInfoBookingList,
        MemberInfoCheckInList,
        MemberInfoBodyReport,
        MemberInfoCouponPoints,
        MemberInfoReferral,
        MemberInfoSettings,
        MemberInfoLogout,
        TabBar
    },
    data() {
        return {
            userInfo: {},
            stats: {},
            cardInfo: {},
            bookingPreview: [],
            checkIns: [],
            bodyReport: {},
            couponPoints: {},
            referral: {}
        }
    },
    onShow() {
        this.refreshFromStore()
    },
    methods: {
        refreshFromStore() {
            const store = loadMemberStore()
            const pageData = getCenterPageData(store)
            this.userInfo = pageData.userInfo
            this.stats = pageData.stats
            this.cardInfo = pageData.cardInfo
            this.bookingPreview = pageData.bookingPreview
            this.checkIns = pageData.checkIns
            this.bodyReport = pageData.bodyReport
            this.couponPoints = pageData.couponPoints
            this.referral = pageData.referral
        },
        goMemberCard() {
            navigateToPage(PAGE.MEMBER_CARD)
        },
        goBooking() {
            navigateToPage(PAGE.BOOKING)
        },
        goUserInfo() {
            navigateToPage(PAGE.USER_INFO)
        },
        onRenewCard() {
            uni.showModal({
                title: '续费会员卡',
                content: '确认续费 90 天？',
                success: (res) => {
                    if (!res.confirm) return
                    const store = loadMemberStore()
                    renewMemberCard(store, 90)
                    this.refreshFromStore()
                    uni.showToast({ title: '续费成功', icon: 'success' })
                }
            })
        },
        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])
            }
        },
        onCheckInViewAll() {
            navigateToPage(PAGE.CHECK_IN_HISTORY)
        },
        onCheckInTap(item) {
            uni.showModal({
                title: item.title,
                content: item.time,
                showCancel: false
            })
        },
        onBodyReportHistory() {
            navigateToPage(PAGE.BODY_TEST_HISTORY)
        },
        onBodyReportView() {
            const id = this.bodyReport?.recordId
            const url = id
                ? `${PAGE.BODY_TEST_REPORT}?id=${id}`
                : PAGE.BODY_TEST_HISTORY
            navigateToPage(url)
        },
        onCouponViewAll() {
            navigateToPage(PAGE.COUPONS)
        },
        onUseCoupon() {
            navigateToPage(PAGE.COUPONS)
        },
        onRedeemPoints() {
            navigateToPage(PAGE.POINTS)
        },
        onReferralRules() {
            navigateToPage(PAGE.REFERRAL)
        },
        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'
            })
        },
        handleLogout() {
            uni.showModal({
                title: '退出登录',
                content: '确定要退出登录吗？',
                success: (res) => {
                    if (res.confirm) {
                        uni.showToast({ title: '已退出', icon: 'success' })
                    }
                }
            })
        }
    }
}
</script>

<style>
@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 */
.tabbar-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: transparent;
}
</style>