会员个人中心页面初步完成
This commit is contained in:
时舟年
@@ -0,0 +1,158 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user