<template>
    <view class="container">
        <!-- 分类标签 -->
        <view class="tabs">
            <view v-for="(tab, index) in tabList" :key="index" :class="['tab', { active: currentTab === index }]"
                @click="switchTab(index)">
                {{ tab }}
            </view>
        </view>
        <!-- 红包列表 -->
        <view class="content">
            <view v-for="(item, index) in redPacketList" :key="index">
                <view class="item">
                    <view class="item_left">￥{{ item.yuan }}</view>
                    <view class="item_center">
                        <view class="title">{{ item.name }}</view>
                        <view class="time">{{ item.time }}</view>
                        <view class="desc">{{ item.shiyong }}</view>
                    </view>
                    <view class="status2" :data-status="item.status"></view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            currentTab: 0, // 当前选中的标签索引
            tabList: ['已使用', '已过期'],
            redPacketList: [
                {
                    name: '新用户注册红包',
                    time: '2085.07.77 00:27到期',
                    shiyong: '全平台使用',
                    status: '去使用',
                    yuan: 5.32
                },
                {
                    name: '满减红包',
                    time: '2085.07.77 00:27到期',
                    shiyong: '全平台使用',
                    status: '去使用',
                    yuan: 5,
                    manjian: '满0元可用'
                },
                {
                    name: '固定红包',
                    time: '2085.07.77 00:27到期',
                    shiyong: '限改店铺指定商品使用',
                    status: '去使用',
                    yuan: 5
                },
                {
                    name: '固定红包',
                    time: '2085.07.77 00:27到期',
                    shiyong: '限广州地区使用',
                    status: '去使用',
                    yuan: 5
                }
            ]
        }
    },
    methods: {
        switchTab(index) {
            this.currentTab = index;
            console.log('选中的标签:', this.tabList[index]);
        }
    }
}
</script>

<style>
@import url("./index.css");
</style>