couponCenter_mpapp/src/components/ReceiveCoupon.vue

<script lang="ts" setup>
import CouponBtnBg from '@img/receiveCoupon/button.png'
import CouponImg from '@img/receiveCoupon/coupon-bg.png'

const props = defineProps({
    coupon: {
        type: Object,
        default: () => ({
            ruleReductionAmount: '0',
            ruleMinSpendAmount: '0',
        }),
    },
})
const emit = defineEmits(['button-click'])
const coupon = computed(() => props.coupon)

const category = computed(() => {
    const relatedType = props.coupon.relatedType
    if (relatedType === '1') {
        return `限${props.coupon.relatedName}分类商品使用`
    }
    else {
        return `限${props.coupon.relatedName}商品使用`
    }
})

function handleButtonClick() {
    emit('button-click')
}
</script>

<template>
    <view class="discount-coupon">
        <view class="coupon-container">
            <view class="coupon-content">
                <image class="coupon-bg" :src="CouponImg" mode="aspectFit" />
                <view class="coupon-content-layout">
                    <view class="coupon-content-text-content">
                        <view v-if="coupon.type === '2'" class="coupon-content-text-title">
                            <view class="coupon-amount">
                                <view class="coupon-amount-count-number">
                                    {{ coupon.ruleDiscountRate }}
                                </view>
                                <view class="coupon-amount-count-unit">
                                    折
                                </view>
                            </view>
                            <view class="coupon-type">
                                <view style="font-size: 18rpx;">
                                    COUPON
                                </view>
                                <view style="font-size: 34rpx;">
                                    折扣券
                                </view>
                                <view style="font-size:18rpx;">
                                    最高优惠{{ coupon.ruleDiscountCapAmount }}元
                                </view>
                            </view>
                        </view>
                        <view v-else class="coupon-content-text-title">
                            <view class="coupon-amount">
                                <view class="coupon-amount-count-icon">
                                    ￥
                                </view>
                                <view class="coupon-amount-count-number">
                                    {{ coupon?.ruleReductionAmount || '0' }}
                                </view>
                            </view>
                            <view class="coupon-type">
                                <view style="font-size: 18rpx;">
                                    YUAN
                                </view>
                                <view style="font-size: 34rpx;">
                                    满减券
                                </view>
                                <view style="font-size:18rpx;">
                                    COUPON
                                </view>
                            </view>
                        </view>
                        <view class="coupon-content-text-cart">
                            {{ category }}
                        </view>
                        <view class="coupon-content-text-amount">
                            订单满{{ coupon?.ruleMinSpendAmount }}元可用此券
                        </view>
                    </view>
                </view>
            </view>
            <button class="coupon-button" hover-class="none" @click="handleButtonClick">
                <image class="coupon-btn-bg" :src="CouponBtnBg" mode="aspectFit" />
                <view class="coupon-btn-text">
                    立即领取
                </view>
            </button>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.discount-coupon {
    // width: 670rpx;
    width: 100%;
    height: 100%;
    position: absolute;
    // position: relative;
    overflow: hidden;
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99999;

    .coupon-container {
        position: relative;
        height: inherit;
        width: inherit;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .coupon-content {
            position: relative;
            width: 100%;
            height: 638rpx;

            .coupon-bg {
                position: absolute;
                left: 50%;
                transform: translate(-50%, -30%);
                width: 149%;
                height: 149%;
                z-index: 10;
                object-fit: cover;
            }

            .coupon-content-layout {
                position: absolute;
                left: 50%;
                transform: translate(-46%, 45%);
                z-index: 11;
                width: 400rpx;
                height: 370rpx;

                .coupon-content-text-content {
                    width: 347rpx;
                    height: 206rpx;
                    margin-top: 125rpx;
                    margin-left: 31rpx;

                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    gap: 12rpx;

                    color: #ffffff;

                    .coupon-content-text-title {
                        display: flex;
                        flex-direction: row;
                        flex-wrap: nowrap;
                        gap: 29rpx;

                        .coupon-amount {
                            display: flex;
                            flex-direction: row;
                            flex-wrap: nowrap;
                            align-items: baseline;
                            justify-content: end;

                            .coupon-amount-count-number {
                                font-weight: 400;
                                font-size: 89rpx;
                                color: #ffffff;
                            }

                            .coupon-amount-count-unit {
                                font-weight: 500;
                                font-size: 31rpx;
                                color: #f62a2a;
                                background: #ffffff;
                                border-radius: 50%;
                                border: 3px solid #f62a2a;
                                padding: 8rpx;
                                margin-left: -19rpx;
                            }

                            .coupon-amount-count-icon {
                                font-weight: 400;
                                font-size: 43rpx;
                                color: #ffffff;
                            }
                        }

                        .coupon-type {
                            display: flex;
                            flex-direction: column;
                            justify-content: space-evenly;
                            gap: 6rpx;
                            font-weight: 400;
                            font-size: 18rpx;
                            color: #ffffff;
                        }
                    }

                    .coupon-content-text-cart {
                        padding: 8rpx 38rpx;
                        background-color: #ffffff;
                        font-weight: 500;
                        font-size: 24rpx;
                        color: #f62a2a;
                    }

                    .coupon-content-text-amount {
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #ffffff;
                    }
                }
            }
        }

        .coupon-button {
            position: relative;
            width: 254rpx;
            height: 75rpx;
            left: 50%;
            transform: translate(-43%, -83%);
            z-index: 99999;
            display: flex;
            justify-content: center;
            align-items: center;

            // 去除button默认样式
            background-color: transparent;
            border: none;
            padding: 0;
            margin: 0;
            outline: none;
            cursor: pointer;
            -webkit-appearance: none; // 移除浏览器默认样式
            -moz-appearance: none;
            appearance: none;

            // 去除uni-app button默认样式
            &::after {
                display: none; // 移除默认边框
            }

            .coupon-btn-bg {
                position: absolute;
                width: 100%;
                height: 110%;
                z-index: 10;
                object-fit: cover;
                pointer-events: none; // 确保文字不阻挡点击事件
            }

            .coupon-btn-text {
                position: absolute;
                z-index: 11;

                height: 34rpx;
                width: 138rpx;

                text-align: center;
                font-weight: bolder;
                font-size: 34rpx;
                color: #bd521e;
                line-height: 30rpx;
                padding-bottom: 14rpx;
                background: linear-gradient(180deg, #fffadc 0%, #ffef8d 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                pointer-events: none; // 确保文字不阻挡点击事件
            }
        }
    }
}
</style>