couponCenter_mpapp/src/components/spendAndSaveCoupon.vue

<script lang="ts" setup>
import { computed, ref } from 'vue'
import ShortLinkModal from '@/components/ShortLinkModal.vue'
import { getImageUrl } from '@/utils/imageUtil'
import { useCouponShare } from '../hooks/useCouponShare'

const props = defineProps({
    coupon: {
        type: Object,
        default: () => ({
            ruleReductionAmount: '0',
            ruleMinSpendAmount: '0',
        }),
    }
})

const coupon = computed(() => props.coupon)
const couponTemplateId = computed(() => coupon.value.templateId || '')

// 分享弹窗相关 - 使用v-model控制弹窗显示
const showShareModal = ref(false)
const couponShareLink = ref('')

const { shareCoupon, ...shareHooks } = useCouponShare()

// 调用分享弹窗
async function handleShareCoupon() {
    // 确保有优惠券数据
    if (coupon.value.templateId) {
        uni.showLoading({
            title: '获取分享链接中...',
            mask: true,
        })
        try {
            const shareLink = await shareCoupon(couponTemplateId.value)
            if (shareLink) {
                couponShareLink.value = shareLink
                showShareModal.value = true
            }
        }
        finally {
            uni.hideLoading()
        }
    }
}

// 关闭分享弹窗
function handleCloseShareModal() {
    console.log('分享弹窗已关闭')
}
</script>

<template>
    <view class="spend-and-save-coupon" :style="{ backgroundImage: `url(${getImageUrl('@img/index/coupon1.png')})` }">
        <view class="coupon-content">
            <view class="coupon-amount">
                <view class="coupon-amount-text">
                    {{ coupon.ruleReductionAmount }}
                </view>
                <view class="coupon-amount-icon">
                    ￥
                </view>
            </view>
            <view class="coupon-desc">
                满{{ coupon.ruleMinSpendAmount }}元可用
            </view>
        </view>

        <button class="coupon-btn" @click="handleShareCoupon">
            去发券
        </button>
        <ShortLinkModal v-model:show-modal="showShareModal" :share-link="couponShareLink" :share-hooks="shareHooks" />
    </view>
</template>

<style lang="scss" scoped>
.spend-and-save-coupon {
    width: 210rpx;
    height: 205rpx;
    background-position: right top;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;

    .coupon-content {
        position: absolute;
        top: 35%;
        left: 51%;
        transform: translate(-50%, -50%);
        width: 162rpx;
        height: 158rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 27rpx;

        .coupon-amount {
            position: relative;

            .coupon-amount-text {
                font-weight: 500;
                font-size: 66rpx;
                color: #ff4f3b;
            }

            .coupon-amount-icon {
                position: absolute;
                width: 24rpx;
                height: 24rpx;
                background-color: #ffffff;
                border-radius: 50%;
                bottom: 0;
                right: 0;
                transform: translate(55%, -20%);
                font-weight: 500;
                font-size: 20rpx;
                color: #ff1a00;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .coupon-desc {
            font-weight: 400;
            font-size: 22rpx;
            color: #ff1a00;
        }
    }

    .coupon-btn {
        position: absolute;
        font-weight: 500;
        font-size: 22rpx;
        color: #f26e5f;
        bottom: 2rpx;
        left: 50%;
        transform: translate(-54%, 5%);
        padding: 0;
        background-color: transparent;
        border: none;

        &::after {
            border: none;
            position: unset;
            height: inherit;
        }
    }
}
</style>