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

2026-06-04 14:18:53 +08:00
parent 8e7c8f52f6
commit 7350293d0e
170 changed files with 18092 additions and 35 deletions
@@ -0,0 +1,74 @@
+<template>
+    <view class="scroll-container theme-light">
+        <view class="bt-page" v-if="coupon">
+            <MemberInfoSubNav title="优惠券详情" @back="onBack" />
+            <view class="bt-page__body">
+                <view class="mi-mod-coupon mi-mod-coupon--detail">
+                    <view class="mi-mod-coupon__left">
+                        <text class="mi-mod-coupon__amount">¥{{ coupon.amount }}</text>
+                        <text class="mi-mod-coupon__min">满{{ coupon.minSpend }}可用</text>
+                    </view>
+                    <view class="mi-mod-coupon__right">
+                        <text class="mi-mod-coupon__title">{{ coupon.title }}</text>
+                        <text class="mi-mod-coupon__desc">{{ coupon.desc }}</text>
+                        <text class="mi-mod-coupon__expire">有效期至 {{ coupon.expire }}</text>
+                    </view>
+                </view>
+                <view class="bt-card">
+                    <text class="bt-card__title">使用规则</text>
+                    <text class="bt-card__desc" style="white-space: pre-line;">{{ coupon.rules }}</text>
+                </view>
+                <view class="bt-card">
+                    <text class="bt-card__title">适用范围</text>
+                    <text class="bt-card__desc">{{ coupon.scope }}</text>
+                </view>
+                <view class="bt-card">
+                    <text class="bt-card__title">使用流程</text>
+                    <text class="bt-card__desc">{{ coupon.flow }}</text>
+                </view>
+                <view v-if="coupon.status === 'available'" class="bt-footer-actions">
+                    <view class="bt-btn bt-btn--primary" hover-class="mi-tap-btn--hover" @tap="useNow">
+                        <text class="bt-btn__text">立即使用</text>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
+import { PAGE, navigateToPage, goBackOrTab } from '@/common/constants/routes.js'
+import { loadMemberStore } from '@/common/memberInfo/store.js'
+import { getCouponById } from '@/common/memberInfo/moduleStore.js'
+
+export default {
+    components: { MemberInfoSubNav },
+    data() {
+        return { coupon: null }
+    },
+    onLoad(options) {
+        const store = loadMemberStore()
+        this.coupon = getCouponById(store, options?.id)
+    },
+    methods: {
+        onBack() { goBackOrTab(PAGE.COUPONS) },
+        useNow() {
+            navigateToPage(PAGE.COURSE_LIST)
+        }
+    }
+}
+</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';
+.mi-mod-coupon--detail { margin-bottom: 12px; }
+.bt-footer-actions .bt-btn { flex: 1; }
+</style>