修复 首页 畅打显示问题

This commit is contained in:
张成
2025-11-28 18:27:56 +08:00
parent 1bb293027d
commit eb7c9983f5
2 changed files with 29 additions and 21 deletions

View File

@@ -349,6 +349,7 @@
.localAreaContainer {
display: flex;
flex: 1;
gap: 4px;
}

View File

@@ -59,16 +59,16 @@ const ListCard: React.FC<ListCardProps> = ({
// 处理地点截断,确保固定信息始终显示
const displayLocation = useMemo(() => {
if (!location) return null; // 直接返回 null不渲染
// 获取屏幕宽度,用于计算实际容器宽度
const systemInfo = Taro.getSystemInfoSync();
const screenWidth = systemInfo.windowWidth || 375;
// 容器宽度 = 屏幕宽度 - 左右 padding - 图片区域宽度
const containerWidthPx = screenWidth - 130;
// 计算固定信息宽度
const extraInfo = `${court_type ? `${court_type}` : ''}${distance_km ? `${distance_km}km` : ''}`;
// 估算字符宽度(基于 12px 字体)
const getTextWidth = (text: string) => {
let width = 0;
@@ -81,18 +81,18 @@ const ListCard: React.FC<ListCardProps> = ({
}
return width;
};
const extraWidth = getTextWidth(extraInfo);
const locationWidth = getTextWidth(location);
// 可用宽度 = 容器宽度 - 固定信息宽度 - 省略号宽度18px
const availableWidth = containerWidthPx - extraWidth - 18;
// 如果地点宽度小于可用宽度,不需要截断
if (locationWidth <= availableWidth) {
return location;
}
// 需要截断地点
let maxChars = 0;
let currentWidth = 0;
@@ -105,7 +105,7 @@ const ListCard: React.FC<ListCardProps> = ({
currentWidth += charWidth;
maxChars++;
}
return location.slice(0, maxChars) + '...';
}, [location, court_type, distance_km]);
@@ -242,22 +242,29 @@ const ListCard: React.FC<ListCardProps> = ({
{isShowSmoothPlayingGame && (
<View className="smoothPlayingGame">
<View className="smoothWrapper">
<Image
className="iconListPlayingGame"
src={require("@/static/list/changdaqiuju.png")}
mode="widthFix"
/>
<Image
className="iconListPlayingGame"
src={require("@/static/list/changdaqiuju.png")}
mode="widthFix"
/>
{/* <Text className="smoothTitle">{game_type}</Text> */}
</View>
<View className="line" />
<View className="localAreaContainer">
<View className="localAreaTitle">:</View>
<View className="localAreaWrapper">
<Image className="localArea" src={venueImage} />
<Text className="localAreaText">{venue_description}</Text>
</View>
{
venue_description && (<View className="line" />)
}
{
venue_description &&
(
</View>
<View className="localAreaContainer">
<View className="localAreaTitle">:</View>
<View className="localAreaWrapper">
<Image className="localArea" src={venueImage} />
<Text className="localAreaText">{venue_description}</Text>
</View>
</View>
)
}
</View>
)}
</View>