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