couponCenter_mpapp/src/components/spendAndSaveCoupon_large.vue

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

const props = defineProps({
    coupon: {
        type: Object,
        default: () => ({
            ruleReductionAmount: '0',
            ruleMinSpendAmount: '0',
        }),
    },
    scrollViewId: {
        type: String,
        default: '',
    },
    enableCustomShare: {
        type: Boolean,
        default: false,
    }
})
const emit = defineEmits(['shareClick'])
const coupon = computed(() => props.coupon)
const couponTemplateId = computed(() => coupon.value.templateId || '')
const deadline = computed(() => {
    const type = props.coupon.validityType
    if (type === '1') {
        return `自领取之日起${props.coupon.validDays}日内使用`
    }
    else if (type === '2') {
        return `${props.coupon.validStartTime}至${props.coupon.validEndTime}`
    }
    return '长期有效'
})

const category = computed(() => {
    const relatedType = props.coupon.relatedType
    const relatedName = getLastPartAfterSlash(props.coupon.relatedName)
    if (relatedType === '1') {
        return `限${relatedName}分类商品使用`
    }
    else {
        return `限${relatedName}商品使用`
    }
})
// 分享弹窗相关 - 使用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
                if (props.enableCustomShare) {
                    emit('shareClick', couponShareLink.value, shareHooks)
                }
            }
        }
        finally {
            uni.hideLoading()
        }
    }
}

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

<template>
    <view class="discount-coupon">
        <image class="coupon-bg" :src="getImageUrl('@img/index/coupon3.png')" mode="aspectFit" />
        <view class="coupon-content">
            <view class="coupon-amount">
                <view class="coupon-amount-count">
                    <view class="coupon-amount-count-icon">
                        ￥
                    </view>
                    <view class="coupon-amount-count-number">
                        {{ coupon?.ruleReductionAmount }}
                    </view>
                </view>
                <view class="coupon-amount-text">
                    满{{ coupon?.ruleMinSpendAmount }}元可用
                </view>
            </view>
            <view class="coupon-info">
                <view class="coupon-info-category">
                    {{ category }}
                </view>
                <view class="coupon-info-time">
                    <template v-if="coupon.validityType === '1'">
                        <view>{{ deadline }}</view>
                    </template>
                    <template v-else-if="coupon.validityType === '2'">
                        <view>使用日期</view>
                        <view>{{ deadline }}</view>
                    </template>
                    <template v-else>
                        <view>{{ deadline }}</view>
                    </template>
                </view>
            </view>
        </view>
        <view class="discount-btn">
            <button class="coupon-btn-container" @click="handleShareCoupon">
                <view>立即</view>
                <view>发券</view>
            </button>
            <template v-if="!enableCustomShare">
                <ShortLinkModal v-model:show-modal="showShareModal" :coupon-id="couponTemplateId"
                    :share-link="couponShareLink" :scroll-view-id="scrollViewId" :share-hooks="shareHooks"
                    @close="handleCloseShareModal" />
            </template>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.discount-coupon {
    // width: 670rpx;
    width: 100%;
    max-width: 800rpx;
    height: 200rpx;
    position: relative;
    overflow: hidden;

    .coupon-bg {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        object-fit: cover;
    }

    .coupon-content {
        position: absolute;
        height: 161.5rpx;
        width: calc(100% - 27.68%);
        padding-top: 18rpx;
        padding-left: 20rpx;
        padding-bottom: 20rpx;
        display: flex;
        flex-direction: row;
        gap: 3rpx;

        .coupon-amount {
            height: 100%;
            width: 32%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

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

                .coupon-amount-count-icon {
                    font-weight: 500;
                    font-size: 27rpx;
                    color: #f83003;
                }

                .coupon-amount-count-number {
                    font-weight: 500;
                    font-size: 70rpx;
                    color: #f83003;
                    clear: both;
                }
            }

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

        .coupon-info {
            height: 100%;
            width: 68%;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            padding-left: 18rpx;

            .coupon-info-category {
                font-weight: 400;
                font-size: 32rpx;
                color: #333333;
            }

            .coupon-info-time {
                padding-top: 14rpx;
                display: flex;
                flex-direction: column;
                gap: 5rpx;
                font-weight: 400;
                font-size: 22rpx;
                color: #888888;
            }
        }
    }

    .discount-btn {
        position: absolute;
        right: 0;
        z-index: 1;
        height: 100%;
        width: 27.68%;
        display: flex;
        justify-content: center;
        align-items: center;

        .coupon-btn-container {
            width: 115rpx;
            height: 115rpx;

            transform: translateX(7rpx);
            padding: 17rpx 20rpx 18rpx 20rpx;
            background-color: transparent;
            border: none;

            font-weight: 500;
            font-size: 28rpx;
            color: #ffffff;
            line-height: 41rpx;

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