优化：优化折扣券样式，修复无法复制问题

src/components/ShortLinkModal.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import type { ICouponShareResult } from '../hooks/useCouponShare'
+
 // 监听showModal变化，当弹窗显示时自动获取分享短链
 import { watch } from 'vue'
-
 import { useCouponShare } from '../hooks/useCouponShare'
 
 // 定义props
@@ -9,6 +10,7 @@ const props = defineProps<{
     couponId?: string // 优惠券ID，从父组件传入
     showModal?: boolean // 控制弹窗显示/隐藏的prop
     shareLink?: string // 分享短链，从父组件传入
+    shareHooks?: ICouponShareResult
 }>()
 
 // 定义emit
@@ -19,7 +21,7 @@ const emit = defineEmits<{
     (e: 'update:showModal', value: boolean): void
 }>()
 
-const { copySuccess, shareLoading, copyShareLink, cleanShareLink } = useCouponShare()
+const { copySuccess, shareLoading, copyShareLink, cleanShareLink } = props.shareHooks || {}
 
 watch(() => props.showModal, (newVal) => {
     console.log('showModal变化', newVal)

src/components/discountCoupon.vue

@@ -47,7 +47,7 @@ const category = computed(() => {
 const showShareModal = ref(false)
 const couponShareLink = ref('')
 
-const { shareCoupon, shareLoading } = useCouponShare()
+const { shareCoupon, ...shareHooks } = useCouponShare()
 
 // 调用分享弹窗
 async function handleShareCoupon() {
@@ -63,7 +63,7 @@ async function handleShareCoupon() {
                 couponShareLink.value = shareLink
                 showShareModal.value = true
                 if (props.enableCustomShare) {
-                    emit('shareClick', couponShareLink.value)
+                    emit('shareClick', couponShareLink.value, shareHooks)
                 }
             }
         }
@@ -82,34 +82,42 @@ function handleCloseShareModal() {
 <template>
     <view class="discount-coupon">
         <image class="coupon-bg" :src="getImageUrl('@img/index/coupon2.png')" mode="aspectFill" />
-        <view class="discount-content">
-            <view class="discount-amount">
-                <view class="discount-amount-number">
-                    {{ coupon.ruleDiscountRate }}
+        <view class="discount-coupon-content">
+            <view class="discount-coupon-info-container">
+                <view class="discount-coupon-info-content">
+                    <view class="discount-coupon-info-price">
+                        <view class="discount-coupon-info-number">
+                            {{ coupon.ruleDiscountRate }}
+                        </view>
+                        <view class="discount-coupon-info-unit">
+                            折
+                        </view>
+                    </view>
+                    <view class="discount-coupon-info-desc">
+                        <view class="desc-text">
+                            满{{ coupon.ruleMinSpendAmount }}元可用
+                        </view>
+                        <view class="desc-type">
+                            {{ category }}
+                        </view>
+                    </view>
                 </view>
-                <view class="discount-amount-unit">
-                    折
+                <view class="discount-coupon-info-time">
+                    {{ deadline }}，最高优惠{{ coupon.ruleDiscountCapAmount }}元
                 </view>
             </view>
-            <view class="discount-desc">
-                <view class="discount-desc-text">
-                    满{{ coupon.ruleMinSpendAmount }}元可用
-                </view>
-                <view class="discount-desc-type">
-                    {{ category }}
+            <view class="discount-btn-container">
+                <view class="btn-bg">
+                    <button class="discount-btn" @click="handleShareCoupon">
+                        <view>立即</view>
+                        <view>发券</view>
+                    </button>
                 </view>
             </view>
         </view>
-        <view class="discount-desc-time">
-            {{ deadline }}，最高优惠{{ coupon.ruleDiscountCapAmount }}元
-        </view>
-        <!-- <button class="discount-btn" open-type="share" :data-coupon-id="couponTemplateId" data-share-type="coupon"> -->
-        <button class="discount-btn" @click="handleShareCoupon">
-            <view>立即</view>
-            <view>发券</view>
-        </button>
+
         <template v-if="!enableCustomShare">
-            <ShortLinkModal v-model:show-modal="showShareModal" :coupon-id="couponTemplateId"
+            <ShortLinkModal v-model:show-modal="showShareModal" :coupon-id="couponTemplateId" :share-hooks="shareHooks"
                 :share-link="couponShareLink" :scroll-view-id="scrollViewId" @close="handleCloseShareModal" />
         </template>
     </view>
@@ -121,7 +129,6 @@ function handleCloseShareModal() {
     max-width: 800rpx;
     height: 209rpx;
     position: relative;
-    overflow: hidden;
 
     .coupon-bg {
         position: absolute;
@@ -133,98 +140,125 @@ function handleCloseShareModal() {
         z-index: 0;
     }
 
-    .discount-content {
-        height: 95rpx;
-        position: absolute;
-        top: 35%;
-        left: 43%;
-        transform: translate(-50%, -50%);
+    .discount-coupon-content {
+        width: 100%;
         display: flex;
         flex-direction: row;
-        justify-content: center;
-        align-items: center;
-        gap: 30rpx;
-        z-index: 1;
+        flex-wrap: nowrap;
+        height: inherit;
+        // padding: 14rpx 0 17rpx 12rpx;
 
-        .discount-amount {
+        .discount-coupon-info-container {
+            width: 73.47%;
             display: flex;
-            flex-direction: row;
-            flex-wrap: nowrap;
-            align-items: flex-end;
-            gap: 6rpx;
+            flex-direction: column;
+            padding: 14rpx 0 17rpx 12rpx;
+            z-index: 1;
 
-            .discount-amount-number {
-                flex: 1;
-                font-weight: 500;
-                font-size: 132rpx;
-                color: #f8204b;
-                margin-bottom: -16rpx;
+            .discount-coupon-info-content {
+                width: 100%;
+                height: 78.09%;
+                display: flex;
+                flex-direction: row;
+                flex-wrap: nowrap;
+                // justify-content: center;
+                gap: 30rpx;
+
+                .discount-coupon-info-price {
+                    width: 199rpx;
+                    display: flex;
+                    flex-direction: row;
+                    flex-wrap: nowrap;
+                    align-items: flex-end;
+                    padding-bottom: 22rpx;
+                    justify-content: flex-end;
+
+                    .discount-coupon-info-number {
+                        height: 132rpx;
+                        font-weight: 500;
+                        font-size: 132rpx;
+                        color: #f8204b;
+                        line-height: 168rpx;
+                    }
+
+                    .discount-coupon-info-unit {
+                        font-weight: 500;
+                        font-size: 56rpx;
+                        color: #f8204b;
+                        line-height: 56rpx;
+                    }
+                }
+
+                .discount-coupon-info-desc {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    gap: 13rpx;
+
+                    .desc-text {
+                        font-weight: bold;
+                        font-size: 30rpx;
+                        color: #333333;
+                    }
+
+                    .desc-type {
+                        font-weight: 400;
+                        font-size: 22rpx;
+                        color: #333333;
+                        line-height: 30rpx;
+                    }
+                }
             }
 
-            .discount-amount-unit {
+            .discount-coupon-info-time {
+                padding-top: 16rpx;
+                padding-bottom: 8rpx;
                 flex: 1;
-                font-weight: 500;
-                font-size: 56rpx;
-                color: #f8204b;
+                width: 100%;
+                font-weight: 400;
+                font-size: 18rpx;
+                color: #666666;
+                line-height: 18rpx;
+                text-align: center;
+                text-indent: -5em;
             }
         }
 
-        .discount-desc {
+        .discount-btn-container {
+            height: 100%;
+            width: 26.53%;
             display: flex;
-            flex-direction: column;
-            gap: 13rpx;
             justify-content: center;
-            padding-top: 17rpx;
-
-            .discount-desc-text {
-                font-weight: bold;
-                font-size: 30rpx;
-                color: #333333;
-            }
+            align-items: center;
 
-            .discount-desc-type {
-                font-weight: 400;
-                font-size: 22rpx;
-                color: #333333;
-                line-height: 30rpx;
-            }
-        }
-    }
+            .btn-bg {
+                width: 115rpx;
+                height: 115rpx;
+                transform: translate(10%, -4%);
+                display: flex;
+                justify-content: center;
+                align-items: center;
 
-    .discount-desc-time {
-        position: absolute;
-        bottom: 8%;
-        left: 5%;
-        // transform: translate(0, -50%);
-        font-weight: 400;
-        font-size: 18rpx;
-        color: #666666;
-        z-index: 1;
-    }
+                .discount-btn {
+                    font-weight: 500;
+                    font-size: 28rpx;
+                    color: #ffffff;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    gap: 10rpx;
+                    padding: 0;
+                    background-color: transparent;
+                    border: none;
+                    line-height: 28rpx;
 
-    .discount-btn {
-        position: absolute;
-        font-weight: 500;
-        font-size: 28rpx;
-        color: #ffffff;
-        top: 50%;
-        right: 7%;
-        transform: translateY(-60%);
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        gap: 10rpx;
-        z-index: 1;
-        padding: 0;
-        background-color: transparent;
-        border: none;
-        line-height: 28rpx;
-
-        &::after {
-            border: none;
-            position: unset;
-            height: inherit;
+                    &::after {
+                        border: none;
+                        position: unset;
+                        height: inherit;
+                    }
+                }
+            }
         }
     }
 }

src/components/spendAndSaveCoupon.vue

@@ -21,7 +21,7 @@ const couponTemplateId = computed(() => coupon.value.templateId || '')
 const showShareModal = ref(false)
 const couponShareLink = ref('')
 
-const { shareCoupon, shareLoading } = useCouponShare()
+const { shareCoupon, ...shareHooks } = useCouponShare()
 
 // 调用分享弹窗
 async function handleShareCoupon() {
@@ -70,7 +70,7 @@ function handleCloseShareModal() {
             去发券
         </button>
         <ShortLinkModal v-model:show-modal="showShareModal" :coupon-id="couponTemplateId" :share-link="couponShareLink"
-            @close="handleCloseShareModal" />
+            :share-hooks="shareHooks" @close="handleCloseShareModal" />
     </view>
 </template>
 

src/components/spendAndSaveCoupon_large.vue

@@ -50,7 +50,7 @@ const category = computed(() => {
 const showShareModal = ref(false)
 const couponShareLink = ref('')
 
-const { shareCoupon, shareLoading } = useCouponShare()
+const { shareCoupon, ...shareHooks } = useCouponShare()
 
 // 调用分享弹窗
 async function handleShareCoupon() {
@@ -66,7 +66,7 @@ async function handleShareCoupon() {
                 couponShareLink.value = shareLink
                 showShareModal.value = true
                 if (props.enableCustomShare) {
-                    emit('shareClick', couponShareLink.value)
+                    emit('shareClick', couponShareLink.value, shareHooks)
                 }
             }
         }
@@ -124,7 +124,8 @@ function handleCloseShareModal() {
             </button>
             <template v-if="!enableCustomShare">
                 <ShortLinkModal v-model:show-modal="showShareModal" :coupon-id="couponTemplateId"
-                    :share-link="couponShareLink" :scroll-view-id="scrollViewId" @close="handleCloseShareModal" />
+                    :share-link="couponShareLink" :scroll-view-id="scrollViewId" :share-hooks="shareHooks"
+                    @close="handleCloseShareModal" />
             </template>
         </view>
     </view>

src/hooks/useCouponShare.ts

@@ -5,8 +5,13 @@ import { getCouponShareLink } from '@/api/receiveCoupon'
 import { useTokenStore } from '@/store/token'
 import { toLoginPage } from '@/utils/toLoginPage'
 
-interface ICouponShareResult {
-    shareLink: string // 分享短链
+export interface ICouponShareResult {
+    shareLink?: string
+    copySuccess?: boolean
+    shareLoading?: boolean
+    shareCoupon?: (couponId?: string) => Promise<string | null>
+    copyShareLink?: () => void
+    cleanShareLink?: () => void
 }
 
 export function useCouponShare() {
@@ -89,7 +94,9 @@ export function useCouponShare() {
                     copySuccess.value = false
                 }, 2000)
             },
-            fail: () => {
+            fail: (error) => {
+                console.log('复制的内容', shareLink.value)
+                console.error('复制失败:', error)
                 uni.showToast({
                     title: '复制失败',
                     icon: 'none',

src/pages-A/discountcouponList/index.vue

@@ -47,6 +47,7 @@ const topSafeAreaHeight = safeAreaInsets?.top || 0
 
 const couponShareLink = ref('')
 const showShareModal = ref(false)
+const shareHooks = ref()
 
 // 页面加载时获取数据
 onLoad((options) => {
@@ -81,9 +82,10 @@ onShareAppMessage(async (options) => {
 })
 // #endif
 
-function handleShareClick(shareLink) {
+function handleShareClick(shareLink, shareHooks) {
     couponShareLink.value = shareLink
     showShareModal.value = true
+    shareHooks.value = shareHooks
 }
 </script>
 
@@ -111,7 +113,7 @@ function handleShareClick(shareLink) {
             </view>
         </scroll-view>
 
-        <ShortLinkModal v-model:show-modal="showShareModal" :share-link="couponShareLink" />
+        <ShortLinkModal v-model:show-modal="showShareModal" :share-link="couponShareLink" :share-hooks="shareHooks" />
         <!-- 安全区底部占位 -->
         <view class="safe-bottom" :style="{ height: `${safeBottomHeight}px` }" />
     </view>

src/pages-A/spendAndSaveCouponList/index.vue

@@ -71,6 +71,7 @@ const topSafeAreaHeight = safeAreaInsets?.top || 0
 
 const couponShareLink = ref('')
 const showShareModal = ref(false)
+const shareHooks = ref()
 
 // 页面加载时获取数据
 onLoad((options) => {
@@ -80,9 +81,10 @@ onLoad((options) => {
     }
 })
 
-function handleShareClick(shareLink) {
+function handleShareClick(shareLink, shareHooks) {
     couponShareLink.value = shareLink
     showShareModal.value = true
+    shareHooks.value = shareHooks
 }
 </script>
 
@@ -110,7 +112,7 @@ function handleShareClick(shareLink) {
             </view>
         </scroll-view>
 
-        <ShortLinkModal v-model:show-modal="showShareModal" :share-link="couponShareLink" />
+        <ShortLinkModal v-model:show-modal="showShareModal" :share-link="couponShareLink" :share-hooks="shareHooks" />
         <!-- 安全区底部占位 -->
         <view class="safe-bottom" :style="{ height: `${safeBottomHeight}px` }" />
     </view>