EpicSoul/components/ProductSection.vue

<template>
  <view class="product-section" :style="{'background-color':color}">
    <!-- 商品标题区域 -->
    <view class="title-section" >
      <div style="display: flex; align-items: center;justify-content: space-between;" @click="handleMoreClick">
        <text class="title">{{ title }}</text>
        <view class="more-btn">更多 <uni-icons size="16"  color="#000000" type="arrowright" /></view>
      </div>
    </view>

    <!-- 商品列表 -->
    <view class="product-list">
      <view
        class="product-card"
        v-for="(item, index) in productList"
        :key="index"
        @click="handleProductClick(item)"
      >
        <view class="card-image-container">
          <image
            class="card-image"
            :src="showImg(item.image)"
            mode="aspectFill"
          ></image>
          <!-- 图片蒙层 -->
          <view class="image-overlay" v-if="!isFeel"></view>
          <!-- 智能体标签 -->
          <view class="content-box-info" v-if="!isFeel&&item.agent">
			  <!-- 头像 -->
			  <image
			    class="avatar"
			    :src="showImg(item.agent.headImage)"
			    mode="aspectFill"
			  ></image>
            <view class="ai-tag">
              <view
                class="ai-label"
                :style="{
                  borderColor: aiTagBorderColor,
                  color: aiTagTextColor,
                }"
                >智能体</view
              >
            </view>
			<view class="ai-name">{{ item.agent.name }}</view>
           
          </view>
        </view>
        <view class="card-content">
          <view class="title-price-heart">
            <view class="card-title">{{ item.title }}</view>
            <view class="card-price">￥{{ item.price }}</view>
			<template v-if="!isFeel">
            <image
              v-if="!item.type"
              class="heart-icon"
              src="https://epic.js-dyyj.com/uploads/20250728/2f3ae212c01fa3b67be81abc5723cf5c.png"
              @click.stop="handleLikeClick(item, index)"
            ></image>
            <image
              v-else
              class="heart-icon"
              src="https://epic.js-dyyj.com/uploads/20250728/dd7ed269b24e84a2dd141da6ab980fd6.png"
              @click.stop="handleLikeClick(item, index)"
            ></image>
			</template>
            <!-- <template v-if="isFeel">
              <image
                v-if="!item.isShop"
                class="shop-icon"
                src="https://epic.js-dyyj.com/uploads/20250728/195bfc195a54b93c13595a01a5d8bb3b.png"
                @click.stop="handleLikeClick(item, index)"
              ></image>
              <image
                v-else
                class="shop-icon"
                src="https://epic.js-dyyj.com/uploads/20250728/77c4546ac6415f9db69bb10888d2a975.png"
                @click.isShop="handleLikeClick(item, index)"
              ></image>
            </template> -->
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "ProductSection",
  props: {
    // 标题
    title: {
      type: String,
      default: "商品列表",
    },
    // 商品列表
    productList: {
      type: Array,
      default: () => [],
    },
    // 更多按钮跳转路径
    moreUrl: {
      type: String,
      default: "",
    },
    // 商品详情跳转路径前缀
    detailUrlPrefix: {
      type: String,
      default: "/subPackages/techan/detail",
    },
    // 标题区域背景颜色
    titleBgColor: {
      type: String,
      default: "#9efffa",
    },
    // AI标签边框颜色
    aiTagBorderColor: {
      type: String,
      default: "#01f1f196",
    },
    // AI标签字体颜色
    aiTagTextColor: {
      type: String,
      default: "#02fcfc",
    },
    isFeel: {
      type: Boolean,
      default: false,
    },
	color: {
	  type: String,
	  default: "#D3FCFF",
	},
  },

  methods: {
    // 处理更多按钮点击
    handleMoreClick() {
      if (this.moreUrl) {
        uni.navigateTo({
          url: this.moreUrl,
        });
      }
      this.$emit("more-click");
    },

    // 处理商品点击
    handleProductClick(item) {
      if (this.detailUrlPrefix) {
        uni.navigateTo({
          url: `${this.detailUrlPrefix}?id=${item.id}`,
        });
      }
      this.$emit("product-click", item);
    },

    // 处理收藏点击
    handleLikeClick(item, index) {
      // 更新本地状态
	  this.Post({
	  		packageId: item.id,
			type:!item.type
	  	},
	  	"/framework/benefitPackage/collect",'DES'
	  ).then((res) => {
	  	// 显示提示
		const updatedItem = { ...item, type: !item.type };
		this.productList[index].type = !item.type
	  	uni.showToast({
	  	  title: updatedItem.type ? "已收藏" : "取消收藏",
	  	  icon: "none",
	  	  duration: 1500,
	  	});
		this.$forceUpdate()
	  	// 向父组件发送事件
	  	this.$emit("like-toggle", { item: updatedItem, index });
	  });

      
    },

    // 显示图片
    showImg(img) {
      if (!img) return;

      if (img.indexOf("https://") != -1 || img.indexOf("http://") != -1) {
        return img;
      } else {
        return this.$options._base.prototype.NEWAPIURLIMG + img;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: "Futura";
  src: url(https://static.ticket.sz-trip.com/epicSoul/taozi/fonts/Futura.ttc);
}
.product-section {
  width: 100%;
  background-color: #D3FCFF;
  padding:40rpx 25rpx;
  margin: 30rpx 0;
  border-radius: 40rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1),
    0 0 0 1rpx rgba(255, 255, 255, 0.2) inset;
}

// 标题区域
.title-section {
  display: inline-block;
  padding: 0rpx 0 30rpx;
  width: 100%;
  .title {
    font-size: 34rpx;
    font-weight: bold;
    color: #000000;
  }

  .more-btn {
    font-size: 26rpx;
    color: #000000;
    margin-left: 35rpx;
  }
}

// 商品列表
.product-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

// 商品卡片
.product-card {
  background: #ffffff;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1),
    0 0 0 1rpx rgba(255, 255, 255, 0.2) inset;
  overflow: hidden;
  transition: transform 0.2s ease;

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

// 图片容器
.card-image-container {
  position: relative;
  height: 320rpx;
  overflow: hidden;
  border-radius: 20rpx 20rpx 0 0 ;
}

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

// 图片蒙层
.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00000047;
  pointer-events: none;
  border-radius: 20rpx;
}

// 智能体标签
.content-box-info {
  position: absolute;
  top: 30rpx;
  right: 20rpx;
  padding: 0rpx 20rpx;
  text-align: center;
}
.ai-tag {
  padding: 8rpx 0rpx;
  gap: 8rpx;
 
}
 .ai-label {
    border: 1rpx solid;
    padding: 0rpx 15rpx;
    height: 40rpx;
    line-height: 38rpx;
    font-weight: bold;
    font-size: 20rpx;
    border-radius: 4rpx;
  }

  .ai-name {
    font-size: 27rpx;
    font-weight: bold;
    color: #ffffff;
    margin-left: 10rpx;
  }
// 头像
.avatar {
  width: 119rpx;
  height: 119rpx;
  border-radius: 50%;
}

// 卡片内容
.card-content {
  padding: 18rpx;
}

.title-price-heart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.card-title {
  font-size: 30rpx;
  color: #000000;
  line-height: 1.4;
  flex: 1;
  margin-right: 20rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-price {
  font-size: 30rpx;
  color: #000000;
  margin-right: 24rpx;
  flex-shrink: 0;
  min-width: 120rpx;
  font-family: "Futura";
}

.heart-icon {
  width: 35rpx;
  height: 29rpx;
  transition: all 0.3s ease;
  flex-shrink: 0;

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

  &:active {
    transform: scale(1.2);
  }
}
.shop-icon {
  width: 39rpx;
  height: 36rpx;
  transition: all 0.3s ease;
  flex-shrink: 0;
  margin-left: 10rpx;

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

  &:active {
    transform: scale(1.2);
  }
}
</style>