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

gym-manage-uniapp/pages/memberInfo/memberCard.vue

@@ -117,77 +117,74 @@
     </view>
 </template>
 
-<script>
+<script setup>
+import { ref, computed } from 'vue'
 import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
-import { memberCardMock } from '@/common/memberInfo/mockData.js'
 import {
     loadMemberStore,
     computeRemainingDays,
     renewMemberCard
 } from '@/common/memberInfo/store.js'
-import { subPageMixin } from '@/common/memberInfo/mixins.js'
+import { backToMemberCenter } from '@/common/constants/routes.js'
 
-export default {
-    components: { MemberInfoSubNav },
-    mixins: [subPageMixin],
-    data() {
-        return {
-            card: {},
-            recordTabs: memberCardMock.recordTabs,
-            records: [],
-            rules: memberCardMock.rules,
-            activeFilter: 'all'
-        }
-    },
-    computed: {
-        filteredRecords() {
-            if (this.activeFilter === 'all') {
-                return this.records
-            }
-            return this.records.filter((item) => item.type === this.activeFilter)
-        },
-        remainingDays() {
-            return computeRemainingDays(this.card.validityEnd)
-        }
-    },
-    onShow() {
-        this.refreshFromStore()
-    },
-    methods: {
-        refreshFromStore() {
-            const store = loadMemberStore()
-            this.card = { ...store.card }
-            this.records = store.records.map((item) => ({ ...item }))
-        },
-        switchFilter(filter) {
-            this.activeFilter = filter
-        },
-        renewCard() {
-            uni.showModal({
-                title: '续费会员卡',
-                content: '确认续费 90 天？',
-                success: (res) => {
-                    if (!res.confirm) return
-                    const store = loadMemberStore()
-                    renewMemberCard(store, 90)
-                    this.activeFilter = 'all'
-                    this.refreshFromStore()
-                    uni.showToast({ title: '续费成功', icon: 'success' })
-                }
-            })
-        },
-        showRecordDetail(item) {
-            uni.showModal({
-                title: item.title,
-                content: `${item.time}\n变动：${item.value}`,
-                showCancel: false
-            })
-        }
+const card = ref({})
+const recordTabs = ref([])
+const records = ref([])
+const rules = ref([])
+const activeFilter = ref('all')
+
+const filteredRecords = computed(() => {
+    if (activeFilter.value === 'all') {
+        return records.value
     }
+    return records.value.filter((item) => item.type === activeFilter.value)
+})
+
+const remainingDays = computed(() => {
+    return computeRemainingDays(card.value.validityEnd)
+})
+
+function refreshFromStore() {
+    const store = loadMemberStore()
+    card.value = { ...store.card }
+    records.value = store.records.map((item) => ({ ...item }))
 }
+
+function goBack() {
+    backToMemberCenter()
+}
+
+function switchFilter(filter) {
+    activeFilter.value = filter
+}
+
+function renewCard() {
+    uni.showModal({
+        title: '续费会员卡',
+        content: '确认续费 90 天？',
+        success: (res) => {
+            if (!res.confirm) return
+            const store = loadMemberStore()
+            renewMemberCard(store, 90)
+            activeFilter.value = 'all'
+            refreshFromStore()
+            uni.showToast({ title: '续费成功', icon: 'success' })
+        }
+    })
+}
+
+function showRecordDetail(item) {
+    uni.showModal({
+        title: item.title,
+        content: `${item.time}\n变动：${item.value}`,
+        showCancel: false
+    })
+}
+
+refreshFromStore()
 </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';