bimwe/mini-programs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

列表联调

Browse Source
This commit is contained in:
李瑞
2025-09-07 18:54:36 +08:00
parent 2d0d728969
commit 6feb7057af
28 changed files with 1225 additions and 740 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ListCard/index.scss
View File

@@ -51,7 +51,7 @@
}
.location-position {
max-width: 66%;
max-width: 50%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

55
src/components/ListCard/index.tsx
View File

@@ -7,18 +7,23 @@ import "./index.scss";
const ListCard: React.FC<ListCardProps> = ({
id,
title,
dateTime,
venue_description,
start_time,
location,
distance_km,
registeredCount,
maxCount,
skillLevel,
current_players,
max_players,
skill_level_min,
skill_level_max,
play_type,
images = [],
image_list = [],
court_type,
key
}) => {
const renderItemImage = (src: string) => {
return <Image src={src} className="image" mode="aspectFill" />;
return <Image src={src} className="image" mode="aspectFill"
lazyLoad
defaultSource='https://images.unsplash.com/photo-1554068865-24cecd4e34b8?w=200&h=200&fit=crop&crop=center'
/>;
};
const handleViewDetail = () => {
@@ -30,21 +35,21 @@ const ListCard: React.FC<ListCardProps> = ({
// 根据图片数量决定展示样式
const renderImages = () => {
if (images?.length === 0) return null;
if (image_list?.length === 0) return null;
if (images?.length === 1) {
if (image_list?.length === 1) {
return (
<View className="single-image">
<View className="image-container">{renderItemImage(images[0])}</View>
<View className="image-container">{renderItemImage(image_list?.[0])}</View>
</View>
);
}
if (images?.length === 2) {
if (image_list?.length === 2) {
return (
<View className="double-image">
<View className="image-container">{renderItemImage(images[0])}</View>
<View className="image-container">{renderItemImage(images[1])}</View>
<View className="image-container">{renderItemImage(image_list?.[0])}</View>
<View className="image-container">{renderItemImage(image_list?.[1])}</View>
</View>
);
}
@@ -52,14 +57,14 @@ const ListCard: React.FC<ListCardProps> = ({
// 3张或更多图片
return (
<View className="triple-image">
<View className="image-container">{renderItemImage(images?.[0])}</View>
<View className="image-container">{renderItemImage(images?.[1])}</View>
<View className="image-container">{renderItemImage(images?.[2])}</View>
<View className="image-container">{renderItemImage(image_list?.[0])}</View>
<View className="image-container">{renderItemImage(image_list?.[1])}</View>
<View className="image-container">{renderItemImage(image_list?.[2])}</View>
</View>
);
};
return (
<View className="listCard">
<View className="listCard" key={key}>
<View className="listItem" onClick={handleViewDetail}>
{/* 左侧内容区域 */}
<View className="content">
@@ -75,17 +80,17 @@ const ListCard: React.FC<ListCardProps> = ({
{/* 时间信息 */}
<View className="date-time">
<Text>{dateTime}</Text>
<Text>{start_time}</Text>
</View>
{/* 地点,室内外,距离 */}
<View className="location">
{venue_description &&
<Text className="location-text location-position">{venue_description}</Text>}
{location &&
<Text className="location-text location-position">{location}</Text>}
<Text className="location-text location-time-distance">
{court_type && `・${court_type}`}
{distance_km && `・${distance_km}`}
{distance_km && `・${distance_km}km`}
</Text>
</View>
@@ -93,7 +98,7 @@ const ListCard: React.FC<ListCardProps> = ({
<View className="bottom-info">
<View className="left-section">
<View className="avatar-group">
{Array.from({ length: Math.min(registeredCount, 3) }).map(
{Array.from({ length: 3 }).map(
(_, index) => (
<View key={index} className="avatar">
<Image
@@ -110,12 +115,12 @@ const ListCard: React.FC<ListCardProps> = ({
<View className="tags">
<View className="tag">
<Text className="tag-text">
报名人数 {registeredCount}/
<Text className="tag-text-max">{maxCount}</Text>
报名人数 {current_players}/
<Text className="tag-text-max">{max_players}</Text>
</Text>
</View>
<View className="tag">
<Text className="tag-text">{skill_level_max} zh {skill_level_max}</Text>
<Text className="tag-text">{skill_level_min} 至 {skill_level_max}</Text>
</View>
{play_type && <View className="tag">
<Text className="tag-text">{play_type}</Text>