|
|
|
@ -3,68 +3,70 @@ |
|
|
|
|
<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true,auto: false}" |
|
|
|
|
@down="downCallback" :up="upOption" @up="upCallback"> |
|
|
|
|
<!-- 页面头部 --> |
|
|
|
|
<view class="header"> |
|
|
|
|
<view class="search"> |
|
|
|
|
<search :tips="options.search ? options.search : '搜索商品'" @event="handleSearch" /> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="store-sort"> |
|
|
|
|
<template v-if="options.categoryId"> |
|
|
|
|
<view class="goodsban" v-if="tabbar && tabbar.length > 0"> |
|
|
|
|
<scroll-view class="typeList" scroll-x="true"> |
|
|
|
|
<view v-for="(item,index) in tabbar" :key="index" class="bandsImg" @click="onChage(item,1,index)" |
|
|
|
|
:style="{'color':item.category_id==isBanrdActive?'#F43B21':'#5A5A5A','border':item.category_id==isBanrdActive?'1rpx solid #F22029':'1rpx solid #E7E7E7'}"> |
|
|
|
|
<image :src="item.image?item.image.external_url:''" mode="aspectFill"></image> |
|
|
|
|
<view class="typeItem">{{item.name}}</view> |
|
|
|
|
</view> |
|
|
|
|
</scroll-view> |
|
|
|
|
</view> |
|
|
|
|
<view class="goodsType" v-if="goodsType && goodsType.length > 0"> |
|
|
|
|
<scroll-view class="typeList" scroll-x="true"> |
|
|
|
|
<view v-for="(item,index) in goodsType" :key="index" class="typeItem" |
|
|
|
|
@click="onChage(item,2)" |
|
|
|
|
:style="{'color':isActive==item.category_id?'#F43B21':'#5A5A5A','background':isActive==item.category_id?'#FEF6F6':'#F7F8FA','border':isActive==item.category_id?'2rpx solid #F22029':'none'}"> |
|
|
|
|
{{item.name}} |
|
|
|
|
</view> |
|
|
|
|
</scroll-view> |
|
|
|
|
</view> |
|
|
|
|
</template> |
|
|
|
|
<!-- 排序标签 --> |
|
|
|
|
<view class="store-box"> |
|
|
|
|
<view class="sort-item" :class="{ active: sortType === 'all' }" @click="handleSortType('all')"> |
|
|
|
|
<text>综合</text> |
|
|
|
|
<view class="head"> |
|
|
|
|
<view class="header"> |
|
|
|
|
<view class="search"> |
|
|
|
|
<search :tips="options.search ? options.search : '搜索商品'" @event="handleSearch" /> |
|
|
|
|
</view> |
|
|
|
|
<view class="sort-item" :class="{ active: sortType === 'sales' }" @click="handleSortType('sales')"> |
|
|
|
|
<text>销量</text> |
|
|
|
|
</view> |
|
|
|
|
<view class="sort-item sort-item-price" :class="{ active: sortType === 'price' }" |
|
|
|
|
@click="handleSortType('price')"> |
|
|
|
|
<text>价格</text> |
|
|
|
|
<view class="price-arrow"> |
|
|
|
|
<view class="icon up" :class="{ active: sortType === 'price' && !sortPrice }"> |
|
|
|
|
<u-icon name="arrow-up-fill" |
|
|
|
|
:color="!sortPrice&&sortType === 'price'?'#F43B21':'#3C3C3C'" size="17"></u-icon> |
|
|
|
|
</view> |
|
|
|
|
<view class="icon down" :class="{ active: sortType === 'price' && sortPrice }"> |
|
|
|
|
<u-icon name="arrow-down-fill" |
|
|
|
|
:color="sortPrice&&sortType === 'price'?'#F43B21':'#3C3C3C'" size="17"></u-icon> |
|
|
|
|
</view> |
|
|
|
|
<view class="store-sort"> |
|
|
|
|
<template v-if="options.categoryId"> |
|
|
|
|
<view class="goodsban" v-if="tabbar && tabbar.length > 0"> |
|
|
|
|
<scroll-view class="typeList" scroll-x="true"> |
|
|
|
|
<view v-for="(item,index) in tabbar" :key="index" class="bandsImg" @click="onChage(item,1,index)" |
|
|
|
|
:style="{'color':item.category_id==isBanrdActive?'#F43B21':'#5A5A5A','border':item.category_id==isBanrdActive?'1rpx solid #F22029':'1rpx solid #E7E7E7'}"> |
|
|
|
|
<image :src="item.image?item.image.external_url:''" mode="aspectFill"></image> |
|
|
|
|
<view class="typeItem">{{item.name}}</view> |
|
|
|
|
</view> |
|
|
|
|
</scroll-view> |
|
|
|
|
</view> |
|
|
|
|
<view class="goodsType" v-if="goodsType && goodsType.length > 0"> |
|
|
|
|
<scroll-view class="typeList" scroll-x="true"> |
|
|
|
|
<view v-for="(item,index) in goodsType" :key="index" class="typeItem" |
|
|
|
|
@click="onChage(item,2)" |
|
|
|
|
:style="{'color':isActive==item.category_id?'#F43B21':'#5A5A5A','background':isActive==item.category_id?'#FEF6F6':'#F7F8FA','border':isActive==item.category_id?'2rpx solid #F22029':'none'}"> |
|
|
|
|
{{item.name}} |
|
|
|
|
</view> |
|
|
|
|
</scroll-view> |
|
|
|
|
</view> |
|
|
|
|
</template> |
|
|
|
|
<!-- 排序标签 --> |
|
|
|
|
<view class="store-box"> |
|
|
|
|
<view class="sort-item" :class="{ active: sortType === 'all' }" @click="handleSortType('all')"> |
|
|
|
|
<text>综合</text> |
|
|
|
|
</view> |
|
|
|
|
<view class="sort-item" :class="{ active: sortType === 'sales' }" @click="handleSortType('sales')"> |
|
|
|
|
<text>销量</text> |
|
|
|
|
</view> |
|
|
|
|
<view class="sort-item sort-item-price" :class="{ active: sortType === 'price' }" |
|
|
|
|
@click="handleSortType('price')"> |
|
|
|
|
<text>价格</text> |
|
|
|
|
<view class="price-arrow"> |
|
|
|
|
<view class="icon up" :class="{ active: sortType === 'price' && !sortPrice }"> |
|
|
|
|
<u-icon name="arrow-up-fill" |
|
|
|
|
:color="!sortPrice&&sortType === 'price'?'#F43B21':'#3C3C3C'" size="17"></u-icon> |
|
|
|
|
</view> |
|
|
|
|
<view class="icon down" :class="{ active: sortType === 'price' && sortPrice }"> |
|
|
|
|
<u-icon name="arrow-down-fill" |
|
|
|
|
:color="sortPrice&&sortType === 'price'?'#F43B21':'#3C3C3C'" size="17"></u-icon> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view class="sort-item" :class="{ active: sortType === 'city' }" @click="handleSortType('city')"> |
|
|
|
|
<picker mode="selector" @change="multiChange" value="{{multiIndex}}" :range="multiArray" |
|
|
|
|
range-key="name"> |
|
|
|
|
<text>类型</text> |
|
|
|
|
</picker> |
|
|
|
|
<view class="sort-item" :class="{ active: sortType === 'city' }" @click="handleSortType('city')"> |
|
|
|
|
<picker mode="selector" @change="multiChange" value="{{multiIndex}}" :range="multiArray" |
|
|
|
|
range-key="name"> |
|
|
|
|
<text>类型</text> |
|
|
|
|
</picker> |
|
|
|
|
</view> |
|
|
|
|
<!-- <view class="show-view btnOpera" @click="handleShowView"> |
|
|
|
|
<text class="iconfont icon-view-tile" v-if="showView"></text> |
|
|
|
|
<text class="iconfont icon-view-list" v-else></text> |
|
|
|
|
</view> --> |
|
|
|
|
</view> |
|
|
|
|
<!-- <view class="show-view btnOpera" @click="handleShowView"> |
|
|
|
|
<text class="iconfont icon-view-tile" v-if="showView"></text> |
|
|
|
|
<text class="iconfont icon-view-list" v-else></text> |
|
|
|
|
</view> --> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view class="blank"></view> |
|
|
|
|
<!-- 商品列表 --> |
|
|
|
|
<view class="goods-list clearfix" :class="['column-' + (showView ? '1' : '2')]"> |
|
|
|
|
<view v-if="showView"> |
|
|
|
@ -372,9 +374,10 @@ |
|
|
|
|
this.keyName2 = item.name |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
this.list.data = [] |
|
|
|
|
this.$refs.uWaterfall1.clear(); |
|
|
|
|
this.getGoodsList() |
|
|
|
|
this.list.data = [] |
|
|
|
|
this.list = [] |
|
|
|
|
this.mescroll.resetUpScroll() |
|
|
|
|
}, |
|
|
|
|
/** |
|
|
|
|
* 上拉加载的回调 (页面初始化时也会执行一次) |
|
|
|
@ -542,7 +545,18 @@ |
|
|
|
|
::v-deep .u-empty { |
|
|
|
|
padding: 100rpx 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.head{ |
|
|
|
|
width: 100%; |
|
|
|
|
overflow: hidden; |
|
|
|
|
background-color: #fff; |
|
|
|
|
position: fixed; |
|
|
|
|
z-index: 99; |
|
|
|
|
width: 100%; |
|
|
|
|
left: 0; |
|
|
|
|
} |
|
|
|
|
.blank{ |
|
|
|
|
height: 416rpx; |
|
|
|
|
} |
|
|
|
|
// 页面头部 |
|
|
|
|
.header { |
|
|
|
|
background-color: #fff; |
|
|
|
@ -572,12 +586,8 @@ |
|
|
|
|
|
|
|
|
|
// 排序组件 |
|
|
|
|
.store-sort { |
|
|
|
|
position: sticky; |
|
|
|
|
top: var(--window-top); |
|
|
|
|
background-color: #fff; |
|
|
|
|
color: #000; |
|
|
|
|
z-index: 99; |
|
|
|
|
|
|
|
|
|
width: 100%; |
|
|
|
|
.store-box { |
|
|
|
|
display: flex; |
|
|
|
|
padding: 20rpx 0; |
|
|
|
|