Browse Source
- 新增 goods-card 商品卡片组件，支持在聊天中展示商品信息 - 优化 goods-detail 立即咨询功能，自动发送结构化商品消息 - 完善 chat-detail 页面，支持解析和展示商品卡片消息 - 消息格式支持 JSON 结构化数据，包含商品详情、图片、价格等信息pull/11/head
徐飞洋
2 months ago
9 changed files with 476 additions and 16 deletions
@ -0,0 +1,43 @@ |
|||
Component({ |
|||
properties: { |
|||
id: { type: String, value: '' }, |
|||
name: { type: String, value: '' }, |
|||
imageUrl: { type: String, value: '' }, |
|||
price: { type: [String, Number], value: '' }, |
|||
priceUnit: { type: String, value: '/件' }, |
|||
region: { type: String, value: '' }, |
|||
specification: { type: String, value: '' }, |
|||
spec: { type: String, value: '' }, |
|||
specs: { type: String, value: '' }, |
|||
displaySpecification: { type: String, value: '' }, |
|||
displayYolk: { type: String, value: '' }, |
|||
sourceType: { type: String, value: '' }, |
|||
totalStock: { type: [String, Number], value: '' }, |
|||
supplyStatus: { type: String, value: '' }, |
|||
status: { type: String, value: '' }, |
|||
reservedCount: { type: [String, Number], value: 0 } |
|||
}, |
|||
|
|||
data: { |
|||
isSoldOut: false |
|||
}, |
|||
|
|||
observers: { |
|||
'status': function(status) { |
|||
this.setData({ |
|||
isSoldOut: status === 'sold_out' |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
onTap: function() { |
|||
const goodsId = this.properties.id; |
|||
if (goodsId) { |
|||
wx.navigateTo({ |
|||
url: `/pages/goods-detail/goods-detail?id=${goodsId}` |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
}); |
|||
@ -0,0 +1,4 @@ |
|||
{ |
|||
"component": true, |
|||
"usingComponents": {} |
|||
} |
|||
@ -0,0 +1,33 @@ |
|||
<view class="goods-card {{isSoldOut ? 'sold-out' : ''}}" bindtap="onTap"> |
|||
<view class="goods-image-area"> |
|||
<image |
|||
wx:if="{{imageUrl}}" |
|||
class="goods-image" |
|||
src="{{imageUrl}}" |
|||
mode="aspectFill" |
|||
lazy-load="true" |
|||
></image> |
|||
<view wx:else class="goods-image-placeholder"> |
|||
<text>暂无图片</text> |
|||
</view> |
|||
<view wx:if="{{supplyStatus === '预售'}}" class="promo-tag presale">预售</view> |
|||
<view wx:elif="{{supplyStatus === '现货'}}" class="promo-tag in-stock">现货</view> |
|||
<view wx:if="{{status === 'sold_out'}}" class="promo-tag sold-out">售空</view> |
|||
</view> |
|||
<view class="goods-info"> |
|||
<view class="goods-title">{{name || '商品名称'}}</view> |
|||
<view class="goods-spec">{{displaySpecification}}{{displayYolk ? ' | ' + displayYolk : ''}}</view> |
|||
<view class="goods-tags"> |
|||
<view class="tag source-{{sourceType === '三方认证' ? 'third' : (sourceType === '平台货源' ? 'platform' : 'unverified')}}">{{sourceType || ''}}</view> |
|||
<view class="tag stock">库存：{{totalStock && totalStock !== '充足' ? totalStock + '件' : (totalStock || '充足')}}</view> |
|||
</view> |
|||
<view class="goods-bottom"> |
|||
<view class="goods-price"> |
|||
<text class="price-unit">¥</text> |
|||
<text class="price-value">{{price || '0'}}</text> |
|||
<text class="price-unit">{{priceUnit || '/件'}}</text> |
|||
</view> |
|||
<view class="goods-region">{{region || ''}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,159 @@ |
|||
.goods-card { |
|||
width: 100%; |
|||
max-width: 560rpx; |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
overflow: hidden; |
|||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1); |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.goods-card.sold-out { |
|||
opacity: 0.7; |
|||
} |
|||
|
|||
.goods-image-area { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 280rpx; |
|||
background: #f5f5f5; |
|||
} |
|||
|
|||
.goods-image { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: block; |
|||
object-fit: cover; |
|||
} |
|||
|
|||
.goods-image-placeholder { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: #f0f0f0; |
|||
color: #999; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.promo-tag { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
padding: 6rpx 12rpx; |
|||
font-size: 20rpx; |
|||
color: #fff; |
|||
border-radius: 0 0 12rpx 0; |
|||
z-index: 1; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.promo-tag.presale { |
|||
background: linear-gradient(135deg, #ff6b00 0%, #ff8c00 100%); |
|||
} |
|||
|
|||
.promo-tag.in-stock { |
|||
background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%); |
|||
} |
|||
|
|||
.promo-tag.sold-out { |
|||
background: linear-gradient(135deg, #a92a2a 0%, #a6a6a6 100%); |
|||
} |
|||
|
|||
.goods-info { |
|||
padding: 16rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 8rpx; |
|||
} |
|||
|
|||
.goods-title { |
|||
font-size: 26rpx; |
|||
color: #000000; |
|||
line-height: 1.4; |
|||
height: 72rpx; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.goods-spec { |
|||
font-size: 22rpx; |
|||
color: #666; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.goods-tags { |
|||
display: flex; |
|||
flex-wrap: nowrap; |
|||
align-items: center; |
|||
gap: 8rpx; |
|||
margin: 6rpx 0; |
|||
} |
|||
|
|||
.tag { |
|||
font-size: 20rpx; |
|||
padding: 4rpx 10rpx; |
|||
border-radius: 6rpx; |
|||
} |
|||
|
|||
.tag.source-third { |
|||
background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%); |
|||
color: #fff; |
|||
} |
|||
|
|||
.tag.source-platform { |
|||
background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%); |
|||
color: #fff; |
|||
} |
|||
|
|||
.tag.source-unverified { |
|||
background: rgba(0, 0, 0, 0.08); |
|||
color: #666; |
|||
} |
|||
|
|||
.tag.stock { |
|||
background: rgba(255, 77, 79, 0.08); |
|||
color: #666; |
|||
} |
|||
|
|||
.goods-bottom { |
|||
display: flex; |
|||
align-items: baseline; |
|||
justify-content: space-between; |
|||
margin-top: 6rpx; |
|||
} |
|||
|
|||
.goods-price { |
|||
display: flex; |
|||
align-items: baseline; |
|||
} |
|||
|
|||
.price-unit { |
|||
font-size: 24rpx; |
|||
color: #ff4d4f; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.price-value { |
|||
font-size: 36rpx; |
|||
color: #ff4d4f; |
|||
font-weight: 800; |
|||
margin: 0 2rpx; |
|||
} |
|||
|
|||
.goods-region { |
|||
font-size: 20rpx; |
|||
color: #999; |
|||
max-width: 100rpx; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
@ -1,3 +1,6 @@ |
|||
{ |
|||
"navigationBarTitleText": "聊天详情" |
|||
"navigationBarTitleText": "聊天详情", |
|||
"usingComponents": { |
|||
"goods-card": "/components/goods-card/goods-card" |
|||
} |
|||
} |
|||
Loading…
Reference in new issue