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

2026-06-04 14:18:53 +08:00
parent 1fa2fbd3f3
commit a0026b1da5
170 changed files with 18092 additions and 35 deletions
@@ -0,0 +1,134 @@
+<template>
+    <view class="scroll-container theme-light">
+        <view class="bt-page">
+            <MemberInfoSubNav title="领券中心" @back="onBack" />
+            <view class="bt-page__body">
+                <view class="bt-card">
+                    <text class="bt-card__title">可领取优惠券</text>
+                    <text class="bt-card__desc">领取后自动放入「可用」列表</text>
+                </view>
+                <view
+                    v-for="item in list"
+                    :key="item.id"
+                    class="mi-center-coupon"
+                >
+                    <view class="mi-center-coupon__info">
+                        <text class="mi-center-coupon__amount">¥{{ item.amount }}</text>
+                        <view>
+                            <text class="mi-center-coupon__title">{{ item.title }}</text>
+                            <text class="mi-center-coupon__desc">{{ item.desc }} · {{ item.expireDays }}天有效</text>
+                        </view>
+                    </view>
+                    <view
+                        class="mi-center-coupon__btn"
+                        :class="{ 'mi-center-coupon__btn--done': item.claimed }"
+                        hover-class="mi-tap-btn--hover"
+                        @tap="claim(item)"
+                    >
+                        <text>{{ item.claimed ? '已领取' : '立即领取' }}</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 { getCouponCenterList, claimCouponFromCenter } from '@/common/memberInfo/moduleStore.js'
+
+export default {
+    components: { MemberInfoSubNav },
+    data() {
+        return { list: [] }
+    },
+    onShow() {
+        const store = loadMemberStore()
+        this.list = getCouponCenterList(store)
+    },
+    methods: {
+        onBack() { goBackOrTab(PAGE.COUPONS) },
+        claim(item) {
+            if (item.claimed) return
+            const store = loadMemberStore()
+            const result = claimCouponFromCenter(store, item.id)
+            uni.showToast({ title: result.message, icon: result.ok ? 'success' : 'none' })
+            if (result.ok) {
+                persistMemberStore(store)
+                this.list = getCouponCenterList(store)
+            }
+        }
+    }
+}
+</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';
+
+.mi-center-coupon {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px;
+    margin-bottom: 10px;
+    border-radius: 16px;
+    background: var(--bg-white, #fff);
+    box-shadow: var(--shadow-sm);
+}
+
+.mi-center-coupon__info {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+    flex: 1;
+}
+
+.mi-center-coupon__amount {
+    font-size: 28px;
+    font-weight: 800;
+    color: var(--accent-orange, #FF6B35);
+}
+
+.mi-center-coupon__title {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-dark, #1E2A3A);
+    display: block;
+}
+
+.mi-center-coupon__desc {
+    font-size: 11px;
+    color: var(--text-muted, #5E6F8D);
+    display: block;
+    margin-top: 2px;
+}
+
+.mi-center-coupon__btn {
+    padding: 8px 14px;
+    border-radius: 999px;
+}
+
+.mi-center-coupon__btn text {
+    font-size: 12px;
+    font-weight: 600;
+    color: #fff;
+}
+
+.mi-center-coupon__btn--done {
+    background: var(--bg-gray, #F2F5F9);
+}
+
+.mi-center-coupon__btn--done text {
+    color: var(--text-light, #8A99B4);
+}
+</style>