调整分享状态的改变

peng

2025-09-12 810fbf8955b99c7e6e4a8551f7e1ffa95515f549

 pages/order/cardPack.vue

@@ -24,7 +24,7 @@
                        'coupon-used': item.claimStatus === 'CLAIMED',
                        'coupon-expired': item.status === 'EXPIRED'
                     }"
                     @click="handleCouponClick(item)"
                     :data-item="JSON.stringify(item)"
                  >
                     <!-- 左侧优惠券主体 -->
                     <view class="left">
@@ -38,7 +38,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>
                        
                        <!-- 圆形装饰 -->
@@ -52,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>
@@ -64,37 +64,41 @@
                             }">
                             {{ item.shareStatus === 'NOT_SHARE' ? '未分享' : '已分享' }}
                           </view>
									
                           <!-- 操作按钮 -->
                           <view class="action-btn" v-if="item.claimStatus === 'NOT_CLAIM'">
                              立即领取
                           </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 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 class="load-more" v-if="couponList.length > 0">
                  <text v-if="loadStatus === 'more'">上拉加载更多</text>
                  <text v-else-if="loadStatus === 'loading'">加载中...</text>
                  <text v-else>没有更多了</text>
               </view>
            </div>
         </div>
      </div>
		
      <!-- 加载更多提示 -->
      <view class="load-more" v-if="couponList.length > 0">
         <text v-if="loadStatus === 'more'">上拉加载更多</text>
         <text v-else-if="loadStatus === 'loading'">加载中...</text>
         <text v-else>没有更多了</text>
      </view>
   </view>
</template>

<script>
   import {getPage} from '@/api/couponVirtual.js'
   import configs from '@/config/config'
   import {getPage,changShareStatus} 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", //下拉状态
@@ -107,8 +111,22 @@
            },
            storeId: "", //店铺 id,
            couponData: "",
		
         };
      },
      onShareAppMessage(e){
         const userInfo = storage.getUserInfo();
         if(!userInfo) {
            console.log("未登录不能分享");
            return
         }
         console.log('------------------------->',e)
         const shareItem = e.target?.dataset?.item ? JSON.parse(e.target.dataset.item) : this.item;2
         changShareStatus(shareItem.id);
         return {
            title: shareItem.name,
            path: `/pages/order/claim-coupon/claim-coupon?id=${shareItem.id}`,
            imageUrl:shareItem.original
         }
      },
       onLoad(options) {
          // options 中包含 URL 传递的所有参数
@@ -161,22 +179,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>
@@ -230,7 +233,7 @@
         .swiper-item {
            .scroll-v {
               height: calc(100vh - 100rpx);
               padding: 30rpx 24rpx 100rpx;
               padding: 30rpx 24rpx 30rpx;
            }
         }
      }
@@ -384,6 +387,11 @@
               opacity: 0.9;
            }
            
            .order-id {
               word-break: break-all;
               white-space: normal;
            }
				
            .valid-date {
               margin-top: 16rpx;
               font-size: 22rpx;
@@ -462,29 +470,47 @@
               color: $gray;
               border: 1rpx solid rgba(158, 158, 158, 0.3);
            }
				
            // 操作按钮
            .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;
               box-shadow: 0 4rpx 12rpx rgba(255, 107, 59, 0.3);
					
               &.shared {
                  background: linear-gradient(135deg, $info, #42A5F5);
                  box-shadow: 0 4rpx 12rpx rgba(33, 150, 243, 0.3);
               }
					
               &.disabled {
                  background: linear-gradient(135deg, #BDBDBD, #9E9E9E);
                  box-shadow: 0 4rpx 12rpx 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);
         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);
            box-shadow: 0 4rpx 12rpx rgba(33, 150, 243, 0.3);
         }
			
         &.disabled {
            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;
         }
      }
      
@@ -495,11 +521,6 @@
         color: $gray;
         font-size: 26rpx;
         background-color: $bg-color;
         position: fixed;
         bottom: 0;
         left: 0;
         right: 0;
         z-index: 10;
      }
   }
</style>