From 71523744c6029de4f8355a8ffbc44dc449bdb1cf Mon Sep 17 00:00:00 2001 From: "SK-20231103YIXF\\Administrator" <1154079537@qq.com> Date: Mon, 13 May 2024 02:01:20 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E6=8B=89=E9=9A=90=E8=97=8F=E5=88=86?= =?UTF-8?q?=E7=B1=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages.json | 4 +- pages/cloud_warehouse/home/home.vue | 140 +++++++---- pages/cloud_warehouse/market/market.vue | 191 +++++++++++--- pages/cloud_warehouse/specialty/specialty.vue | 238 ++++++++++++++---- pages/whole_sale/index.vue | 150 ++++++++++- 5 files changed, 585 insertions(+), 138 deletions(-) diff --git a/pages.json b/pages.json index 0b107fb..78a0cc2 100644 --- a/pages.json +++ b/pages.json @@ -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" } } diff --git a/pages/cloud_warehouse/home/home.vue b/pages/cloud_warehouse/home/home.vue index 898423a..8ae559f 100644 --- a/pages/cloud_warehouse/home/home.vue +++ b/pages/cloud_warehouse/home/home.vue @@ -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; - } - } - } } @@ -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; diff --git a/pages/cloud_warehouse/market/market.vue b/pages/cloud_warehouse/market/market.vue index dfcbc1d..88ba57c 100644 --- a/pages/cloud_warehouse/market/market.vue +++ b/pages/cloud_warehouse/market/market.vue @@ -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 @@ + + + 全部 + + @@ -367,6 +455,31 @@ + + + + + + 分类 + + + + + + + + {{item.category_name}} + + + + + + @@ -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) { diff --git a/pages/cloud_warehouse/specialty/specialty.vue b/pages/cloud_warehouse/specialty/specialty.vue index af71e24..a9d585a 100644 --- a/pages/cloud_warehouse/specialty/specialty.vue +++ b/pages/cloud_warehouse/specialty/specialty.vue @@ -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 @@ - + + + + 全部 + + @@ -189,11 +274,41 @@ - - - - + + + + + + + + + + + + + + 分类 + + + + + + + + {{item.cate_name}} + + + + + + @@ -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, diff --git a/pages/whole_sale/index.vue b/pages/whole_sale/index.vue index 313095b..5980cbb 100644 --- a/pages/whole_sale/index.vue +++ b/pages/whole_sale/index.vue @@ -38,7 +38,6 @@ - @@ -67,6 +66,10 @@ + + 全部 + + @@ -196,6 +199,54 @@ + + + + + 分类 + + + + + + + + + {{item.cate_name}} + + + + + + {{item.category_name}} + + + + + + + + + @@ -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;