You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
366 lines
7.6 KiB
366 lines
7.6 KiB
<template>
|
|
<view class="product-section">
|
|
<!-- 商品标题区域 -->
|
|
<view class="title-section" :style="{ background: titleBgColor }">
|
|
<div style="display: flex; align-items: center" @click="handleMoreClick">
|
|
<text class="title">{{ title }}</text>
|
|
<text class="more-btn">更多</text>
|
|
</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">
|
|
<view class="ai-tag">
|
|
<view
|
|
class="ai-label"
|
|
:style="{
|
|
borderColor: aiTagBorderColor,
|
|
color: aiTagTextColor,
|
|
}"
|
|
>智能体</view
|
|
>
|
|
<text class="ai-name">{{ item.aiName }}</text>
|
|
</view>
|
|
<!-- 头像 -->
|
|
<image
|
|
class="avatar"
|
|
:src="showImg(item.avatar)"
|
|
mode="aspectFill"
|
|
></image>
|
|
</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>
|
|
<image
|
|
v-if="!item.isLiked"
|
|
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 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,
|
|
},
|
|
},
|
|
|
|
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) {
|
|
// 更新本地状态
|
|
const updatedItem = { ...item, isLiked: !item.isLiked };
|
|
|
|
// 显示提示
|
|
uni.showToast({
|
|
title: updatedItem.isLiked ? "已收藏" : "取消收藏",
|
|
icon: "none",
|
|
duration: 1500,
|
|
});
|
|
|
|
// 向父组件发送事件
|
|
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.NEWAPIURL + 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%;
|
|
}
|
|
|
|
// 标题区域
|
|
.title-section {
|
|
padding: 14rpx 24rpx 8rpx;
|
|
margin: 40rpx 16rpx 0rpx;
|
|
display: inline-block;
|
|
border-radius: 14rpx 14rpx 0 0;
|
|
.title {
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
color: #4d4d4d;
|
|
}
|
|
|
|
.more-btn {
|
|
font-size: 20rpx;
|
|
color: #999999;
|
|
margin-left: 35rpx;
|
|
}
|
|
}
|
|
|
|
// 商品列表
|
|
.product-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24rpx;
|
|
background-color: white;
|
|
padding: 22rpx;
|
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
// 商品卡片
|
|
.product-card {
|
|
background: #ffffff;
|
|
border-radius: 24rpx;
|
|
|
|
overflow: hidden;
|
|
transition: transform 0.2s ease;
|
|
|
|
&:active {
|
|
transform: scale(0.98);
|
|
}
|
|
}
|
|
|
|
// 图片容器
|
|
.card-image-container {
|
|
position: relative;
|
|
height: 200rpx;
|
|
overflow: hidden;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.card-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
// 图片蒙层
|
|
.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: 0rpx;
|
|
left: 0rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 666rpx;
|
|
padding: 0rpx 20rpx;
|
|
}
|
|
.ai-tag {
|
|
padding: 8rpx 0rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
.ai-label {
|
|
border: 1rpx solid;
|
|
padding: 0rpx 15rpx;
|
|
height: 40rpx;
|
|
line-height: 38rpx;
|
|
font-weight: bold;
|
|
font-size: 16rpx;
|
|
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: 24rpx 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.title-price-heart {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 27rpx;
|
|
font-weight: bold;
|
|
color: #000000;
|
|
line-height: 1.4;
|
|
flex: 1;
|
|
margin-right: 20rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.card-price {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
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>
|
|
|