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.
182 lines
6.0 KiB
182 lines
6.0 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-container" wx:if="{{showImagePreview}}">
|
|
<view class="preview-header">
|
|
<view class="preview-close" bindtap="closeImagePreview">
|
|
<text class="close-icon">×</text>
|
|
</view>
|
|
<view class="preview-indicator">
|
|
<text>{{previewImageIndex + 1}} / {{previewImageUrls.length}}</text>
|
|
</view>
|
|
</view>
|
|
<swiper
|
|
class="preview-swiper"
|
|
current="{{previewImageIndex}}"
|
|
bindchange="onPreviewImageChange"
|
|
>
|
|
<block wx:for="{{previewImageUrls}}" wx:key="index">
|
|
<swiper-item>
|
|
<view
|
|
class="preview-image-wrapper"
|
|
bindtap="handleImageTap"
|
|
bindtouchstart="handleTouchStart"
|
|
bindtouchmove="handleTouchMove"
|
|
bindtouchend="handleTouchEnd"
|
|
>
|
|
<image
|
|
src="{{item}}"
|
|
mode="aspectFit"
|
|
class="preview-image"
|
|
style="transform: scale({{scale}}) translate({{offsetX}}px, {{offsetY}}px); transform-origin: center center; transition: transform 0.1s ease-out;"
|
|
/>
|
|
</view>
|
|
</swiper-item>
|
|
</block>
|
|
</swiper>
|
|
</view>
|
|
</view>
|