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

<template>
    <view class="scroll-container theme-light">
        <view class="bt-page">
            <MemberInfoSubNav title="邀请好友" @back="goBack" />
            <view class="bt-page__body">
                <view class="mi-mod-referral-hero">
                    <text class="mi-mod-referral-hero__title">邀请好友一起健身</text>
                    <text class="mi-mod-referral-hero__desc">好友注册/购课，双方均可获得积分奖励</text>
                    <view class="mi-mod-referral-code">
                        <text class="mi-mod-referral-code__label">我的邀请码</text>
                        <text class="mi-mod-referral-code__value">{{ data.code }}</text>
                    </view>
                    <view class="bt-hero__actions">
                        <view
                            class="bt-btn bt-btn--primary"
                            hover-class="mi-tap-btn--hover"
                            :hover-stay-time="150"
                            @tap="copyCode"
                        >
                            <text class="bt-btn__text">复制邀请码</text>
                        </view>
                        <view
                            class="bt-btn bt-btn--ghost"
                            hover-class="mi-tap-btn--hover"
                            :hover-stay-time="150"
                            @tap="shareInvite"
                        >
                            <image class="bt-btn__icon" src="/static/images/share2.png" mode="aspectFit" />
                            <text class="bt-btn__text">分享给好友</text>
                        </view>
                    </view>
                </view>

                <view class="bt-card">
                    <text class="bt-card__title">邀请成果</text>
                    <view class="mi-mod-referral-stats">
                        <view class="mi-mod-referral-stat">
                            <text class="mi-mod-referral-stat__num mi-mod-referral-stat__num--orange">{{ data.invited }}</text>
                            <text class="mi-mod-referral-stat__label">已推荐</text>
                        </view>
                        <view class="mi-mod-referral-stat">
                            <text class="mi-mod-referral-stat__num mi-mod-referral-stat__num--green">{{ data.registered }}</text>
                            <text class="mi-mod-referral-stat__label">已注册</text>
                        </view>
                        <view class="mi-mod-referral-stat">
                            <text class="mi-mod-referral-stat__num mi-mod-referral-stat__num--amber">{{ data.purchased }}</text>
                            <text class="mi-mod-referral-stat__label">已购课</text>
                        </view>
                    </view>
                </view>

                <view class="bt-card">
                    <text class="bt-card__title">已获得奖励</text>
                    <view class="mi-mod-referral-stats">
                        <view class="mi-mod-referral-stat">
                            <text class="mi-mod-referral-stat__num mi-mod-referral-stat__num--orange">{{ data.rewardSummary?.totalPoints || 0 }}</text>
                            <text class="mi-mod-referral-stat__label">积分</text>
                        </view>
                        <view class="mi-mod-referral-stat">
                            <text class="mi-mod-referral-stat__num mi-mod-referral-stat__num--green">{{ data.rewardSummary?.totalCoupons || 0 }}</text>
                            <text class="mi-mod-referral-stat__label">优惠券</text>
                        </view>
                        <view class="mi-mod-referral-stat">
                            <text class="mi-mod-referral-stat__num mi-mod-referral-stat__num--amber">{{ data.rewardSummary?.pendingCount || 0 }}</text>
                            <text class="mi-mod-referral-stat__label">待发放</text>
                        </view>
                    </view>
                </view>

                <view class="bt-card">
                    <text class="bt-card__title">邀请记录</text>
                    <view
                        v-for="item in data.records"
                        :key="item.id"
                        class="mi-mod-referral-row"
                    >
                        <view class="mi-mod-referral-row__info">
                            <text class="mi-mod-referral-row__name">{{ item.name }}</text>
                            <text class="mi-mod-referral-row__time">{{ item.time }}</text>
                        </view>
                        <view class="mi-mod-referral-row__right">
                            <text class="mi-mod-referral-row__status">{{ item.statusLabel }}</text>
                            <text class="mi-mod-referral-row__reward">{{ item.reward }}</text>
                            <text class="mi-mod-referral-row__reward-status">{{ item.rewardStatus }}</text>
                        </view>
                    </view>
                </view>

                <view class="bt-card">
                    <text class="bt-card__title">活动规则</text>
                    <view class="bt-advice-list">
                        <view
                            v-for="(rule, idx) in data.rules"
                            :key="idx"
                            class="bt-advice-item"
                        >
                            <view class="bt-advice-item__dot"></view>
                            <text class="bt-advice-item__text">{{ rule }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { getReferralPageData } from '@/common/memberInfo/moduleStore.js'
import { loadMemberStore } from '@/common/memberInfo/store.js'
import { subPageMixin } from '@/common/memberInfo/mixins.js'

export default {
    components: { MemberInfoSubNav },
    mixins: [subPageMixin],
    data() {
        return {
            data: { code: '', invited: 0, registered: 0, purchased: 0, records: [], rules: [] }
        }
    },
    onShow() {
        const store = loadMemberStore()
        this.data = getReferralPageData(store)
    },
    methods: {
        copyCode() {
            uni.setClipboardData({
                data: this.data.code,
                success: () => uni.showToast({ title: '邀请码已复制', icon: 'success' })
            })
        },
        shareInvite() {
            uni.showActionSheet({
                itemList: ['分享给微信好友', '生成邀请海报', '复制分享链接'],
                success: (res) => {
                    const msgs = ['已唤起分享', '海报已生成', '链接已复制']
                    uni.showToast({ title: msgs[res.tapIndex] || '分享成功', icon: 'none' })
                }
            })
        }
    }
}
</script>

<style>
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
@import '@/common/style/memberInfo/member-info-component-reset.css';
@import '@/common/style/memberInfo/member-info-sub-nav.css';
@import '@/common/style/memberInfo/member-info-tap.css';
@import '@/common/style/memberInfo/pages/body-test-common.css';
@import '@/common/style/memberInfo/pages/module-pages-common.css';

.mi-mod-referral-hero .bt-hero__actions {
    margin-top: 16px;
}
</style>