This commit is contained in:
1154079537 2024-05-11 16:55:28 +08:00
parent ed54b94354
commit 1f1392cc1d
4 changed files with 140 additions and 152 deletions

View File

@ -334,7 +334,7 @@
"style": { "style": {
"navigationBarTitleText": "里海云仓", "navigationBarTitleText": "里海云仓",
"navigationStyle": "custom", "navigationStyle": "custom",
"enablePullDownRefresh": true "enablePullDownRefresh": false
} }
}, },
{ {

View File

@ -6,59 +6,27 @@
.wholeSale { .wholeSale {
background-color: #f8fafb !important; background-color: #f8fafb !important;
.wholeSale-header { .wholeSale-header {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 100; z-index: 100;
margin-bottom: 20rpx; margin-bottom: 20rpx;
background-color: #40AE36; background-color: #40AE36;
.scrollview {
display: flex;
align-items: center;
height: 98rpx;
padding-left: 32rpx;
.scrollview-item {
margin-right: 30rpx;
font-size: 28rpx;
color: #FFFFFF;
}
.scrollview-active {
position: relative;
font-weight: bold;
font-size: 36rpx;
color: #FFFFFF;
&::after {
content: "";
display: inline-block;
position: absolute;
bottom: -6rpx;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 6rpx;
background-color: #FFFFFF;
}
}
}
} }
.wholeSale-section { .wholeSale-section {
position: sticky;
top: calc(82rpx + var(--status-bar-height));
padding: 0rpx 20rpx; padding: 0rpx 20rpx;
background-color: #fff; background-color: #fff;
transition: height .5s; transition: height .7s;
overflow: hidden; overflow: hidden;
margin-bottom: 20rpx;
.wholeSale-nav { .wholeSale-nav {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 20rpx; padding-bottom: 20rpx;
.icon { .icon {
margin-right: 20rpx; margin-right: 20rpx;
@ -101,13 +69,15 @@
} }
.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;
padding-bottom: 20rpx; padding-bottom: 10rpx;
.category-item { .category-item {
display: flex; display: flex;
@ -148,6 +118,24 @@
} }
} }
} }
.category-all {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 100%;
background-color: #f3f3f3;
z-index: 101;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 24rpx;
border-radius: 4rpx;
width: 70rpx;
color: #919191;
}
} }
.cate { .cate {
@ -228,7 +216,7 @@
</view> </view>
<!-- 分类区域 --> <!-- 分类区域 -->
<view class="wholeSale-section" :style="{height:wrapHeight}"> <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}`)"
hover-class="none" class="search_content flex_a_c_j_sb"> hover-class="none" class="search_content flex_a_c_j_sb">
@ -258,8 +246,19 @@
</block> </block>
</view> </view>
</scroll-view> </scroll-view>
<!-- <view class="category-all" v-if="store_category.length > 0">
<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"> <view class="cate" v-if="store_category_children.length>1">
<scroll-view scroll-x="true"> <scroll-view scroll-x="true">
@ -276,12 +275,15 @@
</view> </view>
<!-- 内容 --> <!-- 内容 -->
<view class="wholeSale-con"> <view class="wholeSale-con"
:style="{height:'calc(100vh - '+wrapHeight+'rpx - 142rpx '+(isShowSmall?' - 48rpx':'')+')'}">
<scroll-view :scroll-y="true" @scrolltolower="onScrollBottom" @scroll="onScroll" style="height: 100%;" <scroll-view :scroll-y="true" @scrolltolower="onScrollBottom" @scroll="onScroll" style="height: 100%;"
@refresherrefresh="refresh"> @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" style="margin-bottom:20rpx ;"></loadmore>
</view>
</scroll-view> </scroll-view>
</view> </view>
</view> </view>
@ -317,8 +319,8 @@
deduction_rate: '', // deduction_rate: '', //
rand: 1 rand: 1
}, },
wrapHeight: 'auto', wrapHeight: 300,
maxHeight: '', isShowSmall: false,
scrollTop: 0, scrollTop: 0,
} }
}, },
@ -326,20 +328,26 @@
this.getStoreCategory(); this.getStoreCategory();
this.getProductslist(true); this.getProductslist(true);
}, },
onReachBottom() {
this.getProductslist();
},
onPageScroll(e) { onPageScroll(e) {
uni.$emit('scroll'); uni.$emit('scroll');
}, },
onPullDownRefresh() {
this.getProductslist(true); watch: {
'where.cate_pid'(newVal, oldVal) {
if (newVal && !oldVal) {
this.wrapHeight = 300 + 48;
this.isShowSmall = true;
}
if (!newVal && oldVal) {
this.wrapHeight = 300;
this.isShowSmall = false;
}
}
}, },
methods: { methods: {
scrolltoupper() {
refresh(e) { this.getProductslist(true);
console.log(e);
}, },
onScrollBottom(e) { onScrollBottom(e) {
@ -347,8 +355,9 @@
}, },
onScroll(e) { onScroll(e) {
if (this.scrollTop > e.target.scrollTop) { // if (this.scrollTop >= e.target.scrollTop) { //
this.wrapHeight = '352rpx'; this.wrapHeight = 300;
if (this.where.cate_pid) this.wrapHeight = this.wrapHeight + 48;
} else { } else {
this.wrapHeight = 0; this.wrapHeight = 0;
} }
@ -394,11 +403,6 @@
if (e == 0) this.where.cate_pid = this.store_category[this.cate_change] if (e == 0) this.where.cate_pid = this.store_category[this.cate_change]
.store_category_id; // , id .store_category_id; // , id
this.getProductslist(true); this.getProductslist(true);
this.$util.getDom(this, '.wholeSale-section', (res) => {
this.maxHeight = res.height + 'px';
})
}, },
getStoreCategory() { getStoreCategory() {
getStoreCategory(259).then(res => { getStoreCategory(259).then(res => {
@ -412,13 +416,6 @@
cate_name: '全部', cate_name: '全部',
store_category_id: '' store_category_id: ''
}) })
setTimeout(() => {
this.$util.getDom(this, '.wholeSale-section', (res) => {
this.wrapHeight = res.height + 'px';
this.maxHeight = res.height;
})
}, 300)
}) })
}, },
getProductslist(reLoad = false) { getProductslist(reLoad = false) {
@ -429,6 +426,7 @@
} }
if (this.isLoading == -1) return; if (this.isLoading == -1) return;
this.isLoading = 1; this.isLoading = 1;
getProductslist(this.where).then(res => { getProductslist(this.where).then(res => {
this.where.limit = res.data.limit this.where.limit = res.data.limit
this.where.page = res.data.page this.where.page = res.data.page

View File

@ -6,10 +6,6 @@
.wholeSale { .wholeSale {
background-color: #f8fafb !important; background-color: #f8fafb !important;
.wholeSale-header-wrap {
background-color: #40AE36;
}
.wholeSale-header-search-wrap { .wholeSale-header-search-wrap {
padding: 30rpx 20rpx 0; padding: 30rpx 20rpx 0;
background-color: #fff; background-color: #fff;
@ -20,6 +16,7 @@
top: 0; top: 0;
z-index: 100; z-index: 100;
margin-bottom: 20rpx; margin-bottom: 20rpx;
background-color: #40AE36;
.scrollview { .scrollview {
display: flex; display: flex;
@ -339,7 +336,6 @@
<!-- 顶部 --> <!-- 顶部 -->
<view class="wholeSale-header"> <view class="wholeSale-header">
<view class="wholeSale-header-wrap">
<!-- 适配不同机 --> <!-- 适配不同机 -->
<view style="height: var(--status-bar-height);background-color: #40af37;"></view> <view style="height: var(--status-bar-height);background-color: #40af37;"></view>
<view <view
@ -362,9 +358,9 @@
</view> </view>
</view> </view>
</view> </view>
</view>
<view class="wholeSale-header-search-wrap"> <!-- 分类区域 -->
<view class="wholeSale-section" :style="{height:wrapHeight + 'rpx'}">
<view class="wholeSale-nav"> <view class="wholeSale-nav">
<view <view
@click="navTo(`/pages/columnGoods/goods_search/index?back=true&searchVal=${where.keyword}&shop=true`)" @click="navTo(`/pages/columnGoods/goods_search/index?back=true&searchVal=${where.keyword}&shop=true`)"
@ -400,6 +396,8 @@
</view> </view>
<!-- 列表 --> <!-- 列表 -->
<scroll-view :scroll-y="true" @scrolltolower="onScrollBottom" @scroll="onScroll" style="height: 100%;"
@scrolltoupper="scrolltoupper" :refresher-threshold="0">
<view class="goods_list"> <view class="goods_list">
<view class="goods" v-for="(item, index) in goodsList" :key="index" @click="goStore(item.mer_id)"> <view class="goods" v-for="(item, index) in goodsList" :key="index" @click="goStore(item.mer_id)">
<view class="avatar"> <view class="avatar">
@ -412,7 +410,8 @@
<view class="content"> <view class="content">
<view class="content-head"> <view class="content-head">
<view class="title">{{item.mer_name}}</view> <view class="title">{{item.mer_name}}</view>
<text style="font-size: 21.03rpx;color: #aaa;" v-if="item.sales>=100">月销{{item.sales}}</text> <text style="font-size: 21.03rpx;color: #aaa;"
v-if="item.sales>=100">月销{{item.sales}}</text>
</view> </view>
<view class="content-two"> <view class="content-two">
<view class="score"> <view class="score">
@ -445,6 +444,7 @@
</view> </view>
<loadmore :type="isLoading"></loadmore> <loadmore :type="isLoading"></loadmore>
</view> </view>
</scroll-view>
</view> </view>
</template> </template>

View File

@ -7,32 +7,22 @@ const mixins = {
} }
}, },
watch: {
'where.cate_pid'(newVal, oldVal) {
// if (newVal && !oldVal) {
// this.wrapHeight = this.wrapHeight + 24;
// this.maxHeight = this.wrapHeight;
// }
// if (!newVal && oldVal) {
// this.wrapHeight = this.wrapHeight - 24;
// this.maxHeight = this.wrapHeight;
// }
}
},
methods: { methods: {
// 移动 // 移动
onTouchMove(e) { onTouchMove(e) {
// const moveDistance = e.changedTouches[0].clientY - this.clientY; console.log(e);
// if (moveDistance > 5) { const moveDistance = e.changedTouches[0].clientY - this.clientY;
// this.wrapHeight = this.maxHeight; if (moveDistance > 5) {
// } else { this.wrapHeight = '352rpx';
// this.wrapHeight = 0; } else {
// } this.wrapHeight = 0;
}
}, },
// 开始触摸屏幕 // 开始触摸屏幕
onTouchStart(e) { onTouchStart(e) {
// this.clientY = e.changedTouches[0].clientY; this.clientY = e.changedTouches[0].clientY;
}, },
} }
} }