1054425342@qq.com
1 month ago
10 changed files with 13967 additions and 2970 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,452 @@ |
|||
<template> |
|||
<view class="points-detail-page"> |
|||
<!-- 积分总览 --> |
|||
<view class="points-overview"> |
|||
<view class="total-points"> |
|||
<text class="points-number">{{ totalPoints }}</text> |
|||
<text class="points-label">当前积分</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 筛选选项 --> |
|||
<view class="filter-tabs"> |
|||
<view class="tab-item" :class="[{ active: currentTab === 'all' }]" @click="switchTab('all')"> |
|||
全部 |
|||
</view> |
|||
<view class="tab-item" :class="[{ active: currentTab === 'in' }]" @click="switchTab('in')"> |
|||
收入 |
|||
</view> |
|||
<view class="tab-item" :class="[{ active: currentTab === 'out' }]" @click="switchTab('out')"> |
|||
支出 |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 积分记录列表 --> |
|||
<scroll-view class="points-list" scroll-y="true" @scrolltolower="loadMore"> |
|||
<template v-if="pointsList.length"> |
|||
<view class="record-item" v-for="(item, index) in pointsList" :key="index"> |
|||
<view class="record-left"> |
|||
<view class="record-icon" :class="item.fromType === 'in' ? 'income' : 'expense'"> |
|||
<uni-icons type="vip" size="30" style="color: white;"></uni-icons> |
|||
</view> |
|||
<view class="record-info"> |
|||
<view class="record-title">{{ item.dictName }}</view> |
|||
<view class="record-desc">{{ item.remark }}</view> |
|||
<view class="record-time">{{ item.createTime }}</view> |
|||
</view> |
|||
</view> |
|||
<view class="record-right"> |
|||
<view class="record-points" :class="item.fromType === 'in' ? 'income' : 'expense'"> |
|||
{{ item.points }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 加载更多提示 --> |
|||
<view class="load-more" v-if="hasMore"> |
|||
<text class="load-text">{{ |
|||
loading ? "加载中..." : "上拉加载更多" |
|||
}}</text> |
|||
</view> |
|||
|
|||
<!-- 没有更多数据 --> |
|||
<view class="no-more" v-if="!hasMore && pointsList.length > 0"> |
|||
<text class="no-more-text">没有更多数据了</text> |
|||
</view> |
|||
</template> |
|||
|
|||
<!-- 空状态 --> |
|||
<view class="empty-state" v-if="pointsList.length === 0 && !loading"> |
|||
<image class="empty-icon" |
|||
src="https://epic.js-dyyj.com/uploads/20250808/c16267f9cc2b7a68bf23713b5847987e.png" |
|||
mode="aspectFit"></image> |
|||
<text class="empty-text">暂无积分记录</text> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
totalPoints: 0, |
|||
currentTab: "all", |
|||
pointsList: [], |
|||
page: 1, |
|||
pageSize: 20, |
|||
hasMore: true, |
|||
loading: false, |
|||
refreshing: false, |
|||
}; |
|||
}, |
|||
|
|||
onLoad() { |
|||
this.loadPointsData(); |
|||
this.getTotalPoints(); |
|||
}, |
|||
|
|||
methods: { |
|||
// 返回上一页 |
|||
goBack() { |
|||
uni.navigateBack(); |
|||
}, |
|||
|
|||
// 切换筛选标签 |
|||
switchTab(tab) { |
|||
if (this.currentTab === tab) return; |
|||
this.currentTab = tab; |
|||
this.resetData(); |
|||
this.loadPointsData(); |
|||
}, |
|||
|
|||
// 重置数据 |
|||
resetData() { |
|||
this.pointsList = []; |
|||
this.page = 1; |
|||
this.hasMore = true; |
|||
}, |
|||
|
|||
// 获取总积分 |
|||
async getTotalPoints() { |
|||
try { |
|||
this.Post({}, '/framework/points/getLastBalance', 'DES').then(res =>{ |
|||
if (res.code === 200) { |
|||
this.totalPoints = res.data || 0; |
|||
} |
|||
}) |
|||
|
|||
} catch (error) { |
|||
console.error("获取总积分失败:", error); |
|||
} |
|||
}, |
|||
|
|||
// 加载积分数据 |
|||
async loadPointsData() { |
|||
if (this.loading) return; |
|||
|
|||
this.loading = true; |
|||
|
|||
try { |
|||
const params = { |
|||
page: this.page, |
|||
pageSize: this.pageSize, |
|||
}; |
|||
|
|||
if (this.currentTab !== "all") { |
|||
params.fromType = this.currentTab; |
|||
} |
|||
|
|||
this.Post(params, '/framework/points/list', 'DES') |
|||
.then(res => { |
|||
console.log(res) |
|||
if (res.code === 200) { |
|||
const newData = res.rows || []; |
|||
|
|||
if (this.page === 1) { |
|||
this.pointsList = newData; |
|||
} else { |
|||
this.pointsList = [...this.pointsList, ...newData]; |
|||
} |
|||
|
|||
this.hasMore = newData.length === this.pageSize; |
|||
|
|||
if (this.hasMore) { |
|||
this.page++; |
|||
} |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.msg || "加载失败", |
|||
icon: "none", |
|||
}); |
|||
} |
|||
}) |
|||
|
|||
|
|||
} catch (error) { |
|||
console.error("加载积分记录失败:", error); |
|||
uni.showToast({ |
|||
title: "网络错误，请重试", |
|||
icon: "none", |
|||
}); |
|||
} finally { |
|||
this.loading = false; |
|||
this.refreshing = false; |
|||
} |
|||
}, |
|||
|
|||
// 加载更多 |
|||
loadMore() { |
|||
if (this.hasMore && !this.loading) { |
|||
this.loadPointsData(); |
|||
} |
|||
}, |
|||
|
|||
// 下拉刷新 |
|||
onRefresh() { |
|||
this.refreshing = true; |
|||
this.resetData(); |
|||
this.loadPointsData(); |
|||
this.getTotalPoints(); |
|||
}, |
|||
|
|||
|
|||
|
|||
// 格式化时间 |
|||
formatTime(timestamp) { |
|||
const date = new Date(timestamp); |
|||
const now = new Date(); |
|||
const diff = now.getTime() - date.getTime(); |
|||
|
|||
// 今天 |
|||
if (diff < 24 * 60 * 60 * 1000 && now.getDate() === date.getDate()) { |
|||
return `今天 ${date.getHours().toString().padStart(2, "0")}:${date |
|||
.getMinutes() |
|||
.toString() |
|||
.padStart(2, "0")}`; |
|||
} |
|||
|
|||
// 昨天 |
|||
const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000); |
|||
if (yesterday.getDate() === date.getDate()) { |
|||
return `昨天 ${date.getHours().toString().padStart(2, "0")}:${date |
|||
.getMinutes() |
|||
.toString() |
|||
.padStart(2, "0")}`; |
|||
} |
|||
|
|||
// 其他日期 |
|||
return `${date.getMonth() + 1}-${date.getDate()} ${date |
|||
.getHours() |
|||
.toString() |
|||
.padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}`; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.points-detail-page { |
|||
min-height: 100vh; |
|||
background-color: #f5f5f5; |
|||
} |
|||
|
|||
/* 导航栏 */ |
|||
.nav-bar { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
height: 88rpx; |
|||
padding: 0 32rpx; |
|||
background-color: #fff; |
|||
border-bottom: 1rpx solid #eee; |
|||
} |
|||
|
|||
.nav-back { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.nav-back .iconfont { |
|||
font-size: 36rpx; |
|||
color: #333; |
|||
} |
|||
|
|||
.nav-title { |
|||
font-size: 36rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.nav-placeholder { |
|||
width: 60rpx; |
|||
} |
|||
|
|||
/* 积分总览 */ |
|||
.points-overview { |
|||
background: linear-gradient(135deg, #77f3f9 0%, #764ba2 100%); |
|||
padding: 60rpx 32rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.total-points { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
} |
|||
|
|||
.points-number { |
|||
font-size: 72rpx; |
|||
font-weight: bold; |
|||
color: #fff; |
|||
margin-bottom: 12rpx; |
|||
} |
|||
|
|||
.points-label { |
|||
font-size: 28rpx; |
|||
color: rgba(255, 255, 255, 0.8); |
|||
} |
|||
|
|||
/* 筛选标签 */ |
|||
.filter-tabs { |
|||
display: flex; |
|||
background-color: #fff; |
|||
padding: 0 32rpx; |
|||
} |
|||
|
|||
.tab-item { |
|||
flex: 1; |
|||
text-align: center; |
|||
padding: 32rpx 0; |
|||
font-size: 30rpx; |
|||
color: #666; |
|||
position: relative; |
|||
} |
|||
|
|||
.tab-item.active { |
|||
color: #77f3f9; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.tab-item.active::after { |
|||
content: ""; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
width: 60rpx; |
|||
height: 4rpx; |
|||
background-color: #77f3f9; |
|||
border-radius: 2rpx; |
|||
} |
|||
|
|||
/* 积分记录列表 */ |
|||
.points-list { |
|||
height: calc(100vh - 368rpx); |
|||
padding: 0 30rpx; |
|||
width: 690rpx; |
|||
} |
|||
|
|||
.record-item { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
background-color: #fff; |
|||
padding: 32rpx 24rpx; |
|||
margin-top: 20rpx; |
|||
border-radius: 16rpx; |
|||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05); |
|||
} |
|||
|
|||
.record-left { |
|||
display: flex; |
|||
align-items: center; |
|||
flex: 1; |
|||
} |
|||
|
|||
.record-icon { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-right: 24rpx; |
|||
} |
|||
|
|||
.record-icon.income { |
|||
background-color: #e8f5e8; |
|||
} |
|||
|
|||
.record-icon.expense { |
|||
background-color: #ffeaea; |
|||
} |
|||
|
|||
.record-icon .iconfont { |
|||
font-size: 36rpx; |
|||
} |
|||
|
|||
.record-icon.income .iconfont { |
|||
color: #52c41a; |
|||
} |
|||
|
|||
.record-icon.expense .iconfont { |
|||
color: #ff4d4f; |
|||
} |
|||
|
|||
.record-info { |
|||
flex: 1; |
|||
} |
|||
|
|||
.record-title { |
|||
font-size: 32rpx; |
|||
color: #333; |
|||
font-weight: 500; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.record-desc { |
|||
font-size: 26rpx; |
|||
color: #999; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.record-time { |
|||
font-size: 24rpx; |
|||
color: #ccc; |
|||
} |
|||
|
|||
.record-right { |
|||
text-align: right; |
|||
} |
|||
|
|||
.record-points { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.record-points.income { |
|||
color: #52c41a; |
|||
} |
|||
|
|||
.record-points.expense { |
|||
color: #ff4d4f; |
|||
} |
|||
|
|||
/* 加载状态 */ |
|||
.load-more, |
|||
.no-more { |
|||
text-align: center; |
|||
padding: 40rpx 0; |
|||
} |
|||
|
|||
.load-text, |
|||
.no-more-text { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
/* 空状态 */ |
|||
.empty-state { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 120rpx 0; |
|||
} |
|||
|
|||
.empty-icon { |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
margin-bottom: 32rpx; |
|||
opacity: 0.6; |
|||
} |
|||
|
|||
.empty-text { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue