pet-front-order/pages/components/NewUserCoupon.vue

<template>
    <view class="new-user-coupon" v-if="showPopup">
        <view class="mask" @click="closePopup"></view>
        <view class="coupon-container">
            <view class="coupon-content">
                <view style="position: relative;">
                    <image class="coupon-image"
                    style="height: 800rpx;"
                    src="https://image.hhlm1688.com/2025/08/08168577fd3c2c428785038ee249736e54Rectangle 9031@3x.png"
                    mode="aspectFill"></image>

                    <image 
                    style="width: 280rpx;height: 70rpx;
                    position: absolute;
                    left: 50%;
                    top: 20rpx;
                    transform: translate(-50%, 0%);"
                    mode="aspectFill"
                    src="https://image.hhlm1688.com/2025/08/07767f2fc0a686433bb9e3f90bc6e60990Group%201000001612@3x.png"/>

                    <image class="coupon-image"
                        style="position: absolute;left: 50%;top: 50%;
                        width: 80%;
                        transform: translate(-50%, -50%);"
                        :src="NewUserCoupon.couponPoster || image"
                        mode="widthFix"></image>
                </view>
                <view class="coupon-btn" @click="getCoupon">立即领取</view>
            </view>
            <view class="close-btn" @click="closePopup">
                <text class="close-icon">×</text>
            </view>
        </view>
    </view>
</template>

<script>
import { getToken } from '@/utils/auth'
import { mapState } from 'vuex'

export default {
    name: 'NewUserCoupon',
    data() {
        return {
            showPopup: true,
            image : '',
        }
    },
    computed : {
        ...mapState(['NewUserCoupon']),
    },
    methods: {
        closePopup() {
            this.showPopup = false
            this.$emit('close')
        },
        getCoupon() {
            // 检查用户是否已登录
            if (!getToken() || !this.userInfo.phone) {

                // 未登录，跳转到登录页面
                uni.navigateTo({
                    url: '/pages_order/auth/login?url=/pages_order/newUser/index'
                })
            } else {
                // 已登录，跳转到新用户优惠券页面
                this.closePopup()
                uni.navigateTo({
                    url: '/pages_order/newUser/index'
                })
            }
        }
    }
}
</script>

<style lang="scss">
.new-user-coupon {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;

    .mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
    }

    .coupon-container {
        position: relative;
        width: 560rpx;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .coupon-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .coupon-image {
        width: 560rpx;
        border-radius: 20rpx;
    }

    .coupon-btn {
        position: relative;
        margin-top: -100rpx;
        width: 300rpx;
        height: 80rpx;
        background: #FFB13F;
        color: #FFFFFF;
        font-size: 32rpx;
        font-weight: bold;
        border-radius: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .close-btn {
        position: relative;
        margin-top: 40rpx;
        width: 60rpx;
        height: 60rpx;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;

        .close-icon {
            color: #666;
            font-size: 40rpx;
            font-weight: bold;
        }
    }
}
</style>