wangmingchuan
/
yanzong_qianduan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

商品列表

Browse Source
main
shuxiaoquan 8 months ago
parent 849b0ee66b
commit e877b1f291
1 changed files with 74 additions and 64 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 138
      pages/goods/list.vue

138
pages/goods/list.vue
Unescape View File

@ -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 class="head">
<view class="header">
<view class="search">
<search :tips="options.search ? options.search : '搜索商品'" @event="handleSearch" />
</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 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 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="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>
<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;

Write Preview
Loading…
Cancel
Save