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.
177 lines
6.3 KiB
177 lines
6.3 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.imageUrls}}" wx:key="index">
|
|
<swiper-item>
|
|
<image
|
|
src="{{item}}"
|
|
mode="aspectFill"
|
|
class="slider-image"
|
|
bindtap="previewImage"
|
|
data-urls="{{goodsDetail.imageUrls}}"
|
|
data-index="{{index}}"
|
|
loading="lazy"
|
|
/>
|
|
</swiper-item>
|
|
</block>
|
|
</swiper>
|
|
</view>
|
|
|
|
<!-- 商品基本信息 -->
|
|
<view class="goods-info">
|
|
<text class="goods-name">{{goodsDetail.name}}</text>
|
|
<view class="goods-price">
|
|
<text class="price-symbol">价格:</text>
|
|
<text class="price-value">{{goodsDetail.price}}</text>
|
|
</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.spec || '暂无'}}</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.displayGrossWeight || '暂无'}}</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.minOrder || '暂无'}}</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>
|
|
|
|
<!-- 联系信息 -->
|
|
<view class="contact-info" wx:if="{{goodsDetail.status === 'published'}}">
|
|
<text class="contact-label">联系信息</text>
|
|
<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>
|
|
|
|
<!-- 操作按钮区域 -->
|
|
<view class="action-buttons" wx:if="{{goodsDetail.status === 'published'}}">
|
|
<button
|
|
class="call-button bottom-button"
|
|
bindtap="makePhoneCall"
|
|
data-phone="{{goodsDetail.contact_phone}}"
|
|
>
|
|
拨打电话
|
|
</button>
|
|
<button
|
|
class="want-button bottom-button"
|
|
bindtap="onClickWantInDetail"
|
|
data-id="{{goodsDetail.id}}"
|
|
disabled="{{goodsDetail.isReserved}}"
|
|
>
|
|
{{goodsDetail.isReserved ? '已预约' : '我想要'}}
|
|
</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>
|