上拉隐藏分类
This commit is contained in:
SK-20231103YIXF\Administrator
parent
b3ae987188
commit
71523744c6
@ -341,7 +341,7 @@
|
||||
"path": "market/market",
|
||||
"style": {
|
||||
"navigationBarTitleText": "供销云市场",
|
||||
"enablePullDownRefresh": true,
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
@ -349,7 +349,7 @@
|
||||
"path": "specialty/specialty",
|
||||
"style": {
|
||||
"navigationBarTitleText": "名优特产",
|
||||
"enablePullDownRefresh": true,
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
.wholeSale-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
z-index: 9;
|
||||
margin-bottom: 20rpx;
|
||||
background-color: #40AE36;
|
||||
}
|
||||
@ -73,7 +73,7 @@
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
margin-bottom: 20rpx;
|
||||
// padding-right: 70rpx;
|
||||
padding-right: 70rpx;
|
||||
|
||||
.category-wrap {
|
||||
display: flex;
|
||||
@ -126,7 +126,7 @@
|
||||
transform: translateY(-50%);
|
||||
height: 100%;
|
||||
background-color: #f3f3f3;
|
||||
z-index: 101;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -165,7 +165,70 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup-wrap {
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
|
||||
.popup-wrap-title {
|
||||
font-size: 36rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.popup-wrap-category {
|
||||
width: 100%;
|
||||
|
||||
.popup-wrap-category-wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.popup-wrap-category-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 20rpx 20rpx 0;
|
||||
|
||||
&:nth-child(5n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-top: 16rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.popup-wrap-category-item-text {
|
||||
width: 120rpx;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-wrap-category-item-active {
|
||||
position: relative;
|
||||
|
||||
.popup-wrap-category-item-img {
|
||||
border: 2px solid #40AE36;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
text {
|
||||
background-color: #40AE36;
|
||||
color: #fff;
|
||||
padding: 2rpx 10rpx 6rpx 10rpx;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wholeSale-con {
|
||||
@ -173,34 +236,6 @@
|
||||
margin: 0 20rpx;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.comprehensive {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 50rpx;
|
||||
|
||||
[class^=comprehensive-] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
text {
|
||||
margin-right: 12rpx;
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
|
||||
.loudou {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
@ -247,18 +282,12 @@
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- <view class="category-all" v-if="store_category.length > 0">
|
||||
<view class="category-all" v-if="store_category.length > 0" @click="onAllCategory">
|
||||
<view style="margin-bottom: 20rpx;">全部</view>
|
||||
<u-icon name="list"></u-icon>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 大分类 -->
|
||||
<!-- <uni-popup ref="popup" type="top" border-radius="10px 10px 0 0">
|
||||
<view></view>
|
||||
</uni-popup> -->
|
||||
|
||||
|
||||
<!-- 商品小分类 -->
|
||||
<view class="cate" v-if="store_category_children.length>1">
|
||||
<scroll-view scroll-x="true">
|
||||
@ -286,6 +315,30 @@
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 弹框大分类 -->
|
||||
<uni-popup ref="popup" type="top" border-radius="10px 10px 0 0" z-index="1000">
|
||||
<view class="popup-wrap">
|
||||
<view style="height: var(--status-bar-height);"></view>
|
||||
<view class="popup-wrap-title">分类</view>
|
||||
<view class="popup-wrap-category">
|
||||
<view class="popup-wrap-category-wrap">
|
||||
<block v-for="(item,index) in store_category" :key="index">
|
||||
<view class="popup-wrap-category-item" :class="{'category-item-active': index==cate_change}"
|
||||
@click="changeCate(index)">
|
||||
<u--image class="popup-wrap-category-item-img" width="108rpx" :src="item.pic"
|
||||
height="108rpx" shape="circle">
|
||||
<template v-slot:loading>
|
||||
<u-loading-icon color="#999" size="15" />
|
||||
</template>
|
||||
</u--image>
|
||||
<text class="popup-wrap-category-item-text">{{item.cate_name}}</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -346,6 +399,10 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onAllCategory() {
|
||||
this.$refs.popup.open();
|
||||
},
|
||||
|
||||
scrolltoupper() {
|
||||
this.getProductslist(true);
|
||||
},
|
||||
@ -382,9 +439,6 @@
|
||||
uni.navigateBack();
|
||||
},
|
||||
|
||||
tabsChange(e) {
|
||||
this.tabsCurr = e;
|
||||
},
|
||||
changeCate(e) {
|
||||
this.cate_change = e;
|
||||
this.store_category_children = [];
|
||||
@ -396,6 +450,8 @@
|
||||
this.cate_change_children = 0;
|
||||
this.where.cate_pid = this.store_category[e].store_category_id;
|
||||
this.getProductslist(true);
|
||||
|
||||
this.$refs.popup && this.$refs.popup.close();
|
||||
},
|
||||
changeChildrenCate(e) {
|
||||
this.cate_change_children = e;
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
.wholeSale-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
z-index: 90;
|
||||
margin-bottom: 20rpx;
|
||||
background-color: #40AE36;
|
||||
}
|
||||
@ -23,8 +23,9 @@
|
||||
top: calc(82rpx + var(--status-bar-height));
|
||||
padding: 0rpx 20rpx;
|
||||
background-color: #fff;
|
||||
transition: height .7s;
|
||||
transition: height .5s;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.wholeSale-nav {
|
||||
display: flex;
|
||||
@ -34,12 +35,50 @@
|
||||
.icon {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.search_content {
|
||||
// margin-bottom: 40rpx;
|
||||
flex: 1;
|
||||
height: 70rpx;
|
||||
padding: 2px 2px 2px 21.05rpx;
|
||||
border-radius: 80rpx;
|
||||
background: #EDEFF2;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
|
||||
.search_content_wrap {
|
||||
width: 100%;
|
||||
|
||||
.icon-sousuo {
|
||||
font-size: 26.32rpx;
|
||||
font-weight: bold;
|
||||
color: #c8c7c6;
|
||||
margin-right: 17.54rpx;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.search_btn {
|
||||
width: 106rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
background: #40AE36;
|
||||
border-radius: 100px;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
margin-bottom: 20rpx;
|
||||
padding-right: 70rpx;
|
||||
|
||||
.category-wrap {
|
||||
display: flex;
|
||||
@ -84,47 +123,91 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-all {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 100%;
|
||||
background-color: #f3f3f3;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-size: 24rpx;
|
||||
border-radius: 4rpx;
|
||||
width: 70rpx;
|
||||
color: #919191;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search_content {
|
||||
// margin-bottom: 40rpx;
|
||||
flex: 1;
|
||||
height: 70rpx;
|
||||
padding: 2px 2px 2px 21.05rpx;
|
||||
border-radius: 80rpx;
|
||||
background: #EDEFF2;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
.popup-wrap {
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
|
||||
.search_content_wrap {
|
||||
.popup-wrap-title {
|
||||
font-size: 36rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.popup-wrap-category {
|
||||
width: 100%;
|
||||
|
||||
.icon-sousuo {
|
||||
font-size: 26.32rpx;
|
||||
font-weight: bold;
|
||||
color: #c8c7c6;
|
||||
margin-right: 17.54rpx;
|
||||
}
|
||||
.popup-wrap-category-wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
input {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
.popup-wrap-category-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 20rpx 20rpx 0;
|
||||
|
||||
.search_btn {
|
||||
width: 106rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
background: #40AE36;
|
||||
border-radius: 100px;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
&:nth-child(5n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-top: 16rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.popup-wrap-category-item-text {
|
||||
width: 120rpx;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-wrap-category-item-active {
|
||||
position: relative;
|
||||
|
||||
.popup-wrap-category-item-img {
|
||||
border: 2px solid #40AE36;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
text {
|
||||
background-color: #40AE36;
|
||||
color: #fff;
|
||||
padding: 2rpx 10rpx 6rpx 10rpx;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.wholeSale-con {
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
@ -314,6 +397,11 @@
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="category-all" v-if="store_category.length > 0" @click="onAllCategory">
|
||||
<view style="margin-bottom: 20rpx;">全部</view>
|
||||
<u-icon name="list"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -367,6 +455,31 @@
|
||||
<loadmore :type="isLoading"></loadmore>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 弹框大分类 -->
|
||||
<uni-popup ref="popup" type="top" border-radius="10px 10px 0 0" z-index="1000">
|
||||
<view class="popup-wrap">
|
||||
<view style="height: var(--status-bar-height);"></view>
|
||||
<view class="popup-wrap-title">分类</view>
|
||||
<view class="popup-wrap-category">
|
||||
<view class="popup-wrap-category-wrap">
|
||||
<block v-for="(item,index) in store_category" :key="index">
|
||||
<view class="popup-wrap-category-item"
|
||||
:class="{'popup-wrap-category-item-active': index==cate_change}"
|
||||
@click="changeCate(index)">
|
||||
<u--image class="popup-wrap-category-item-img" width="108rpx" :src="item.background"
|
||||
height="108rpx" shape="circle">
|
||||
<template v-slot:loading>
|
||||
<u-loading-icon color="#999" size="15" />
|
||||
</template>
|
||||
</u--image>
|
||||
<text class="popup-wrap-category-item-text">{{item.category_name}}</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -418,7 +531,6 @@
|
||||
location: ''
|
||||
},
|
||||
wrapHeight: 300,
|
||||
isShowSmall: false,
|
||||
scrollTop: 0,
|
||||
}
|
||||
},
|
||||
@ -456,6 +568,10 @@
|
||||
// this.storeMerchantList(true);
|
||||
},
|
||||
methods: {
|
||||
onAllCategory() {
|
||||
this.$refs.popup.open();
|
||||
},
|
||||
|
||||
scrolltoupper() {
|
||||
this.storeMerchantList(true);
|
||||
},
|
||||
@ -465,8 +581,6 @@
|
||||
},
|
||||
|
||||
onScroll(e) {
|
||||
console.log(e);
|
||||
|
||||
if (this.scrollTop >= e.target.scrollTop) { //上拉
|
||||
this.wrapHeight = 300;
|
||||
} else {
|
||||
@ -491,13 +605,14 @@
|
||||
navBack() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
tabsChange(e) {
|
||||
this.tabsCurr = e;
|
||||
},
|
||||
|
||||
changeCate(e) {
|
||||
this.cate_change = e;
|
||||
this.where.merchant_category_id = this.store_category[e].merchant_category_id;
|
||||
this.storeMerchantList(true);
|
||||
|
||||
this.$refs.popup && this.$refs.popup.close();
|
||||
this.$forceUpdate();
|
||||
},
|
||||
// 进店
|
||||
goStore(id) {
|
||||
|
||||
@ -5,16 +5,10 @@
|
||||
|
||||
.wholeSale {
|
||||
|
||||
.wholeSale-header-search-wrap {
|
||||
padding: 30rpx 20rpx 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.wholeSale-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
margin-bottom: 20rpx;
|
||||
z-index: 90;
|
||||
background-color: #40AE36;
|
||||
}
|
||||
|
||||
@ -23,8 +17,11 @@
|
||||
top: calc(82rpx + var(--status-bar-height));
|
||||
padding: 0rpx 20rpx;
|
||||
background-color: #fff;
|
||||
transition: height .7s;
|
||||
transition: height .5s;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20rpx;
|
||||
padding-top: 20rpx;
|
||||
z-index: 20;
|
||||
|
||||
.wholeSale-nav {
|
||||
display: flex;
|
||||
@ -34,12 +31,49 @@
|
||||
.icon {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.search_content {
|
||||
flex: 1;
|
||||
height: 70rpx;
|
||||
padding: 2px 2px 2px 21.05rpx;
|
||||
border-radius: 80rpx;
|
||||
background: #EDEFF2;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
|
||||
.search_content_wrap {
|
||||
width: 100%;
|
||||
|
||||
.icon-sousuo {
|
||||
font-size: 26.32rpx;
|
||||
font-weight: bold;
|
||||
color: #c8c7c6;
|
||||
margin-right: 17.54rpx;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.search_btn {
|
||||
width: 106rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
pic: #40AE36;
|
||||
border-radius: 100px;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
margin-bottom: 20rpx;
|
||||
padding-right: 70rpx;
|
||||
|
||||
.category-wrap {
|
||||
display: flex;
|
||||
@ -84,42 +118,88 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-all {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 100%;
|
||||
background-color: #f3f3f3;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-size: 24rpx;
|
||||
border-radius: 4rpx;
|
||||
width: 70rpx;
|
||||
color: #919191;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search_content {
|
||||
// margin-bottom: 40rpx;
|
||||
flex: 1;
|
||||
height: 70rpx;
|
||||
padding: 2px 2px 2px 21.05rpx;
|
||||
border-radius: 80rpx;
|
||||
background: #EDEFF2;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
.popup-wrap {
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
|
||||
.search_content_wrap {
|
||||
width: 100%;
|
||||
|
||||
.icon-sousuo {
|
||||
font-size: 26.32rpx;
|
||||
font-weight: bold;
|
||||
color: #c8c7c6;
|
||||
margin-right: 17.54rpx;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 80%;
|
||||
}
|
||||
.popup-wrap-title {
|
||||
font-size: 36rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.search_btn {
|
||||
width: 106rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
pic: #40AE36;
|
||||
border-radius: 100px;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
.popup-wrap-category {
|
||||
width: 100%;
|
||||
|
||||
.popup-wrap-category-wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.popup-wrap-category-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 20rpx 20rpx 0;
|
||||
|
||||
&:nth-child(5n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-top: 16rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.popup-wrap-category-item-text {
|
||||
width: 120rpx;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-wrap-category-item-active {
|
||||
position: relative;
|
||||
|
||||
.popup-wrap-category-item-img {
|
||||
border: 2px solid #40AE36;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
text {
|
||||
background-color: #40AE36;
|
||||
color: #fff;
|
||||
padding: 2rpx 10rpx 6rpx 10rpx;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -140,7 +220,7 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="wholeSale-section">
|
||||
<view class="wholeSale-section" :style="{height:wrapHeight + 'rpx'}">
|
||||
<view class="wholeSale-nav">
|
||||
<!-- 搜索 -->
|
||||
<view @click="navTo(`/pages/columnGoods/goods_search/index?back=true&searchVal=${where.keyword}`)"
|
||||
@ -171,6 +251,11 @@
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="category-all" v-if="store_category.length > 0" @click="onAllCategory">
|
||||
<view style="margin-bottom: 20rpx;">全部</view>
|
||||
<u-icon name="list"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品小分类 -->
|
||||
@ -189,11 +274,41 @@
|
||||
</view>
|
||||
|
||||
<!-- 内容 -->
|
||||
<view class="wholeSale-con">
|
||||
<!-- 流水瀑布 -->
|
||||
<WaterfallsFlow :wfList='hostProduct' @itemTap="goDetail" :type="0" />
|
||||
<loadmore :type="isLoading"></loadmore>
|
||||
<view class="wholeSale-con" :style="{height:'calc(100vh - '+wrapHeight+'rpx - 142rpx )'}">
|
||||
<scroll-view :scroll-y="true" @scrolltolower="onScrollBottom" @scroll="onScroll" style="height: 100%;"
|
||||
@scrolltoupper="scrolltoupper" :refresher-threshold="0">
|
||||
<view>
|
||||
<!-- 流水瀑布 -->
|
||||
<WaterfallsFlow :wfList='hostProduct' @itemTap="goDetail" :type="0" />
|
||||
<loadmore :type="isLoading"></loadmore>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 弹框大分类 -->
|
||||
<uni-popup ref="popup" type="top" border-radius="10px 10px 0 0" z-index="1000">
|
||||
<view class="popup-wrap">
|
||||
<view style="height: var(--status-bar-height);"></view>
|
||||
<view class="popup-wrap-title">分类</view>
|
||||
<view class="popup-wrap-category">
|
||||
<view class="popup-wrap-category-wrap">
|
||||
<block v-for="(item,index) in store_category" :key="index">
|
||||
<view class="popup-wrap-category-item"
|
||||
:class="{'popup-wrap-category-item-active': index==cate_change}"
|
||||
@click="changeCate(index)">
|
||||
<u--image class="popup-wrap-category-item-img" width="108rpx" :src="item.pic"
|
||||
height="108rpx" shape="circle">
|
||||
<template v-slot:loading>
|
||||
<u-loading-icon color="#999" size="15" />
|
||||
</template>
|
||||
</u--image>
|
||||
<text class="popup-wrap-category-item-text">{{item.cate_name}}</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -225,7 +340,9 @@
|
||||
keyword: '',
|
||||
mer_type: 3, //1-里海云仓, 2-云市场, 3-名优特产
|
||||
sale_type: 1, //1-零售, 2-批发
|
||||
}
|
||||
},
|
||||
wrapHeight: 300,
|
||||
scrollTop: 0,
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
@ -233,15 +350,36 @@
|
||||
this.getProductslist(true);
|
||||
},
|
||||
onReachBottom() {
|
||||
this.getProductslist();
|
||||
// this.getProductslist();
|
||||
},
|
||||
onPageScroll() {
|
||||
uni.$emit('scroll');
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.getProductslist(true);
|
||||
// this.getProductslist(true);
|
||||
},
|
||||
methods: {
|
||||
onAllCategory() {
|
||||
this.$refs.popup.open();
|
||||
},
|
||||
|
||||
scrolltoupper() {
|
||||
this.getProductslist(true);
|
||||
},
|
||||
|
||||
onScrollBottom(e) {
|
||||
this.getProductslist();
|
||||
},
|
||||
|
||||
onScroll(e) {
|
||||
if (this.scrollTop >= e.target.scrollTop) { //上拉
|
||||
this.wrapHeight = 300;
|
||||
} else {
|
||||
this.wrapHeight = 0;
|
||||
}
|
||||
this.scrollTop = e.target.scrollTop;
|
||||
},
|
||||
|
||||
navTo(url) {
|
||||
uni.navigateTo({
|
||||
url: url,
|
||||
@ -258,9 +396,7 @@
|
||||
navBack() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
tabsChange(e) {
|
||||
this.tabsCurr = e;
|
||||
},
|
||||
|
||||
changeCate(e) {
|
||||
this.cate_change = e;
|
||||
this.store_category_children = [{
|
||||
@ -273,6 +409,9 @@
|
||||
this.cate_change_children = 0;
|
||||
this.where.cate_pid = this.store_category[e].store_category_id;
|
||||
this.getProductslist(true);
|
||||
|
||||
this.$refs.popup && this.$refs.popup.close();
|
||||
this.$forceUpdate();
|
||||
},
|
||||
changeChildrenCate(e) {
|
||||
this.cate_change_children = e;
|
||||
@ -281,6 +420,7 @@
|
||||
.store_category_id; // 如若选中全部, 则取父级id
|
||||
this.getProductslist(true);
|
||||
},
|
||||
|
||||
getCategoryIndexList() {
|
||||
getCategoryIndexList({
|
||||
mer_type: this.where.mer_type,
|
||||
|
||||
@ -38,7 +38,6 @@
|
||||
</view>
|
||||
|
||||
<!-- 商品大分类 -->
|
||||
|
||||
<view class="category">
|
||||
<scroll-view scroll-x="true">
|
||||
<view class="category-wrap">
|
||||
@ -67,6 +66,10 @@
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="category-all" v-if="store_category.length > 0" @click="onAllCategory">
|
||||
<view style="margin-bottom: 20rpx;">全部</view>
|
||||
<u-icon name="list"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品小分类 -->
|
||||
@ -196,6 +199,54 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 弹框大分类 -->
|
||||
<uni-popup ref="popup" type="top" border-radius="10px 10px 0 0" z-index="1000">
|
||||
<view class="popup-wrap">
|
||||
<view style="height: var(--status-bar-height);"></view>
|
||||
<view class="popup-wrap-title">分类</view>
|
||||
<view class="popup-wrap-category">
|
||||
<view class="popup-wrap-category-wrap">
|
||||
<block v-for="(item,index) in store_category" :key="index">
|
||||
<view class="popup-wrap-category-item"
|
||||
:class="{'popup-wrap-category-item-active': index==cate_change}"
|
||||
@click="changeCate(index)">
|
||||
<block v-if="subCurr!=1 || (subCurr==1 && tabsCurr!=2)">
|
||||
<u--image class="popup-wrap-category-item-img" width="108rpx" :src="item.pic"
|
||||
height="108rpx" shape="circle">
|
||||
<template v-slot:loading>
|
||||
<u-loading-icon color="#999" size="15" />
|
||||
</template>
|
||||
</u--image>
|
||||
<text class="popup-wrap-category-item-text">{{item.cate_name}}</text>
|
||||
</block>
|
||||
<block v-else>
|
||||
<u--image class="popup-wrap-category-item-img" width="108rpx" :src="item.background"
|
||||
height="108rpx" shape="circle">
|
||||
<template v-slot:loading>
|
||||
<u-loading-icon color="#999" size="15" />
|
||||
</template>
|
||||
</u--image>
|
||||
<text class="popup-wrap-category-item-text">{{item.category_name}}</text>
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
<!-- <block v-for="(item,index) in store_category" :key="index">
|
||||
<view class="popup-wrap-category-item" :class="{'category-item-active': index==cate_change}"
|
||||
@click="changeCate(index)">
|
||||
<u--image class="popup-wrap-category-item-img" width="108rpx" :src="item.pic"
|
||||
height="108rpx" shape="circle">
|
||||
<template v-slot:loading>
|
||||
<u-loading-icon color="#999" size="15" />
|
||||
</template>
|
||||
</u--image>
|
||||
<text class="popup-wrap-category-item-text">{{item.cate_name}}</text>
|
||||
</view>
|
||||
</block> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<!--自定义底部tab栏-->
|
||||
<customTab :newData="newData" :activeRouter="activeRouter"></customTab>
|
||||
</view>
|
||||
@ -335,6 +386,10 @@
|
||||
// });
|
||||
},
|
||||
methods: {
|
||||
onAllCategory() {
|
||||
this.$refs.popup.open();
|
||||
},
|
||||
|
||||
initData(re = false, stop = false) {
|
||||
if (!stop) this.getStoreCategory();
|
||||
if (this.tabsCurr == 2 && this.subCurr == 1) this.storeMerchantList(re, stop);
|
||||
@ -429,10 +484,8 @@
|
||||
}
|
||||
this.getProductslist(true);
|
||||
|
||||
// 获取小分类高度 为了上下滑动隐藏分类
|
||||
// this.$util.getDom(this, '.cate', (res) => {
|
||||
// if (res) this.smallTypeDomInfo = res.data;
|
||||
// })
|
||||
// 关闭popup
|
||||
this.$refs.popup && this.$refs.popup.close();
|
||||
},
|
||||
changeChildrenCate(e) {
|
||||
this.cate_change_children = e;
|
||||
@ -551,7 +604,7 @@
|
||||
.wholeSale-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
z-index: 90;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.wholeSale-header-wrap {
|
||||
@ -637,13 +690,14 @@
|
||||
|
||||
.category_wrap {
|
||||
overflow: hidden;
|
||||
// transition: height 1s;
|
||||
}
|
||||
|
||||
.category {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
margin-bottom: 20rpx;
|
||||
position: relative;
|
||||
padding-right: 70rpx;
|
||||
|
||||
.category-wrap {
|
||||
display: flex;
|
||||
@ -689,6 +743,24 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-all {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 100%;
|
||||
background-color: #f3f3f3;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-size: 24rpx;
|
||||
border-radius: 4rpx;
|
||||
width: 70rpx;
|
||||
color: #919191;
|
||||
}
|
||||
}
|
||||
|
||||
.cate {
|
||||
@ -719,6 +791,70 @@
|
||||
}
|
||||
}
|
||||
|
||||
.popup-wrap {
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
|
||||
.popup-wrap-title {
|
||||
font-size: 36rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.popup-wrap-category {
|
||||
width: 100%;
|
||||
|
||||
.popup-wrap-category-wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.popup-wrap-category-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 20rpx 20rpx 0;
|
||||
|
||||
&:nth-child(5n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-top: 16rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.popup-wrap-category-item-text {
|
||||
width: 120rpx;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-wrap-category-item-active {
|
||||
position: relative;
|
||||
|
||||
.popup-wrap-category-item-img {
|
||||
border: 2px solid #40AE36;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
text {
|
||||
background-color: #40AE36;
|
||||
color: #fff;
|
||||
padding: 2rpx 10rpx 6rpx 10rpx;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comprehensive {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user