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.
200 lines
14 KiB
200 lines
14 KiB
<!-- pages/compare_price/index.wxml -->
|
|
<!--背景图片-->
|
|
<view style="position: relative; width: 100%; height: 100vh; overflow: hidden;">
|
|
<image src="../../images/background.png" mode="aspectFill" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></image>
|
|
<scroll-view style="position: relative; z-index: 10; width: 100%; height: 100%;" scroll-y="true" enable-back-to-top="true">
|
|
<view style="width: 100%; display: flex; flex-direction: column; align-items: center; padding: 20rpx; padding-bottom: 100rpx;">
|
|
<!-- 类别选择区域 -->
|
|
<view wx:if="{{!selectedOption}}">
|
|
<view style="background-color: rgba(255, 255, 255, 0.8); border-radius: 10rpx; padding: 20rpx; margin-bottom: 20rpx;">
|
|
<text style="font-size: 32rpx; font-weight: bold; color: #333; text-align: center;">请选择想要了解的商品</text>
|
|
</view>
|
|
<view style="display: flex; flex-direction: column; gap: 24rpx; width: 100%; max-width: 400rpx;">
|
|
<view style="position: relative; width: 100%; height: 140rpx; border-radius: 12rpx; overflow: hidden; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15); transition: all 0.3s ease;" bindtap="selectOption" data-option="绿壳">
|
|
<image src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=fresh%20green%20shell%20eggs%20in%20a%20wooden%20box%2C%20natural%20light%2C%20soft%20focus%2C%20warm%20tones&image_size=landscape_4_3" mode="aspectFill" style="width: 100%; height: 100%;"></image>
|
|
<view style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.6)); display: flex; justify-content: center; align-items: center;">
|
|
<text style="font-size: 36rpx; font-weight: bold; color: #333; text-shadow: 0 2rpx 4rpx rgba(255, 255, 255, 0.8);">绿壳</text>
|
|
</view>
|
|
</view>
|
|
<view style="position: relative; width: 100%; height: 140rpx; border-radius: 12rpx; overflow: hidden; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15); transition: all 0.3s ease;" bindtap="selectOption" data-option="粉壳">
|
|
<image src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=fresh%20pink%20shell%20eggs%20in%20a%20wooden%20box%2C%20natural%20light%2C%20soft%20focus%2C%20warm%20tones&image_size=landscape_4_3" mode="aspectFill" style="width: 100%; height: 100%;"></image>
|
|
<view style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.6)); display: flex; justify-content: center; align-items: center;">
|
|
<text style="font-size: 36rpx; font-weight: bold; color: #333; text-shadow: 0 2rpx 4rpx rgba(255, 255, 255, 0.8);">粉壳</text>
|
|
</view>
|
|
</view>
|
|
<view style="position: relative; width: 100%; height: 140rpx; border-radius: 12rpx; overflow: hidden; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15); transition: all 0.3s ease;" bindtap="selectOption" data-option="褐壳">
|
|
<image src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=fresh%20brown%20shell%20eggs%20in%20a%20wooden%20box%2C%20natural%20light%2C%20soft%20focus%2C%20warm%20tones&image_size=landscape_4_3" mode="aspectFill" style="width: 100%; height: 100%;"></image>
|
|
<view style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.6)); display: flex; justify-content: center; align-items: center;">
|
|
<text style="font-size: 36rpx; font-weight: bold; color: #333; text-shadow: 0 2rpx 4rpx rgba(255, 255, 255, 0.8);">褐壳</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 返回按钮（选择后显示） -->
|
|
<view wx:else style="margin-bottom: 20rpx; width: 100%; max-width: 400rpx;">
|
|
<button style="background-color: rgba(255, 255, 255, 0.8); color: #333; border-radius: 8rpx; padding: 20rpx; font-size: 28rpx;" bindtap="resetSelection">返回选择</button>
|
|
</view>
|
|
|
|
<!-- 商品列表 -->
|
|
<view wx:if="{{loading}}" style="margin-top: 40rpx; color: #fff; text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);">
|
|
<text>加载中...</text>
|
|
</view>
|
|
|
|
<view wx:else>
|
|
<view wx:if="{{goods.length > 0 && selectedOption}}" style="margin-top: 40rpx; width: 100%; max-width: 750rpx;">
|
|
<view style="background-color: rgba(255, 255, 255, 0.8); border-radius: 10rpx; padding: 20rpx; margin-bottom: 20rpx;">
|
|
<text style="font-size: 28rpx; font-weight: bold; color: #333; text-align: center; display: block;">{{selectedOption}}在售商品</text>
|
|
</view>
|
|
|
|
<!-- 商品卡片列表 -->
|
|
<view class="waterfall-container">
|
|
<view class="waterfall-column">
|
|
<view
|
|
class="waterfall-item"
|
|
wx:for="{{goods}}"
|
|
wx:key="id"
|
|
wx:if="{{index % 2 === 0}}"
|
|
data-item="{{item}}"
|
|
bindtap="navigateToGoodsDetail"
|
|
>
|
|
<view class="product-card {{item.status === 'sold_out' ? 'sold-out-grayscale' : ''}}" style="position: relative; background-color: rgba(255, 255, 255, 0.8); border-radius: 16rpx; overflow: hidden;">
|
|
<!-- 售空商品白色覆盖层 -->
|
|
<view wx:if="{{item.status === 'sold_out'}}" class="sold-out-overlay-full"></view>
|
|
<view class="product-image-wrapper">
|
|
<!-- 视频处理：根据mediaItems中的类型字段判断 -->
|
|
<video
|
|
wx:if="{{item.mediaItems && item.mediaItems.length > 0 && item.mediaItems[0].type === 'video'}}"
|
|
id="video-{{item.id}}"
|
|
class="product-media"
|
|
src="{{item.mediaItems[0].url}}"
|
|
mode="aspectFill"
|
|
show-center-play-btn="{{true}}"
|
|
show-play-btn="{{false}}"
|
|
controls="{{true}}"
|
|
autoplay="{{false}}"
|
|
loop="{{true}}"
|
|
muted="{{true}}"
|
|
poster=""
|
|
></video>
|
|
<!-- 图片处理 -->
|
|
<image
|
|
wx:else
|
|
class="product-media"
|
|
src="{{item.mediaItems && item.mediaItems.length > 0 ? item.mediaItems[0].url : 'https://via.placeholder.com/300x300.png?text=No+Image'}}"
|
|
mode="aspectFill"
|
|
lazy-load="true"
|
|
bindload="onImageLoad"
|
|
data-index="{{index}}"
|
|
></image>
|
|
<view wx:if="{{item.supplyStatus === '预售' && item.status !== 'sold_out'}}" class="promo-tag presale">预售</view>
|
|
<view wx:if="{{item.supplyStatus === '现货' && item.status !== 'sold_out'}}" class="promo-tag in-stock">现货</view>
|
|
<view wx:if="{{item.status === 'sold_out'}}" class="promo-tag sold-out">售空</view>
|
|
</view>
|
|
<view class="product-info">
|
|
<view class="product-first-row">
|
|
<view class="status-tag source-{{item.sourceType === '三方认证' ? 'third' : (item.sourceType === '平台货源' ? 'platform' : 'unverified')}}" style="margin-bottom: 8rpx;">
|
|
{{item.sourceType || ''}}
|
|
</view>
|
|
<text class="product-title">{{item.name}}</text>
|
|
<text class="product-description">{{item.description || ''}}</text>
|
|
</view>
|
|
<view class="product-stock-row" style="margin-top: 8rpx;">
|
|
<view wx:if="{{item.status !== 'sold_out'}}" class="status-tag item-count">库存：{{item.totalStock && item.totalStock !== '充足' ? item.totalStock + '件' : (item.totalStock || '充足')}}</view>
|
|
<view wx:if="{{item.status === 'sold_out'}}" class="status-tag item-count">已售：{{item.originalTotalStock || 0}}件</view>
|
|
</view>
|
|
<view class="product-meta">
|
|
<text class="sales-count">已有{{item.frequency || 0}}人浏览</text>
|
|
<text class="product-price">¥{{item.price}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="waterfall-column">
|
|
<view
|
|
class="waterfall-item"
|
|
wx:for="{{goods}}"
|
|
wx:key="id"
|
|
wx:if="{{index % 2 === 1}}"
|
|
data-item="{{item}}"
|
|
bindtap="navigateToGoodsDetail"
|
|
>
|
|
<view class="product-card {{item.status === 'sold_out' ? 'sold-out-grayscale' : ''}}" style="position: relative; background-color: rgba(255, 255, 255, 0.8); border-radius: 16rpx; overflow: hidden;">
|
|
<!-- 售空商品白色覆盖层 -->
|
|
<view wx:if="{{item.status === 'sold_out'}}" class="sold-out-overlay-full"></view>
|
|
<view class="product-image-wrapper">
|
|
<!-- 视频处理：根据mediaItems中的类型字段判断 -->
|
|
<video
|
|
wx:if="{{item.mediaItems && item.mediaItems.length > 0 && item.mediaItems[0].type === 'video'}}"
|
|
id="video-{{item.id}}"
|
|
class="product-media"
|
|
src="{{item.mediaItems[0].url}}"
|
|
mode="aspectFill"
|
|
show-center-play-btn="{{true}}"
|
|
show-play-btn="{{false}}"
|
|
controls="{{true}}"
|
|
autoplay="{{false}}"
|
|
loop="{{true}}"
|
|
muted="{{true}}"
|
|
poster=""
|
|
></video>
|
|
<!-- 图片处理 -->
|
|
<image
|
|
wx:else
|
|
class="product-media"
|
|
src="{{item.mediaItems && item.mediaItems.length > 0 ? item.mediaItems[0].url : 'https://via.placeholder.com/300x300.png?text=No+Image'}}"
|
|
mode="aspectFill"
|
|
lazy-load="true"
|
|
bindload="onImageLoad"
|
|
data-index="{{index}}"
|
|
></image>
|
|
<view wx:if="{{item.supplyStatus === '预售' && item.status !== 'sold_out'}}" class="promo-tag presale">预售</view>
|
|
<view wx:if="{{item.supplyStatus === '现货' && item.status !== 'sold_out'}}" class="promo-tag in-stock">现货</view>
|
|
<view wx:if="{{item.status === 'sold_out'}}" class="promo-tag sold-out">售空</view>
|
|
</view>
|
|
<view class="product-info">
|
|
<view class="product-first-row">
|
|
<view class="status-tag source-{{item.sourceType === '三方认证' ? 'third' : (item.sourceType === '平台货源' ? 'platform' : 'unverified')}}" style="margin-bottom: 8rpx;">
|
|
{{item.sourceType || ''}}
|
|
</view>
|
|
<text class="product-title">{{item.name}}</text>
|
|
<text class="product-description">{{item.description || ''}}</text>
|
|
</view>
|
|
<view class="product-stock-row" style="margin-top: 8rpx;">
|
|
<view wx:if="{{item.status !== 'sold_out'}}" class="status-tag item-count">库存：{{item.totalStock && item.totalStock !== '充足' ? item.totalStock + '件' : (item.totalStock || '充足')}}</view>
|
|
<view wx:if="{{item.status === 'sold_out'}}" class="status-tag item-count">已售：{{item.originalTotalStock || 0}}件</view>
|
|
</view>
|
|
<view class="product-meta">
|
|
<text class="sales-count">已有{{item.frequency || 0}}人浏览</text>
|
|
<text class="product-price">¥{{item.price}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view wx:if="{{goods.length === 0 && selectedOption}}" style="margin-top: 40rpx; color: #fff; text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);">
|
|
<text>暂无在售数据</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<!-- 透明弹窗提示 -->
|
|
<view wx:if="{{showTips}}" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; background-color: rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center;">
|
|
<view style="background-color: rgba(255, 255, 255, 0.9); border-radius: 16rpx; padding: 40rpx; width: 80%; max-width: 500rpx; text-align: center;">
|
|
<text style="font-size: 32rpx; font-weight: bold; color: #333; margin-bottom: 20rpx; display: block;">欢迎使用对比价格功能</text>
|
|
<text style="font-size: 28rpx; color: #666; line-height: 40rpx;">此页面用于对比不同商品的价格信息。</text>
|
|
<text style="font-size: 28rpx; color: #f10b0bff; line-height: 40rpx;">对比同种商品，不同规格</text>
|
|
<text style="font-size: 28rpx; color: #666; line-height: 40rpx;">的商品价格信息。</text>
|
|
<text style="font-size: 28rpx; color: #666; line-height: 40rpx;">想要看到相同规格的同种类型</text>
|
|
<text style="font-size: 28rpx; color: #f10b0bff; line-height: 40rpx;">相同规格的同种类型</text>
|
|
<text style="font-size: 28rpx; color: #666; line-height: 40rpx;">点击商品内的对比价格按钮即可展示</text>
|
|
<view style="margin-top: 40rpx;">
|
|
<button style="background-color: #ff6b81; color: #fff; border-radius: 8rpx; padding: 12rpx 40rpx; font-size: 28rpx;" bindtap="closeTips">我知道了</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|