绿满眶商城微信小程序-uniapp
zxl
2025-09-12 814f5915fde05ecf5e565a07bc9d611cf6202505
分享虚拟优惠卷
2个文件已修改
57 ■■■■ 已修改文件
pages/order/cardPack.vue 52 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
pages/order/claim-coupon/claim-coupon.vue 5 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
pages/order/cardPack.vue
@@ -24,7 +24,6 @@
                                'coupon-used': item.claimStatus === 'CLAIMED',
                                'coupon-expired': item.status === 'EXPIRED'
                            }"
                            @click="handleCouponClick(item)"
                        >
                            <!-- 左侧优惠券主体 -->
                            <view class="left">
@@ -38,7 +37,7 @@
                                    <view class="coupon-name">{{ item.skuName }}</view>
                                    <view class="coupon-no">券号: {{ item.couponNo }}</view>
                                    <view class="order-id" v-if="item.orderId">订单: {{ item.orderId }}</view>
                                </view>
                                
                                <!-- 圆形装饰 -->
@@ -65,16 +64,14 @@
                                      {{ item.shareStatus === 'NOT_SHARE' ? '未分享' : '已分享' }}
                                    </view>
                                    
                                    <!-- 操作按钮 -->
                                    <view class="action-btn" v-if="item.claimStatus === 'NOT_CLAIM'">
                                        立即领取
                                    <view v-if="item.claimStatus === 'CLAIMED'">
                                        <button class="action-btn shared"  open-type="share" :data-item="JSON.stringify(item)">
                                            分享好友
                                        </button>
                                    </view>
                                    <view class="action-btn shared" v-else-if="item.shareStatus === 'NOT_SHARE'">
                                        分享好友
                                    </view>
                                    <view class="action-btn disabled" v-else>
                                        已使用
                                    </view>
                                </view>
                            </view>
                        </view>
@@ -93,7 +90,9 @@
</template>
<script>
    import configs from '@/config/config'
    import {getPage} from '@/api/couponVirtual.js'
    import storage from "@/utils/storage.js";
    export default {
        data() {
            return {
@@ -107,8 +106,20 @@
               },
               storeId: "", //店铺 id,
               couponData: "",
            };
        },
        onShareAppMessage(e){
            const userInfo = storage.getUserInfo();
            if(!userInfo) {
                console.log("未登录不能分享");
                return
            }
            const shareItem = e.target?.dataset?.item ? JSON.parse(e.target.dataset.item) : this.item;
            return {
                title: '分享优惠卷',
                path: `/pages/order/claim-coupon/claim-coupon?id=${shareItem.id}`,
                imageUrl: ''
            }
        },
         onLoad(options) {
            // options 中包含 URL 传递的所有参数
@@ -161,22 +172,7 @@
                    this.loadStatus = "noMore";
                }
            },
            handleCouponClick(item) {
                // 处理优惠券点击事件
                if (item.claimStatus === 'NOT_CLAIM') {
                    // 领取优惠券逻辑
                    uni.showToast({
                        title: '领取成功',
                        icon: 'success'
                    })
                } else if (item.shareStatus === 'NOT_SHARE') {
                    // 分享优惠券逻辑
                    uni.showToast({
                        title: '已生成分享图',
                        icon: 'success'
                    })
                }
            }
        }
    }
</script>
pages/order/claim-coupon/claim-coupon.vue
@@ -12,12 +12,12 @@
                <!-- 商品图片 -->
                <view class="goods-image-container">
                    <u-image 
                        :src="couponInfo.goodsImage || '/static/default_goods.png'"
                        :src="couponInfo.goodsUrl"
                        width="100%" 
                        height="300rpx" 
                        mode="aspectFit"
                        border-radius="16"
                        @click="previewImage(couponInfo.goodsImage)"
                        @click="previewImage(couponInfo.goodsUrl)"
                    ></u-image>
                </view>
                
@@ -95,7 +95,6 @@
        onLoad(options) {
            // 通过参数传递优惠券ID
            // 例如: /pages/order/claim-coupon/claim-coupon?id=123
            options.id = '1966390012058017794'
            
            this.couponId = ''
            if (options.id) {