|
|
@ -1,5 +1,5 @@ |
|
|
<template> |
|
|
<template> |
|
|
<view class="page1"> |
|
|
<view class="page1" :class="{'is-sticky': lastScrollTop>583}"> |
|
|
<view class="swiper-container"> |
|
|
<view class="swiper-container"> |
|
|
<view class="swiper-page" v-if="currentIndex == 0"> |
|
|
<view class="swiper-page" v-if="currentIndex == 0"> |
|
|
<view style="position: relative;height: 545rpx;"> |
|
|
<view style="position: relative;height: 545rpx;"> |
|
|
@ -230,7 +230,7 @@ |
|
|
<view class="daimai-box" style="padding-bottom:180rpx;"> |
|
|
<view class="daimai-box" style="padding-bottom:180rpx;"> |
|
|
|
|
|
|
|
|
<view class="daimai-tab" id="menuList" :class="{'daimai-tab--sticky': lastScrollTop>583}" |
|
|
<view class="daimai-tab" id="menuList" :class="{'daimai-tab--sticky': lastScrollTop>583}" |
|
|
:style="{'top': (navBarHeight+46) + 'px'}"> |
|
|
:style="daimaiTabStyle"> |
|
|
<view class="daimai-tab-item" :class="{'active': checked == 'waimai'}" |
|
|
<view class="daimai-tab-item" :class="{'active': checked == 'waimai'}" |
|
|
@tap="checkTab1('waimai')"> |
|
|
@tap="checkTab1('waimai')"> |
|
|
<view class="daimai-tab-glow"></view> |
|
|
<view class="daimai-tab-glow"></view> |
|
|
@ -269,7 +269,7 @@ |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="title-sort" v-if="(lastScrollTop>300 || getAreaData.id != undefined || putAreaData.id != undefined || checkYongjin)" :class="{'title-sort--sticky': lastScrollTop>583}" |
|
|
<view class="title-sort" v-if="(lastScrollTop>300 || getAreaData.id != undefined || putAreaData.id != undefined || checkYongjin)" :class="{'title-sort--sticky': lastScrollTop>583}" |
|
|
:style="{'top': (navBarHeight+90) + 'px'}"> |
|
|
:style="titleSortStyle"> |
|
|
<view class="sort-member" style="position: relative;"> |
|
|
<view class="sort-member" style="position: relative;"> |
|
|
<view @tap="checkAdd"> |
|
|
<view @tap="checkAdd"> |
|
|
取餐地址 <text style="font-size: 20rpx;">▼</text> |
|
|
取餐地址 <text style="font-size: 20rpx;">▼</text> |
|
|
@ -295,7 +295,7 @@ |
|
|
</view> |
|
|
</view> |
|
|
<view class="sort-text" |
|
|
<view class="sort-text" |
|
|
v-if="getAreaData.id != undefined || putAreaData.id != undefined || checkYongjin" |
|
|
v-if="getAreaData.id != undefined || putAreaData.id != undefined || checkYongjin" |
|
|
:style="{'top': (navBarHeight+140) + 'px'}"> |
|
|
:style="sortTextStyle"> |
|
|
<view class="sort-text-inner"> |
|
|
<view class="sort-text-inner"> |
|
|
<view @tap="searchOrder('delgetarea')" class="guize1-qusong" |
|
|
<view @tap="searchOrder('delgetarea')" class="guize1-qusong" |
|
|
v-if="getAreaData.id != undefined"> |
|
|
v-if="getAreaData.id != undefined"> |
|
|
@ -730,6 +730,17 @@ |
|
|
postList, |
|
|
postList, |
|
|
myCenter |
|
|
myCenter |
|
|
}, |
|
|
}, |
|
|
|
|
|
computed: { |
|
|
|
|
|
daimaiTabStyle() { |
|
|
|
|
|
return { top: (this.navBarHeight + 46) + 'px' }; |
|
|
|
|
|
}, |
|
|
|
|
|
titleSortStyle() { |
|
|
|
|
|
return { top: (this.navBarHeight + 90) + 'px' }; |
|
|
|
|
|
}, |
|
|
|
|
|
sortTextStyle() { |
|
|
|
|
|
return { top: (this.navBarHeight + 140) + 'px' }; |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
filters: { |
|
|
filters: { |
|
|
formatHourMinute(value) { |
|
|
formatHourMinute(value) { |
|
|
if (!value) return ''; |
|
|
if (!value) return ''; |
|
|
@ -768,16 +779,24 @@ |
|
|
}, |
|
|
}, |
|
|
onPageScroll(e) { |
|
|
onPageScroll(e) { |
|
|
const scrollTop = e.scrollTop; |
|
|
const scrollTop = e.scrollTop; |
|
|
const isScrollingUp = scrollTop < this.lastScrollTop; |
|
|
// 原始 scrollTop 走非响应式字段,避免每帧 setData |
|
|
|
|
|
const prev = this._scrollTopRaw || 0; |
|
|
|
|
|
const isScrollingUp = scrollTop < prev; |
|
|
// 向上滑到靠近页面顶部时(背景头图区域),切换到上一个分类 |
|
|
// 向上滑到靠近页面顶部时(背景头图区域),切换到上一个分类 |
|
|
// 门槛用 80px:用户需要明确地滑回头部较大区域,避免误触发 |
|
|
// 门槛用 80px:用户需要明确地滑回头部较大区域,避免误触发 |
|
|
if (isScrollingUp && scrollTop < 80 && !this.isSwitching) { |
|
|
if (isScrollingUp && scrollTop < 80 && !this.isSwitching) { |
|
|
const currIdx = this.menuList.findIndex(m => m.checked); |
|
|
const currIdx = this.menuList ? this.menuList.findIndex(m => m.checked) : -1; |
|
|
if (currIdx > 0) { |
|
|
if (currIdx > 0) { |
|
|
this._switchCategory(currIdx - 1); |
|
|
this._switchCategory(currIdx - 1); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
this.lastScrollTop = scrollTop; |
|
|
this._scrollTopRaw = scrollTop; |
|
|
|
|
|
// 模板里只关心 >300 / >583 两个布尔判断,所以把 lastScrollTop 阶段化: |
|
|
|
|
|
// <300 → 0;300~583 → 400;>583 → 600,确保跨阶段时才触发一次 setData |
|
|
|
|
|
const stage = scrollTop > 583 ? 600 : (scrollTop > 300 ? 400 : 0); |
|
|
|
|
|
if (stage !== this.lastScrollTop) { |
|
|
|
|
|
this.lastScrollTop = stage; |
|
|
|
|
|
} |
|
|
}, |
|
|
}, |
|
|
onReachBottom() { |
|
|
onReachBottom() { |
|
|
if (this.searchForm.pageNum < this.total) { |
|
|
if (this.searchForm.pageNum < this.total) { |
|
|
@ -797,7 +816,7 @@ |
|
|
setTimeout(() => { |
|
|
setTimeout(() => { |
|
|
const query = uni.createSelectorQuery().in(this); |
|
|
const query = uni.createSelectorQuery().in(this); |
|
|
query.select('#menuList').boundingClientRect(rect => { |
|
|
query.select('#menuList').boundingClientRect(rect => { |
|
|
if (rect) this.menuListOffsetTop = rect.top + this.lastScrollTop; |
|
|
if (rect) this.menuListOffsetTop = rect.top + (this._scrollTopRaw || 0); |
|
|
}).exec(); |
|
|
}).exec(); |
|
|
}, 500); |
|
|
}, 500); |
|
|
}, |
|
|
}, |
|
|
@ -1170,7 +1189,7 @@ |
|
|
this.tui.request("/app/shopArea/getByParentId/0", "get", {}, false, false).then((res) => { |
|
|
this.tui.request("/app/shopArea/getByParentId/0", "get", {}, false, false).then((res) => { |
|
|
if (res.code == 200) { |
|
|
if (res.code == 200) { |
|
|
this.areaList = res.result |
|
|
this.areaList = res.result |
|
|
this.$refs.areaPopup.open() |
|
|
this.$refs.areaPopup.open(); |
|
|
} else { |
|
|
} else { |
|
|
this.tui.toast(res.message) |
|
|
this.tui.toast(res.message) |
|
|
} |
|
|
} |
|
|
@ -1301,7 +1320,7 @@ |
|
|
query.select('#menuList').boundingClientRect(rect => { |
|
|
query.select('#menuList').boundingClientRect(rect => { |
|
|
if (!rect) return; |
|
|
if (!rect) return; |
|
|
const stickyTop = this.navBarHeight + 46; |
|
|
const stickyTop = this.navBarHeight + 46; |
|
|
const target = rect.top + this.lastScrollTop - stickyTop; |
|
|
const target = rect.top + (this._scrollTopRaw || 0) - stickyTop; |
|
|
uni.pageScrollTo({ |
|
|
uni.pageScrollTo({ |
|
|
scrollTop: target > 0 ? target : 0, |
|
|
scrollTop: target > 0 ? target : 0, |
|
|
duration: 260 |
|
|
duration: 260 |
|
|
@ -1372,6 +1391,16 @@ |
|
|
radial-gradient(circle at 90% 36%, rgba(255, 216, 168, 0.26) 0, rgba(255, 216, 168, 0) 260rpx); |
|
|
radial-gradient(circle at 90% 36%, rgba(255, 216, 168, 0.26) 0, rgba(255, 216, 168, 0) 260rpx); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* 吸顶后上方区域不可见,暂停所有 infinite 动画,降低主线程合成压力 */ |
|
|
|
|
|
.page1.is-sticky .like-content-box::before, |
|
|
|
|
|
.page1.is-sticky .like-left, |
|
|
|
|
|
.page1.is-sticky .like-hot-gif, |
|
|
|
|
|
.page1.is-sticky .list-type, |
|
|
|
|
|
.page1.is-sticky .list-total text, |
|
|
|
|
|
.page1.is-sticky .group-cta { |
|
|
|
|
|
animation-play-state: paused !important; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.swiper-container { |
|
|
.swiper-container { |
|
|
|
|
|
|
|
|
width: 100%; |
|
|
width: 100%; |
|
|
@ -2004,6 +2033,10 @@ |
|
|
border-radius: 34rpx; |
|
|
border-radius: 34rpx; |
|
|
margin: 22rpx auto 0; |
|
|
margin: 22rpx auto 0; |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
|
|
|
contain: content; |
|
|
|
|
|
will-change: transform; |
|
|
|
|
|
transform: translateZ(0); |
|
|
|
|
|
backface-visibility: hidden; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.daoda-time { |
|
|
.daoda-time { |
|
|
@ -2487,6 +2520,9 @@ |
|
|
|
|
|
|
|
|
.delivery-list-wrap { |
|
|
.delivery-list-wrap { |
|
|
height: 1200rpx; |
|
|
height: 1200rpx; |
|
|
|
|
|
contain: layout paint; |
|
|
|
|
|
will-change: transform; |
|
|
|
|
|
-webkit-overflow-scrolling: touch; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.empty-delivery { |
|
|
.empty-delivery { |
|
|
|