|
|
@@ -0,0 +1,267 @@
|
|
|
+<template>
|
|
|
+ <view class="bill-page">
|
|
|
+ <!-- 顶部积分信息 -->
|
|
|
+ <view class="points-header">
|
|
|
+ <view class="points-item">
|
|
|
+ <text class="points-label">当前可用积分</text>
|
|
|
+ <text class="points-value">{{ pointsData.current }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="points-item">
|
|
|
+ <text class="points-label">本月获得积分</text>
|
|
|
+ <text class="points-value">{{ pointsData.monthlyEarned }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="points-item">
|
|
|
+ <text class="points-label">本月即将到期积分</text>
|
|
|
+ <text class="points-value">{{ pointsData.monthlyExpiring }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="container">
|
|
|
+ <!-- 标签切换 -->
|
|
|
+ <u-tabs
|
|
|
+ :list="tabs"
|
|
|
+ :current="categoryIndex"
|
|
|
+ @change="handleTabChange"
|
|
|
+ lineWidth="60"
|
|
|
+ lineColor="#20CAC2"
|
|
|
+ :activeStyle="{
|
|
|
+ color: '#303133',
|
|
|
+ fontWeight: 'bold',
|
|
|
+ transform: 'scale(1.05)'
|
|
|
+ }"
|
|
|
+ :inactiveStyle="{
|
|
|
+ color: '#606266',
|
|
|
+ transform: 'scale(1)'
|
|
|
+ }"
|
|
|
+ itemStyle="padding:0 85rpx; height: 72rpx;font-size:28rpx"
|
|
|
+ class="tabs-container"
|
|
|
+ ></u-tabs>
|
|
|
+
|
|
|
+ <!-- 积分记录列表 -->
|
|
|
+ <view class="records-container">
|
|
|
+ <u-list @scrolltolower="loadMore" style="height:calc(75vh - 60rpx)">
|
|
|
+ <u-list-item v-for="(item, index) in filteredRecords" :key="item.id" class="record-item">
|
|
|
+ <view class="record-info">
|
|
|
+ <text class="record-description">{{ item.description }}</text>
|
|
|
+ <text class="record-date">{{ item.date }}</text>
|
|
|
+ </view>
|
|
|
+ <text class="record-amount" :class="{ income: item.amount > 0, expense: item.amount < 0 }">
|
|
|
+ {{ item.amount > 0 ? '+' : '' }}{{ item.amount }}
|
|
|
+ </text>
|
|
|
+ </u-list-item>
|
|
|
+ <!-- 空数据状态 -->
|
|
|
+ <u-empty
|
|
|
+ v-if="filteredRecords.length === 0"
|
|
|
+ icon="document"
|
|
|
+ text="暂无积分记录"
|
|
|
+ mode="page"
|
|
|
+ ></u-empty>
|
|
|
+ <!-- 加载更多 -->
|
|
|
+ <u-loadmore
|
|
|
+ v-if="filteredRecords.length > 0"
|
|
|
+ :status="loading ? 'loading' : (hasMore ? 'more' : 'nomore')"
|
|
|
+ loading-text="加载中..."
|
|
|
+ nomore-text="没有更多记录了"
|
|
|
+ @loadmore="loadMore"
|
|
|
+ ></u-loadmore>
|
|
|
+ </u-list>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "billPage",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 积分数据
|
|
|
+ pointsData: {
|
|
|
+ current: 10000,
|
|
|
+ monthlyEarned: 500,
|
|
|
+ monthlyExpiring: 100
|
|
|
+ },
|
|
|
+ // 标签数据
|
|
|
+ tabs: [
|
|
|
+ { key: 'all', name: '明细' },
|
|
|
+ { key: 'income', name: '收入' },
|
|
|
+ { key: 'expense', name: '支出' }
|
|
|
+ ],
|
|
|
+ // 当前选中的标签
|
|
|
+ activeTab: 'all',
|
|
|
+ // 积分记录数据
|
|
|
+ pointRecords: [
|
|
|
+ { id: 1, type: 'order', description: '订单消费', amount: 10, date: '2026.10.1 12:22:54' },
|
|
|
+ { id: 2, type: 'exchange', description: '购物兑换', amount: -10, date: '2026.10.1 12:22:54' },
|
|
|
+ { id: 3, type: 'order', description: '完成订单', amount: 10, date: '2026.10.1 12:22:54' },
|
|
|
+ { id: 4, type: 'reward', description: '好评奖励', amount: -10, date: '2026.10.1 12:22:54' },
|
|
|
+ { id: 5, type: 'order', description: '完成订单', amount: 10, date: '2026.10.1 12:22:54' },
|
|
|
+ { id: 6, type: 'reward', description: '好评奖励', amount: -10, date: '2026.10.1 12:22:54' },
|
|
|
+ { id: 7, type: 'order', description: '订单消费', amount: 10, date: '2026.10.1 12:22:54' },
|
|
|
+ { id: 8, type: 'exchange', description: '购物兑换', amount: -10, date: '2026.10.1 12:22:54' },
|
|
|
+ { id: 9, type: 'order', description: '完成订单', amount: 10, date: '2026.10.1 12:22:54' },
|
|
|
+ { id: 10, type: 'reward', description: '好评奖励', amount: -10, date: '2026.10.1 12:22:54' },
|
|
|
+ { id: 11, type: 'order', description: '完成订单', amount: 10, date: '2026.10.1 12:22:54' },
|
|
|
+ { id: 12, type: 'reward', description: '好评奖励', amount: -10, date: '2026.10.1 12:22:54' },
|
|
|
+ { id: 13, type: 'order', description: '订单消费', amount: 10, date: '2026.10.1 12:22:54' },
|
|
|
+ { id: 14, type: 'exchange', description: '购物兑换', amount: -10, date: '2026.10.1 12:22:54' },
|
|
|
+ { id: 15, type: 'order', description: '完成订单', amount: 10, date: '2026.10.1 12:22:54' },
|
|
|
+ { id: 16, type: 'reward', description: '好评奖励', amount: -10, date: '2026.10.1 12:22:54' },
|
|
|
+ { id: 17, type: 'order', description: '完成订单', amount: 10, date: '2026.10.1 12:22:54' },
|
|
|
+ { id: 18, type: 'reward', description: '好评奖励', amount: -10, date: '2026.10.1 12:22:54' }
|
|
|
+ ],
|
|
|
+ // 分页数据
|
|
|
+ page: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ hasMore: true,
|
|
|
+ loading: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ categoryIndex() {
|
|
|
+ return this.tabs.findIndex(item => item.key === this.activeTab)
|
|
|
+ },
|
|
|
+ // 过滤后的积分记录
|
|
|
+ filteredRecords() {
|
|
|
+ if (this.activeTab === 'all') {
|
|
|
+ return this.pointRecords
|
|
|
+ } else if (this.activeTab === 'income') {
|
|
|
+ return this.pointRecords.filter(record => record.amount > 0)
|
|
|
+ } else if (this.activeTab === 'expense') {
|
|
|
+ return this.pointRecords.filter(record => record.amount < 0)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 切换标签
|
|
|
+ handleTabChange(data) {
|
|
|
+ this.activeTab = data.key
|
|
|
+ // 重置分页数据
|
|
|
+ this.page = 1
|
|
|
+ this.hasMore = true
|
|
|
+ // 重置滚动位置
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const list = this.$refs.list
|
|
|
+ if (list) {
|
|
|
+ list.scrollTo(0, 0)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 加载更多数据
|
|
|
+ loadMore() {
|
|
|
+ if (this.loading || !this.hasMore) return
|
|
|
+
|
|
|
+ this.loading = true
|
|
|
+ this.page++
|
|
|
+
|
|
|
+ // 模拟加载数据
|
|
|
+ setTimeout(() => {
|
|
|
+ // 模拟新数据
|
|
|
+ const newRecords = [
|
|
|
+ { id: this.pointRecords.length + 1, type: 'order', description: '订单消费', amount: 10, date: '2026.10.1 12:22:54' },
|
|
|
+ { id: this.pointRecords.length + 2, type: 'exchange', description: '购物兑换', amount: -10, date: '2026.10.1 12:22:54' },
|
|
|
+ { id: this.pointRecords.length + 3, type: 'order', description: '完成订单', amount: 10, date: '2026.10.1 12:22:54' }
|
|
|
+ ]
|
|
|
+
|
|
|
+ // 添加新数据
|
|
|
+ this.pointRecords = [...this.pointRecords, ...newRecords]
|
|
|
+
|
|
|
+ // 模拟没有更多数据
|
|
|
+ if (this.page >= 3) {
|
|
|
+ this.hasMore = false
|
|
|
+ }
|
|
|
+
|
|
|
+ this.loading = false
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.bill-page{
|
|
|
+ width: 750rpx;
|
|
|
+ min-height: 100vh;
|
|
|
+ background-image: url("@/static/points/pointBg.png");
|
|
|
+ background-size: 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-color: #ffe5ca;
|
|
|
+ padding-top: 62rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.points-header{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ margin-bottom: 42rpx;
|
|
|
+ .points-item{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .points-label{
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ }
|
|
|
+ .points-value{
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.container{
|
|
|
+ width: 686rpx;
|
|
|
+ height: 83vh;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 10rpx 0;
|
|
|
+ .tabs-container{
|
|
|
+ display: flex;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.records-container{
|
|
|
+ .record-item{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 16rpx 32rpx;
|
|
|
+ flex-direction: row;
|
|
|
+ .record-info{
|
|
|
+ .record-description{
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 28rpx;
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+ }
|
|
|
+ .record-date{
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .record-amount{
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 28rpx;
|
|
|
+ &.income{
|
|
|
+ color: #34c7c2;
|
|
|
+ }
|
|
|
+ &.expense{
|
|
|
+ color: #f53e54;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
xyh