SwtTt29
/
Mini-Program
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Labels Milestones
New Pull Request

优化首页布局：搜索框和品种选择区域下移，修复重叠问题，调整为文档流布局 #15

Merged
hzj merged 1 commits from ly1 into Xfy 2 months ago
Conversation 0 Commits 1 Files Changed 2
2 changed files with 56 additions and 309 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 316
      pages/index/index.wxml
  2. 47
      pages/index/index.wxss

316
pages/index/index.wxml
View File

@ -1,44 +1,6 @@
<view class="container">
<!-- 顶部搜索区域容器 - 始终固定显示 -->
<view class="top-section-container {{headerElementsHidden ? 'hidden-elements' : 'show-elements'}}">
<!-- 广告走马灯轮播图 -->
<view class="ad-carousel" style="transform: translateY({{headerElementsHidden ? '-100%' : '0'}}); opacity: {{headerElementsHidden ? '0' : '1'}}; transition: transform 0.3s ease, opacity 0.3s ease;">
<swiper
class="ad-swiper"
indicator-dots="{{true}}"
autoplay="{{true}}"
interval="3000"
duration="500"
circular="{{true}}"
indicator-color="rgba(255, 255, 255, 0.5)"
indicator-active-color="#ffffff"
>
<swiper-item wx:for="{{adCarouselList}}" wx:key="index">
<image
class="ad-image"
src="{{item.imageUrl}}"
mode="aspectFill"
bindtap="onAdClick"
data-ad="{{item}}"
data-index="{{index}}"
/>
</swiper-item>
</swiper>
</view>
<!-- 功能按钮区域 -->
<view class="function-buttons" style="transform: translateY({{headerElementsHidden ? '-100%' : '0'}}); opacity: {{headerElementsHidden ? '0' : '1'}}; transition: transform 0.3s ease, opacity 0.3s ease;">
<view class="function-btn" bindtap="navigateToSettlement">
<text class="function-btn-text">入驻</text>
</view>
<view class="function-btn" bindtap="navigateToCooperation">
<text class="function-btn-text">招商</text>
</view>
<view class="function-btn" bindtap="navigateToGoods">
<text class="function-btn-text">管理</text>
</view>
</view>
<view class="top-section-container">
<!-- 搜索区域 -->
<view class="search-section">
@ -54,7 +16,7 @@
bindinput="onSearchInput"
/>
</view>
<view class="egg-inner" style="position: relative;" bindtap="openAdvancedFilter">筛选</view>
<view class="egg-inner" style="position: relative;" bindtap="openAdvancedFilter">筛选</view>
</view>
</view>
@ -112,162 +74,60 @@
</view>
</view>
<!-- 侧边栏弹出层 -->
<view wx:if="{{showSidebar}}" class="sidebar-overlay" bindtap="toggleSidebar"></view>
<!-- 高级筛选弹出层 -->
<view wx:if="{{showAdvancedFilter}}" class="sidebar-overlay" bindtap="closeAdvancedFilter"></view>
<!-- 回到顶部按钮 -->
<view
class="back-to-top-btn {{showBackToTop ? 'visible' : ''}}"
bindtap="scrollToTop"
>
<text class="back-to-top-text">top</text>
</view>
<!-- 高级筛选底部弹出层 -->
<view wx:if="{{showAdvancedFilter}}" class="sidebar bottom-popup advanced-filter-sidebar">
<view class="sidebar-title">高级筛选</view>
<!-- 筛选内容区域 -->
<view class="filter-content">
<!-- 左侧分类列表 -->
<view class="filter-left">
<view
wx:for="{{filterCategories}}"
wx:key="index"
class="filter-category-item {{selectedFilterCategory === item.value ? 'active' : ''}}"
bindtap="selectFilterCategory"
data-category="{{item.value}}"
>
{{item.label}}
</view>
</view>
<!-- 右侧内容区域 -->
<view class="filter-right">
<!-- 地区选择内容 -->
<view wx:if="{{selectedFilterCategory === 'region'}}" class="filter-right-content">
<view class="filter-option all-option {{advancedFilters.region === 'all' ? 'active' : ''}}" bindtap="selectRegion" data-region="all">
全部
</view>
<view
wx:for="{{regionOptions}}"
wx:key="index"
class="filter-option {{advancedFilters.region === item.value ? 'active' : ''}}"
bindtap="selectRegion"
data-region="{{item.value}}"
>
{{item.label}}
</view>
</view>
<!-- 蛋壳颜色内容 -->
<view wx:if="{{selectedFilterCategory === 'shellColor'}}" class="filter-right-content">
<view class="filter-option all-option {{advancedFilters.shellColor === 'all' ? 'active' : ''}}" bindtap="selectShellColor" data-color="all">
全部颜色
</view>
<view
wx:for="{{shellColorOptions}}"
wx:key="index"
class="filter-option {{advancedFilters.shellColor === item.value ? 'active' : ''}}"
bindtap="selectShellColor"
data-color="{{item.value}}"
>
{{item.label}}
</view>
</view>
<!-- 商品名称内容 -->
<view wx:if="{{selectedFilterCategory === 'productName'}}" class="filter-right-content">
<view class="filter-option all-option {{advancedFilters.productName === 'all' ? 'active' : ''}}" bindtap="selectProductName" data-name="all">
全部商品
</view>
<view
wx:for="{{productNameOptions}}"
wx:key="index"
class="filter-option {{advancedFilters.productName === item.value ? 'active' : ''}}"
bindtap="selectProductName"
data-name="{{item.value}}"
>
{{item.label}}
</view>
</view>
<!-- 规格内容 -->
<view wx:if="{{selectedFilterCategory === 'specification'}}" class="filter-right-content">
<view class="filter-option all-option {{advancedFilters.specification === 'all' ? 'active' : ''}}" bindtap="selectSpecification" data-spec="all">
全部规格
</view>
<view
wx:for="{{specificationOptions}}"
wx:key="index"
class="filter-option {{advancedFilters.specification === item.value ? 'active' : ''}}"
bindtap="selectSpecification"
data-spec="{{item.value}}"
>
{{item.label}}
</view>
</view>
<!-- 蛋黄类型内容 -->
<view wx:if="{{selectedFilterCategory === 'yolkType'}}" class="filter-right-content">
<view class="filter-option all-option {{advancedFilters.yolkType === 'all' ? 'active' : ''}}" bindtap="selectYolkType" data-yolk="all">
全部蛋黄
</view>
<view
wx:for="{{yolkTypeOptions}}"
wx:key="index"
class="filter-option {{advancedFilters.yolkType === item.value ? 'active' : ''}}"
bindtap="selectYolkType"
data-yolk="{{item.value}}"
>
{{item.label}}
</view>
</view>
</view>
</view>
<!-- 操作按钮 -->
<view class="filter-actions">
<view class="filter-action-btn reset" bindtap="resetAdvancedFilter">重置</view>
<view class="filter-action-btn apply" bindtap="applyAdvancedFilter">应用</view>
</view>
</view>
<!-- 骨架屏加载 - 只在初始加载时显示，筛选时不显示 -->
<view wx:if="{{isLoading && goods.length === 0}}" class="skeleton-container">
<view class="skeleton-grid">
<view class="skeleton-grid-item" wx:for="{{[1,2,3,4,5,6,7,8]}}" wx:key="index">
<view class="skeleton-image"></view>
<view class="skeleton-title"></view>
<view class="skeleton-title short"></view>
<view class="skeleton-footer">
<view class="skeleton-price"></view>
</view>
</view>
</view>
</view>
<!-- 商品列表区域 -->
<view class="goods-section {{headerElementsHidden ? 'with-hidden-header' : ''}}">
<view class="goods-section">
<scroll-view
class="goods-list"
id="goodsScrollView"
bindscrolltolower="onReachBottom"
bindscroll="onScroll"
scroll-y="true"
scroll-top="{{scrollTop}}"
refresher-enabled="{{true}}"
refresher-triggered="{{isRefreshing}}"
refresher-default-style="black"
refresher-background="transparent"
bindrefresherrefresh="onPullDownRefresh"
bindrefresherrestore="onRestore"
style="padding-top: {{headerElementsHidden ? '175rpx' : '580rpx'}}; transition: padding-top 0.3s ease;"
>
<view class="goods-list-container">
<!-- 功能按钮区域 -->
<view class="function-buttons">
<view class="function-btn" bindtap="navigateToSettlement">
<text class="function-btn-text">入驻</text>
</view>
<view class="function-btn" bindtap="navigateToCooperation">
<text class="function-btn-text">招商</text>
</view>
<view class="function-btn" bindtap="navigateToGoods">
<text class="function-btn-text">管理</text>
</view>
</view>
<!-- 广告走马灯轮播图 -->
<view class="ad-carousel">
<swiper
class="ad-swiper"
indicator-dots="{{true}}"
autoplay="{{true}}"
interval="3000"
duration="500"
circular="{{true}}"
indicator-color="rgba(255, 255, 255, 0.5)"
indicator-active-color="#ffffff"
>
<swiper-item wx:for="{{adCarouselList}}" wx:key="index">
<image
class="ad-image"
src="{{item.imageUrl}}"
mode="aspectFill"
bindtap="onAdClick"
data-ad="{{item}}"
data-index="{{index}}"
/>
</swiper-item>
</swiper>
</view>
<!-- 网格布局 -->
<view class="grid-container">
<view
@ -279,8 +139,6 @@
wx:if="{{!item.isAd}}"
>
<view class="product-card {{item.status === 'sold_out' ? 'sold-out-grayscale' : ''}}">
<!-- 售空商品半透明覆盖层 -->
<view wx:if="{{item.status === 'sold_out'}}" class="sold-out-overlay"></view>
<view class="product-image-wrapper">
<!-- 视频处理：根据mediaItems中的类型字段判断 -->
<video
@ -312,7 +170,9 @@
</view>
<view class="product-info">
<view class="product-first-row">
<view class="status-tag source-{{item.sourceType === '三方认证' ? 'third' : (item.sourceType === '平台货源' ? 'platform' : 'unverified')}}">{{item.sourceType || ''}}</view>
<view class="status-tag source-{{item.sourceType === '三方认证' ? 'third' : (item.sourceType === '平台货源' ? 'platform' : 'unverified')}}">
{{item.sourceType || ''}}
</view>
<text class="product-title {{item.isViewed ? 'viewed' : ''}}">{{item.name}}</text>
<text class="product-description {{item.isViewed ? 'viewed' : ''}}">{{item.description || ''}}</text>
</view>
@ -349,92 +209,4 @@
</view>
</scroll-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="onPhoneNumberResult"
>
授权手机号
</button>
<button
class="auth-cancel-button"
bindtap="closeOneKeyLoginModal"
>
取消
</button>
</view>
</view>
</view>
<!-- 用户信息填写弹窗 -->
<view wx:if="{{showUserInfoForm}}" class="modal-overlay">
<view class="modal-container">
<view class="modal-title">
<text>完善个人信息</text>
</view>
<!-- 头像选择 -->
<view class="avatar-section">
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
<image class="avatar" src="{{avatarUrl}}"></image>
</button>
</view>
<!-- 昵称输入 -->
<form bindsubmit="getUserName">
<view class="form-group">
<view class="form-label">昵称</view>
<input placeholder="请输入昵称" type="nickname" name="name" maxlength="32" class="form-input"></input>
</view>
<!-- 提交按钮 -->
<view class="form-actions">
<button form-type="submit" class="confirm-button">确定</button>
</view>
</form>
<!-- 取消按钮 -->
<view class="modal-buttons">
<button class="cancel-button" bindtap="cancelUserInfoForm">取消</button>
</view>
</view>
</view>
<!-- 图片预览弹窗 -->
<view wx:if="{{showImagePreview}}" class="image-preview-mask" catchtouchmove="true" bindtap="closeImagePreview">
<swiper
class="image-preview-swiper"
current="{{previewImageIndex}}"
bindchange="onPreviewImageChange"
indicator-dots="true"
indicator-color="rgba(255, 255, 255, 0.5)"
indicator-active-color="#fff"
autoplay="false"
duration="300"
>
<block wx:for="{{previewImageUrls}}" wx:key="*this">
<swiper-item>
<image
class="preview-image"
src="{{item}}"
mode="aspectFit"
bindtap="closeImagePreview"
></image>
</swiper-item>
</block>
</swiper>
<!-- 关闭按钮 -->
<view class="image-preview-close" bindtap="closeImagePreview">
<text class="close-icon">✕</text>
</view>
</view>
</view>

47
pages/index/index.wxss
View File

@ -53,36 +53,18 @@ page {
/* 为整个容器添加修复 */
.top-section-container {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1002;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
padding: 0 0 10rpx;
height: auto;
min-height: auto;
box-shadow: none;
border-bottom: none;
background: #ffffff;
backdrop-filter: blur(10rpx);
-webkit-backdrop-filter: blur(10rpx);
padding: 20rpx 0 30rpx;
margin-top: 140rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
border-bottom: 1rpx solid #e0e0e0;
display: flex;
flex-direction: column;
align-items: center;
overflow: visible;
transition: all 0.3s ease;
}
/* 隐藏广告和功能按钮时的容器样式 */
.top-section-container.hidden-elements {
height: 175rpx;
min-height: 175rpx;
}
/* 显示广告和功能按钮时的容器样式 */
.top-section-container.show-elements {
height: auto;
min-height: 580rpx;
box-sizing: border-box;
overflow: hidden;
}
/* 广告轮播图样式 */
@ -171,13 +153,6 @@ page {
box-shadow: none;
background: transparent;
z-index: 1;
margin-top: 580rpx;
transition: all 0.3s ease;
}
/* 隐藏广告时商品区域上移 */
.goods-section.with-hidden-header {
margin-top: 175rpx;
}
/* 标题样式调整 */
@ -213,10 +188,10 @@ page {
/* 修复商品列表区域 */
.goods-list {
flex: 1;
padding-top: 580rpx;
padding-top: 0;
padding-bottom: 20rpx;
height: auto;
min-height: calc(100vh - 600rpx); /* 确保有足够的最小高度 */
min-height: calc(100vh - 400rpx); /* 调整最小高度 */
box-sizing: border-box;
overflow-y: auto;
-webkit-overflow-scrolling: touch;

Write Preview
Loading…
Cancel
Save