couponCenter_mpapp/src/components/templateCoupon.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'
import { getPlatformSource } from '@/utils/platformSource'

const props = defineProps({
    coupon: {
        type: Object,
        default: () => ({
            ruleDiscountRate: '0',
            ruleMinSpendAmount: '0',
            relatedName: '',
            ruleDiscountCapAmount: '0',
            validityType: '1',
        }),
    },
    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 === '2') {
        return `领取后${props.coupon.validDays}天过期`
        // return `自领取之日起${props.coupon.validDays}日内使用`
    }
    else if (type === '1') {
        return `${props.coupon.validEndTime}`
        // return `限${props.coupon.validStartTime}到${props.coupon.validEndTime}日内使用`
    }
    return '长期有效'
})
const category = computed(() => {
    const relatedType = coupon.value.relatedType
    if (coupon.value?.relatedName && coupon.value?.relatedName !== 'null') {
        let relatedName = coupon.value.relatedName
        if (relatedType === '2') {
            relatedName = getLastPartAfterSlash(coupon.value.relatedName)
            return `仅限${relatedName}分类商品使用`
        } else if (relatedType === '3') {
            return `仅限部分商品使用`
        }
        else {
            return `仅限${relatedName}商品使用`
        }
    }
    return '不限商品分类'
})

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

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

// 调用分享弹窗
async function handleShareCoupon() {
    // 确保有优惠券数据
    if (coupon.value.templateId) {
        // uni.showLoading({
        //     title: '获取分享链接中...',
        //     mask: true,
        // })
        try {
            const shareLink = await shareCoupon(couponTemplateId.value)
            console.log(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/new-coupon-bg.png')" mode="aspectFill" />
        <view class="discount-coupon-content">
            <view class="discount-coupon-info-container">
                <view class="discount-coupon-info-content">
                    <view :class="coupon.ruleReductionAmount && String(coupon.ruleReductionAmount).length > 2 ? 'discount-coupon-info-price scale' : 'discount-coupon-info-price'">
                        <text class="discount-coupon-info-number">
                            {{ coupon.type === '2' ? coupon?.ruleDiscountRate : coupon?.ruleReductionAmount }}
                        </text>
                        <view class="discount-coupon-info-unit">
                            {{ coupon.type === '2' ? '折' : '元' }}
                        </view>
                    </view>
                    <view class="discount-coupon-info-desc">
                        <view class="desc-text">
                            {{ coupon.name }}
                        </view>
                        <view class="desc-type" @tap="isExpand = !isExpand">
                            <text v-if="coupon.type === '2'">最高优惠{{ coupon.ruleDiscountCapAmount }}元，满{{ coupon.ruleMinSpendAmount }}元可用</text>
                            <text v-else>满{{ coupon.ruleMinSpendAmount }}元可用</text>
                        </view>
                        <view class="desc-type" @tap="isExpand = !isExpand">
                            有效期限：{{ deadline }}
                        </view>
                        <view class="desc-more" @tap="isExpand = !isExpand">
                            {{isExpand ? '收起详情' : '展开详情 '}} 
                            <up-icon v-if="isExpand" size="10" color="#FF4129" name="arrow-up" />
                            <up-icon size="10" color="#FF4129" v-else name="arrow-down" />
                        </view>
                    </view>
                </view>
            </view>
            <view class="discount-btn-container">
                <view class="share-text">分享赚 ¥{{ coupon.pushCouponAverageAmount }}</view>
                <view class="btn-bg">
                    <button class="discount-btn" @click="handleShareCoupon">去分享</button>
                </view>
            </view>
        </view>
        <!-- <up-transition :show="isExpand" mode="fade-down" duration="300"> -->
        <view :class="['coupon-info', isExpand ? 'expanded' : 'collapsed']">
            <view class="info-content">
                <view class="info-item">
                    <view class="item-title">券类型:</view>
                    <view class="item-content">{{ coupon.type === '2' ? '折扣券' : '满减券' }}</view>
                </view>
                <view class="info-item">
                    <view class="item-title">限定地区:</view>
                    <view class="item-content">
                        <view v-if="coupon.relatedType == '3'">仅可在部分地区使用</view>
                        <view v-else>{{ coupon?.locality && coupon?.locality !== 'null' ? `仅可在${coupon?.locality}地区的商户使用` : '不限地区' }}</view>
                    </view>
                </view>
                <view class="info-item">
                    <view class="item-title">限定商户:</view>
                    <view class="item-content">
                        <view v-if="coupon.relatedType == '3'">仅限部分商户使用</view>
                        <view v-else>{{ coupon?.storeName && coupon?.storeName !== 'null' ? `仅限${coupon?.storeName}商户使用` : '不限商户' }}</view>
                    </view>
                </view>
                <view class="info-item">
                    <view class="item-title">限定商品:</view>
                    <view class="item-content">{{ category }}</view>
                </view>
                <view class="info-item">
                    <view class="item-title">限定平台:</view>
                    <view class="item-content">仅限{{ getPlatformSource(coupon?.platformSource) }}平台使用</view>
                </view>
            </view>
        </view>
        <!-- </up-transition> -->
        <template v-if="!enableCustomShare">
            <ShortLinkModal v-model:show-modal="showShareModal" :coupon-id="couponTemplateId" :share-hooks="shareHooks"
                :share-link="couponShareLink" :scroll-view-id="scrollViewId" @close="handleCloseShareModal" />
        </template>
    </view>
</template>

<style lang="scss" scoped>
.discount-coupon {
    width: 100%;
    // max-height: 800rpx;
    position: relative;
    font-weight: 400;

    .coupon-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 170rpx;
        object-fit: cover;
        z-index: 1;
        border-radius: 10rpx;
    }

    .discount-coupon-content {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        height: 170rpx;

        .discount-coupon-info-container {
            width: 73.47%;
            display: flex;
            flex-direction: column;
            z-index: 1;

            .discount-coupon-info-content {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;

                .discount-coupon-info-price {
                    width: 125rpx;
                    height: 100%;
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    align-items: center;
                    justify-content: center;
                    gap: 5rpx;
                    font-family: D-DIN Exp-DINExp, D-DIN Exp-DINExp;

                    .discount-coupon-info-number {
                        font-weight: bold;
                        font-size: 60rpx;
                        color: #FF5365;
                        letter-spacing: -4rpx;
                    }

                    .discount-coupon-info-unit {
                        font-weight: 500;
                        font-size: 26rpx;
                        color: #FF5365;
                        padding-top: 18rpx;
                    }
                }

                .scale {
                    scale: 0.8;
                }

                .discount-coupon-info-desc {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    gap: 4rpx;
                    padding-left: 4rpx;

                    .desc-text {   
                        max-width: 290rpx;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        flex-wrap: nowrap;
                        font-weight: 600;
                        font-size: 24rpx;
                        color: #000000;
                        line-height: 34rpx;
                    }

                    .desc-type {
                        font-size: 20rpx;
                        color: #808080;
                        line-height: 28rpx;
                        display: flex;
                        flex-wrap: nowrap;
                    }

                    .desc-more {
                        font-size: 20rpx;
                        color: #FF4129;
                        display: flex;
                        flex-wrap: nowrap;
                        gap: 4rpx;
                    }
                }
            }
        }

        .discount-btn-container {
            height: 100%;
            width: 26.53%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .share-text {
                font-weight: 500;
                font-size: 22rpx;
                color: #FFFFFF;
                z-index: 2;
                margin-bottom: 7rpx;
            }

            .btn-bg {
                z-index: 2;

                .discount-btn {
                    display: flex;
                    height: 48rpx;
                    padding: 7rpx 24rpx;
                    line-height: 34rpx;
                    background: #FFFFFF;
                    border-radius: 999rpx 999rpx 999rpx 999rpx;
                    font-weight: 600;
                    font-size: 24rpx;
                    color: #FF5365;
                    letter-spacing: 1rpx;
                }
            }
        }
    }

    .coupon-info {
        margin-top: -4rpx;
        padding: 16rpx 26rpx 12rpx;
        background: rgba(255,140,58,0.15);
        border-radius: 0 0 32rpx 32rpx;
        overflow: hidden;
        transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        box-shadow: 1rpx 1rpx 10rpx #fff9f4;

        .info-content {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 5rpx;

            .info-item {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-items: top;
                justify-content: flex-start;
                gap: 10rpx;
                font-size: 18rpx;
                color: #808080;

                .item-title {
                    width:80rpx;
                }

                .item-content {
                    flex: 1;
                }
            }
        }
    }

    /* 收起状态 */
    .coupon-info.collapsed {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-top-width: 0;
        border-bottom-width: 0;
    }

    /* 展开状态 */
    .coupon-info.expanded {
        opacity: 1;
        max-height: 500rpx;
        /* 设置一个足够大的值以容纳所有内容 */
        padding-top: 20rpx;
        padding-bottom: 20rpx;
        border-top-width: 11rpx;
        border-bottom-width: 11rpx;
    }
}
</style>