<template>
    <view class="container">
        <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="item_right">
                        <view class="status" @click="showPopup(item)">{{ item.status }}</view>
                    </view>
                    <view class="status2" :data-status="item.status"></view>
                </view>
            </view>
        </view>
        <view class="bottom">
            <view @click="goRedPacket()">我的权益</view>
        </view>
        
        <!-- 弹窗 -->
        <view v-if="popupVisible" class="popup-overlay" @click="hidePopup">
            <view class="popup-content" @click.stop>
                <view class="popup-icon">
                    <view class="checkmark"></view>
                </view>
                <view class="popup-title">领取成功!</view>
                <view class="popup-desc">已存入您的账户</view>
                <button class="popup-btn" @click="hidePopup">确定</button>
            </view>
        </view>
    </view>
</template>
<script>
import { menuButtonInfo, NavgateTo, picUrl, request } from '../../../utils/index';
export default {
    data() {
        return {
            redPacketList: [
                {
                    name: '100元红包',
                    time: '2023-01-01 10:00:00',
                    shiyong: '用于购买商品',
                    status: '待领取',
                    yuan: 100
                },
                {
                    name: '50元红包',
                    time: '2023-01-02 12:00:00',
                    shiyong: '用于购买商品',
                    status: '待领取',
                    yuan: 50
                },
                {
                    name: '20元红包',
                    time: '2023-01-03 14:00:00',
                    shiyong: '用于购买商品',
                    status: '已使用',
                    yuan: 20
                }
            ],
            popupVisible: false,
            currentItem: null
        }
    },
    methods: {
        showPopup(item) {
            this.currentItem = item;
            this.popupVisible = true;
        },
        hidePopup() {
            this.popupVisible = false;
            this.currentItem = null;
        },
        goRedPacket() {
            NavgateTo('/packages/user/myRedPacket/index');
        }
    }
}
</script>
<style>
@import url("./index.css");
</style>