diff --git a/components/customTab.vue b/components/customTab.vue
index ef96390..3ce94ae 100644
--- a/components/customTab.vue
+++ b/components/customTab.vue
@@ -3,8 +3,7 @@
-
-
-
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{item.mer_name}}
- 月销{{item.sales}}
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+ {{item.mer_name}}
+ 月销{{item.sales}}
+
+
+
+
+
+
-
- {{item.service_score}}
- {{item.distance}}
+ {{item.service_score}}
+ {{item.distance}}
- {{item.category_name}}
-
-
-
- {{item.service_phone}}
-
- {{item.mer_take_time[0]}}-{{item.mer_take_time[1]}}
-
-
-
- {{item.mer_address}}
+ {{item.category_name}}
+
+
+
+ {{item.service_phone}}
+
+ {{item.mer_take_time[0]}}-{{item.mer_take_time[1]}}
+
+
+
+ {{item.mer_address}}
+
-
-
-
-
-
- 暂无商品，看点别的吧
-
+
+
+
+
+ 暂无商品，看点别的吧
+
+
+
+
+
+
+
@@ -276,6 +320,9 @@
bigTypeDomInfo: null,
smallTypeDomInfo: null,
categoryWrapHeight: 0,
+ wrapHeight: 332,
+ isShowSmall: false,
+ scrollTop: 0,
}
},
computed: {
@@ -321,20 +368,49 @@
})
}
},
- onPullDownRefresh() {
- this.initData(true, true);
- },
- onReachBottom() {
- this.initData(false, true);
- },
- onReady() {
- // 获取dom信息
- // this.$util.getDom(this, '.category', (res) => {
- // this.bigTypeDomInfo = res;
- // this.categoryWrapHeight = res.height;
- // });
+ // onPullDownRefresh() {
+ // this.initData(true, true);
+ // },
+ // onReachBottom() {
+ // this.initData(false, true);
+ // },
+
+ watch: {
+ 'where.cate_pid'(newVal, oldVal) {
+ if (newVal && !oldVal) {
+ this.wrapHeight = this.tabsCurr == 2 ? 400 : (332 + 48);
+ this.isShowSmall = true;
+ }
+ if (!newVal && oldVal) {
+ this.wrapHeight = this.tabsCurr == 2 ? 400 : 332;
+ this.isShowSmall = false;
+ }
+ }
},
+
methods: {
+ onAllCategory() {
+ this.$refs.popup.open();
+ },
+
+ scrolltoupper() {
+ this.initData(true, true);
+ },
+
+ onScrollBottom(e) {
+ this.initData(false, true);
+ },
+
+ onScroll(e) {
+ if (this.scrollTop >= e.target.scrollTop) { //上拉
+ this.wrapHeight = this.tabsCurr == 2 ? 400 : 332;
+ if (this.where.cate_pid) this.wrapHeight = this.wrapHeight + 48;
+ } else {
+ this.wrapHeight = 0;
+ }
+ this.scrollTop = e.target.scrollTop;
+ },
+
initData(re = false, stop = false) {
if (!stop) this.getStoreCategory();
if (this.tabsCurr == 2 && this.subCurr == 1) this.storeMerchantList(re, stop);
@@ -405,6 +481,7 @@
this.cate_change = 0;
this.cate_change_children = 0;
if (this.tabsCurr != 2 || (this.tabsCurr == 2 && this.subCurr != 1)) this.where.mer_type = e;
+ this.wrapHeight = this.tabsCurr == 2 ? 400 : this.where.cate_pid ? (332 + 48) : 332;
this.initData(true);
},
changeCate(e) {
@@ -429,10 +506,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 +626,7 @@
.wholeSale-header {
position: sticky;
top: 0;
- z-index: 100;
+ z-index: 90;
margin-bottom: 20rpx;
.wholeSale-header-wrap {
@@ -559,6 +634,10 @@
}
.wholeSale-header-search-wrap {
+ position: sticky;
+ top: calc(82rpx + var(--status-bar-height));
+ transition: height .5s;
+ overflow: hidden;
padding: 30rpx 20rpx 0;
background-color: #fff;
}
@@ -635,15 +714,11 @@
}
}
- .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 +764,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 +812,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;
@@ -772,7 +929,6 @@
.goods_list {
.goods {
- // width: 690rpx;
height: 200rpx;
margin: 20rpx auto;
margin-top: 0;
diff --git a/static/images/loading.gif b/static/images/loading.gif
new file mode 100644
index 0000000..5e1f8fa
Binary files /dev/null and b/static/images/loading.gif differ
diff --git a/utils/mixin.js b/utils/mixin.js
new file mode 100644
index 0000000..949c22e
--- /dev/null
+++ b/utils/mixin.js
@@ -0,0 +1,29 @@
+const mixins = {
+ data() {
+ return {
+ wrapHeight: 'auto',
+ clientY: 0,
+ maxHeight: 0,
+ }
+ },
+
+
+ methods: {
+ // 移动
+ onTouchMove(e) {
+ 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;
+ },
+ }
+}
+export default mixins;
\ No newline at end of file