修改
This commit is contained in:
1154079537
parent
ed54b94354
commit
1f1392cc1d
@ -334,7 +334,7 @@
|
||||
"style": {
|
||||
"navigationBarTitleText": "里海云仓",
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh": true
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@ -6,59 +6,27 @@
|
||||
.wholeSale {
|
||||
background-color: #f8fafb !important;
|
||||
|
||||
|
||||
|
||||
|
||||
.wholeSale-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
margin-bottom: 20rpx;
|
||||
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 {
|
||||
position: sticky;
|
||||
top: calc(82rpx + var(--status-bar-height));
|
||||
padding: 0rpx 20rpx;
|
||||
background-color: #fff;
|
||||
transition: height .5s;
|
||||
transition: height .7s;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.wholeSale-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.icon {
|
||||
margin-right: 20rpx;
|
||||
@ -101,13 +69,15 @@
|
||||
}
|
||||
|
||||
.category {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
margin-bottom: 20rpx;
|
||||
// padding-right: 70rpx;
|
||||
|
||||
.category-wrap {
|
||||
display: flex;
|
||||
padding-bottom: 20rpx;
|
||||
padding-bottom: 10rpx;
|
||||
|
||||
.category-item {
|
||||
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 {
|
||||
@ -228,7 +216,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 分类区域 -->
|
||||
<view class="wholeSale-section" :style="{height:wrapHeight}">
|
||||
<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}`)"
|
||||
hover-class="none" class="search_content flex_a_c_j_sb">
|
||||
@ -258,8 +246,19 @@
|
||||
</block>
|
||||
</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>
|
||||
|
||||
<!-- 大分类 -->
|
||||
<!-- <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">
|
||||
@ -276,12 +275,15 @@
|
||||
</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%;"
|
||||
@refresherrefresh="refresh">
|
||||
@scrolltoupper="scrolltoupper" :refresher-threshold="0">
|
||||
<view>
|
||||
<!-- 流水瀑布 -->
|
||||
<WaterfallsFlow :wfList='hostProduct' @itemTap="goDetail" :type="0" />
|
||||
<loadmore :type="isLoading"></loadmore>
|
||||
<loadmore :type="isLoading" style="margin-bottom:20rpx ;"></loadmore>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
@ -317,8 +319,8 @@
|
||||
deduction_rate: '', //抵扣比例
|
||||
rand: 1
|
||||
},
|
||||
wrapHeight: 'auto',
|
||||
maxHeight: '',
|
||||
wrapHeight: 300,
|
||||
isShowSmall: false,
|
||||
scrollTop: 0,
|
||||
}
|
||||
},
|
||||
@ -326,20 +328,26 @@
|
||||
this.getStoreCategory();
|
||||
this.getProductslist(true);
|
||||
},
|
||||
onReachBottom() {
|
||||
this.getProductslist();
|
||||
},
|
||||
|
||||
onPageScroll(e) {
|
||||
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: {
|
||||
|
||||
refresh(e) {
|
||||
console.log(e);
|
||||
scrolltoupper() {
|
||||
this.getProductslist(true);
|
||||
},
|
||||
|
||||
onScrollBottom(e) {
|
||||
@ -347,8 +355,9 @@
|
||||
},
|
||||
|
||||
onScroll(e) {
|
||||
if (this.scrollTop > e.target.scrollTop) { //上拉
|
||||
this.wrapHeight = '352rpx';
|
||||
if (this.scrollTop >= e.target.scrollTop) { //上拉
|
||||
this.wrapHeight = 300;
|
||||
if (this.where.cate_pid) this.wrapHeight = this.wrapHeight + 48;
|
||||
} else {
|
||||
this.wrapHeight = 0;
|
||||
}
|
||||
@ -394,11 +403,6 @@
|
||||
if (e == 0) this.where.cate_pid = this.store_category[this.cate_change]
|
||||
.store_category_id; // 如若选中全部, 则取父级id
|
||||
this.getProductslist(true);
|
||||
|
||||
this.$util.getDom(this, '.wholeSale-section', (res) => {
|
||||
this.maxHeight = res.height + 'px';
|
||||
})
|
||||
|
||||
},
|
||||
getStoreCategory() {
|
||||
getStoreCategory(259).then(res => {
|
||||
@ -412,13 +416,6 @@
|
||||
cate_name: '全部',
|
||||
store_category_id: ''
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
this.$util.getDom(this, '.wholeSale-section', (res) => {
|
||||
this.wrapHeight = res.height + 'px';
|
||||
this.maxHeight = res.height;
|
||||
})
|
||||
}, 300)
|
||||
})
|
||||
},
|
||||
getProductslist(reLoad = false) {
|
||||
@ -429,6 +426,7 @@
|
||||
}
|
||||
if (this.isLoading == -1) return;
|
||||
this.isLoading = 1;
|
||||
|
||||
getProductslist(this.where).then(res => {
|
||||
this.where.limit = res.data.limit
|
||||
this.where.page = res.data.page
|
||||
|
||||
@ -6,10 +6,6 @@
|
||||
.wholeSale {
|
||||
background-color: #f8fafb !important;
|
||||
|
||||
.wholeSale-header-wrap {
|
||||
background-color: #40AE36;
|
||||
}
|
||||
|
||||
.wholeSale-header-search-wrap {
|
||||
padding: 30rpx 20rpx 0;
|
||||
background-color: #fff;
|
||||
@ -20,6 +16,7 @@
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
margin-bottom: 20rpx;
|
||||
background-color: #40AE36;
|
||||
|
||||
.scrollview {
|
||||
display: flex;
|
||||
@ -339,7 +336,6 @@
|
||||
|
||||
<!-- 顶部 -->
|
||||
<view class="wholeSale-header">
|
||||
<view class="wholeSale-header-wrap">
|
||||
<!-- 适配不同机 -->
|
||||
<view style="height: var(--status-bar-height);background-color: #40af37;"></view>
|
||||
<view
|
||||
@ -362,9 +358,9 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="wholeSale-header-search-wrap">
|
||||
<!-- 分类区域 -->
|
||||
<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}&shop=true`)"
|
||||
@ -400,6 +396,8 @@
|
||||
</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" v-for="(item, index) in goodsList" :key="index" @click="goStore(item.mer_id)">
|
||||
<view class="avatar">
|
||||
@ -412,7 +410,8 @@
|
||||
<view class="content">
|
||||
<view class="content-head">
|
||||
<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 class="content-two">
|
||||
<view class="score">
|
||||
@ -445,6 +444,7 @@
|
||||
</view>
|
||||
<loadmore :type="isLoading"></loadmore>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
@ -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: {
|
||||
// 移动
|
||||
onTouchMove(e) {
|
||||
// const moveDistance = e.changedTouches[0].clientY - this.clientY;
|
||||
// if (moveDistance > 5) {
|
||||
// this.wrapHeight = this.maxHeight;
|
||||
// } else {
|
||||
// this.wrapHeight = 0;
|
||||
// }
|
||||
console.log(e);
|
||||
const moveDistance = e.changedTouches[0].clientY - this.clientY;
|
||||
if (moveDistance > 5) {
|
||||
this.wrapHeight = '352rpx';
|
||||
} else {
|
||||
this.wrapHeight = 0;
|
||||
}
|
||||
},
|
||||
|
||||
// 开始触摸屏幕
|
||||
onTouchStart(e) {
|
||||
// this.clientY = e.changedTouches[0].clientY;
|
||||
this.clientY = e.changedTouches[0].clientY;
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user