会员个人中心页面初步完成

2026-06-04 14:18:53 +08:00
parent 1fa2fbd3f3
commit a0026b1da5
170 changed files with 18092 additions and 35 deletions
@@ -0,0 +1,86 @@
+<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>