future
95 lines
4.6 KiB
Vue
95 lines
4.6 KiB
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-points-hero">
|
|
<text class="mi-mod-points-hero__label">当前积分</text>
|
|
<text class="mi-mod-points-hero__value">{{ balance }}</text>
|
|
<text class="mi-mod-points-hero__tip">{{ config.rate }} · {{ config.rule }}</text>
|
|
</view>
|
|
|
|
<view class="bt-card">
|
|
<text class="bt-card__title">快捷入口</text>
|
|
<view class="bt-grid">
|
|
<view class="bt-grid__item" hover-class="mi-tap--hover" @tap="goMall">
|
|
<image class="bt-grid__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/star.png" mode="aspectFit" />
|
|
<text class="bt-grid__label">积分商城</text>
|
|
</view>
|
|
<view class="bt-grid__item" hover-class="mi-tap--hover" @tap="goHistory">
|
|
<image class="bt-grid__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/clock.png" mode="aspectFit" />
|
|
<text class="bt-grid__label">积分明细</text>
|
|
</view>
|
|
<view class="bt-grid__item" hover-class="mi-tap--hover" @tap="checkIn">
|
|
<image class="bt-grid__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/usercheck.png" mode="aspectFit" />
|
|
<text class="bt-grid__label">签到赚积分</text>
|
|
</view>
|
|
<view class="bt-grid__item" hover-class="mi-tap--hover" @tap="goReferral">
|
|
<image class="bt-grid__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/share2.png" mode="aspectFit" />
|
|
<text class="bt-grid__label">邀请赚积分</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="bt-card">
|
|
<view class="bt-trend-link" style="border:none;margin:0;padding:0;" @tap="goHistory">
|
|
<text class="bt-card__title">最近明细</text>
|
|
<text class="bt-trend-link__text">查看全部</text>
|
|
</view>
|
|
<view v-for="item in historyPreview" :key="item.id" class="mi-mod-points-row">
|
|
<view class="mi-mod-points-row__info">
|
|
<text class="mi-mod-points-row__title">{{ item.title }}</text>
|
|
<text class="mi-mod-points-row__time">{{ item.time }}</text>
|
|
</view>
|
|
<text
|
|
class="mi-mod-points-row__amount"
|
|
:class="item.amount > 0 ? 'mi-mod-points-row__amount--earn' : 'mi-mod-points-row__amount--spend'"
|
|
>{{ item.amount > 0 ? '+' : '' }}{{ item.amount }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
|
|
import { PAGE, navigateToPage, backToMemberCenter } from '@/common/constants/routes.js'
|
|
import { getPointsPageData } from '@/common/memberInfo/moduleStore.js'
|
|
import { loadMemberStore } from '@/common/memberInfo/store.js'
|
|
|
|
const balance = ref(0)
|
|
const config = ref({})
|
|
const historyPreview = ref([])
|
|
|
|
function refresh() {
|
|
const data = getPointsPageData(loadMemberStore())
|
|
balance.value = data.balance
|
|
config.value = data.config
|
|
historyPreview.value = data.history.slice(0, 5)
|
|
}
|
|
|
|
function goBack() {
|
|
backToMemberCenter()
|
|
}
|
|
|
|
function goMall() { navigateToPage(PAGE.POINTS_MALL) }
|
|
function goHistory() { navigateToPage(PAGE.POINTS_HISTORY) }
|
|
function goReferral() { navigateToPage(PAGE.REFERRAL) }
|
|
function checkIn() { uni.showToast({ title: '签到成功 +10 积分', icon: 'success' }) }
|
|
|
|
refresh()
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@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';
|
|
</style>
|