礼品卡领取页面调整

peng

2025-09-12 60e4aedc23d54a8f7e661f07a1757da4a44ec726

礼品卡领取页面调整

 pages/order/cardPack.vue

@@ -24,6 +24,7 @@
                                'coupon-used': item.claimStatus === 'CLAIMED',
                                'coupon-expired': item.status === 'EXPIRED'
                            }"
                            :data-item="JSON.stringify(item)"
                        >
                            <!-- 左侧优惠券主体 -->
                            <view class="left">
@@ -51,7 +52,7 @@
                                    <view class="status-tag" 
                                      :class="{
                                        'unclaimed': item.claimStatus === 'NOT_CLAIM',
                                        'claimed': item.claimStatus === 'CLAIMED'
                                        'claimed': item.claimStatus === 'CLAIM'
                                      }">
                                      {{ item.claimStatus === 'NOT_CLAIM' ? '未领取' : '已领取' }}
                                    </view>
@@ -63,22 +64,17 @@
                                      }">
                                      {{ item.shareStatus === 'NOT_SHARE' ? '未分享' : '已分享' }}
                                    </view>
                                </view>
                            </view>
                                    
										
                                    <view v-if="item.claimStatus === 'CLAIMED'">
                            <!-- 分享按钮 -->
                            <view v-if="item.claimStatus !== 'CLAIM'" class="share-btn-container">
                                        <button class="action-btn shared"  open-type="share" :data-item="JSON.stringify(item)">
                                            分享好友
                                    <uni-icons class="share-icon" type="redo" size="20" color="#FFFFFF"></uni-icons>
                                        </button>
                                    </view>
									
						
                                </view>
                            </view>
                        </view>
                    </view>
                </div>
            </div>
        </div>
        
        <!-- 加载更多提示 -->
        <view class="load-more" v-if="couponList.length > 0">
@@ -86,6 +82,9 @@
            <text v-else-if="loadStatus === 'loading'">加载中...</text>
            <text v-else>没有更多了</text>
        </view>
                </div>
            </div>
        </div>
    </view>
</template>

@@ -93,7 +92,13 @@
    import configs from '@/config/config'
    import {getPage} from '@/api/couponVirtual.js'
    import storage from "@/utils/storage.js";
    // 引入uni-icons组件
    import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
    export default {
        // 注册组件
        components: {
            uniIcons
        },
        data() {
            return {
               loadStatus: "more", //下拉状态
@@ -114,11 +119,12 @@
                console.log("未登录不能分享");
                return
            }
            console.log('------------------------->',e)
            const shareItem = e.target?.dataset?.item ? JSON.parse(e.target.dataset.item) : this.item;
            return {
                title: '分享优惠卷',
                title: shareItem.name,
                path: `/pages/order/claim-coupon/claim-coupon?id=${shareItem.id}`,
                imageUrl: ''
                imageUrl:shareItem.original
            }
        },
         onLoad(options) {
@@ -226,7 +232,7 @@
            .swiper-item {
                .scroll-v {
                    height: calc(100vh - 100rpx);
                    padding: 30rpx 24rpx 100rpx;
                    padding: 30rpx 24rpx 30rpx;
                }
            }
        }
@@ -380,6 +386,11 @@
                    opacity: 0.9;
                }
                
                .order-id {
                    word-break: break-all;
                    white-space: normal;
                }
				
                .valid-date {
                    margin-top: 16rpx;
                    font-size: 22rpx;
@@ -458,18 +469,30 @@
                    color: $gray;
                    border: 1rpx solid rgba(158, 158, 158, 0.3);
                }
            }
        }
		
        // 分享按钮容器
        .share-btn-container {
            position: absolute;
            top: 0rpx;
            right: 0rpx;
            z-index: 10;
        }
                
                // 操作按钮
                .action-btn {
                    background: linear-gradient(135deg, $primary, $primary-light);
                    color: $white;
                    padding: 14rpx 28rpx;
                    border-radius: 40rpx;
                    font-size: 26rpx;
                    text-align: center;
                    margin-top: 10rpx;
                    font-weight: 500;
            width: 50rpx;
            height: 50rpx;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
                    box-shadow: 0 4rpx 12rpx rgba(255, 107, 59, 0.3);
            border: none;
            padding: 0;
            margin: 0;
                    
                    &.shared {
                        background: linear-gradient(135deg, $info, #42A5F5);
@@ -480,7 +503,13 @@
                        background: linear-gradient(135deg, #BDBDBD, #9E9E9E);
                        box-shadow: 0 4rpx 12rpx rgba(158, 158, 158, 0.3);
                    }
                }
			
            .share-icon {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
        
@@ -491,11 +520,6 @@
            color: $gray;
            font-size: 26rpx;
            background-color: $bg-color;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 10;
        }
    }
</style>

 pages/order/claim-coupon/claim-coupon.vue

@@ -147,7 +147,7 @@
                    uni.showLoading({
                        title: '领取中...'
                    });
					
                    console.log(this.couponInfo)
                    // 调用领取优惠券接口
                    const res = await claimVirtualCoupon(this.couponInfo.id);