couponCenter_mpapp/src/components/ShortLinkModal.vue

<script setup lang="ts">
// 监听showModal变化，当弹窗显示时自动获取分享短链
import { watch } from 'vue'

import { useCouponShare } from '../hooks/useCouponShare'

// 定义props
const props = defineProps<{
    couponId?: string // 优惠券ID，从父组件传入
    showModal?: boolean // 控制弹窗显示/隐藏的prop
}>()

// 定义emit
const emit = defineEmits<{
    // 弹窗关闭时触发
    (e: 'close'): void
    // 用于v-model的update事件
    (e: 'update:showModal', value: boolean): void
}>()

const { shareLink, copySuccess, shareLoading, shareCoupon, copyShareLink, cleanShareLink } = useCouponShare()
watch(() => props.showModal, (newVal) => {
    console.log('showModal', newVal)
    if (newVal && props.couponId) {
        shareCoupon(props.couponId)
    }
})

// 弹窗关闭时触发事件
function handleClose() {
    emit('update:showModal', false)
    emit('close')
    cleanShareLink()
}
</script>

<template>
    <!-- 分享弹窗 - 使用uview-plus的Modal组件 -->
    <up-modal title="分享优惠券" style="z-index: 1000;" :show="props.showModal" :show-confirm-button="false">
        <view class="share-modal-content">
            <view class="share-link-container">
                <up-loading-icon v-if="shareLoading" mode="semicircle" text="正在获取分享链接中" text-size="18" />
                <template v-else>
                    <text class="share-link">{{ shareLink }}</text>
                    <button class="copy-btn" @click="copyShareLink">
                        复制
                    </button>
                </template>
            </view>
            <view v-if="copySuccess" class="copy-success">
                复制成功！
            </view>
        </view>
        <template #popupBottom>
            <view class="rounded" style="margin-top: 20px;" @click="handleClose">
                <up-icon name="close-circle" size="72rpx" color="#fff" />
            </view>
        </template>
    </up-modal>
</template>

<style scoped>
.share-modal-content {
    margin: 20rpx 0;
}

.share-link-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    background-color: #f5f5f5;
    border-radius: 8rpx;
    margin-bottom: 20rpx;
}

.share-link {
    flex: 1;
    font-size: 28rpx;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 20rpx;
}

.copy-btn {
    padding: 10rpx 20rpx;
    font-size: 28rpx;
    color: #007aff;
    background-color: transparent;
    border: 1px solid #007aff;
    border-radius: 8rpx;
}

.copy-success {
    text-align: center;
    font-size: 28rpx;
    color: #07c160;
}
</style>