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.
237 lines
9.6 KiB
237 lines
9.6 KiB
<!-- pages/goods-detail/goods-detail.wxml -->
|
|
<view class="goods-detail-page">
|
|
<!-- 商品详情内容 -->
|
|
<view class="goods-detail-content">
|
|
<!-- 商品媒体轮播（支持图片和视频） -->
|
|
<view class="goods-image-slider">
|
|
<swiper
|
|
indicator-dots="{{true}}"
|
|
autoplay="{{true}}"
|
|
interval="3000"
|
|
duration="500"
|
|
indicator-color="rgba(255, 255, 255, 0.5)"
|
|
indicator-active-color="#ffffff"
|
|
circular="{{true}}"
|
|
>
|
|
<block wx:for="{{goodsDetail.mediaItems}}" wx:key="index">
|
|
<swiper-item>
|
|
<!-- 视频处理：根据类型字段判断 -->
|
|
<video
|
|
wx:if="{{item.type === 'video'}}"
|
|
src="{{item.url}}"
|
|
class="slider-media"
|
|
mode="aspectFill"
|
|
show-center-play-btn="{{true}}"
|
|
show-play-btn="{{false}}"
|
|
controls="{{true}}"
|
|
autoplay="{{true}}"
|
|
loop="{{true}}"
|
|
muted="{{true}}"
|
|
initial-time="0"
|
|
show-mute-btn="{{true}}"
|
|
enable-progress-gesture="{{true}}"
|
|
enable-play-gesture="{{true}}"
|
|
object-fit="fill"
|
|
poster="" >
|
|
</video>
|
|
<!-- 图片处理 -->
|
|
<image
|
|
wx:else
|
|
src="{{item.url}}"
|
|
mode="aspectFill"
|
|
class="slider-media"
|
|
bindtap="previewImage"
|
|
data-urls="{{goodsDetail.imageUrls}}"
|
|
data-index="{{index}}"
|
|
loading="lazy"
|
|
/>
|
|
</swiper-item>
|
|
</block>
|
|
</swiper>
|
|
</view>
|
|
|
|
<!-- 商品基本信息 -->
|
|
<view class="goods-info">
|
|
<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: -20rpx;">{{goodsDetail.supplyStatus || '暂无状态'}}</view>
|
|
<text class="goods-name">{{goodsDetail.name}}</text>
|
|
<span style="vertical-align: middle; font-size: 20rpx; color: white; background: linear-gradient(135deg, #4a90e2 0%, #2b66f0 50%, #1a4bbd 100%); padding: 4rpx 8rpx; 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 style="display: flex; align-items: flex-start;">
|
|
<view class="source-type-badge" style="display: flex; align-items: center; justify-content: center; margin-right: 10rpx;">
|
|
<text style="color: {{goodsDetail.sourceTypeColor}}; font-weight: bold;">{{goodsDetail.sourceType || '暂无'}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="goods-price" style="position: relative; display: flex; align-items: center; justify-content: space-between;">
|
|
<view style="display: flex; align-items: center;">
|
|
<text class="price-symbol">价格:</text>
|
|
<text class="price-value">{{goodsDetail.price}}</text>
|
|
<text style="margin-left: 10rpx; color: #333; font-size: 32rpx;">(可议价)</text>
|
|
</view>
|
|
<view
|
|
class="favorite-button"
|
|
bindtap="onFavoriteClick"
|
|
style="display: flex; align-items: center;"
|
|
>
|
|
<text style="font-size: 32rpx; color: {{isFavorite ? '#ff4d4f' : '#999'}}; margin-right: 8rpx;">收藏</text>
|
|
<text style="font-size: 44rpx; {{isFavorite ? 'color: #ff4d4f;' : 'color: #999;'}} ">{{isFavorite ? '❤️' : '🤍'}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商品详细信息网格 -->
|
|
<view class="info-grid">
|
|
<view class="info-row">
|
|
<view class="info-item">
|
|
<view class="info-label-container">
|
|
<text class="info-label">地区</text>
|
|
</view>
|
|
<view class="info-value-container">
|
|
<text class="info-value">{{goodsDetail.region || '暂无'}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="info-item">
|
|
<view class="info-label-container">
|
|
<text class="info-label">关注人数</text>
|
|
</view>
|
|
<view class="info-value-container">
|
|
<text class="info-value">{{goodsDetail.reservedCount || '0'}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="info-row">
|
|
<view class="info-item">
|
|
<view class="info-label-container">
|
|
<text class="info-label">蛋黄</text>
|
|
</view>
|
|
<view class="info-value-container">
|
|
<text class="info-value">{{goodsDetail.yolk || '暂无'}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="info-item">
|
|
<view class="info-label-container">
|
|
<text class="info-label">产品包装</text>
|
|
</view>
|
|
<view class="info-value-container">
|
|
<text class="info-value">{{goodsDetail.producting || '暂无'}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- 净重件数对应信息 -->
|
|
<view class="weight-quantity-info" wx:if="{{goodsDetail.weightQuantityData && goodsDetail.weightQuantityData.length > 0}}">
|
|
<view class="wq-title">规格信息</view>
|
|
<view class="wq-list">
|
|
<block wx:for="{{goodsDetail.weightQuantityData}}" wx:key="index">
|
|
<view class="wq-item">
|
|
<text class="wq-text">{{item.display}}</text>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 联系信息 -->
|
|
<view class="contact-info">
|
|
<view class="contact-content">
|
|
<view class="contact-item">
|
|
<text class="contact-icon user-icon">👤</text>
|
|
<text class="contact-label-text">联系人:</text>
|
|
<text class="contact-text">{{goodsDetail.product_contact || '暂无'}}</text>
|
|
</view>
|
|
<view class="contact-item phone-item">
|
|
<text class="contact-icon phone-icon">📞</text>
|
|
<view class="phone-info">
|
|
<text class="contact-label-text">联系电话:</text>
|
|
<text class="contact-text">{{goodsDetail.contact_phone || '暂无'}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 登录弹窗 -->
|
|
<view wx:if="{{showOneKeyLoginModal}}" class="auth-modal-overlay">
|
|
<view class="auth-modal-container">
|
|
<view class="auth-modal-title">授权登录</view>
|
|
<view class="auth-modal-content">授权您的手机号后才能使用完整功能</view>
|
|
<view class="auth-modal-buttons">
|
|
<button
|
|
class="auth-primary-button"
|
|
open-type="getPhoneNumber"
|
|
bindgetphonenumber="onGetPhoneNumber"
|
|
>
|
|
授权手机号
|
|
</button>
|
|
<button
|
|
class="auth-cancel-button"
|
|
bindtap="closeOneKeyLoginModal"
|
|
>
|
|
取消
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 操作按钮区域 -->
|
|
<view class="action-buttons" wx:if="{{!fromSeller}}">
|
|
<button
|
|
class="call-button bottom-button"
|
|
bindtap="makePhoneCall"
|
|
data-phone="{{goodsDetail.contact_phone}}"
|
|
>
|
|
拨打电话
|
|
</button>
|
|
<button
|
|
class="chat-button bottom-button"
|
|
bindtap="onChat"
|
|
data-id="{{goodsDetail.id}}"
|
|
>
|
|
💬 在线咨询
|
|
</button>
|
|
</view>
|
|
<!-- 返回按钮区域（仅在seller页面查看时显示） -->
|
|
<view class="action-buttons" wx:if="{{fromSeller}}">
|
|
<button
|
|
class="back-button bottom-button"
|
|
bindtap="goBack"
|
|
>
|
|
返回
|
|
</button>
|
|
</view>
|
|
|
|
<!-- 图片预览弹窗 -->
|
|
<view class="image-preview-mask" wx:if="{{showImagePreview}}" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); display: flex; justify-content: center; align-items: center; z-index: 10001;" catchtouchmove="true">
|
|
<view style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
|
|
<swiper
|
|
style="width: 100%; height: 100%;"
|
|
current="{{previewImageIndex}}"
|
|
bindchange="onPreviewImageChange"
|
|
indicator-dots="true"
|
|
indicator-color="rgba(255,255,255,0.5)"
|
|
indicator-active-color="#fff">
|
|
<block wx:for="{{previewImageUrls}}" wx:key="*this">
|
|
<swiper-item>
|
|
<image
|
|
src="{{item}}"
|
|
mode="aspectFit"
|
|
style="width: 100%; height: 100%; transform: scale({{scale}}) translate({{offsetX}}px, {{offsetY}}px); transition: {{isScaling ? 'none' : 'transform 0.3s'}};"
|
|
bindtap="handleImageTap"
|
|
bindtouchstart="handleTouchStart"
|
|
bindtouchmove="handleTouchMove"
|
|
bindtouchend="handleTouchEnd"
|
|
bindtouchcancel="handleTouchEnd"
|
|
></image>
|
|
</swiper-item>
|
|
</block>
|
|
</swiper>
|
|
<view style="position: absolute; top: 40rpx; right: 40rpx; color: white; font-size: 40rpx;">
|
|
<text bindtap="closeImagePreview" style="background: rgba(0,0,0,0.5); padding: 10rpx 20rpx; border-radius: 50%;">×</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|