小程序-搜索商品-历史记录 有并清除-根据销量-价格筛选过滤
Posted 记录-分享
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小程序-搜索商品-历史记录 有并清除-根据销量-价格筛选过滤相关的知识，希望对你有一定的参考价值。
搜索商品
<view class="container">
<view wx:if="{{$search$show==1}}" class="content">
<view class="search">
<view class="serch_content">
<i class="iconfont icon-search" />
<input type="text" name="search_input" bindinput="$search$searchInput" class="search_input" focus="true" value="{{$search$search_input_value}}" confirm-type="search" placeholder="搜索商品" />
<i wx:if="{{$search$search_input_value!=‘‘}}" bindtap="$search$delText" class="iconfont icon-del" />
</view>
<button class="btn btn_cancel" bindtap="$search$goBack" wx:if="{{$search$search_input_value==‘‘}}" data-wpygoback-a="">取消</button>
<button class="btn btn_search" bindtap="$search$search" wx:else data-wpysearch-a="">搜索</button>
</view>
</view>
<view class="bar" wx:if="{{list.length>0||skuval !==‘‘}}">
<view class="filter">
<view class="nav {{$filterBar$currentType==‘zonghe‘ ? ‘nav_active‘ : ‘‘}}" data-current="zonghe" bindtap="$filterBar$orderBy">综合</view>
<view class="nav {{$filterBar$currentType==‘sale‘ ? ‘nav_active‘ : ‘‘}}" data-current="sale" bindtap="$filterBar$orderBy">销量</view>
<view class="grid nav">
<view class="price {{$filterBar$currentType==‘price‘ ? ‘nav_active‘ : ‘‘}}" data-current="price" catchtap="$filterBar$orderBy">价格</view>
<view>
<view class="arrow_up {{$filterBar$arrowType==‘desc‘ ? ‘arrow_up_red‘ : ‘arrow_up_gray‘}}" />
<!-- 向下的三角形 -->
<view class="arrow_down {{$filterBar$arrowType==‘asc‘ ? ‘arrow_down_red‘ : ‘arrow_down_gray‘}} " />
</view>
</view>
<view class="nav" bindtap="$filterBar$filterSearch">筛选
<i class="iconfont icon-filter" />
</view>
</view>
<!--筛选测栏-->
<view wx:if="{{$filterBar$filterSlider$show}}">
<view class="filter-slider">
<view class="block">
<view class="title">尺码</view>
<view class="item_box">
<view class="item" data-sku="XS" catchtap="$filterBar$filterSlider$selSKU">XS</view>
<view class="item" data-sku="S" catchtap="$filterBar$filterSlider$selSKU">S</view>
<view class="item" data-sku="M" catchtap="$filterBar$filterSlider$selSKU">M</view>
<view class="item" data-sku="L" catchtap="$filterBar$filterSlider$selSKU">L</view>
<view class="item" data-sku="XL" catchtap="$filterBar$filterSlider$selSKU">XL</view>
<view class="item" data-sku="XXL" catchtap="$filterBar$filterSlider$selSKU">XXL</view>
</view>
</view>
<view class="btn_group">
<view class="btn_left_box">
<view class="button type_empity">重置</view>
</view>
<view class="btn_right_box">
<view class="button type_yellow" bindtap="$filterBar$filterSlider$SearchFilter">确认</view>
</view>
</view>
</view>
<view class="modal-overlay modal-overlay-visible" bindtap="$filterBar$filterSlider$close" data-wpyclose-a="" />
</view>
</view>
<view wx:if="{{list.length>0}}">
<!--矩阵商品列表模块-->
<scroll-view scroll-y="true" class="swiper-item-box">
<view class="shop_item">
<navigator class="list" wx:for="{{$shopGridList$list}}" wx:key="item" url="/pages/goods_detail?id={{item.id}}&purchasetype={{$shopGridList$purchasetype}}&special={{$shopGridList$special}}">
<view class="image_box">
<image src="{{item.thumLogo}}" />
</view>
<view class="goods">
<view class="product_name" wx:if="{{$shopGridList$showTitle}}">{{item.name}}</view>
<view class="product_info">
<view class="price">￥{{item.price}}</view>
<view class="cost_price">￥{{item.marketPrice}}</view>
<view class="sale_num">销量{{item.saleCount}}件</view>
</view>
</view>
</navigator>
</view>
</scroll-view>
<!--加载更多时动画-->
<view class="loadMoreGif" wx:if="{{$bottomLoadMore$show}}">
<image src="../images/loadding.gif" />
<text>{{$bottomLoadMore$message}}</text>
</view>
<!--暂无数据显示-->
<view class="empty-placeholder row-center" wx:if="{{$placeholder$show}}">
<image class="icon-xl" src="../images/empty.png" />
<view class="txt">{{$placeholder$message}}</view>
</view>
</view>
<view class="history {{show?‘‘:‘hidden‘}}" wx:else>
<view class="doc">历史记录</view>
<view class="lable">
<view wx:for="{{keywordhisList}}" wx:key="item" catchtap="selHisKeyWord" data-id="{{item.id}}">
<view class="child {{item.sel==‘1‘ ?‘active‘:‘‘}}">{{item.keyword}}</view>
</view>
</view>
<view class="btn_box">
<view class="button type_empity" catchtap="clearHis">清除历史记录</view>
</view>
</view>
</view>
css
.history {
padding: 20px 27px;
}
.doc {
color: #999;
font-size: 26rpx;
}
.lable {
margin-top: 20rpx;
display: flex;
flex-wrap: wrap;
align-items: center;
margin-left: -20rpx;
}
.lable .child {
background: #dedede;
padding: 10rpx 20rpx;
border-radius: 300rpx;
margin-left: 20rpx;
font-size: 26rpx;
margin-top: 5rpx;
color: #000;
}
.btn_box {
width: 377rpx;
margin: 0 auto;
padding-top: 88rpx;
}
.btn_box .button {
color: #999;
}
.active {
border: 1px solid #f23737;
color: #f23737;
}
.content {
padding: 10rpx;
}
.search {
align-items: center;
display: flex;
margin: 0 auto;
width: 680rpx;
}
.search .serch_content {
display: flex;
align-items: center;
border-radius: 300rpx;
color: #333;
width: 560rpx;
background: #efefef;
padding: 5rpx 12rpx;
height: 65rpx;
}
.search .serch_content .search_input {
font-size: 28rpx;
width: 100%;
}
.search .icon-search {
font-size: 40rpx;
}
.search .btn {
width: 120rpx;
height: 65rpx;
font-size: 28rpx;
line-height: 65rpx;
margin-left: 20rpx;
padding-left: 5rpx;
padding-right: 5rpx;
}
.search .btn_search {
color: #fff;
background: #e2413c;
}
.search .icon-del {
height: 60rpx;
line-height: 60rpx;
width: 60rpx;
font-size: 40rpx;
}
.empty-placeholder {
margin-top: 150rpx;
width: 100%;
text-align: center;
}
.empty-placeholder text {
color: #666;
font-size: 40rpx;
margin-left: 30rpx;
}
.icon-xl {
width: 140rpx;
height: 148rpx;
display: block;
margin: 0 auto;
}
.txt {
font-size: 26rpx;
color: #888888;
margin-top: 36rpx;
}
.loadMoreGif {
margin: 15rpx auto;
width: 220rpx;
display: flex;
justify-content: center;
align-items: center;
}
.loadMoreGif text {
font-size: 30rpx;
color: #999;
margin-left: 10rpx;
}
.loadMoreGif image {
width: 30rpx;
height: 30rpx;
}
.shop_item {
padding: 0rpx 15rpx;
background: #f7f7f7;
display: flex;
flex-wrap: wrap;
padding-bottom: 30rpx;
}
.list:nth-child(odd) {
margin-right: 10rpx;
}
.list {
background: #fff;
width: 355rpx;
margin-top: 15rpx;
}
.list .image_box image {
width: 100%;
height: 345rpx;
}
.list .product_name {
color: #1a1a1a;
font-size: 28rpx;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all;
}
.list .price {
color: #de0000;
font-size: 35rpx;
font-weight: 600;
}
.list .cost_price {
color: #666666;
font-size: 24rpx;
text-decoration: line-through;
font-weight: 600;
}
.list .sale_num {
color: #666666;
font-size: 22rpx;
}
.list .goods {
padding: 15rpx 12rpx;
}
.list .product_info {
padding-top: 20rpx;
display: flex;
align-items: flex-end;
}
.list .cost_price {
padding-left: 20rpx;
}
.list .sale_num {
padding-left: 20rpx;
}
@import "./filterSlider.wxss";
.filter {
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
}
.filter .nav {
color: #000000;
font-size: 26rpx;
padding: 12px 20px;
}
.filter .nav_active {
color: #f03939;
}
.filter .icon-filter {
font-size: 26rpx;
color: #666;
margin-left: 5rpx;
}
.price {
color: #000000;
font-size: 26rpx;
}
.grid {
display: flex;
align-items: center;
}
/*向上*/
.arrow_up_red {
border-color: transparent transparent #f03939;
}
.arrow_down_red {
border-color: #f03939 transparent transparent;
}
.arrow_up_gray {
border-color: transparent transparent #ccc;
}
.arrow_down_gray {
border-color: #ccc transparent transparent;
}
.arrow_up {
width: 0;
height: 0;
border-width: 0 10rpx 10rpx;
border-style: solid;
margin: 9rpx 10rpx;
position: relative;
}
/*向下*/
.arrow_down {
width: 0;
height: 0;
border-width: 10rpx 10rpx 0;
border-style: solid;
/*灰 透明 透明 */
margin: 9rpx 10rpx;
position: relative;
}
.filter-slider {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 600rpx;
z-index: 106003;
background: #ffffff;
}
.block {
font-weight: 600;
color: #000;
margin-top: 30rpx;
padding-left: 30rpx;
}
.item_box {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-left: -30rpx;
margin-top: 30rpx;
padding-bottom: 30rpx;
border-bottom: 1px solid #efefef;
}
.item_box .item {
position: relative;
margin-left: 30rpx;
margin-top: 20rpx;
text-align: center;
border: 1px solid #c6c6c6;
border-radius: 5rpx;
width: 205rpx;
padding: 16rpx 0rpx;
font-size: 24rpx;
color: #2c2c2c;
}
.item_box .active {
border: 1px solid #f23737;
color: #f23737;
}
.item_box .icon-bottom-check {
position: absolute;
bottom: -4rpx;
right: 0;
color: #f23737;
font-size: 24rpx;
}
.btn_group {
display: flex;
align-items: center;
position: fixed;
bottom: 10rpx;
width: 100%;
}
.btn_group .button {
height: 85rpx;
line-height: 85rpx;
text-align: center;
margin: 0 auto;
width: 100%;
-moz-border-radius: 5rpx;
-webkit-border-radius: 5rpx;
border-radius: 5rpx;
}
.btn_group .btn_left_box {
width: 280rpx;
padding: 0rpx 10rpx;
}
.btn_group .btn_right_box {
width: 280rpx;
padding: 0rpx 10rpx;
}
/*遮罩层*/
.modal-overlay.modal-overlay-visible {
opacity: 0.4;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #000;
z-index: 10600;
transition-duration: 400ms;
}
以上是关于小程序-搜索商品-历史记录 有并清除-根据销量-价格筛选过滤的主要内容，如果未能解决你的问题，请参考以下文章