|
|
@@ -41,7 +41,7 @@
|
|
|
|
|
|
<!-- 列表 -->
|
|
|
<view class="px-4">
|
|
|
- <view v-if="loading" class="flex justify-center py-8">
|
|
|
+ <view v-if="initialLoading" class="flex justify-center py-8">
|
|
|
<wd-loading />
|
|
|
</view>
|
|
|
|
|
|
@@ -110,13 +110,28 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
+ <!-- 加载更多组件 -->
|
|
|
+ <wd-loadmore
|
|
|
+ v-if="shouldShowLoadMore"
|
|
|
+ :state="loadMoreState"
|
|
|
+ loading-text="点击加载更多"
|
|
|
+ @reload="loadMoreData"
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- 手动加载更多按钮 -->
|
|
|
+ <view v-else-if="hasMoreData" class="text-center py-4">
|
|
|
+ <wd-button type="primary" size="small" @click="loadMoreData">
|
|
|
+ 加载更多 ({{ couponList.length }}/{{ totalCount }})
|
|
|
+ </wd-button>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { ref } from 'vue'
|
|
|
-import { onLoad, onShow } from '@dcloudio/uni-app'
|
|
|
+import { ref, computed } from 'vue'
|
|
|
+import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app'
|
|
|
import { useCouponStore } from '@/store/coupon'
|
|
|
import { useUserStore } from '@/store/user'
|
|
|
import { useMessage } from 'wot-design-uni'
|
|
|
@@ -143,14 +158,32 @@ const filterTypeOptions = ref([
|
|
|
const statusOptions = ref([
|
|
|
{ label: '全部', value: '' },
|
|
|
{ label: '待审核', value: '0' },
|
|
|
- { label: '已通过', value: '1' },
|
|
|
- { label: '已驳回', value: '2' },
|
|
|
+ // { label: '已通过', value: '1' },
|
|
|
+ // { label: '已驳回', value: '2' },
|
|
|
])
|
|
|
|
|
|
// 列表数据
|
|
|
const couponList = ref([])
|
|
|
-const originalCouponList = ref([])
|
|
|
-const loading = ref(false)
|
|
|
+const initialLoading = ref(false)
|
|
|
+
|
|
|
+// 分页相关
|
|
|
+const currentPage = ref(1)
|
|
|
+const pageSize = ref(10)
|
|
|
+const totalCount = ref(0)
|
|
|
+const loadMoreState = ref<'loading' | 'finished' | 'error' | undefined>(undefined)
|
|
|
+
|
|
|
+// 计算属性
|
|
|
+const hasMoreData = computed(() => {
|
|
|
+ return couponList.value.length < totalCount.value && totalCount.value > 0
|
|
|
+})
|
|
|
+
|
|
|
+const shouldShowLoadMore = computed(() => {
|
|
|
+ return (
|
|
|
+ loadMoreState.value === 'loading' ||
|
|
|
+ loadMoreState.value === 'finished' ||
|
|
|
+ loadMoreState.value === 'error'
|
|
|
+ )
|
|
|
+})
|
|
|
|
|
|
// 格式化日期时间
|
|
|
const formatDateTime = (dateTime: string) => {
|
|
|
@@ -224,57 +257,103 @@ const onFilterTypeChange = () => {
|
|
|
filterForm.value.value = ''
|
|
|
}
|
|
|
|
|
|
-// 获取列表数据
|
|
|
-const loadCouponList = async () => {
|
|
|
+// 构建查询参数
|
|
|
+const buildQueryParams = () => {
|
|
|
+ const params: any = {}
|
|
|
+
|
|
|
+ if (filterForm.value.type && filterForm.value.value) {
|
|
|
+ if (filterForm.value.type === 'phone') {
|
|
|
+ params['coupon2phone.Like'] = filterForm.value.value
|
|
|
+ } else if (filterForm.value.type === 'name') {
|
|
|
+ params['usersname.Like'] = filterForm.value.value
|
|
|
+ } else if (filterForm.value.type === 'status') {
|
|
|
+ if (filterForm.value.value !== '') {
|
|
|
+ params.coupon2sype = filterForm.value.value
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return params
|
|
|
+}
|
|
|
+
|
|
|
+// 获取列表数据(分页)
|
|
|
+const loadCouponList = async (isLoadMore = false) => {
|
|
|
try {
|
|
|
- loading.value = true
|
|
|
+ if (!isLoadMore) {
|
|
|
+ initialLoading.value = true
|
|
|
+ }
|
|
|
+
|
|
|
+ if (isLoadMore) {
|
|
|
+ loadMoreState.value = 'loading'
|
|
|
+ }
|
|
|
|
|
|
- const result = await couponStore.getCoupon2AuditList({})
|
|
|
+ const queryParams = buildQueryParams()
|
|
|
+ const result = await couponStore.getCoupon2AuditList(queryParams, {
|
|
|
+ pageindex: currentPage.value,
|
|
|
+ rows: pageSize.value,
|
|
|
+ })
|
|
|
|
|
|
if (result && result.Data) {
|
|
|
- originalCouponList.value = result.Data
|
|
|
- couponList.value = [...originalCouponList.value]
|
|
|
- // 加载完数据后自动执行筛选
|
|
|
- handleSearch()
|
|
|
+ if (isLoadMore) {
|
|
|
+ // 加载更多,追加数据
|
|
|
+ couponList.value = [...couponList.value, ...result.Data]
|
|
|
+ } else {
|
|
|
+ // 首次加载或搜索,替换数据
|
|
|
+ couponList.value = result.Data
|
|
|
+ }
|
|
|
+
|
|
|
+ totalCount.value = result.Total || 0
|
|
|
+
|
|
|
+ // 判断是否还有更多数据
|
|
|
+ if (couponList.value.length >= totalCount.value) {
|
|
|
+ // 所有数据已加载完成
|
|
|
+ loadMoreState.value = 'finished'
|
|
|
+ } else {
|
|
|
+ // 还有更多数据,显示默认状态等待用户操作
|
|
|
+ loadMoreState.value = undefined
|
|
|
+ }
|
|
|
} else {
|
|
|
- originalCouponList.value = []
|
|
|
- couponList.value = []
|
|
|
+ if (!isLoadMore) {
|
|
|
+ couponList.value = []
|
|
|
+ }
|
|
|
+ loadMoreState.value = 'finished'
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('获取审核列表失败:', error)
|
|
|
- message.alert({
|
|
|
- title: '提示',
|
|
|
- msg: '获取数据失败,请稍后重试',
|
|
|
- })
|
|
|
+ loadMoreState.value = 'error'
|
|
|
+ if (!isLoadMore) {
|
|
|
+ message.alert({
|
|
|
+ title: '提示',
|
|
|
+ msg: '获取数据失败,请稍后重试',
|
|
|
+ })
|
|
|
+ }
|
|
|
} finally {
|
|
|
- loading.value = false
|
|
|
+ if (!isLoadMore) {
|
|
|
+ initialLoading.value = false
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// 处理搜索
|
|
|
-const handleSearch = () => {
|
|
|
- // 从原始数据中筛选
|
|
|
- let filteredList = [...originalCouponList.value]
|
|
|
-
|
|
|
- if (filterForm.value.type && filterForm.value.value) {
|
|
|
- if (filterForm.value.type === 'phone') {
|
|
|
- filteredList = filteredList.filter(
|
|
|
- (item) => item.coupon2phone && item.coupon2phone.includes(filterForm.value.value),
|
|
|
- )
|
|
|
- } else if (filterForm.value.type === 'name') {
|
|
|
- filteredList = filteredList.filter(
|
|
|
- (item) => item.usersname && item.usersname.includes(filterForm.value.value),
|
|
|
- )
|
|
|
- } else if (filterForm.value.type === 'status') {
|
|
|
- if (filterForm.value.value !== '') {
|
|
|
- filteredList = filteredList.filter(
|
|
|
- (item) => item.coupon2sype.toString() === filterForm.value.value,
|
|
|
- )
|
|
|
- }
|
|
|
- }
|
|
|
+// 加载更多数据
|
|
|
+const loadMoreData = () => {
|
|
|
+ if (
|
|
|
+ loadMoreState.value === 'loading' ||
|
|
|
+ loadMoreState.value === 'finished' ||
|
|
|
+ couponList.value.length >= totalCount.value
|
|
|
+ ) {
|
|
|
+ return
|
|
|
}
|
|
|
|
|
|
- couponList.value = filteredList
|
|
|
+ currentPage.value++
|
|
|
+ loadCouponList(true)
|
|
|
+}
|
|
|
+
|
|
|
+// 处理搜索
|
|
|
+const handleSearch = () => {
|
|
|
+ // 重置分页
|
|
|
+ currentPage.value = 1
|
|
|
+ couponList.value = []
|
|
|
+ loadCouponList(false)
|
|
|
}
|
|
|
|
|
|
// 点击列表项
|
|
|
@@ -300,9 +379,17 @@ const checkAuthAndLoadData = () => {
|
|
|
return
|
|
|
}
|
|
|
|
|
|
- loadCouponList()
|
|
|
+ // 重置分页状态
|
|
|
+ currentPage.value = 1
|
|
|
+ couponList.value = []
|
|
|
+ loadCouponList(false)
|
|
|
}
|
|
|
|
|
|
+// 触底加载更多
|
|
|
+onReachBottom(() => {
|
|
|
+ loadMoreData()
|
|
|
+})
|
|
|
+
|
|
|
onLoad(() => {
|
|
|
checkAuthAndLoadData()
|
|
|
})
|
|
|
@@ -311,7 +398,10 @@ onLoad(() => {
|
|
|
onShow(() => {
|
|
|
// 只有在有审核权限时才刷新数据
|
|
|
if (userStore.audit_auth) {
|
|
|
- loadCouponList()
|
|
|
+ // 重置分页状态
|
|
|
+ currentPage.value = 1
|
|
|
+ couponList.value = []
|
|
|
+ loadCouponList(false)
|
|
|
}
|
|
|
})
|
|
|
</script>
|