teambuy-front/components/couponPopup/newCouponPopup.vue

<template>
    <view class="new-coupon-popup">
        <uv-popup ref="popup" @change="change" min-height="400rpx" closeable>
            <view class="coupon-content">
                <text class="coupon-title">恭喜获得</text>
                <view class="coupon-list">
                    <view class="coupon-item">
                        <text class="coupon-name">优惠券名称</text>
                        <text class="coupon-desc">优惠券描述</text>
                    </view>
                    <view class="coupon-item">
                        <text class="coupon-name">优惠券名称</text>
                        <text class="coupon-desc">优惠券描述</text>
                    </view>
                </view>
                <view class="coupon-btn" hover-class="coupon-btn-hover" @click="getCoupon">
                    <text class="coupon-btn-text">立即领取</text>
                </view>
            </view>
        </uv-popup>
    </view>
</template>

<script>
export default {
    name: 'newCouponPopup',
    data() {
        return {
            couponList: []
        }
    },
    mounted() {
        // this.getCouponList()
        // this.$refs.popup.open()
    },
    methods: {
        getCouponList() {
            this.$api.getCouponList().then(res => {
                this.couponList = res.data
            })
        },
        getCoupon() {
            uni.showToast({
                title: '领取成功~',
                icon: 'success'
            })
            this.$refs.popup.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: 32rpx;
        font-weight: 600;
    }
    .coupon-list{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20rpx;
        .coupon-item{
            width: 660rpx;
            height: 180rpx;
            background-color: $uni-color;
            border-radius: 10rpx;
        }
    }
    .coupon-btn-hover{
        opacity: 0.7;
    }
    .coupon-btn{
        width: 570rpx;
        height: 110rpx;
        background-color: $uni-color;
        border-radius: 55rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .coupon-btn-text{
            color: #fff;
            font-size: 30rpx;
        }
    }
}
</style>