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.
407 lines
8.7 KiB
407 lines
8.7 KiB
<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" v-if="type!=3">
|
|
<image src="https://des.dayunyuanjian.cn/data/2025/08/31/affb21f0-fcc1-4746-9543-0d54369aa315.png" style="width:124.6rpx;height: 36rpx;"/>
|
|
</view>
|
|
</div>
|
|
</view>
|
|
|
|
<!-- 商品列表 -->
|
|
<view class="product-list">
|
|
<view class="" v-if="type==3" @click="toCGCwx">
|
|
<image
|
|
style="height: 357rpx;width: 657rpx;border-radius: 20rpx;"
|
|
:src="showImg('/uploads/20250829/66732062c2d566802a7842525e9b92e6.png')"
|
|
mode="aspectFill"
|
|
></image>
|
|
</view>
|
|
<template v-else>
|
|
<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="type==1"></view>
|
|
<!-- 智能体标签 -->
|
|
<view class="content-box-info" v-if="item.agent" @click.stop="toAgent(item)">
|
|
<!-- 头像 -->
|
|
<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 }} <text style="font-size:24rpx ;margin-left: 5rpx;" v-if="type==2">起</text></view>
|
|
<template v-if="type==1">
|
|
<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>
|
|
</template>
|
|
</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",
|
|
},
|
|
type: {
|
|
type: Number,
|
|
default: 1,
|
|
},
|
|
|
|
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 });
|
|
});
|
|
|
|
|
|
},
|
|
toCGCwx(){
|
|
wx.navigateToMiniProgram({
|
|
appId: 'wx9d68934300b1fe90',
|
|
path: 'pages/index/index',
|
|
envVersion: 'release',
|
|
success(res) {
|
|
// 打开成功
|
|
},
|
|
fail(e){
|
|
console.log(e)
|
|
}
|
|
})
|
|
},
|
|
toAgent(e){
|
|
uni.navigateTo({
|
|
url: `/subPackages/other/evita?id=${e.agentId}&product=${e.benefitPackageId}`
|
|
});
|
|
},
|
|
|
|
// 显示图片
|
|
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://des.dayunyuanjian.cn/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>
|
|
|