pet-front-order/pages_order/newUser/index.vue

<template>
    <view class="new-user-page">
        <!-- 背景图片 -->
        <image class="bg-image"
            src="https://image.hhlm1688.com/2025/08/08168577fd3c2c428785038ee249736e54Rectangle 9031@3x.png"
            mode="aspectFill" />

        <!-- 顶部标题图片 -->
        <image class="title-image" src="https://image.hhlm1688.com/2025/08/07767f2fc0a686433bb9e3f90bc6e60990Group%201000001612@3x.png"
            mode="widthFix" />

        <!-- 优惠券内容图片 -->
        <image class="coupon-content-image"
            :src="NewUserCoupon.couponPoster || image" mode="widthFix" />

        <!-- 立即领取/立即使用按钮 -->
        <view class="receive-btn" @click="handleButtonClick">
            {{ isReceived ? '立即使用' : '立即领取' }}
        </view>

        <!-- 下单方式选择弹窗 -->
        <order-type-select-popup ref="orderTypeSelectPopup" />
    </view>
</template>

<script>
import { getToken } from '@/utils/auth'
import OrderTypeSelectPopup from '@/pages_order/components/OrderTypeSelectPopup.vue'
import { mapState } from 'vuex'
import { receiveCoupon } from "@/api/system/user"

export default {
    name: 'NewUserCouponPage',
    components: {
        OrderTypeSelectPopup
    },
    data() {
        return {
            isReceived: false, // 优惠券是否已领取
            image : '',
        }
    },
    computed : {
        ...mapState(['NewUserCoupon']),
    },
    methods: {
        // 处理按钮点击
        handleButtonClick() {
            if (this.isReceived) {
                // 已领取，点击立即使用，打开选择下单方式弹窗
                this.openOrderTypePopup()
            } else {
                // 未领取，点击立即领取
                this.receiveCoupon()
            }
        },

        // 领取优惠券
        receiveCoupon() {
            let data = {
				stockId: this.NewUserCoupon.id,
			}
			receiveCoupon(data).then(res => {
				if (res.code == 200) {
					uni.showToast({
                        title: '领取成功！',
                        icon: 'success',
                        duration: 2000
                    })
                    // 更新状态为已领取
                    this.isReceived = true
				}
			}).catch(err => {
                uni.showToast({
                    title: '领取优惠券失败',
                    icon: 'none'
                })
			})
        },

        // 打开下单方式选择弹窗
        openOrderTypePopup() {
            this.$refs.orderTypeSelectPopup.open()
        },

        // 暂不领取
        skipReceive() {
            uni.navigateBack()
        }
    }
}
</script>

<style lang="scss" scoped>
.new-user-page {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.title-image {
    position: relative;
    z-index: 2;
    width: 280rpx;
    margin-bottom: 40rpx;
    margin-top: -200rpx;
}

.coupon-content-image {
    position: relative;
    z-index: 2;
    width: 600rpx;
    margin-bottom: 80rpx;
}

.receive-btn {
    position: relative;
    z-index: 2;
    width: 600rpx;
    height: 80rpx;
    background: linear-gradient(135deg, #FFB13F 0%, #FF8C00 100%);
    color: #FFFFFF;
    font-size: 32rpx;
    font-weight: bold;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8rpx 20rpx rgba(255, 177, 63, 0.4);
    margin-bottom: 40rpx;

    &:active {
        transform: scale(0.95);
        transition: transform 0.1s;
    }
}

.skip-btn {
    position: relative;
    z-index: 2;
    width: 200rpx;
    height: 60rpx;
    background: rgba(255, 255, 255, 0.8);
    color: #666;
    font-size: 28rpx;
    border-radius: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    &:active {
        background: rgba(255, 255, 255, 0.6);
        transition: background 0.1s;
    }
}
</style>