收益接口对接

src/api/income.ts

@@ -0,0 +1,40 @@
+import { http } from '@/http/alova'
+
+/**
+ *
+ * 发券人账户表-通过userId查询账户信息
+ */
+
+// export function getCouponIssuerApplyById() {
+//     return http.Get<CouponIssuerApplyByIdResponse>('/couponCenter/APP/couponIssuerAccount/queryByUserId')
+// }
+
+export interface CouponIssuerAccountByPageMapForm {
+    pageNo: number
+    pageSize: number
+    startTime: string
+    endTime: string
+    status: number // 0-待结算, 1-已结算/成功
+    type: number // 明细类型: 1-佣金收入, 2-提现支出, 3-退款扣减, 4-系统调整
+}
+
+// 定义账户明细项接口
+export interface AccountDetailItem {
+    id: number
+    receiveUserName: string
+    couponName: string
+    changeAmount: number
+    settleTime: string
+    [key: string]: any
+}
+
+// 定义分页响应数据接口
+export interface PageMapResponse {
+    detailList: AccountDetailItem[]
+    [key: string]: any
+}
+
+// 获取账户明细分页数据(Map格式)
+export function getCouponIssuerAccountByPageMap(couponIssuerAccountByPageMapForm: CouponIssuerAccountByPageMapForm) {
+    return http.Post<PageMapResponse>('/couponCenter/APP/couponIssuerAccountDetail/pageMap', couponIssuerAccountByPageMapForm)
+}

src/api/types/income.ts

@@ -0,0 +1,15 @@
+export interface couponIssuerApplyApplyByAddResponse {
+    name: string
+    phone: string
+    status: string
+    applyReason: string
+    auditBy: string
+    auditRemark: string
+    auditTime: string
+}
+
+export interface accountCountData {
+    balance: number
+    withdrawableAmount: number
+    unsettledAmount: number
+}

src/pages/income/income.vue

@@ -1,149 +1,127 @@
 <script lang="ts" setup>
+import type { AccountDetailItem } from '@/api/income'
+import { useRequest } from 'alova/client'
 import { storeToRefs } from 'pinia'
 import { ref } from 'vue'
+import { getAccountCount } from '@/api/home'
+import { getCouponIssuerAccountByPageMap, PageMapResponse } from '@/api/income'
+
 import { LOGIN_PAGE } from '@/router/config'
 import { useUserStore } from '@/store'
 import { useTokenStore } from '@/store/token'
 import { changtime, menuButtonInfo, safeAreaInsets, systemInfo } from '@/utils'
 
 definePage({
-  style: {
-    navigationBarTitleText: '收益',
-    navigationStyle: 'custom',
-  },
+    style: {
+        navigationBarTitleText: '收益',
+        navigationStyle: 'custom',
+    },
 })
 
 const userStore = useUserStore()
 const tokenStore = useTokenStore()
 // 使用storeToRefs解构userInfo
 const { userInfo } = storeToRefs(userStore)
-
-// 微信小程序下登录
-async function handleLogin() {
-  // #ifdef MP-WEIXIN
-  // 微信登录
-  await tokenStore.wxLogin()
-
-  // #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
-      }
-    },
-  })
-}
-
-function menuClick(page: string) {
-  uni.navigateTo({
-    url: `/pages-A/${page}/index`,
-  })
-}
+const { hasLogin } = storeToRefs(tokenStore)
 
 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
 }
+// 发券人账户表-通过userId查询账户信息
+const { send: getAccountCountRequest, data: accountCountData } = useRequest(getAccountCount, {
+    immediate: false,
+})
+
+const queryForm = ref({
+    pageNo: 1,
+    pageSize: 10,
+    startTime: '',
+    endTime: '',
+    status: 0, // 0-待结算, 1-已结算/成功
+    type: 1, // 明细类型: 1-佣金收入, 2-提现支出, 3-退款扣减, 4-系统调整
+})
+
+// 获取账户明细分页数据(Map格式)
+const { send: getCouponIssuerAccountByPageMapRequest, data: couponIssuerAccountByPageMapData } = useRequest(
+    getCouponIssuerAccountByPageMap,
+    { immediate: false },
+)
+const list = ref<AccountDetailItem[]>([])
+
+onShow(async () => {
+    // 登录后查询收益数据
+    if (hasLogin) {
+        try {
+            await getAccountCountRequest()
+            await getCouponIssuerAccountByPageMapRequest(queryForm.value)
+            // 使用可选链和空值合并运算符避免undefined错误，直接赋值而非展开运算符
+            list.value = couponIssuerAccountByPageMapData.value?.detailList || []
+        }
+        catch (error) {
+            console.error('获取收益数据失败:', error)
+            uni.showToast({ title: '获取数据失败', icon: 'error' })
+            list.value = []
+        }
+    }
+})
+
 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([])
+const wjsList = ref<AccountDetailItem[]>([])
+const yjsList = ref<AccountDetailItem[]>([])
 onLoad(() => {
-  list.value = [...wjsList.value]
+    list.value = wjsList.value
 })
 const activeTab = ref('pending')
-function changeTab(tab: string) {
+async function changeTab(tab: string) {
+    console.log(999, activeTab.value, tab)
+    if (activeTab.value === tab)
+        return
     activeTab.value = tab
-    if (tab === 'pending') {
-        list.value = [...wjsList.value]
+    queryForm.value.status = tab === 'pending' ? 0 : 1
+
+    try {
+        await getCouponIssuerAccountByPageMapRequest(queryForm.value)
+        // 使用可选链和空值合并运算符避免undefined错误，直接赋值而非展开运算符
+        list.value = couponIssuerAccountByPageMapData.value?.detailList || []
     }
-    else {
-        list.value = [...yjsList.value]
+    catch (error) {
+        console.error('切换标签页失败:', error)
+        uni.showToast({ title: '获取数据失败', icon: 'error' })
+        list.value = []
     }
 }
 
 function goPage(page: string) {
-  uni.navigateTo({
-    url: `/pages-A/${page}/index`,
-  })
+    uni.navigateTo({
+        url: `/pages-A/${page}/index`,
+    })
 }
 </script>
 
 <template>
     <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: `${safeAreaInsets.top + menuButtonInfo.height + 12}px` }">
+        <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: `${safeAreaInsets.top + menuButtonInfo.height + 12}px` }">
                 <view class="income-header-balance">
                     当前账户余额（元）
                 </view>
                 <view class="income-header-balance-num">
                     <view class="income-header-balance-num-amount">
-                        7297491.08
+                        {{ accountCountData?.balance }}
                     </view>
                     <view class="income-header-balance-num-btns">
                         <view class="income-header-balance-num-btn js" @click="goPage('unlockRewards')">
@@ -158,7 +136,7 @@ function goPage(page: string) {
             <view class="income-header-tips">
                 <view class="income-header-tips-item">
                     <view class="income-header-tips-item-num">
-                        729000.00
+                        {{ accountCountData?.withdrawableAmount }}
                     </view>
                     <view class="income-header-tips-item-des">
                         可提现金额
@@ -166,7 +144,7 @@ function goPage(page: string) {
                 </view>
                 <view class="income-header-tips-item">
                     <view class="income-header-tips-item-num">
-                        1,125
+                        {{ accountCountData?.unsettledAmount }}
                     </view>
                     <view class="income-header-tips-item-des">
                         未结算金额
@@ -187,10 +165,12 @@ function goPage(page: string) {
         <view class="income-header-menu">
             <!-- 结算筛选 -->
             <view class="income-header-menu-filter">
-                <view class="income-header-menu-filter-item" :class="[activeTab === 'pending' ? 'active' : '']" @click="changeTab('pending')">
+                <view class="income-header-menu-filter-item" :class="[activeTab === 'pending' ? 'active' : '']"
+                    @click="changeTab('pending')">
                     待结算
                 </view>
-                <view class="income-header-menu-filter-item" :class="[activeTab === 'settled' ? 'active' : '']" @click="changeTab('settled')">
+                <view class="income-header-menu-filter-item" :class="[activeTab === 'settled' ? 'active' : '']"
+                    @click="changeTab('settled')">
                     已结算
                 </view>
             </view>
@@ -200,7 +180,7 @@ function goPage(page: string) {
                     <text>{{ changtime(filterValue) }}</text>
                     <up-icon name="arrow-down" color="#666666" size="14" />
                 </view>
-                <view>合计：￥4396.00</view>
+                <view>合计：￥{{ couponIssuerAccountByPageMapData?.totalAmount || 0 }}</view>
             </view>
             <!-- 优惠券列表 -->
             <view class="income-header-menu-list">
@@ -210,248 +190,276 @@ function goPage(page: string) {
                         <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 }}
+                                {{ item.receiveUserName }}
                             </view>
-                            <view>{{ item.name }}</view>
+                            <view>{{ item.couponName }}</view>
                         </view>
                     </view>
                     <view class="income-header-menu-left">
                         <view class="income-header-menu-left-amount">
-                            ￥{{ item.price }}
+                            ￥{{ item.changeAmount }}
                         </view>
                         <view class="income-header-menu-left-time">
-                            {{ item.date }}
+                            {{ item.settleTime }}
                         </view>
                     </view>
                 </view>
             </view>
         </view>
-        <up-datetime-picker
-            v-model="filterValue"
-            :show="show"
-            mode="year-month"
-            close-on-click-overlay
-            @confirm="confirm"
-            @cancel="cancel"
-        />
+        <up-datetime-picker v-model="filterValue" :show="show" mode="year-month" close-on-click-overlay
+            @confirm="confirm" @cancel="cancel" />
     </view>
 </template>
 
 <style lang="scss" scoped>
 .profile-container {
-  font-family: Alibaba PuHuiTi;
-  min-height: 100vh;
-  background-color: #f5f5f5;
-  line-height: 1;
-  .income-header {
-    height: 525rpx;
-    .income-header-avatar-info {
-      display: flex;
-      flex-direction: column;
-      gap: 30rpx;
-      padding: 0 24rpx;
-      .income-header-balance {
-        font-weight: 400;
-        font-size: 26rpx;
-        color: #ffffff;
-      }
-      .income-header-balance-num {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        .income-header-balance-num-amount {
-          font-weight: 500;
-          font-size: 65rpx;
-          color: #ffffff;
-        }
-        .income-header-balance-num-btns {
-          display: flex;
-          gap: 15rpx;
-          .income-header-balance-num-btn {
-            padding: 20rpx 40rpx;
-            border-radius: 33rpx;
-            font-weight: 400;
-            font-size: 26rpx;
-            &.js {
-              background: #da4c47;
-              color: #ffffff;
+    font-family: Alibaba PuHuiTi;
+    min-height: 100vh;
+    background-color: #f5f5f5;
+    line-height: 1;
+
+    .income-header {
+        height: 525rpx;
+
+        .income-header-avatar-info {
+            display: flex;
+            flex-direction: column;
+            gap: 30rpx;
+            padding: 0 24rpx;
+
+            .income-header-balance {
+                font-weight: 400;
+                font-size: 26rpx;
+                color: #ffffff;
             }
-            &.tx {
-              background: #bfbfbf;
-              color: #747474;
+
+            .income-header-balance-num {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                .income-header-balance-num-amount {
+                    font-weight: 500;
+                    font-size: 65rpx;
+                    color: #ffffff;
+                }
+
+                .income-header-balance-num-btns {
+                    display: flex;
+                    gap: 15rpx;
+
+                    .income-header-balance-num-btn {
+                        padding: 20rpx 40rpx;
+                        border-radius: 33rpx;
+                        font-weight: 400;
+                        font-size: 26rpx;
+
+                        &.js {
+                            background: #da4c47;
+                            color: #ffffff;
+                        }
+
+                        &.tx {
+                            background: #bfbfbf;
+                            color: #747474;
+                        }
+                    }
+                }
             }
-          }
-        }
-      }
-    }
-    .income-header-tips {
-      height: 124rpx;
-      display: flex;
-      background: linear-gradient(114deg, #f67873, #fb847f, #f67873);
-      border-radius: 10rpx;
-      margin: 47rpx 24rpx 0 24rpx;
-      .income-header-tips-item {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        gap: 15rpx;
-        font-weight: 500;
-        font-size: 34rpx;
-        color: #ffffff;
-        line-height: 1;
-        position: relative;
-        &:first-child:after {
-          content: '';
-          position: absolute;
-          top: 50%;
-          right: 0;
-          transform: translateY(-50%);
-          width: 2px;
-          height: 40rpx;
-          background: #ffffff;
-        }
-        .income-header-tips-item-num {
-          font-weight: bold;
         }
-        .income-header-tips-item-des {
-          font-weight: 400;
-          font-size: 24rpx;
-          color: #ffffff;
+
+        .income-header-tips {
+            height: 124rpx;
+            display: flex;
+            background: linear-gradient(114deg, #f67873, #fb847f, #f67873);
+            border-radius: 10rpx;
+            margin: 47rpx 24rpx 0 24rpx;
+
+            .income-header-tips-item {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                gap: 15rpx;
+                font-weight: 500;
+                font-size: 34rpx;
+                color: #ffffff;
+                line-height: 1;
+                position: relative;
+
+                &:first-child:after {
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    right: 0;
+                    transform: translateY(-50%);
+                    width: 2px;
+                    height: 40rpx;
+                    background: #ffffff;
+                }
+
+                .income-header-tips-item-num {
+                    font-weight: bold;
+                }
+
+                .income-header-tips-item-des {
+                    font-weight: 400;
+                    font-size: 24rpx;
+                    color: #ffffff;
+                }
+            }
         }
-      }
-    }
-  }
-
-  .income-header-notice {
-    margin: -50rpx 24rpx 24rpx 24rpx;
-    background: #ffffff;
-    border-radius: 10rpx;
-    display: flex;
-    align-items: center;
-    gap: 20rpx;
-    padding: 28rpx 20rpx;
-    .income-header-notice-icon {
-      width: 52rpx;
-      height: 35rpx;
-      image {
-        width: 100%;
-        height: 100%;
-      }
     }
-    .income-header-notice-content {
-      font-weight: 400;
-      font-size: 24rpx;
-      color: #333333;
-      text {
-        color: #c52d27;
-      }
-    }
-  }
-
-  .income-header-menu {
-    // background: #ffffff;
-    border-radius: 10rpx 10rpx 0rpx 0rpx;
-    margin: 24rpx 24rpx 0;
-    .income-header-menu-filter {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      font-weight: 500;
-      font-size: 32rpx;
-      color: #333333;
-      height: 90rpx;
-      background: #ffffff;
-      box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(213, 213, 213, 0.29);
-      border-radius: 10rpx 10rpx 0rpx 0rpx;
-      .income-header-menu-filter-item {
-        flex: 1;
+
+    .income-header-notice {
+        margin: -50rpx 24rpx 24rpx 24rpx;
+        background: #ffffff;
+        border-radius: 10rpx;
         display: flex;
-        justify-content: center;
         align-items: center;
-        position: relative;
-        height: 100%;
-        &.active {
-          color: #ed6b66;
-          &:after {
-            content: '';
-            position: absolute;
-            bottom: 0;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 67rpx;
-            height: 6rpx;
-            background: #ed6b66;
-            border-radius: 3rpx;
-          }
+        gap: 20rpx;
+        padding: 28rpx 20rpx;
+
+        .income-header-notice-icon {
+            width: 52rpx;
+            height: 35rpx;
+
+            image {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .income-header-notice-content {
+            font-weight: 400;
+            font-size: 24rpx;
+            color: #333333;
+
+            text {
+                color: #c52d27;
+            }
         }
-      }
-    }
-    .income-menu-time-filter {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      font-weight: 400;
-      font-size: 24rpx;
-      color: #333333;
-      padding: 50rpx 20rpx 14rpx;
-      background: #ffffff;
-      margin-top: 4rpx;
-      .income-menu-time-filter-text {
-        font-weight: 400;
-        font-size: 26rpx;
-        color: #000000;
-        display: flex;
-        align-items: center;
-        gap: 12rpx;
-      }
     }
-    .income-header-menu-list {
-      background: #ffffff;
-      .income-header-menu-item {
-        height: 88rpx;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        border-bottom: 1px solid #eeeeee;
-        padding: 32rpx 0 29rpx;
-        margin: 0 20rpx;
-        &:last-child {
-          border-bottom: none;
+
+    .income-header-menu {
+        // background: #ffffff;
+        border-radius: 10rpx 10rpx 0rpx 0rpx;
+        margin: 24rpx 24rpx 0;
+
+        .income-header-menu-filter {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-weight: 500;
+            font-size: 32rpx;
+            color: #333333;
+            height: 90rpx;
+            background: #ffffff;
+            box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(213, 213, 213, 0.29);
+            border-radius: 10rpx 10rpx 0rpx 0rpx;
+
+            .income-header-menu-filter-item {
+                flex: 1;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                position: relative;
+                height: 100%;
+
+                &.active {
+                    color: #ed6b66;
+
+                    &:after {
+                        content: '';
+                        position: absolute;
+                        bottom: 0;
+                        left: 50%;
+                        transform: translateX(-50%);
+                        width: 67rpx;
+                        height: 6rpx;
+                        background: #ed6b66;
+                        border-radius: 3rpx;
+                    }
+                }
+            }
         }
-        .income-header-menu-icon {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          gap: 19rpx;
-          image {
-            width: 60rpx;
-            height: 60rpx;
-          }
-          .income-header-menu-text {
+
+        .income-menu-time-filter {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
             font-weight: 400;
             font-size: 24rpx;
-            color: #888888;
-            .income-header-menu-text-nickname {
-              font-size: 28rpx;
-              color: #222222;
-              margin-bottom: 18rpx;
+            color: #333333;
+            padding: 50rpx 20rpx 14rpx;
+            background: #ffffff;
+            margin-top: 4rpx;
+
+            .income-menu-time-filter-text {
+                font-weight: 400;
+                font-size: 26rpx;
+                color: #000000;
+                display: flex;
+                align-items: center;
+                gap: 12rpx;
             }
-          }
         }
-        .income-header-menu-left {
-          font-weight: 400;
-          font-size: 24rpx;
-          color: #888888;
-          .income-header-menu-left-amount {
-            font-size: 28rpx;
-            color: #222222;
-            margin-bottom: 18rpx;
-          }
+
+        .income-header-menu-list {
+            background: #ffffff;
+
+            .income-header-menu-item {
+                height: 88rpx;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                border-bottom: 1px solid #eeeeee;
+                padding: 32rpx 0 29rpx;
+                margin: 0 20rpx;
+
+                &:last-child {
+                    border-bottom: none;
+                }
+
+                .income-header-menu-icon {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    gap: 19rpx;
+
+                    image {
+                        width: 60rpx;
+                        height: 60rpx;
+                    }
+
+                    .income-header-menu-text {
+                        font-weight: 400;
+                        font-size: 24rpx;
+                        color: #888888;
+
+                        .income-header-menu-text-nickname {
+                            font-size: 28rpx;
+                            color: #222222;
+                            margin-bottom: 18rpx;
+                        }
+                    }
+                }
+
+                .income-header-menu-left {
+                    font-weight: 400;
+                    font-size: 24rpx;
+                    color: #888888;
+
+                    .income-header-menu-left-amount {
+                        font-size: 28rpx;
+                        color: #222222;
+                        margin-bottom: 18rpx;
+                        text-align: right;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
 </style>