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
14 KiB
237 lines
14 KiB
<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 class="search-bar">
|
|
<view class="search-container">
|
|
<view class="search-icon">🔍</view>
|
|
<input
|
|
class="search-input"
|
|
placeholder="输入商品名称或品种"
|
|
bindinput="searchGoods"
|
|
bindconfirm="searchGoods"
|
|
value="{{searchKeyword}}"
|
|
/>
|
|
<view wx:if="{{searchKeyword}}" class="clear-icon" bindtap="clearSearch">✘</view>
|
|
</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;">
|
|
<!-- 图片和信息2:3比例并排显示，整体高度固定 -->
|
|
<view style="display: flex; width: 100%; height: 200rpx; border-radius: 8rpx; overflow: hidden; background-color: #f5f5f5;">
|
|
<!-- 左侧图片区域 40%宽度（2/5），高度固定 -->
|
|
<view style="width: 40%; position: relative; height: 200rpx;">
|
|
<!-- 第一张图片 -->
|
|
<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-item="{{item}}" 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-item="{{item}}" 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>
|
|
|
|
<!-- 右侧信息区域 60%宽度（3/5），相应调整 -->
|
|
<view style="width: 60%; display: flex; flex-direction: column; background-color: white; border-left: 1rpx solid #f0f0f0;">
|
|
<!-- 上半部分商品信息区域（60%高度），可点击查看详情 -->
|
|
<view style="flex: 0.6; padding: 0rpx 15rpx 15rpx 15rpx; cursor: pointer;" bindtap="showGoodsDetail" data-item="{{item}}">
|
|
<view>
|
|
<view style="margin-bottom: 15rpx; margin-top: -5rpx;">
|
|
<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;">{{item.supplyStatus || '暂无状态'}}</view>
|
|
<span style="vertical-align: middle; font-size: 36rpx; font-weight: bold;">{{item.name}}</span>
|
|
<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;">V</span>
|
|
</view>
|
|
<view style="font-size: 28rpx; color: #888; margin-top: 30rpx;">
|
|
{{item.specification || '无'}} | {{item.yolk || '无'}} | {{item.minOrder || item.quantity || 1}}件
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
<!-- 下半部分按钮区域（40%高度） -->
|
|
<view style="flex: 0.4; display: flex; justify-content: space-between; align-items: center; padding: 0 20rpx;">
|
|
<!-- 收藏人数显示 -->
|
|
<view style="display: flex; align-items: center;">
|
|
<text style="color: #999999; font-size: 28rpx; font-weight: normal; margin-right: 8rpx;">已有</text>
|
|
<text style="color: #d865d8ff; font-size: 28rpx; font-weight: bold;">{{item.reservedCount || 0}}</text>
|
|
<text style="color: #999999; font-size: 28rpx; font-weight: normal; margin-left: 8rpx;">人收藏</text>
|
|
</view>
|
|
<!-- 根据是否已收藏显示不同的按钮 -->
|
|
<button
|
|
wx:if="{{item.isFavorite}}"
|
|
style="font-size: 24rpx; font-weight: bold; width: 150rpx; height: 60rpx; border-radius: 24rpx; display: flex; justify-content: center; align-items: center; padding: 0; border: none; margin: 0; transition: all 0.3s ease; position: relative; overflow: hidden; color: #FF6B6B; background: rgba(255, 107, 107, 0.15); backdrop-filter: blur(12rpx); -webkit-backdrop-filter: blur(12rpx); border: 1rpx solid rgba(255, 255, 255, 0.3); box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.2), 0 4rpx 16rpx rgba(0, 0, 0, 0.1), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.7), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);"
|
|
bindtap="cancelFavorite"
|
|
data-item="{{item}}"
|
|
>
|
|
已收藏
|
|
</button>
|
|
<button
|
|
wx:else
|
|
style="font-size: 24rpx; font-weight: bold; width: 150rpx; height: 60rpx; border-radius: 24rpx; display: flex; justify-content: center; align-items: center; padding: 0; border: none; margin: 0; transition: all 0.3s ease; position: relative; overflow: hidden; color: #1677ff; background: rgba(22, 119, 255, 0.15); backdrop-filter: blur(12rpx); -webkit-backdrop-filter: blur(12rpx); border: 1rpx solid rgba(255, 255, 255, 0.3); box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.2), 0 4rpx 16rpx rgba(0, 0, 0, 0.1), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.7), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);"
|
|
bindtap="addFavorite"
|
|
data-item="{{item}}"
|
|
>
|
|
收藏
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 搜索结果后添加半页空白区域 -->
|
|
<view class="half-page-blank" style="display: flex; justify-content: center; align-items: flex-start; padding-top: 20rpx;">
|
|
<text style="color: #999; font-size: 26rpx; opacity: 0.8;">已加载全部商品</text>
|
|
</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: 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 wx:if="{{showAuthModal}}" 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" bindtap="showOneKeyLogin">一键登录</button>
|
|
<button class="auth-cancel-button" bindtap="closeAuthModal">取消</button>
|
|
</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" bind:getphonenumber="onGetPhoneNumber">授权获取手机号</button>
|
|
<button class="auth-cancel-button" 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="name" 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 class="quarter-page-blank"></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>
|