mirror of
http://git.coreshop.cn/jianweie/coreshoppro.git
synced 2025-12-06 19:53:27 +08:00
【优化】商品列表显示优化，检索增加吸顶效果。
This commit is contained in:
大灰灰
@@ -4,93 +4,97 @@
|
||||
<u-navbar :title="title" safeAreaInsetTop fixed placeholder @leftClick="goNavigateBack"></u-navbar>
|
||||
|
||||
<!-- 条件筛选 -->
|
||||
<view class="coreshop-justify-center coreshop-bg-white">
|
||||
<fy-dropdown :menuList="menuList" ref="uDropdown">
|
||||
<fy-dropdown-item v-model="comprehensiveDataValue" dropdownKey="synthesis" title="综合" :options="comprehensiveData" @change="comprehensive"></fy-dropdown-item>
|
||||
<fy-dropdown-item v-model="priceSortDataValue" dropdownKey="price" title="价格" :options="priceSortData" @change="priceSort"></fy-dropdown-item>
|
||||
<fy-dropdown-item v-model="salesVolumeDataValue" dropdownKey="sales" title="销量" :options="salesVolumeData" @change="salesVolume"></fy-dropdown-item>
|
||||
<fy-dropdown-item title="其他" dropdownKey="other" :custom="true">
|
||||
<view class="slot-content coreshop-bg-white">
|
||||
<view class="fliter-c coreshop-padding-10">
|
||||
<view class="fliter-item">
|
||||
<view class="fliter-item-title">
|
||||
<view class="fliter-item-title-hd"><view class="fliter-item-title-hd-title">价格区间</view></view>
|
||||
</view>
|
||||
<view class="fliter-i-c coreshop-flex-direction-row">
|
||||
<view class="fic-item"><input class="fic-item-input" type="number" v-model="sPrice" /></view>
|
||||
<view class="fic-item-line"></view>
|
||||
<view class="fic-item"><input class="fic-item-input" type="number" v-model="ePrice" /></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fliter-item" v-if="catList.length > 0">
|
||||
<view class="fliter-item-title">
|
||||
<view class="fliter-item-title-hd"><view class="fliter-item-title-hd-title">分类</view></view>
|
||||
</view>
|
||||
<view class="fliter-i-c coreshop-flex-direction-row">
|
||||
<view v-for="item in catList" :key="item.goodsCatId" v-if="item.goodsCatId && item.name" @click="selectKey('catList', item.goodsCatId)">
|
||||
<view class="fic-item" v-if="!item.isSelect">
|
||||
<view class="fic-item-text two-line">{{ item.name }}</view>
|
||||
</view>
|
||||
<view class="fic-item fic-item-active" v-else-if="item.isSelect">
|
||||
<view class="fic-item-text two-line">{{ item.name }}</view>
|
||||
</view>
|
||||
<u-sticky :offset-top="statusBar" customNavHeight="44">
|
||||
<view class="coreshop-justify-center coreshop-bg-white">
|
||||
<fy-dropdown :menuList="menuList" ref="uDropdown">
|
||||
<fy-dropdown-item v-model="comprehensiveDataValue" dropdownKey="synthesis" title="综合" :options="comprehensiveData" @change="comprehensive"></fy-dropdown-item>
|
||||
<fy-dropdown-item v-model="priceSortDataValue" dropdownKey="price" title="价格" :options="priceSortData" @change="priceSort"></fy-dropdown-item>
|
||||
<fy-dropdown-item v-model="salesVolumeDataValue" dropdownKey="sales" title="销量" :options="salesVolumeData" @change="salesVolume"></fy-dropdown-item>
|
||||
<fy-dropdown-item title="其他" dropdownKey="other" :custom="true">
|
||||
<view class="slot-content coreshop-bg-white">
|
||||
<view class="fliter-c coreshop-padding-10">
|
||||
<view class="fliter-item">
|
||||
<view class="fliter-item-title">
|
||||
<view class="fliter-item-title-hd"><view class="fliter-item-title-hd-title">价格区间</view></view>
|
||||
</view>
|
||||
<view class="fliter-i-c coreshop-flex-direction-row">
|
||||
<view class="fic-item"><input class="fic-item-input" type="number" v-model="sPrice" /></view>
|
||||
<view class="fic-item-line"></view>
|
||||
<view class="fic-item"><input class="fic-item-input" type="number" v-model="ePrice" /></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fliter-item" v-if="brandList.length > 0">
|
||||
<view class="fliter-item-title">
|
||||
<view class="fliter-item-title-hd"><view class="fliter-item-title-hd-title">品牌</view></view>
|
||||
</view>
|
||||
<view class="fliter-i-c coreshop-flex-direction-row">
|
||||
<scroll-view style="max-height: 300px;" :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" show-scrollbar="true">
|
||||
<view v-for="item in brandList" :key="item.id" v-if="item.id && item.name" @click="selectKey('brandList', item.id)">
|
||||
<view class="fliter-item" v-if="catList.length > 0">
|
||||
<view class="fliter-item-title">
|
||||
<view class="fliter-item-title-hd"><view class="fliter-item-title-hd-title">分类</view></view>
|
||||
</view>
|
||||
<view class="fliter-i-c coreshop-flex-direction-row">
|
||||
<view v-for="item in catList" :key="item.goodsCatId" v-if="item.goodsCatId && item.name" @click="selectKey('catList', item.goodsCatId)">
|
||||
<view class="fic-item" v-if="!item.isSelect">
|
||||
<view class="fic-item-text two-line">{{ item.name }}</view>
|
||||
</view>
|
||||
<view class="fic-item fic-item-active" v-if="item.isSelect">
|
||||
<view class="fic-item fic-item-active" v-else-if="item.isSelect">
|
||||
<view class="fic-item-text two-line">{{ item.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fliter-item" v-if="labelList.length > 0">
|
||||
<view class="fliter-item-title">
|
||||
<view class="fliter-item-title-hd"><view class="fliter-item-title-hd-title">标签</view></view>
|
||||
<view class="fliter-item" v-if="brandList.length > 0">
|
||||
<view class="fliter-item-title">
|
||||
<view class="fliter-item-title-hd"><view class="fliter-item-title-hd-title">品牌</view></view>
|
||||
</view>
|
||||
<view class="fliter-i-c coreshop-flex-direction-row">
|
||||
<scroll-view style="max-height: 300px;" :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" show-scrollbar="true">
|
||||
<view v-for="item in brandList" :key="item.id" v-if="item.id && item.name" @click="selectKey('brandList', item.id)">
|
||||
<view class="fic-item" v-if="!item.isSelect">
|
||||
<view class="fic-item-text two-line">{{ item.name }}</view>
|
||||
</view>
|
||||
<view class="fic-item fic-item-active" v-if="item.isSelect">
|
||||
<view class="fic-item-text two-line">{{ item.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fliter-i-c coreshop-flex-direction-row">
|
||||
<view v-for="item in labelList" :key="item.id" v-if="item.id && item.name" @click="selectKey('labelList', item.id)">
|
||||
<view class="fic-item" v-if="!item.isSelect">
|
||||
<view class="fic-item-text two-line">{{ item.name }}</view>
|
||||
</view>
|
||||
<view class="fic-item fic-item-active" v-else-if="item.isSelect">
|
||||
<view class="fic-item-text two-line">{{ item.name }}</view>
|
||||
<view class="fliter-item" v-if="labelList.length > 0">
|
||||
<view class="fliter-item-title">
|
||||
<view class="fliter-item-title-hd"><view class="fliter-item-title-hd-title">标签</view></view>
|
||||
</view>
|
||||
<view class="fliter-i-c coreshop-flex-direction-row">
|
||||
<view v-for="item in labelList" :key="item.id" v-if="item.id && item.name" @click="selectKey('labelList', item.id)">
|
||||
<view class="fic-item" v-if="!item.isSelect">
|
||||
<view class="fic-item-text two-line">{{ item.name }}</view>
|
||||
</view>
|
||||
<view class="fic-item fic-item-active" v-else-if="item.isSelect">
|
||||
<view class="fic-item-text two-line">{{ item.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-category-bottomBox">
|
||||
<view>
|
||||
<u-button size="medium" @click="filterNo()">取消</u-button>
|
||||
</view>
|
||||
<view>
|
||||
<u-button size="medium" type="primary" @click="filterOk()">确定</u-button>
|
||||
<view class="coreshop-category-bottomBox">
|
||||
<view>
|
||||
<u-button size="medium" @click="filterNo()">取消</u-button>
|
||||
</view>
|
||||
<view>
|
||||
<u-button size="medium" type="primary" @click="filterOk()">确定</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</fy-dropdown-item>
|
||||
</fy-dropdown>
|
||||
</view>
|
||||
</fy-dropdown-item>
|
||||
</fy-dropdown>
|
||||
</view>
|
||||
</u-sticky>
|
||||
|
||||
|
||||
<view class="coreshop-margin-left-16 coreshop-margin-right-16 index-goods coreshop-margin-top-10" v-if="goodsList.length > 0">
|
||||
<custom-waterfalls-flow :value="goodsList" @wapperClick="wapperClick" @imageClick="imageClick">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="goods" v-for="(item,index) in goodsList" :key="index" slot="slot{{index}}">
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
|
||||
|
||||
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
||||
<image class="coreshop-image-recommend-tags" src="/static/images/common/recommend.png" v-if="item.isRecommend"></image>
|
||||
<image class="coreshop-image-hot-tags" src="/static/images/common/hot.png" v-if="item.isHot"></image>
|
||||
<image class="coreshop-image-recommend-tags" src="/static/images/common/recommend.png" v-if="item.isRecommend"></image>
|
||||
<image class="coreshop-image-hot-tags" src="/static/images/common/hot.png" v-if="item.isHot"></image>
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
@@ -244,7 +248,10 @@
|
||||
{
|
||||
label: '从大到小',
|
||||
value: 'desc',
|
||||
}]
|
||||
}],
|
||||
statusBar: 0,//状态栏高度
|
||||
customBar: 0,// 状态栏高度 + 导航栏高度
|
||||
navbar: 0,// 自定义标题与胶囊对齐高度
|
||||
};
|
||||
},
|
||||
onPageScroll(e) {
|
||||
@@ -252,7 +259,39 @@
|
||||
},
|
||||
//加载执行
|
||||
onLoad: function (options) {
|
||||
uni.showTabBar();
|
||||
|
||||
uni.getSystemInfo({
|
||||
success: (e) => {
|
||||
// #ifdef MP
|
||||
this.statusBar = e.statusBarHeight
|
||||
this.customBar = e.statusBarHeight + 45
|
||||
if (e.platform === 'android') {
|
||||
this.$store.commit('SET_SYSTEM_IOSANDROID', false)
|
||||
this.customBar = e.statusBarHeight + 50
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
this.statusBar = e.statusBarHeight
|
||||
const custom = wx.getMenuButtonBoundingClientRect()
|
||||
this.customBar = custom.bottom + custom.top - e.statusBarHeight
|
||||
|
||||
this.navbar = (custom.top - e.statusBarHeight) * 2 + custom.height
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-ALIPAY
|
||||
this.statusBar = e.statusBarHeight
|
||||
this.customBar = e.statusBarHeight + e.titleBarHeight
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
console.log('app-plus', e)
|
||||
this.statusBar = e.statusBarHeight
|
||||
this.customBar = e.statusBarHeight + 45
|
||||
// #endif
|
||||
}
|
||||
})
|
||||
|
||||
var where = {};
|
||||
if (options.id) {
|
||||
where.catId = options.id;
|
||||
|
||||
Reference in New Issue
Block a user