From 80e8bd71936aa57bd1ab3d7dd8cc24d3001ece32 Mon Sep 17 00:00:00 2001
From: hejianhao <15708179461@qq.com>
Date: 星期五, 06 三月 2026 09:27:54 +0800
Subject: [PATCH] feat(站点搜索): 为历史记录和推荐站点列表添加平滑展开/收起动画
---
src/robotaxi/pages/site-search/index.tsx | 68 +++++++++++++++++++++++++++++++++-
src/robotaxi/pages/site-search/index.less | 7 +++
src/pages/robotaxi/home/index.tsx | 9 ++++
3 files changed, 80 insertions(+), 4 deletions(-)
diff --git a/src/pages/robotaxi/home/index.tsx b/src/pages/robotaxi/home/index.tsx
index 3d2c97f..674d0e4 100644
--- a/src/pages/robotaxi/home/index.tsx
+++ b/src/pages/robotaxi/home/index.tsx
@@ -799,6 +799,13 @@
})
}
if (type == 'end') {
+ if (!currentSite?.id) {
+ Taro.showToast({
+ title: '请先选择起点站点',
+ icon: 'none'
+ });
+ return;
+ }
Taro.setStorageSync('startSite', currentSite);
}
Taro.navigateTo({
@@ -949,7 +956,7 @@
showToolTip && (currentSite.name || !isOperatingArea) && (
<View className="toolTip">
{
- (!isOperatingArea || isAdsorbed) && (
+ ((!isOperatingArea || isAdsorbed) && isAdsorbed && currentSite.id) && (
<View className="toolTip-bg">
<Text className="toolTip-bg-text">{!isOperatingArea ? '不在运营区' : `限停${currentSite.time}分钟`}</Text>
</View>
diff --git a/src/robotaxi/pages/site-search/index.less b/src/robotaxi/pages/site-search/index.less
index b061a84..78f4958 100644
--- a/src/robotaxi/pages/site-search/index.less
+++ b/src/robotaxi/pages/site-search/index.less
@@ -154,6 +154,11 @@
}
+ .list-content {
+ overflow: hidden;
+ transition: max-height 0.3s ease;
+ }
+
.history-card {
border-radius: 16px;
background: #FFFFFF;
@@ -253,4 +258,4 @@
width: 480px;
height: 400px;
}
-}
\ No newline at end of file
+}
diff --git a/src/robotaxi/pages/site-search/index.tsx b/src/robotaxi/pages/site-search/index.tsx
index acb4599..f5c1a97 100644
--- a/src/robotaxi/pages/site-search/index.tsx
+++ b/src/robotaxi/pages/site-search/index.tsx
@@ -22,6 +22,10 @@
const [pageType, setPageType] = useState('') //出发地 start 目的地 end
const [showAllHistory, setShowAllHistory] = useState(false) // 是否展示全部历史记录
const [showAllRecommend, setShowAllRecommend] = useState(false) // 是否展示全部推荐站点
+ const [historyContentHeight, setHistoryContentHeight] = useState(0)
+ const [historyCollapsedHeight, setHistoryCollapsedHeight] = useState(0)
+ const [recommendContentHeight, setRecommendContentHeight] = useState(0)
+ const [recommendCollapsedHeight, setRecommendCollapsedHeight] = useState(0)
const MAX_SHOW_COUNT = 5 // 默认最多显示5条
@@ -222,6 +226,58 @@
const recommendList = siteList.length > 0 ? siteList : nearbySiteList;
+ const historyMaxHeight = showAllHistory ? historyContentHeight : historyCollapsedHeight;
+ const recommendMaxHeight = showAllRecommend ? recommendContentHeight : recommendCollapsedHeight;
+
+ useEffect(() => {
+ if (historySite.length === 0) {
+ setHistoryContentHeight(0);
+ setHistoryCollapsedHeight(0);
+ return;
+ }
+ setTimeout(() => {
+ const query = Taro.createSelectorQuery();
+ query.select('#history-card-content').boundingClientRect();
+ query.selectAll('#history-card-content .history-item').boundingClientRect();
+ query.exec((res) => {
+ const container = res?.[0];
+ const items = res?.[1] || [];
+ if (!container || items.length === 0) return;
+ const top = container.top;
+ const last = items[items.length - 1];
+ const fullHeight = Math.max(0, last.bottom - top);
+ const collapsedIndex = Math.min(MAX_SHOW_COUNT, items.length) - 1;
+ const collapsed = Math.max(0, items[collapsedIndex].bottom - top);
+ setHistoryContentHeight(fullHeight);
+ setHistoryCollapsedHeight(collapsed);
+ });
+ }, 0);
+ }, [historySite.length]);
+
+ useEffect(() => {
+ if (recommendList.length === 0) {
+ setRecommendContentHeight(0);
+ setRecommendCollapsedHeight(0);
+ return;
+ }
+ setTimeout(() => {
+ const query = Taro.createSelectorQuery();
+ query.select('#recommend-card-content').boundingClientRect();
+ query.selectAll('#recommend-card-content .history-item').boundingClientRect();
+ query.exec((res) => {
+ const container = res?.[0];
+ const items = res?.[1] || [];
+ if (!container || items.length === 0) return;
+ const top = container.top;
+ const last = items[items.length - 1];
+ const fullHeight = Math.max(0, last.bottom - top);
+ const collapsedIndex = Math.min(MAX_SHOW_COUNT, items.length) - 1;
+ const collapsed = Math.max(0, items[collapsedIndex].bottom - top);
+ setRecommendContentHeight(fullHeight);
+ setRecommendCollapsedHeight(collapsed);
+ });
+ }, 0);
+ }, [recommendList.length]);
return (
<View className='search-page'>
@@ -249,7 +305,11 @@
historySite.length > 0 &&
<View className='history-card'>
<View className='card-header'>历史记录</View>
- <View className='card-content'>
+ <View
+ className='card-content list-content'
+ id='history-card-content'
+ style={historyMaxHeight ? { maxHeight: `${historyMaxHeight}px` } : undefined}
+ >
{
historySite.map((item, index) => {
return <View onClick={() => onChangeSelectSite(item)} className='history-item' key={item.id || index}>
@@ -278,7 +338,11 @@
recommendList.length > 0 &&
<View className='recommend-card'>
<View className='card-header'>{siteList.length > 0 ? '推荐站点' : '附近站点'}</View>
- <View className='card-content'>
+ <View
+ className='card-content list-content'
+ id='recommend-card-content'
+ style={recommendMaxHeight ? { maxHeight: `${recommendMaxHeight}px` } : undefined}
+ >
{
recommendList.map((item, index) => {
return <View onClick={() => onChangeSelectSite(item)} className='history-item' key={item.id || index}>
--
Gitblit v1.7.1