整合api请求、添加购买会员卡页面、登陆页面

2026-06-23 22:17:53 +08:00
parent 1c547a717e
commit 8d8c823616
70 changed files with 7666 additions and 2656 deletions
@@ -61,81 +61,84 @@
    </view>
 </template>

-<script>
+<script setup>
+import { ref, computed } from 'vue'
 import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
-import { PAGE, navigateToPage } from '@/common/constants/routes.js'
-import { moduleMock, getCouponsByStatus, useCoupon, deleteExpiredCoupon } from '@/common/memberInfo/moduleStore.js'
+import { PAGE, navigateToPage, backToMemberCenter } from '@/common/constants/routes.js'
+import { getCouponsByStatus, useCoupon, deleteExpiredCoupon } from '@/common/memberInfo/moduleStore.js'
 import { loadMemberStore, persistMemberStore } from '@/common/memberInfo/store.js'
-import { subPageMixin } from '@/common/memberInfo/mixins.js'

-export default {
-    components: { MemberInfoSubNav },
-    mixins: [subPageMixin],
-    data() {
-        return {
-            tabs: moduleMock.couponTabs,
-            activeTab: 'available',
-            coupons: []
-        }
-    },
-    computed: {
-        displayedCoupons() {
-            return this.coupons.filter((c) => c.status === this.activeTab)
-        },
-        countByTab() {
-            return {
-                available: this.coupons.filter((c) => c.status === 'available').length,
-                used: this.coupons.filter((c) => c.status === 'used').length,
-                expired: this.coupons.filter((c) => c.status === 'expired').length
-            }
-        },
-        activeTabLabel() {
-            return this.tabs.find((t) => t.key === this.activeTab)?.label || ''
-        }
-    },
-    onShow() {
-        this.refreshList()
-    },
-    methods: {
-        refreshList() {
-            const store = loadMemberStore()
-            this.coupons = [
-                ...getCouponsByStatus(store, 'available'),
-                ...getCouponsByStatus(store, 'used'),
-                ...getCouponsByStatus(store, 'expired')
-            ]
-        },
-        onCouponTap(item) {
-            navigateToPage(`${PAGE.COUPON_DETAIL}?id=${item.id}`)
-        },
-        useNow(item) {
-            uni.showModal({
-                title: '使用优惠券',
-                content: `确认使用「${item.title}」？`,
-                success: (res) => {
-                    if (!res.confirm) return
-                    const store = loadMemberStore()
-                    useCoupon(store, item.id)
-                    persistMemberStore(store)
-                    this.refreshList()
-                    navigateToPage(PAGE.COURSE_LIST)
-                }
-            })
-        },
-        removeExpired(item) {
-            const store = loadMemberStore()
-            deleteExpiredCoupon(store, item.id)
-            persistMemberStore(store)
-            this.refreshList()
-        },
-        goCenter() {
-            navigateToPage(PAGE.COUPON_CENTER)
-        }
+const tabs = ref([
+    { key: 'available', label: '可用' },
+    { key: 'used', label: '已用' },
+    { key: 'expired', label: '已失效' }
+])
+const activeTab = ref('available')
+const coupons = ref([])
+
+const displayedCoupons = computed(() => {
+    return coupons.value.filter((c) => c.status === activeTab.value)
+})
+
+const countByTab = computed(() => {
+    return {
+        available: coupons.value.filter((c) => c.status === 'available').length,
+        used: coupons.value.filter((c) => c.status === 'used').length,
+        expired: coupons.value.filter((c) => c.status === 'expired').length
    }
+})
+
+const activeTabLabel = computed(() => {
+    return tabs.value.find((t) => t.key === activeTab.value)?.label || ''
+})
+
+function refreshList() {
+    const store = loadMemberStore()
+    coupons.value = [
+        ...getCouponsByStatus(store, 'available'),
+        ...getCouponsByStatus(store, 'used'),
+        ...getCouponsByStatus(store, 'expired')
+    ]
 }
+
+function goBack() {
+    backToMemberCenter()
+}
+
+function onCouponTap(item) {
+    navigateToPage(`${PAGE.COUPON_DETAIL}?id=${item.id}`)
+}
+
+function useNow(item) {
+    uni.showModal({
+        title: '使用优惠券',
+        content: `确认使用「${item.title}」？`,
+        success: (res) => {
+            if (!res.confirm) return
+            const store = loadMemberStore()
+            useCoupon(store, item.id)
+            persistMemberStore(store)
+            refreshList()
+            navigateToPage(PAGE.COURSE_LIST)
+        }
+    })
+}
+
+function removeExpired(item) {
+    const store = loadMemberStore()
+    deleteExpiredCoupon(store, item.id)
+    persistMemberStore(store)
+    refreshList()
+}
+
+function goCenter() {
+    navigateToPage(PAGE.COUPON_CENTER)
+}
+
+refreshList()
 </script>

-<style>
+<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';