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.
296 lines
16 KiB
296 lines
16 KiB
3 months ago
|
<view class="container" style="align-items: flex-start; padding: 20rpx; width: 100%; max-width: 100vw; overflow-x: hidden; position: relative; box-sizing: border-box;">
|
||
|
|
|
||
|
|
<!-- 搜索框 -->
|
||
|
|
<view style="position: fixed; top: 0; left: 0; right: 0; padding: 20rpx; background-color: white; z-index: 100; box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1); box-sizing: border-box;">
|
||
|
|
<view style="width: 90%; display: flex; border: 1rpx solid #ddd; border-radius: 40rpx; overflow: hidden;">
|
||
|
|
<input
|
||
|
|
style="flex: 1; padding: 20rpx 30rpx;"
|
||
|
|
placeholder="搜索商品名称或品种"
|
||
|
|
bindinput="onSearchInput"
|
||
|
|
value="{{searchKeyword}}"
|
||
|
|
/>
|
||
|
|
<button
|
||
|
|
style="background-color: #1677ff; color: white; font-size: 26rpx; height: 80rpx; line-height: 80rpx; padding: 0 30rpx;"
|
||
|
|
bindtap="searchGoods"
|
||
|
|
>
|
||
|
|
搜索
|
||
|
|
</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 商品列表 -->
|
||
|
|
<view class="goods-list" style="width: 100%; display: flex; flex-direction: column; align-items: flex-start; min-height: 400rpx; margin-top: 120rpx;" bindscrolltolower="onReachBottom" bindscroll="onScroll">
|
||
|
|
<view wx:if="{{filteredGoods.length > 0}}" wx:for="{{filteredGoods}}" wx:key="id" wx:for-item="item" wx:for-index="index" class="card" style="width: 100%; margin-top: 0; margin-bottom: 20rpx;">
|
||
|
|
<!-- 图片和信息1:1比例并排显示 -->
|
||
|
|
<view style="display: flex; width: 100%; border-radius: 8rpx; overflow: hidden; background-color: #f5f5f5;">
|
||
|
|
<!-- 左侧图片区域 50%宽度 -->
|
||
|
|
<view style="width: 50%; position: relative;">
|
||
|
|
<!-- 第一张图片 -->
|
||
|
|
<view wx:if="{{item.imageUrls && item.imageUrls.length > 0}}" style="width: 100%; height: 100%;">
|
||
|
|
<image src="{{item.imageUrls[0]}}" mode="aspectFill" style="width: 100%; height: 100%;" bindtap="previewImage" data-urls="{{item.imageUrls}}" data-index="0"></image>
|
||
|
|
</view>
|
||
|
|
<view wx:else style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #999;">
|
||
|
|
<text>暂无图片</text>
|
||
|
|
</view>
|
||
|
|
<!-- 剩余图片可滑动区域 -->
|
||
|
|
<view wx:if="{{item.imageUrls && item.imageUrls.length > 0}}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
|
||
|
|
<swiper
|
||
|
|
class="image-swiper"
|
||
|
|
style="width: 100%; height: 100%;"
|
||
|
|
current="{{item.currentImageIndex || 0}}"
|
||
|
|
bindchange="swiperChange"
|
||
|
|
data-item-id="{{index}}">
|
||
|
|
<block wx:for="{{item.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.imageUrls}}" data-index="{{idx}}"></image>
|
||
|
|
</swiper-item>
|
||
|
|
</block>
|
||
|
|
</swiper>
|
||
|
|
<!-- 显示页码指示器 -->
|
||
|
|
<view style="position: absolute; bottom: 10rpx; right: 10rpx; background-color: rgba(0,0,0,0.5); color: white; padding: 5rpx 10rpx; border-radius: 15rpx; font-size: 20rpx;">
|
||
|
|
{{(item.currentImageIndex || 0) + 1}}/{{item.imageUrls.length}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 右侧信息区域 50%宽度 -->
|
||
|
|
<view style="width: 50%; display: flex; flex-direction: column; background-color: white; border-left: 1rpx solid #f0f0f0;">
|
||
|
|
<!-- 上半部分商品信息区域（60%高度），可点击查看详情 -->
|
||
|
|
<view style="flex: 0.6; padding: 15rpx; cursor: pointer;" bindtap="showGoodsDetail" data-item="{{item}}">
|
||
|
|
<view style="font-size: 28rpx; font-weight: bold; word-break: break-word;">{{item.name}}
|
||
|
|
<view style="display: inline-block; margin-left: 10rpx; font-size: 18rpx; color: #fff; background-color: #52c41a; padding: 2rpx 8rpx; border-radius: 10rpx;">已上架</view>
|
||
|
|
</view>
|
||
|
|
<view style="font-size: 24rpx; color: #666; margin-top: 8rpx;">规格: {{item.spec || '无'}}</view>
|
||
|
|
<view style="font-size: 24rpx; color: #666; margin-top: 8rpx;">蛋黄: {{item.yolk || '无'}}</view>
|
||
|
|
<view style="color: #f5222d; font-size: 24rpx; margin-top: 8rpx;">件数: {{item.minOrder}}件</view>
|
||
|
|
<view style="color: #1677ff; font-size: 24rpx; margin-top: 8rpx;">斤重: {{item.displayGrossWeight}}</view>
|
||
|
|
<view style="color: #1677ff; font-size: 24rpx; margin-top: 8rpx;">地区: {{item.region}}</view>
|
||
|
|
|
||
|
|
<!-- 预约人数显示 -->
|
||
|
|
<view style="text-align: center; margin-top: 10rpx;">
|
||
|
|
<text style="color: #52c41a; font-size: 28rpx; font-weight: bold;">已有{{item.reservedCount || 0}}人想要</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 下半部分按钮区域（40%高度） -->
|
||
|
|
<view style="flex: 0.4; display: flex; justify-content: center; align-items: center; gap: 10rpx;">
|
||
|
|
<!-- 根据是否已预约显示不同的按钮 -->
|
||
|
|
<view wx:if="{{item.isReserved}}" style="background-color: #52c41a; color: white; font-size: 22rpx; padding: 12rpx 25rpx; border-radius: 8rpx; width: 70%; text-align: center;">
|
||
|
|
已预约✓
|
||
|
|
</view>
|
||
|
|
<button
|
||
|
|
wx:else
|
||
|
|
style="background-color: #f74ac3; color: white; font-size: 22rpx; padding: 0 25rpx; line-height: 60rpx; width: 70%;"
|
||
|
|
bindtap="onClickWant"
|
||
|
|
data-id="{{item.id}}"
|
||
|
|
>
|
||
|
|
我想要
|
||
|
|
</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- 自定义弹窗组件 -->
|
||
|
|
<view class="custom-toast-mask" wx:if="{{showCustomToast}}" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; justify-content: center; align-items: center; z-index: 9999;">
|
||
|
|
<view class="custom-toast" style="background: white; padding: 40rpx 60rpx; border-radius: 12rpx; text-align: center; animation: {{toastAnimation}}; transform-origin: center center;">
|
||
|
|
<view style="font-size: 28rpx; color: #333;">稍后会有专员和您沟通</view>
|
||
|
|
</view>
|
||
|
|
</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: 9999;" 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 wx:if="{{showAuthModal}}" class="modal-overlay" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 9999;">
|
||
|
|
<view class="modal-container" style="background: white; padding: 40rpx; border-radius: 16rpx; width: 80%; max-width: 500rpx; text-align: center;">
|
||
|
|
<view class="modal-title" style="font-size: 32rpx; font-weight: bold; margin-bottom: 30rpx; color: #333;">
|
||
|
|
<text>提示</text>
|
||
|
|
</view>
|
||
|
|
<view class="modal-content" style="font-size: 28rpx; color: #666; margin-bottom: 40rpx; line-height: 1.5;">
|
||
|
|
<text>请先登录后再预约商品</text>
|
||
|
|
</view>
|
||
|
|
<view class="modal-buttons">
|
||
|
|
<button class="primary-button" style="background-color: #1677ff; color: white; font-size: 28rpx; line-height: 80rpx; border-radius: 8rpx; margin-bottom: 20rpx;" bindtap="showOneKeyLogin">一键登录</button>
|
||
|
|
<button class="cancel-button" style="background-color: #f5f5f5; color: #333; font-size: 28rpx; line-height: 80rpx; border-radius: 8rpx;" bindtap="closeAuthModal">取消</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 一键登录弹窗 -->
|
||
|
|
<view wx:if="{{showOneKeyLoginModal}}" class="modal-overlay" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 9999;">
|
||
|
|
<view class="modal-container" style="background: white; padding: 40rpx; border-radius: 16rpx; width: 80%; max-width: 500rpx; text-align: center;">
|
||
|
|
<view class="modal-title" style="font-size: 32rpx; font-weight: bold; margin-bottom: 30rpx; color: #333;">
|
||
|
|
<text>授权登录</text>
|
||
|
|
</view>
|
||
|
|
<view class="modal-content" style="font-size: 28rpx; color: #666; margin-bottom: 40rpx; line-height: 1.5;">
|
||
|
|
<text>请授权获取您的手机号用于登录</text>
|
||
|
|
</view>
|
||
|
|
<view class="modal-buttons">
|
||
|
|
<button class="primary-button" open-type="getPhoneNumber" bind:getphonenumber="onGetPhoneNumber" style="background-color: #1677ff; color: white; font-size: 28rpx; line-height: 80rpx; border-radius: 8rpx; margin-bottom: 20rpx;">授权获取手机号</button>
|
||
|
|
<button class="cancel-button" style="background-color: #f5f5f5; color: #333; font-size: 28rpx; line-height: 80rpx; border-radius: 8rpx;" bindtap="closeOneKeyLoginModal">取消</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 用户信息填写弹窗 -->
|
||
|
|
<view wx:if="{{showUserInfoForm}}" class="modal-overlay" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 9999;">
|
||
|
|
<view class="modal-container" style="background: white; padding: 40rpx; border-radius: 16rpx; width: 80%; max-width: 500rpx; text-align: center;">
|
||
|
|
<view class="modal-title" style="font-size: 32rpx; font-weight: bold; margin-bottom: 30rpx; color: #333;">
|
||
|
|
<text>完善个人信息</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 头像选择 -->
|
||
|
|
<view class="avatar-section" style="margin-bottom: 30rpx;">
|
||
|
|
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar" style="width: 120rpx; height: 120rpx; border-radius: 50%; background: none; padding: 0; margin: 0 auto;">
|
||
|
|
<image class="avatar" src="{{avatarUrl}}" style="width: 120rpx; height: 120rpx; border-radius: 50%;"></image>
|
||
|
|
</button>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 昵称输入 -->
|
||
|
|
<form bindsubmit="getUserName">
|
||
|
|
<view class="form-group" style="margin-bottom: 30rpx;">
|
||
|
|
<input placeholder="请输入昵称" type="nickname" name="nickname" maxlength="32" class="form-input" style="width: 100%; padding: 20rpx; border: 1rpx solid #ddd; border-radius: 8rpx; box-sizing: border-box;" />
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 提交按钮 -->
|
||
|
|
<view class="form-actions">
|
||
|
|
<button form-type="submit" class="confirm-button" style="background-color: #1677ff; color: white; font-size: 28rpx; line-height: 80rpx; border-radius: 8rpx; margin-bottom: 20rpx;">确定</button>
|
||
|
|
</view>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<!-- 取消按钮 -->
|
||
|
|
<view class="modal-buttons">
|
||
|
|
<button class="cancel-button" style="background-color: #f5f5f5; color: #333; font-size: 28rpx; line-height: 80rpx; border-radius: 8rpx;" bindtap="cancelUserInfoForm">取消</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 商品详情弹窗 - 商务风格 -->
|
||
|
|
<view wx:if="{{showGoodsDetail}}" class="modal-overlay">
|
||
|
|
<view class="goods-detail-modal">
|
||
|
|
<!-- 弹窗头部 -->
|
||
|
|
<view class="goods-detail-header">
|
||
|
|
<view class="goods-detail-title">商品详情</view>
|
||
|
|
<view class="goods-detail-close" bindtap="closeGoodsDetail">×</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 弹窗内容 -->
|
||
|
|
<view class="goods-detail-content">
|
||
|
|
<!-- 商品图片 -->
|
||
|
|
<view wx:if="{{currentGoodsDetail.imageUrls && currentGoodsDetail.imageUrls.length > 0}}" class="goods-image-section">
|
||
|
|
<swiper class="goods-image-swiper" indicator-dots="true" indicator-color="rgba(0,0,0,0.3)" indicator-active-color="#1677ff">
|
||
|
|
<block wx:for="{{currentGoodsDetail.imageUrls}}" wx:for-item="img" wx:for-index="idx" wx:key="idx" class="goods-image-item">
|
||
|
|
<swiper-item>
|
||
|
|
<image src="{{img}}" mode="aspectFill" class="goods-image"></image>
|
||
|
|
</swiper-item>
|
||
|
|
</block>
|
||
|
|
</swiper>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 商品基本信息 -->
|
||
|
|
<view class="goods-info-section">
|
||
|
|
<view class="goods-name">{{currentGoodsDetail.name}}</view>
|
||
|
|
<view class="goods-price">价格: {{currentGoodsDetail.price || '暂无'}}</view>
|
||
|
|
|
||
|
|
<!-- 商品信息网格 -->
|
||
|
|
<view class="goods-info-grid">
|
||
|
|
<view class="goods-info-item">
|
||
|
|
<view class="goods-info-label">地区</view>
|
||
|
|
<view class="goods-info-value">{{currentGoodsDetail.region}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="goods-info-item">
|
||
|
|
<view class="goods-info-label">规格</view>
|
||
|
|
<view class="goods-info-value">{{currentGoodsDetail.spec || '无'}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="goods-info-item">
|
||
|
|
<view class="goods-info-label">蛋黄</view>
|
||
|
|
<view class="goods-info-value">{{currentGoodsDetail.yolk || '无'}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="goods-info-item">
|
||
|
|
<view class="goods-info-label">斤重</view>
|
||
|
|
<view class="goods-info-value">{{currentGoodsDetail.displayGrossWeight}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="goods-info-item">
|
||
|
|
<view class="goods-info-label">件数</view>
|
||
|
|
<view class="goods-info-value">{{currentGoodsDetail.minOrder}}件</view>
|
||
|
|
</view>
|
||
|
|
<view class="goods-info-item">
|
||
|
|
<view class="goods-info-label">关注人数</view>
|
||
|
|
<view class="goods-info-value">{{currentGoodsDetail.reservedCount || 0}}人</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 联系信息 -->
|
||
|
|
<view class="goods-contact-section">
|
||
|
|
<view class="goods-contact-title">联系信息</view>
|
||
|
|
<view class="goods-contact-item">
|
||
|
|
<text class="goods-contact-icon">👤</text>
|
||
|
|
<text>联系人: {{currentGoodsDetail.product_contact || '暂无'}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="goods-contact-item">
|
||
|
|
<text class="goods-contact-icon">📞</text>
|
||
|
|
<text>联系电话: {{currentGoodsDetail.contact_phone || '暂无'}}</text>
|
||
|
|
<button
|
||
|
|
wx:if="{{currentGoodsDetail.contact_phone}}"
|
||
|
|
class="call-phone-button"
|
||
|
|
bindtap="makePhoneCall"
|
||
|
|
data-phone="{{currentGoodsDetail.contact_phone}}"
|
||
|
|
>
|
||
|
|
拨打电话
|
||
|
|
</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 操作按钮区域 -->
|
||
|
|
<view class="goods-action-section">
|
||
|
|
<button
|
||
|
|
wx:if="{{currentGoodsDetail.isReserved}}"
|
||
|
|
class="goods-action-button reserved"
|
||
|
|
>
|
||
|
|
已预约✓
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
wx:else
|
||
|
|
class="goods-action-button"
|
||
|
|
bindtap="onClickWantInDetail"
|
||
|
|
data-id="{{currentGoodsDetail.id}}"
|
||
|
|
>
|
||
|
|
我想要
|
||
|
|
</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|