chore:商品分类模板5 点进商品分类,进入商品列表隐藏搜索框下面功能

This commit is contained in:
2026-09-28 11:25:02 +08:00
parent 993b5c5cb0
commit 535ae732bc
4 changed files with 24 additions and 6 deletions

View File

@@ -187,9 +187,9 @@
<!-- 三级分类(及更深层级): 一级分类标题 + 二级分类网格(图3) --> <!-- 三级分类(及更深层级): 一级分类标题 + 二级分类网格(图3) -->
<view :class="['category-title', '']">{{ category.category_name }}</view> <view :class="['category-title', '']">{{ category.category_name }}</view>
<view class="category-list"> <view class="category-list">
<!-- 点二级分类进入商品列表: 带 list_style=grid, 让列表页默认用竖版(双列宫格)视图 --> <!-- 点二级分类进入商品列表: 带 list_style=grid 让列表页默认用竖版(双列宫格)视图, hide_sort=1 隐藏排序栏 -->
<view class="category-item" v-for="(one, oneIndex) in category.child_list" :key="oneIndex" <view class="category-item" v-for="(one, oneIndex) in category.child_list" :key="oneIndex"
@tap.stop="$util.redirectTo('/pages_goods/list', { category_id: one.category_id, list_style: 'grid' })"> @tap.stop="$util.redirectTo('/pages_goods/list', { category_id: one.category_id, list_style: 'grid', hide_sort: 1 })">
<view class="img-box"> <view class="img-box">
<image :src="categoryImg(one.image)" mode="aspectFit" @error="categoryImgError(2, oneIndex, -1)" show-menu-by-longpress /> <image :src="categoryImg(one.image)" mode="aspectFit" @error="categoryImgError(2, oneIndex, -1)" show-menu-by-longpress />
</view> </view>

View File

@@ -1,6 +1,6 @@
<template> <template>
<view class="content" :style="themeColor"> <view class="content" :style="themeColor">
<view class="head-wrap"> <view class="head-wrap" :class="{ 'head-wrap-extend': hideSort }">
<!-- 搜索区域 --> <!-- 搜索区域 -->
<view class="search-wrap uni-flex uni-row"> <view class="search-wrap uni-flex uni-row">
<view class="flex-item input-wrap"> <view class="flex-item input-wrap">
@@ -12,8 +12,8 @@
@click="changeListStyle()"></view> @click="changeListStyle()"></view>
</view> </view>
<!-- 排序 --> <!-- 排序 (商品分类模板5进入时隐藏, 只隐藏不移除) -->
<view class="sort-wrap"> <view class="sort-wrap" :class="{ 'sort-wrap-hide': hideSort }">
<view class="comprehensive-wrap" :class="{ 'color-base-text': orderType === '' }" <view class="comprehensive-wrap" :class="{ 'color-base-text': orderType === '' }"
@click="sortTabClick('')"> @click="sortTabClick('')">
<text :class="{ 'color-base-text': orderType === '' }">{{ $lang('goods.list.Random') }}</text> <text :class="{ 'color-base-text': orderType === '' }">{{ $lang('goods.list.Random') }}</text>
@@ -45,7 +45,7 @@
</view> </view>
</view> </view>
<mescroll-uni top="180" ref="mescroll" @getData="getGoodsList"> <mescroll-uni :top="hideSort ? 120 : 180" ref="mescroll" @getData="getGoodsList">
<block slot="list"> <block slot="list">
<view v-if="isList" class="goods-list single-column" :class="{ show: isList }"> <view v-if="isList" class="goods-list single-column" :class="{ show: isList }">
<view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="item.id" <view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="item.id"

View File

@@ -5,6 +5,13 @@
left: 0; left: 0;
z-index: 1; z-index: 1;
// 商品分类模板5进入时排序栏被隐藏, 让白色背景继续向下延伸(搜索框位置不变),
// 一直覆盖到第一行商品卡片顶部, 避免搜索框下方出现灰色空白条
&.head-wrap-extend {
// 26rpx = mescroll top(100rpx) - 搜索区高度(94rpx) + 列表 padding-top($margin-updown: 20rpx)
padding-bottom: 20rpx;
}
.search-wrap { .search-wrap {
flex: 0.5; flex: 0.5;
padding: 30rpx 30rpx 0; padding: 30rpx 30rpx 0;
@@ -60,6 +67,12 @@
.sort-wrap { .sort-wrap {
display: flex; display: flex;
padding: 10rpx 20rpx 10rpx 0; padding: 10rpx 20rpx 10rpx 0;
// 商品分类模板5进入商品列表时隐藏排序栏(综合/销量/价格/筛选), 只隐藏不移除
&.sort-wrap-hide {
display: none;
}
> view { > view {
flex: 1; flex: 1;
text-align: center; text-align: center;

View File

@@ -19,6 +19,7 @@ export default {
coupon: 0, coupon: 0,
emptyShow: false, emptyShow: false,
isList: true, //列表样式 isList: true, //列表样式
hideSort: false, //是否隐藏排序栏(综合/销量/价格/筛选)
//分享所需标题 //分享所需标题
share_title: '', share_title: '',
//搜索到多少件商品 //搜索到多少件商品
@@ -87,6 +88,10 @@ export default {
if (options.list_style === 'grid') { if (options.list_style === 'grid') {
this.isList = false; this.isList = false;
} }
// 商品分类(模板5)进入时隐藏排序栏(综合/销量/价格/筛选), 只隐藏不移除
if (options.hide_sort == 1) {
this.hideSort = true;
}
this.keyword = options.keyword || ''; this.keyword = options.keyword || '';
this.coupon = options.coupon || 0; this.coupon = options.coupon || 0;
this.goods_id_arr = options.goods_id_arr || 0; this.goods_id_arr = options.goods_id_arr || 0;