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" /> <!-- 流水瀑布 -->
<loadmore :type="isLoading"></loadmore> <WaterfallsFlow :wfList='hostProduct' @itemTap="goDetail" :type="0" />
<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,32 +336,31 @@
<!-- 顶部 --> <!-- 顶部 -->
<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 style="display: flex;padding: 20rpx 28rpx;background-color: #40af37;color: #fff;justify-content: space-between;">
style="display: flex;padding: 20rpx 28rpx;background-color: #40af37;color: #fff;justify-content: space-between;"> <view style="display: flex;font-weight: bold;font-size: 32rpx;"><u-icon style="margin-right: 20rpx;"
<view style="display: flex;font-weight: bold;font-size: 32rpx;"><u-icon style="margin-right: 20rpx;" name="arrow-left" size="20" color="#fff" @click="navBack"></u-icon>供销综合云市场</view>
name="arrow-left" size="20" color="#fff" @click="navBack"></u-icon>供销综合云市场</view> <view style="display: flex;position: relative;" @click="changeMap">
<view style="display: flex;position: relative;" @click="changeMap"> <view
<view style="width: 250rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: right;">
style="width: 250rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: right;"> {{street}}
{{street}} </view>
</view> <u-icon name="arrow-down" size="14" color="#fff"></u-icon>
<u-icon name="arrow-down" size="14" color="#fff"></u-icon> <view class="position-address" v-if="isShowAddress" @click.stop="">
<view class="position-address" v-if="isShowAddress" @click.stop=""> <u-icon class="icon" name="close" size="14" @click="closeShowAddress" color="#fff"></u-icon>
<u-icon class="icon" name="close" size="14" @click="closeShowAddress" color="#fff"></u-icon> <view class="title">
<view class="title"> <view>开启定位服务</view>
<view>开启定位服务</view> <view>查看附近商铺</view>
<view>查看附近商铺</view>
</view>
<view class="btn" @click.stop="getLocation">立即开启</view>
</view> </view>
<view class="btn" @click.stop="getLocation">立即开启</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,51 +396,55 @@
</view> </view>
<!-- 列表 --> <!-- 列表 -->
<view class="goods_list"> <scroll-view :scroll-y="true" @scrolltolower="onScrollBottom" @scroll="onScroll" style="height: 100%;"
<view class="goods" v-for="(item, index) in goodsList" :key="index" @click="goStore(item.mer_id)"> @scrolltoupper="scrolltoupper" :refresher-threshold="0">
<view class="avatar"> <view class="goods_list">
<u--image width="160rpx" height="160rpx" :src="item.mer_avatar" mode="aspectFill"> <view class="goods" v-for="(item, index) in goodsList" :key="index" @click="goStore(item.mer_id)">
<template v-slot:loading> <view class="avatar">
<u-loading-icon color="#999" size="15" /> <u--image width="160rpx" height="160rpx" :src="item.mer_avatar" mode="aspectFill">
</template> <template v-slot:loading>
</u--image> <u-loading-icon color="#999" size="15" />
</view> </template>
<view class="content"> </u--image>
<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>
</view> </view>
<view class="content-two"> <view class="content">
<view class="score"> <view class="content-head">
<view class="star"> <view class="title">{{item.mer_name}}</view>
<view <text style="font-size: 21.03rpx;color: #aaa;"
:style="{width: `${(item.service_score / 5 * 100).toFixed(0)}%`, backgroundImage: `url(${domain}/static/diy/score1${keyColor}.png)`}"> v-if="item.sales>=100">月销{{item.sales}}</text>
</view>
<view class="content-two">
<view class="score">
<view class="star">
<view
:style="{width: `${(item.service_score / 5 * 100).toFixed(0)}%`, backgroundImage: `url(${domain}/static/diy/score1${keyColor}.png)`}">
</view>
</view> </view>
</view> </view>
<text
style="margin-left: 20rpx;color: #FF6D20;font-size: 22.78rpx; ">{{item.service_score}}</text>
<text v-if="item.distance"
style="margin-left: 20rpx;font-size: 21.03rpx;color: #aaa;">{{item.distance}}</text>
<text style="margin-left:20rpx;" class="line1">{{item.category_name}}</text>
</view>
<view class="content-two">
<u--image :showLoading="true" src="/static/images/GXSC/DH.png" width="33.85rpx"
height="33.85rpx"></u--image>
<text> {{item.service_phone}}</text>
<u--image style="margin-left: 28rpx;" v-if="item.mer_take_time" :showLoading="true"
src="/static/images/GXSC/SJ.png" width="33.85rpx" height="33.85rpx"></u--image>
<text v-if="item.mer_take_time">{{item.mer_take_time[0]}}-{{item.mer_take_time[1]}}</text>
</view>
<view class="content-two">
<u--image :showLoading="true" src="/static/images/GXSC/DW.png" width="33.85rpx"
height="33.85rpx"></u--image>
<text class="address">{{item.mer_address}}</text>
</view> </view>
<text
style="margin-left: 20rpx;color: #FF6D20;font-size: 22.78rpx; ">{{item.service_score}}</text>
<text v-if="item.distance"
style="margin-left: 20rpx;font-size: 21.03rpx;color: #aaa;">{{item.distance}}</text>
<text style="margin-left:20rpx;" class="line1">{{item.category_name}}</text>
</view>
<view class="content-two">
<u--image :showLoading="true" src="/static/images/GXSC/DH.png" width="33.85rpx"
height="33.85rpx"></u--image>
<text> {{item.service_phone}}</text>
<u--image style="margin-left: 28rpx;" v-if="item.mer_take_time" :showLoading="true"
src="/static/images/GXSC/SJ.png" width="33.85rpx" height="33.85rpx"></u--image>
<text v-if="item.mer_take_time">{{item.mer_take_time[0]}}-{{item.mer_take_time[1]}}</text>
</view>
<view class="content-two">
<u--image :showLoading="true" src="/static/images/GXSC/DW.png" width="33.85rpx"
height="33.85rpx"></u--image>
<text class="address">{{item.mer_address}}</text>
</view> </view>
</view> </view>
<loadmore :type="isLoading"></loadmore>
</view> </view>
<loadmore :type="isLoading"></loadmore> </scroll-view>
</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;
}, },
} }
} }