|
|
@@ -1,12 +1,11 @@
|
|
|
<script lang="ts" setup>
|
|
|
import { usePagination, useRequest } from 'alova/client'
|
|
|
import { storeToRefs } from 'pinia'
|
|
|
-import { computed, ref } from 'vue'
|
|
|
+import { computed, ref, watch } from 'vue'
|
|
|
import { getAccountCount } from '@/api/home'
|
|
|
import { getCouponIssuerAccountByPageMap } from '@/api/income'
|
|
|
import IncomeItem from '@/components/IncomeItem.vue'
|
|
|
import MescrollUni from '@/components/mescroll.vue'
|
|
|
-import MescrollEmpty from '@/custom-components/custom-mescroll/components/mescroll-empty.vue'
|
|
|
import { useShare } from '@/hooks/useShare'
|
|
|
import { useUserStore } from '@/store'
|
|
|
import { useTokenStore } from '@/store/token'
|
|
|
@@ -73,11 +72,20 @@ const { send, data: incomeData, pageCount, loading, page, pageSize, isLastPage,
|
|
|
immediate: false,
|
|
|
})
|
|
|
|
|
|
+watch(() => incomeData.value, (newVal) => {
|
|
|
+ if (newVal.length === 0 && !loading.value) {
|
|
|
+ mescroll.showEmpty()
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ mescroll.removeEmpty()
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
// ============ mescroll 配置 ============
|
|
|
const downOption = reactive({
|
|
|
use: true,
|
|
|
auto: false,
|
|
|
- bgColor: '#f8f8fa',
|
|
|
+ bgColor: '#ffffff',
|
|
|
textColor: '#666',
|
|
|
textInOffset: '下拉刷新',
|
|
|
textOutOffset: '释放刷新',
|
|
|
@@ -95,7 +103,13 @@ const upOption = reactive({
|
|
|
size: pageSize.value,
|
|
|
},
|
|
|
empty: {
|
|
|
- use: false,
|
|
|
+ use: true,
|
|
|
+ tip: '暂无数据',
|
|
|
+ btnText: '刷新试试',
|
|
|
+ icon: '/static/images/mescroll-empty.png',
|
|
|
+ fixed: false,
|
|
|
+ top: '200rpx',
|
|
|
+ zIndex: 1,
|
|
|
},
|
|
|
textNoMore: '--- 已经到底了 ---',
|
|
|
toTop: {
|
|
|
@@ -110,15 +124,6 @@ const upOption = reactive({
|
|
|
}
|
|
|
})
|
|
|
|
|
|
-const emptyOption = reactive({
|
|
|
- use: true,
|
|
|
- tip: '暂无数据',
|
|
|
- btnText: '刷新试试',
|
|
|
- icon: '/static/images/mescroll-empty.png',
|
|
|
- fixed: false,
|
|
|
- top: '200rpx',
|
|
|
-})
|
|
|
-
|
|
|
function mescrollInit(ref) {
|
|
|
mescroll = ref
|
|
|
}
|
|
|
@@ -226,8 +231,7 @@ function goPage(page: string) {
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <view class="profile-container"
|
|
|
- :style="{ minHeight: `calc(100vh - ${safeAreaInsets.top}px - ${safeAreaInsets.bottom}px - 100rpx)` }">
|
|
|
+ <view class="profile-container" :style="{ minHeight: `calc(100vh - 100rpx)` }">
|
|
|
<!-- <up-pull-refresh :refreshing="refreshing" :threshold="60" @refresh="onRefresh"> -->
|
|
|
<!-- 顶部区域 -->
|
|
|
<view class="income-header"
|
|
|
@@ -313,12 +317,11 @@ function goPage(page: string) {
|
|
|
</view>
|
|
|
<view class="income-menu-list">
|
|
|
<mescroll-uni id="mescrollContainer" :down="downOption" :up="upOption" :fixed="false"
|
|
|
- @init="mescrollInit" @down="downCallback" @up="upCallback">
|
|
|
+ :is-show-empty="true" @init="mescrollInit" @down="downCallback" @up="upCallback"
|
|
|
+ @emptyclick="reload">
|
|
|
<view v-for="item in incomeData" :key="item.userId" class="income-content-item">
|
|
|
<income-item :data="item" :type="activeIndex" />
|
|
|
</view>
|
|
|
- <mescroll-empty v-if="incomeData.length === 0 && !loading" icon="'none'" tip="暂无数据"
|
|
|
- :option="emptyOption" @emptyclick="reload" />
|
|
|
<!-- 滚动区域内的loading遮罩 -->
|
|
|
<view v-if="showLoading && loading" class="loading-mask">
|
|
|
<view class="loading-spinner" />
|
|
|
@@ -469,6 +472,7 @@ function goPage(page: string) {
|
|
|
border-radius: 10rpx 10rpx 0rpx 0rpx;
|
|
|
margin-left: 24rpx;
|
|
|
margin-right: 23rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
@@ -552,13 +556,14 @@ function goPage(page: string) {
|
|
|
|
|
|
.income-menu-list {
|
|
|
background: #ffffff;
|
|
|
- flex: 1;
|
|
|
+ // flex: 1;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
position: relative;
|
|
|
|
|
|
#mescrollContainer {
|
|
|
height: 100%;
|
|
|
+ flex: 1;
|
|
|
}
|
|
|
|
|
|
.income-content-item {
|