pet-system-fulfiller-app/pages/mine/points/index.vue

<template>
    <view class="container">
        <!-- 导航栏 -->
        <view class="nav-bar">
            <view class="nav-left" @click="navBack">
                <image class="back-icon" src="/static/icons/chevron_right_dark.svg"></image>
            </view>
            <text class="nav-title">我的积分</text>
            <view class="nav-right"></view>
        </view>

        <!-- 顶部卡片 -->
        <view class="points-card">
            <view class="card-header">
                <view class="equity-btn" @click="navToEquity">
                    <image class="equity-icon" src="/static/icons/diamond_white.svg"></image>
                    <text>积分权益</text>
                </view>
                <view class="detail-link" @click="navToDetail">
                    <text>明细</text>
                </view>
            </view>
            <view class="card-body">
                <text class="label">当前积分</text>
                <text class="value">{{ points }}</text>
            </view>
            <!-- 装饰背景 -->
            <image class="bg-decor" src="/static/icons/star_decor.svg" mode="aspectFit"></image>
        </view>

        <!-- 最近变动 -->
        <view class="record-container">
            <view class="record-header">
                <text class="header-title">最近积分变动</text>
                <view class="header-more" @click="navToDetail">
                    <text>查看全部</text>
                    <image class="more-icon" src="/static/icons/chevron_right.svg"></image>
                </view>
            </view>

             <!-- Tabs -->
             <view class="tabs-row">
                <view class="tab-item" :class="{ active: currentTab === 0 }" @click="switchTab(0)">
                    <text>全部</text>
                    <view class="tab-line" v-if="currentTab === 0"></view>
                </view>
                <view class="tab-item" :class="{ active: currentTab === 1 }" @click="switchTab(1)">
                    <text>获取</text>
                    <view class="tab-line" v-if="currentTab === 1"></view>
                </view>
                <view class="tab-item" :class="{ active: currentTab === 2 }" @click="switchTab(2)">
                    <text>扣减</text>
                    <view class="tab-line" v-if="currentTab === 2"></view>
                </view>
            </view>

            <!-- 列表 (文本模式) -->
            <view class="record-list">
                <view class="list-item" v-for="(item, index) in displayList" :key="index">
                    <view class="item-left">
                        <text class="item-title">{{ item.title }}</text>
                        <text class="item-desc">{{ item.desc }}</text>
                        <text class="item-time">{{ item.time }}</text>
                    </view>
                    <view class="item-right">
                        <text class="item-amount" :class="{ income: item.type === 'income', expense: item.type === 'expense' }">
                            {{ item.type === 'income' ? '+' : '' }}{{ item.amount }}
                        </text>
                        <view class="item-tag">
                            <text>{{ item.tag }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { pointsOnApp, pagePointsOnApp } from '@/api/fulfiller/log';

import fulfillerEnum from '@/enums/fulfiller.json';

const bizTypeMap = fulfillerEnum.FlfPointsBizType;

export default {
    data() {
        return {
            points: 0,
            currentTab: 0,
            list: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            loading: false
        }
    },
    computed: {
        displayList() {
            if (this.currentTab === 0) return this.list;
            const type = this.currentTab === 1 ? 'income' : 'expense';
            return this.list.filter(item => item.type === type);
        }
    },
    onShow() {
        this.fetchPoints();
        this.fetchList(true);
    },
    onReachBottom() {
        this.fetchList();
    },
    methods: {
        async fetchPoints() {
            try {
                const res = await pointsOnApp();
                if (res.code === 200) {
                    this.points = res.data || 0;
                }
            } catch (error) {
                console.error('获取当前积分失败', error);
            }
        },
        async fetchList(reset = false) {
            if (reset) {
                this.pageNum = 1;
                this.list = [];
                this.total = 0;
            }
            if (this.loading) return;
            if (!reset && this.list.length >= this.total && this.total !== 0) return;

            this.loading = true;
            try {
                const res = await pagePointsOnApp({
                    pageNum: this.pageNum,
                    pageSize: this.pageSize
                });
                if (res.code === 200) {
                    this.total = res.total || 0;
                    const rows = res.rows || [];
                    const mappedRows = rows.map(item => {
                        const isAdd = item.type === 'add';
                        const uiType = isAdd ? 'income' : 'expense';
                        const title = bizTypeMap[item.bizType] || item.bizType || '其他';
                        let amountStr = Math.abs(item.amount);
                        if (!isAdd) {
                            amountStr = '-' + amountStr;
                        }
                        return {
                            ...item,
                            title: title,
                            desc: item.reason || '',
                            time: item.createTime || '',
                            amount: amountStr,
                            type: uiType,
                            tag: title
                        };
                    });
                    this.list = this.list.concat(mappedRows);
                    this.pageNum++;
                }
            } catch (error) {
                console.error('获取积分明细失败', error);
            } finally {
                this.loading = false;
            }
        },
        navBack() {
            uni.navigateBack();
        },
        navToDetail() {
            uni.navigateTo({
                url: '/pages/mine/points/detail'
            });
        },
        navToEquity() {
            // TODO: 跳转权益页
        },
        switchTab(index) {
            this.currentTab = index;
        }
    }
}
</script>

<style>
.container {
    background-color: #F8F9FA;
    min-height: 100vh;
}

.nav-bar {
    background-color: #fff;
    padding-top: var(--status-bar-height);
    padding-left: 30rpx;
    padding-right: 30rpx;
    height: 88rpx;
    box-sizing: content-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-left {
    height: 100%;
    display: flex;
    align-items: center;
    width: 60rpx;
}

.back-icon {
    width: 40rpx;
    height: 40rpx;
    transform: rotate(180deg);
}

.nav-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
}

.nav-right {
    width: 60rpx;
}

/* 积分卡片 */
.points-card {
    margin: 20rpx 30rpx;
    height: 300rpx;
    background: linear-gradient(135deg, #FFB74D 0%, #FF9800 100%);
    border-radius: 20rpx;
    position: relative;
    padding: 30rpx;
    box-sizing: border-box;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 4rpx 16rpx rgba(255, 152, 0, 0.2);
}

.bg-decor {
    position: absolute;
    right: -20rpx;
    bottom: -20rpx;
    width: 180rpx;
    height: 180rpx;
    opacity: 0.3;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.equity-btn {
    display: flex;
    align-items: center;
    font-size: 26rpx;
}

.equity-icon {
    width: 32rpx; /* placeholder icon */
    height: 32rpx;
    margin-right: 8rpx;
    border-radius: 50%;
    background: rgba(255,255,255,0.3); /* circle bg for icon */
}

.detail-link {
    font-size: 24rpx;
    opacity: 0.9;
}

.card-body {
    margin-top: 60rpx;
}

.label {
    font-size: 26rpx;
    opacity: 0.9;
    display: block;
    margin-bottom: 10rpx;
}

.value {
    font-size: 64rpx;
    font-weight: bold;
}

/* 记录区域 */
.record-container {
    background-color: #fff;
    border-radius: 20rpx 20rpx 0 0;
    padding: 30rpx;
    min-height: 500rpx;
}

.record-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
}

.header-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
}

.header-more {
    display: flex;
    align-items: center;
}

.header-more text {
    font-size: 24rpx;
    color: #999;
}

.more-icon {
    width: 24rpx;
    height: 24rpx;
    margin-left: 4rpx;
}

/* Tabs */
.tabs-row {
    display: flex;
    border-bottom: 1rpx solid #f5f5f5;
    margin-bottom: 20rpx;
}

.tab-item {
    margin-right: 40rpx;
    padding-bottom: 12rpx;
    font-size: 28rpx;
    color: #666;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tab-item.active {
    font-weight: bold;
    color: #333;
}

.tab-line {
    width: 28rpx;
    height: 4rpx;
    background-color: #FF9800; /* Match card color */
    border-radius: 4rpx;
    position: absolute;
    bottom: 0;
}

/* 列表 */
.list-item {
    display: flex;
    justify-content: space-between;
    padding: 24rpx 0;
    border-bottom: 1rpx solid #f9f9f9;
}

.item-left {
    display: flex;
    flex-direction: column;
}

.item-title {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 8rpx;
    font-weight: 500;
}

.item-desc {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 6rpx;
}

.item-time {
    font-size: 22rpx;
    color: #ccc;
}

.item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.item-amount {
    font-size: 30rpx;
    font-weight: bold;
    margin-bottom: 8rpx;
}

.item-amount.income {
    color: #FF9800; /* Orange for points income */
}

.item-amount.expense {
    color: #333;
}

.item-tag {
    display: inline-flex;
    justify-content: flex-end;
}

.item-tag text {
    background-color: #F5F5F5;
    padding: 4rpx 12rpx;
    border-radius: 6rpx;
    font-size: 22rpx;
    color: #999;
}
</style>