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">1200</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>
export default {
    data() {
        return {
            currentTab: 0,
            list: [
                {
                    title: '订单完成奖励',
                    desc: '订单 T1002839 完成',
                    time: '2026-02-05 18:42',
                    amount: '10',
                    type: 'income',
                    tag: '订单'
                },
                {
                    title: '好评奖励',
                    desc: '获得五星好评',
                    time: '2026-02-05 19:00',
                    amount: '5',
                    type: 'income',
                    tag: '奖励'
                },
                {
                    title: '超时扣分',
                    desc: '订单 T1002830 超时送达',
                    time: '2026-02-04 10:20',
                    amount: '-10',
                    type: 'expense',
                    tag: '惩罚'
                }
            ]
        }
    },
    computed: {
        displayList() {
            if (this.currentTab === 0) return this.list;
            const type = this.currentTab === 1 ? 'income' : 'expense';
            return this.list.filter(item => item.type === type);
        }
    },
    methods: {
        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>