teambuy-front/components/couponPopup/newCouponPopup.vue

<template>
    <view class="new-coupon-popup">
        <uv-popup ref="popup" @change="change" min-height="400rpx" closeable :z-index="999999">
            <view class="coupon-content">
                <text class="coupon-title">优惠券列表</text>
                <view class="coupon-list">
                    <view class="coupon-item" v-for="item in couponList" :key="item.id">
                        <view class="coupon-left">
                            <view class="coupon-amount">
                                <text class="amount-symbol">¥</text>
                                <text class="amount-value">{{item.amount}}</text>
                            </view>
                            <view class="coupon-info">
                                <text class="coupon-name">{{item.title}}</text>
                                <text class="coupon-type">{{item.type_dictText}}</text>
                                <text class="coupon-desc">{{item.remark}}</text>
                            </view>
                        </view>
                        <view class="coupon-right">
                            <view class="fetch-btn" hover-class="fetch-btn-hover" @click="fetchCoupon(item.id)">
                                <text class="fetch-btn-text">领取</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </uv-popup>
    </view>
</template>

<script>
export default {
    name: 'NewCouponPopup',
    data() {
        return {
            couponList: []
        }
    },
    mounted() {
        
        if (uni.getStorageSync('token')){
            this.getCouponList()
        }
    },
    methods: {
        getCouponList() {
            this.$api('queryFetchCouponList', {}, res => {
                if (res.code  === 200 && res.result.length > 0){
                    this.couponList = res.result
                    this.$refs.popup.open()
                }
            })
        },
        fetchCoupon(id) {
            this.$api('fetchCoupon', {
                couponId: id
            }, res => {
                uni.showToast({
                    title: `${res.message}`,
                    icon: 'success'
                })
                this.$refs.popup.close();
            })
        },
        change(e) {
            if(!e) {
                this.$emit('close')
            }
        }
    }
}
</script>

<style lang="scss">
.coupon-content{
    padding: 40rpx 20rpx;
    background-color: #fff;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40rpx;
    position: relative;
    .coupon-title{
        color: black;
        text-align: center;
        font-size: 36rpx;
        font-weight: 600;
        margin-bottom: 10rpx;
    }
    .coupon-list{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20rpx;
        width: 100%;
        .coupon-item{
            width: 80vw;
            height: 180rpx;
            background: linear-gradient(135deg, $uni-color, #ff8a8a);
            border-radius: 16rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20rpx;
            position: relative;
            box-shadow: 0 6rpx 12rpx rgba(255, 99, 99, 0.2);
            overflow: hidden;
            
            &::before {
                content: '';
                position: absolute;
                left: -15rpx;
                top: 50%;
                transform: translateY(-50%);
                width: 30rpx;
                height: 30rpx;
                background-color: #fff;
                border-radius: 50%;
            }
            
            &::after {
                content: '';
                position: absolute;
                right: -15rpx;
                top: 50%;
                transform: translateY(-50%);
                width: 30rpx;
                height: 30rpx;
                background-color: #fff;
                border-radius: 50%;
            }
            
            .coupon-left {
                display: flex;
                align-items: center;
                gap: 20rpx;
                
                .coupon-amount {
                    display: flex;
                    align-items: baseline;
                    color: #fff;
                    
                    .amount-symbol {
                        font-size: 28rpx;
                        font-weight: bold;
                    }
                    
                    .amount-value {
                        font-size: 48rpx;
                        font-weight: bold;
                    }
                }
                
                .coupon-info {
                    display: flex;
                    flex-direction: column;
                    
                    .coupon-name {
                        font-size: 32rpx;
                        color: #fff;
                        font-weight: 600;
                        margin-bottom: 4rpx;
                    }
                    
                    .coupon-type {
                        font-size: 24rpx;
                        color: rgba(255, 255, 255, 0.9);
                        background-color: rgba(255, 255, 255, 0.2);
                        padding: 2rpx 10rpx;
                        border-radius: 10rpx;
                        display: inline-block;
                        margin-bottom: 6rpx;
                    }
                    
                    .coupon-desc {
                        font-size: 24rpx;
                        color: rgba(255, 255, 255, 0.8);
                    }
                }
            }
            
            .coupon-right {
                .fetch-btn {
                    width: 120rpx;
                    height: 60rpx;
                    background: rgba(255, 255, 255, 0.9);
                    border-radius: 30rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    overflow: hidden;
                    
                    &::before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.5), transparent);
                        transform: translateX(-100%);
                        transition: transform 0.6s;
                    }
                    
                    &:active::before {
                        transform: translateX(100%);
                    }
                    
                    .fetch-btn-text {
                        color: $uni-color;
                        font-size: 26rpx;
                        font-weight: bold;
                    }
                }
                
                .fetch-btn-hover {
                    transform: scale(0.95);
                    opacity: 0.9;
                }
            }
        }
    }
}
</style>