修改细节

src/components/CustomNavigationBar.vue

@@ -84,9 +84,9 @@ onMounted(() => {
 .nav-back-btn {
   position: absolute;
   left: 16px;
-  display: flex;
+  /* display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: center; */
   width: 44px;
   height: 100%;
 }

src/pages/income/income.vue

@@ -4,13 +4,13 @@ import { ref } from 'vue'
 import { LOGIN_PAGE } from '@/router/config'
 import { useUserStore } from '@/store'
 import { useTokenStore } from '@/store/token'
-import { changtime } from '@/utils'
+import { changtime, menuButtonInfo, safeAreaInsets, systemInfo } from '@/utils'
 
 definePage({
-    style: {
-        navigationBarTitleText: '收益',
-        navigationStyle: 'custom',
-    },
+  style: {
+    navigationBarTitleText: '收益',
+    navigationStyle: 'custom',
+  },
 })
 
 const userStore = useUserStore()
@@ -20,91 +20,116 @@ const { userInfo } = storeToRefs(userStore)
 
 // 微信小程序下登录
 async function handleLogin() {
-    // #ifdef MP-WEIXIN
-    // 微信登录
-    await tokenStore.wxLogin()
+  // #ifdef MP-WEIXIN
+  // 微信登录
+  await tokenStore.wxLogin()
 
-    // #endif
-    // #ifndef MP-WEIXIN
-    uni.navigateTo({
-        url: `${LOGIN_PAGE}`,
-    })
-    // #endif
+  // #endif
+  // #ifndef MP-WEIXIN
+  uni.navigateTo({
+    url: `${LOGIN_PAGE}`,
+  })
+  // #endif
 }
 
 function handleLogout() {
-    uni.showModal({
-        title: '提示',
-        content: '确定要退出登录吗？',
-        success: (res) => {
-            if (res.confirm) {
-                // 清空用户信息
-                useTokenStore().logout()
-                // 执行退出登录逻辑
-                uni.showToast({
-                    title: '退出登录成功',
-                    icon: 'success',
-                })
-                // #ifdef MP-WEIXIN
-                // 微信小程序，去首页
-                // uni.reLaunch({ url: '/pages/index/index' })
-                // #endif
-                // #ifndef MP-WEIXIN
-                // 非微信小程序，去登录页
-                // uni.navigateTo({ url: LOGIN_PAGE })
-                // #endif
-            }
-        },
-    })
-}
-
-// 顶部导航栏高度,设置banner位置
-const navigationBarHeight = ref(0)
-// #ifdef MP-WEIXIN
-function getNavigationBarHeight() {
-    uni.getSystemInfo({
-        success: (res) => {
-            const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
-            console.log('顶部导航栏高度:', res.statusBarHeight, menuButtonInfo)
-            // 顶部导航栏高度 = 状态栏高度 + 胶囊的高度
-            navigationBarHeight.value = res.statusBarHeight + menuButtonInfo.height + 12
-        },
-    })
+  uni.showModal({
+    title: '提示',
+    content: '确定要退出登录吗？',
+    success: (res) => {
+      if (res.confirm) {
+        // 清空用户信息
+        useTokenStore().logout()
+        // 执行退出登录逻辑
+        uni.showToast({
+          title: '退出登录成功',
+          icon: 'success',
+        })
+        // #ifdef MP-WEIXIN
+        // 微信小程序，去首页
+        // uni.reLaunch({ url: '/pages/index/index' })
+        // #endif
+        // #ifndef MP-WEIXIN
+        // 非微信小程序，去登录页
+        // uni.navigateTo({ url: LOGIN_PAGE })
+        // #endif
+      }
+    },
+  })
 }
-getNavigationBarHeight()
-// #endif
 
 function menuClick(page: string) {
-    uni.navigateTo({
-        url: `/pages-A/${page}/index`,
-    })
+  uni.navigateTo({
+    url: `/pages-A/${page}/index`,
+  })
 }
 
 const show = ref(false)
 const filterValue = ref(Number(new Date()))
 function confirm() {
-    // 函数实现
-    show.value = false
+  // 函数实现
+  show.value = false
 }
 function cancel() {
-    show.value = false
+  show.value = false
 }
 function close() {
-    show.value = false
+  show.value = false
 }
 function showTimeFilter() {
-    show.value = true
+  show.value = true
 }
-
+const wjsList = ref([
+  {
+    id: 1,
+    nickName: '昵称1',
+    name: '优惠券1',
+    price: 1000,
+    date: '2023-08-01 10:00:00',
+  },
+  {
+    id: 2,
+    nickName: '昵称2',
+    name: '优惠券2',
+    price: 1300,
+    date: '2023-10-01 10:00:00',
+  },
+])
+const yjsList = ref([
+  {
+    id: 1,
+    nickName: '昵称3',
+    name: '优惠券3',
+    price: 2300,
+    date: '2023-10-01 10:00:00',
+  },
+  {
+    id: 2,
+    nickName: '昵称4',
+    name: '优惠券4',
+    price: 300,
+    date: '2023-10-01 10:00:00',
+  },
+])
+const list = ref([])
+onLoad(() => {
+  list.value = [...wjsList.value]
+})
 const activeTab = ref('pending')
 function changeTab(tab: string) {
     activeTab.value = tab
+    if (tab === 'pending') {
+        list.value = [...wjsList.value]
+    }
+    else {
+        list.value = [...yjsList.value]
+    }
 }
 
 function goPage(page: string) {
-    uni.navigateTo({
-        url: `/pages-A/${page}/index`,
-    })
+  uni.navigateTo({
+    url: `/pages-A/${page}/index`,
+  })
 }
 </script>
 
@@ -112,7 +137,7 @@ function goPage(page: string) {
     <view class="profile-container">
         <!-- 顶部区域 -->
         <view class="income-header" style="background: url('../../static/images/income/income-bg.png') no-repeat center center; background-size: cover;">
-            <view class="income-header-avatar-info" :style="{ paddingTop: `${navigationBarHeight}px` }">
+            <view class="income-header-avatar-info" :style="{ paddingTop: `${safeAreaInsets.top + menuButtonInfo.height + 12}px` }">
                 <view class="income-header-balance">
                     当前账户余额（元）
                 </view>
@@ -179,41 +204,23 @@ function goPage(page: string) {
             </view>
             <!-- 优惠券列表 -->
             <view class="income-header-menu-list">
-                <view class="income-header-menu-item" @click="menuClick('applyForm')">
-                    <view class="income-header-menu-icon">
-                        <image src="@/static/images/me/coupon-need.png" mode="aspectFit" />
-                        <view class="income-header-menu-text">
-                            <view class="income-header-menu-text-nickname">
-                                昵称
-                            </view>
-                            <view>优惠券名称</view>
-                        </view>
-                    </view>
-                    <view class="income-header-menu-left">
-                        <view class="income-header-menu-left-amount">
-                            ￥628.00
-                        </view>
-                        <view class="income-header-menu-left-time">
-                            2023/08/01 10:00:00
-                        </view>
-                    </view>
-                </view>
-                <view class="income-header-menu-item" @click="menuClick('applyForm')">
+                <view v-for="item in list" :key="item.id" class="income-header-menu-item">
                     <view class="income-header-menu-icon">
-                        <image src="@/static/images/me/coupon-need.png" mode="aspectFit" />
+                        <image v-if="activeTab === 'settled'" src="@/static/images/income/hb.png" mode="aspectFit" />
+                        <image v-else src="@/static/images/income/djs.png" mode="aspectFit" />
                         <view class="income-header-menu-text">
                             <view class="income-header-menu-text-nickname">
-                                昵称
+                                {{ item.nickName }}
                             </view>
-                            <view>优惠券名称</view>
+                            <view>{{ item.name }}</view>
                         </view>
                     </view>
                     <view class="income-header-menu-left">
                         <view class="income-header-menu-left-amount">
-                            ￥628.00
+                            ￥{{ item.price }}
                         </view>
                         <view class="income-header-menu-left-time">
-                            2023/08/01 10:00:00
+                            {{ item.date }}
                         </view>
                     </view>
                 </view>