|
|
|
@ -15,7 +15,7 @@ |
|
|
|
|
|
|
|
<!-- 收藏列表 --> |
|
|
|
<view wx:else class="goods-list" style="width: 100%; display: flex; flex-direction: column; align-items: flex-start;"> |
|
|
|
<view wx:for="{{favoritesList}}" wx:key="productId" class="card" style="width: 100%; margin-top: 0; margin-bottom: 20rpx;"> |
|
|
|
<view wx:for="{{favoritesList}}" wx:key="productId" class="card" style="width: 100%; margin-top: 0; margin-bottom: 20rpx; height: 272rpx; display: block; box-sizing: border-box"> |
|
|
|
<!-- 图片和信息2:3比例并排显示,整体高度固定 --> |
|
|
|
<view style="display: flex; width: 100%; height: 200rpx; border-radius: 8rpx; overflow: hidden; background-color: #f5f5f5;"> |
|
|
|
<!-- 左侧图片区域 40%宽度(2/5),高度固定 --> |
|
|
|
@ -37,7 +37,7 @@ |
|
|
|
data-item-id="{{index}}"> |
|
|
|
<block wx:for="{{item.Product.imageUrls}}" wx:for-item="img" wx:for-index="idx" wx:key="idx"> |
|
|
|
<swiper-item> |
|
|
|
<image src="{{img}}" mode="aspectFill" style="width: 100%; height: 100%;" bindtap="previewImage" data-urls="{{item.Product.imageUrls}}" data-index="{{idx}}"></image> |
|
|
|
<image src="{{img}}" mode="aspectFill" style="width: 268rpx; height: 210rpx; display: inline-block; box-sizing: border-box" bindtap="previewImage" data-urls="{{item.Product.imageUrls}}" data-index="{{idx}}"></image> |
|
|
|
</swiper-item> |
|
|
|
</block> |
|
|
|
</swiper> |
|
|
|
@ -51,28 +51,29 @@ |
|
|
|
<!-- 右侧信息区域 60%宽度(3/5),相应调整 --> |
|
|
|
<view style="width: 60%; display: flex; flex-direction: column; background-color: white; border-left: 1rpx solid #f0f0f0;"> |
|
|
|
<!-- 上半部分商品信息区域(60%高度),可点击查看详情 --> |
|
|
|
<view style="flex: 0.6; padding: 0rpx 15rpx 15rpx 15rpx; cursor: pointer;" bindtap="goToGoodsDetail" data-item="{{item}}"> |
|
|
|
<view> |
|
|
|
<view style="padding: 0rpx 15rpx 15rpx 15rpx; cursor: pointer; width: 391rpx; height: 150rpx; display: block; box-sizing: border-box" bindtap="goToGoodsDetail" data-item="{{item}}"> |
|
|
|
<view style="width: 362rpx; height: 133rpx; display: block; box-sizing: border-box"> |
|
|
|
<view style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10rpx;"> |
|
|
|
<view style="display: flex; align-items: center; flex: 1;"> |
|
|
|
<view style="display: inline-block; margin-right: 10rpx; font-size: 18rpx; color: #fff; background: rgba(218, 165, 32, 0.8); padding: 4rpx 10rpx; border-radius: 15rpx; vertical-align: middle; backdrop-filter: blur(10rpx); border: 1rpx solid rgba(255, 255, 255, 0.3); box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15), inset 0 1rpx 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2); font-weight: bold; margin-top: -0.1rpx;">{{item.Product.supplyStatus || '暂无状态'}}</view> |
|
|
|
<view wx:if="{{item.Product.status === 'sold_out'}}" style="display: inline-block; margin-right: 10rpx; font-size: 18rpx; color: #fff; background: linear-gradient(135deg, #8c8c8c 0%, #a6a6a6 100%); padding: 4rpx 10rpx; border-radius: 15rpx; vertical-align: middle; backdrop-filter: blur(10rpx); border: 1rpx solid rgba(255, 255, 255, 0.3); box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15), inset 0 1rpx 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2); font-weight: bold; margin-top: -0.1rpx;">已下架</view> |
|
|
|
<view wx:elif="{{item.Product.supplyStatus}}" style="display: inline-block; margin-right: 10rpx; font-size: 18rpx; color: #fff; background: rgba(218, 165, 32, 0.8); padding: 4rpx 10rpx; border-radius: 15rpx; vertical-align: middle; backdrop-filter: blur(10rpx); border: 1rpx solid rgba(255, 255, 255, 0.3); box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15), inset 0 1rpx 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2); font-weight: bold; margin-top: -0.1rpx;">{{item.Product.supplyStatus}}</view> |
|
|
|
<text style="font-size: 36rpx; font-weight: bold;">{{item.Product.productName || '未命名商品'}}</text> |
|
|
|
<span style="vertical-align: middle; font-size: 12rpx; color: white; background: linear-gradient(135deg, #4a90e2 0%, #2b66f0 50%, #1a4bbd 100%); padding: 4rpx 10rpx; clip-path: polygon(50% 0%, 70% 10%, 100% 30%, 100% 70%, 70% 90%, 50% 100%, 30% 90%, 0% 70%, 0% 30%, 30% 10%); margin-left: 8rpx; box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3), inset 0 1rpx 2rpx rgba(255, 255, 255, 0.5); text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.5); font-weight: bold; margin-top: -20rpx;">V</span> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view style="font-size: 28rpx; color: #888; margin-top: 30rpx;"> |
|
|
|
<view style="font-size: 28rpx; color: #888; margin-top: 30rpx; width: 362rpx; height: 70rpx; display: block; box-sizing: border-box"> |
|
|
|
{{(item.Product.spec && item.Product.spec !== '无') ? item.Product.spec : (item.Product.specification && item.Product.specification !== '无') ? item.Product.specification : '无'}} | {{item.Product.yolk || '无'}} | {{item.Product.minOrder || item.Product.quantity || 1}}件 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 下半部分按钮区域(40%高度) --> |
|
|
|
<view style="flex: 0.4; display: flex; justify-content: space-between; align-items: center; padding: 0 20rpx;"> |
|
|
|
<view style="display: flex; justify-content: space-between; align-items: center; padding: 0 20rpx; height: 79rpx; box-sizing: border-box; width: 391rpx"> |
|
|
|
<!-- 价格显示 --> |
|
|
|
<text style="color: #52c41a; font-size: 28rpx; font-weight: bold;">¥{{item.Product.price || 0}}</text> |
|
|
|
<!-- 取消收藏按钮 --> |
|
|
|
<button |
|
|
|
style="font-size: 24rpx; font-weight: bold; width: 150rpx; height: 60rpx; border-radius: 24rpx; display: flex; justify-content: center; align-items: center; padding: 0; border: none; margin: 0; transition: all 0.3s ease; position: relative; overflow: hidden; color: #FF6B6B; background: rgba(255, 107, 107, 0.15); backdrop-filter: blur(12rpx); -webkit-backdrop-filter: blur(12rpx); border: 1rpx solid rgba(255, 255, 255, 0.3); box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.2), 0 4rpx 16rpx rgba(0, 0, 0, 0.1), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.7), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);" |
|
|
|
style="font-size: 24rpx; font-weight: bold; width: 149rpx; height: 58rpx; border-radius: 24rpx; display: flex; justify-content: center; align-items: center; padding: 0; border: none; margin: 0; transition: all 0.3s ease; position: relative; overflow: hidden; color: #FF6B6B; background: rgba(255, 107, 107, 0.15); backdrop-filter: blur(12rpx); -webkit-backdrop-filter: blur(12rpx); box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.2), 0 4rpx 16rpx rgba(0, 0, 0, 0.1), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.7), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1); box-sizing: border-box; left: 6rpx; top: -11rpx" |
|
|
|
bindtap="cancelFavorite" |
|
|
|
data-productid="{{item.productId}}" |
|
|
|
> |
|
|
|
|