时舟年
87 lines
3.2 KiB
Vue
87 lines
3.2 KiB
Vue
<template>
|
|
<view class="scroll-container theme-light">
|
|
<view class="bt-page">
|
|
<MemberInfoSubNav title="积分明细" @back="onBack" />
|
|
<view class="mi-mod-tabs">
|
|
<view
|
|
v-for="tab in tabs"
|
|
:key="tab.key"
|
|
class="bt-tab"
|
|
:class="{ 'bt-tab--active': filter === tab.key }"
|
|
@tap="filter = tab.key"
|
|
>
|
|
<text class="bt-tab__text">{{ tab.label }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="bt-page__body">
|
|
<view
|
|
v-for="item in list"
|
|
: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>
|
|
<view class="mi-mod-points-row__right">
|
|
<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>
|
|
<text class="mi-mod-points-row__balance">余额 {{ item.balance }}</text>
|
|
</view>
|
|
</view>
|
|
<view v-if="!list.length" class="bt-empty">
|
|
<text class="bt-empty__text">暂无明细</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
|
|
import { PAGE, goBackOrTab } from '@/common/constants/routes.js'
|
|
import { loadMemberStore } from '@/common/memberInfo/store.js'
|
|
import { filterPointsHistory } from '@/common/memberInfo/moduleStore.js'
|
|
|
|
export default {
|
|
components: { MemberInfoSubNav },
|
|
data() {
|
|
return {
|
|
filter: 'all',
|
|
tabs: [
|
|
{ key: 'all', label: '全部' },
|
|
{ key: 'earn', label: '获取' },
|
|
{ key: 'spend', label: '消耗' }
|
|
],
|
|
list: []
|
|
}
|
|
},
|
|
watch: {
|
|
filter() { this.loadList() }
|
|
},
|
|
onShow() { this.loadList() },
|
|
methods: {
|
|
onBack() { goBackOrTab(PAGE.POINTS) },
|
|
loadList() {
|
|
const store = loadMemberStore()
|
|
this.list = filterPointsHistory(store, this.filter)
|
|
}
|
|
}
|
|
}
|
|
</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';
|
|
</style>
|