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

2026-06-04 14:18:53 +08:00
parent 1fa2fbd3f3
commit a0026b1da5
170 changed files with 18092 additions and 35 deletions
@@ -0,0 +1,93 @@
+<template>
+    <view class="scroll-container theme-light">
+        <view class="bt-page">
+            <MemberInfoSubNav title="积分商城" @back="onBack" />
+            <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>
+                </view>
+                <view class="bt-card">
+                    <text class="bt-card__title">兑换商品</text>
+                    <view class="mi-mod-rewards">
+                        <view
+                            v-for="item in rewards"
+                            :key="item.id"
+                            class="mi-mod-reward"
+                            hover-class="mi-tap-card--hover"
+                            @tap="redeem(item)"
+                        >
+                            <image class="mi-mod-reward__icon" :src="item.icon" mode="aspectFit" />
+                            <text class="mi-mod-reward__name">{{ item.name }}</text>
+                            <text class="mi-mod-reward__cost">{{ item.cost }} 积分</text>
+                            <text class="mi-mod-reward__stock">剩余 {{ item.stock }}</text>
+                        </view>
+                    </view>
+                </view>
+                <view v-if="redeemRecords.length" class="bt-card">
+                    <text class="bt-card__title">兑换记录</text>
+                    <view v-for="r in redeemRecords" :key="r.id" class="mi-mod-points-row">
+                        <view class="mi-mod-points-row__info">
+                            <text class="mi-mod-points-row__title">{{ r.name }}</text>
+                            <text class="mi-mod-points-row__time">{{ r.time }}</text>
+                        </view>
+                        <text class="mi-mod-points-row__amount mi-mod-points-row__amount--spend">-{{ r.cost }}</text>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
+import { PAGE, goBackOrTab } from '@/common/constants/routes.js'
+import { loadMemberStore, persistMemberStore } from '@/common/memberInfo/store.js'
+import { getPointsPageData, redeemPointsReward } from '@/common/memberInfo/moduleStore.js'
+
+export default {
+    components: { MemberInfoSubNav },
+    data() {
+        return { balance: 0, rewards: [], redeemRecords: [] }
+    },
+    onShow() {
+        const data = getPointsPageData(loadMemberStore())
+        this.balance = data.balance
+        this.rewards = data.rewards
+        this.redeemRecords = data.redeemRecords
+    },
+    methods: {
+        onBack() { goBackOrTab(PAGE.POINTS) },
+        redeem(item) {
+            uni.showModal({
+                title: '确认兑换',
+                content: `使用 ${item.cost} 积分兑换「${item.name}」？`,
+                success: (res) => {
+                    if (!res.confirm) return
+                    const store = loadMemberStore()
+                    const result = redeemPointsReward(store, item.id)
+                    uni.showToast({ title: result.message, icon: result.ok ? 'success' : 'none' })
+                    if (result.ok) {
+                        persistMemberStore(store)
+                        const data = getPointsPageData(store)
+                        this.balance = data.balance
+                        this.rewards = data.rewards
+                        this.redeemRecords = data.redeemRecords
+                    }
+                }
+            })
+        }
+    }
+}
+</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>