EpicSoul/subPackages/user/collection.vue

<template>
  <view class="collection-page">
    <!-- 顶部标题区域 -->
    <!-- 商品网格 -->
    <view class="products-grid" v-if="collectionList.length > 0">
      <view
        class="product-item"
        :style="{
          'border-width':
            index == collectionList.length - 1 ||
            index == collectionList.length - 2
              ? 0
              : '0.5rpx',
        }"
        v-for="(item, index) in collectionList"
        :key="index"
        @click="goToDetail(item)"
      >
        <image
          class="product-image"
          :src="item.coverUrl.split(',')[0]"
          mode="aspectFill"
        ></image>
        <view class="product-info">
          <view class="product-title">{{ item.title }}</view>
          <view class="product-price-box">
            <view class="product-price">{{ item.price }}</view>
            <view class="">
              <image
                @click.stop="handleUnlikeClick(item, index)"
                class="heart-icon"
                src="https://epic.js-dyyj.com/uploads/20250728/dd7ed269b24e84a2dd141da6ab980fd6.png"
              >
              </image>
            </view>
          </view>
          <view class="product-details">
            <text class="detail-item"
              >限量发售{{ item.publishQuantity }}份</text
            >
            <text class="detail-item"
              >{{ item.purchaseQuantity || 0 }}人付款</text
            >
            <text class="detail-item">浏览{{ item.viewQuantity || 0 }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态展示 -->
    <view class="empty-state" v-else>
      <view class="empty-content">
        <image
          class="empty-icon"
          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjQ1IiBzdHJva2U9IiNEREREREQiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0ibm9uZSIvPgo8cGF0aCBkPSJNMzUgNDBINjVNMzUgNTBINjVNMzUgNjBINjUiIHN0cm9rZT0iI0RERERERCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+"
          mode="widthFix"
        ></image>
        <view class="empty-title">暂无收藏</view>
        <view class="empty-desc">您还没有收藏任何商品</view>
        <view class="empty-tip">去发现更多精彩商品吧</view>
        <view class="empty-action" @click="goToDiscover">
          <text class="action-text">去发现</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "UserCollection",
  mixins: [require("@/mixins/myMixins.js")],
  data() {
    return {
      collectionList: [],
      sortValue: 0, // 0: 最新收藏, 1: 价格排序
    };
  },
  onLoad() {
    this.loadCollectionList();
  },
  onShow() {
    // 每次显示页面时刷新收藏列表
    this.loadCollectionList();
  },
  methods: {
    // 加载收藏列表
    loadCollectionList() {
      this.Post(
        {
          sortValue: this.sortValue,
        },
        "/framework/benefitPackage/collectList",
        "DES"
      )
        .then((res) => {
          if (res.data) {
            this.collectionList = res.data;
          }
        })
        .catch((error) => {
          console.error("加载收藏列表失败:", error);
          // 使用模拟数据
        });
    },

    // 模拟数据（当API不可用时使用）
    loadMockData() {
      this.collectionList = [
        {
          benefitPackageId: 1,
          title: "苏州园林数字藏品",
          price: "299",
          coverUrl:
            "https://images.unsplash.com/photo-1578662996442-48f60103fc96?auto=format&fit=crop&w=400",
          publishQuantity: 1000,
          purchaseQuantity: 156,
          viewQuantity: 2340,
          type: true,
        },
        {
          benefitPackageId: 2,
          title: "江南水乡文化资产",
          price: "199",
          coverUrl:
            "https://images.unsplash.com/photo-1578662996442-48f60103fc96?auto=format&fit=crop&w=400",
          publishQuantity: 500,
          purchaseQuantity: 89,
          viewQuantity: 1200,
          type: true,
        },
        {
          benefitPackageId: 3,
          title: "吴文化数字纪念册",
          price: "399",
          coverUrl:
            "https://images.unsplash.com/photo-1578662996442-48f60103fc96?auto=format&fit=crop&w=400",
          publishQuantity: 200,
          purchaseQuantity: 45,
          viewQuantity: 890,
          type: true,
        },
        {
          benefitPackageId: 4,
          title: "苏州丝绸数字资产",
          price: "159",
          coverUrl:
            "https://images.unsplash.com/photo-1578662996442-48f60103fc96?auto=format&fit=crop&w=400",
          publishQuantity: 800,
          purchaseQuantity: 234,
          viewQuantity: 1560,
          type: true,
        },
      ];
    },

    // 排序处理
    handleSort(sortType) {
      this.sortValue = sortType;
      this.loadCollectionList();
    },

    // 取消收藏
    handleUnlikeClick(item, index) {
      uni.showModal({
        title: "取消收藏",
        content: "确定要取消收藏这个商品吗？",
        success: (res) => {
          if (res.confirm) {
            this.Post(
              {
                packageId: item.benefitPackageId,
                type: false,
              },
              "/framework/benefitPackage/collect",
              "DES"
            )
              .then((res) => {
                // 从列表中移除
                this.collectionList.splice(index, 1);
                uni.showToast({
                  title: "已取消收藏",
                  icon: "success",
                });
              })
              .catch((error) => {
                console.error("取消收藏失败:", error);
                // 模拟成功
                this.collectionList.splice(index, 1);
                uni.showToast({
                  title: "已取消收藏",
                  icon: "success",
                });
              });
          }
        },
      });
    },

    // 跳转到商品详情
    goToDetail(item) {
      uni.navigateTo({
        url: `/subPackages/equityGoods/detail?id=${item.benefitPackageId}`,
      });
    },

    // 跳转到发现页面
    goToDiscover() {
      uni.navigateTo({
        url: "/subPackages/equityGoods/list",
      });
    },
  },
};
</script>

<style>
page {
  background-color: #f5f5f5;
}
</style>

<style lang="scss" scoped>
.collection-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 40rpx;
}

.header-section {
  padding: 60rpx 30rpx 30rpx;

  .title {
    font-size: 36rpx;
    color: #000000;
    text-align: center;
    margin-bottom: 30rpx;
    padding-bottom: 30rpx;
    font-weight: 500;
    border-bottom: 0.5rpx solid #999999;
  }

  .filter-buttons {
    display: flex;
    justify-content: space-between;
    gap: 40rpx;

    .filter-btn {
      font-size: 28rpx;
      color: #000000;
      border-radius: 20rpx;
      transition: all 0.3s;
      padding: 12rpx 24rpx;

      &.active {
        background: #007aff;
        color: white;
      }
    }
  }
}

.products-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
  padding: 30rpx;

  .product-item {
    overflow: hidden;
    background: white;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.98);
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
    }

    .product-image {
      width: 100%;
      height: 429rpx;
      object-fit: cover;
      border-radius: 20rpx;
    }

    .product-info {
      padding: 20rpx 24rpx 24rpx;

      .product-title {
        font-size: 22rpx;
        color: #000000;
        margin-bottom: 16rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 500;
      }

      .product-price {
        font-size: 36rpx;
        font-weight: 500;
        color: #000000;
      }

      .product-details {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .detail-item {
          font-size: 18rpx;
          color: #808080;
        }
      }
    }
  }
}

// 空状态样式
.empty-state {
  padding: 80rpx 30rpx;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;

  .empty-content {
    text-align: center;
    max-width: 400rpx;

    .empty-icon {
      width: 120rpx;
      height: 120rpx;
      margin: 0 auto 40rpx;
      opacity: 0.6;
    }

    .empty-title {
      font-size: 32rpx;
      color: #666666;
      font-weight: 500;
      margin-bottom: 20rpx;
    }

    .empty-desc {
      font-size: 26rpx;
      color: #999999;
      line-height: 1.5;
      margin-bottom: 16rpx;
    }

    .empty-tip {
      font-size: 24rpx;
      color: #bbbbbb;
      line-height: 1.4;
      margin-bottom: 40rpx;
    }

    .empty-action {
      display: inline-block;
      padding: 20rpx 40rpx;
      background: #007aff;
      border-radius: 40rpx;
      transition: all 0.3s;

      &:active {
        transform: scale(0.95);
        background: #0056cc;
      }

      .action-text {
        font-size: 28rpx;
        color: white;
        font-weight: 500;
      }
    }
  }
}

.heart-icon {
  width: 35rpx;
  height: 30rpx;
  transition: all 0.3s ease;
  flex-shrink: 0;
  top: -2rpx;
  position: relative;
  margin-right: 6rpx;

  &.liked {
    opacity: 1;
    filter: hue-rotate(320deg) saturate(2);
  }

  &:active {
    transform: scale(1.2);
  }
}

.product-price-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10rpx;
}
</style>