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

列表

Browse Source
This commit is contained in:
juguohong
2025-08-30 18:20:50 +08:00
parent 1cb303b86d
commit d92419f3c5
23 changed files with 456 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,10 @@
.list-item {
.listCard {
background: linear-gradient(90deg, rgba(183, 248, 113, 0.5) 0%, rgba(183, 248, 113, 0.1) 100%);
border-radius: 20px;
border-width: 0.5px;
}
.listItem {
display: flex;
padding: 12px 15px;
background: #ffffff;
@@ -247,4 +253,43 @@
width: 100%;
height: 100%;
object-fit: cover;
}
// 底部
.smoothPlayingGame {
padding: 5px 12px;
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
.smoothWrapper,
.localAreaWrapper {
line-height: 18px;
display: flex;
align-items: center;
gap: 5px;
}
.smoothTitle {
font-size: 14px;
}
.line {
height: 8px;
width: 1px;
background: #00000040;
border-radius: 99px;
}
.iconListPlayingGame,
.localArea {
width: 14px;
height: 14px;
}
.localArea {
border: 0.5px solid #FFFFFFA6;
border-radius: 50%;
}
}

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

@@ -1,5 +1,5 @@
import { View, Text, Image } from "@tarojs/components";
import Taro from '@tarojs/taro'
import Taro from "@tarojs/taro";
import img from "../../config/images";
import { ListCardProps } from "../../../types/list/types";
import "./index.scss";
@@ -14,7 +14,7 @@ const ListCard: React.FC<ListCardProps> = ({
maxCount,
skillLevel,
matchType,
images=[],
images = [],
shinei,
}) => {
const renderItemImage = (src: string) => {
@@ -23,9 +23,9 @@ const ListCard: React.FC<ListCardProps> = ({
const handleViewDetail = () => {
Taro.navigateTo({
url: `/pages/detail/index?id=${id || 1}&from=list&autoShare=0`
})
}
url: `/pages/detail/index?id=${id || 1}&from=list&autoShare=0`,
});
};
// 根据图片数量决定展示样式
const renderImages = () => {
@@ -34,9 +34,7 @@ const ListCard: React.FC<ListCardProps> = ({
if (images?.length === 1) {
return (
<View className="single-image">
<View className="image-container">
{renderItemImage(images[0])}
</View>
<View className="image-container">{renderItemImage(images[0])}</View>
</View>
);
}
@@ -44,12 +42,8 @@ const ListCard: React.FC<ListCardProps> = ({
if (images?.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(images[0])}</View>
<View className="image-container">{renderItemImage(images[1])}</View>
</View>
);
}
@@ -64,72 +58,87 @@ const ListCard: React.FC<ListCardProps> = ({
);
};
return (
<View className="list-item" onClick={handleViewDetail}>
{/* 左侧内容区域 */}
<View className="content">
{/* 标题 */}
<View className="titleWrapper">
<Text className="title">{title}</Text>
<Image
src={img.ICON_LIST_RIGHT_ARROW}
className="title-right-arrow"
mode="aspectFit"
/>
</View>
{/* 时间信息 */}
<View className="date-time">
<Text>{dateTime}</Text>
</View>
{/* 地点,室内外,距离 */}
<View className="location">
<Text className="location-text location-position">{location}</Text>
<Text className="location-text location-time-distance">
{shinei && `・${shinei}`}
{distance && `・${distance}`}
</Text>
</View>
{/* 底部信息行：头像组、报名人数、技能等级、比赛类型 */}
<View className="bottom-info">
<View className="left-section">
<View className="avatar-group">
{Array.from({ length: Math.min(registeredCount, 3) }).map(
(_, index) => (
<View key={index} className="avatar">
<Image
className="avatar-image"
src="https://images.unsplash.com/photo-1554068865-24cecd4e34b8?w=200&h=200&fit=crop&crop=center"
mode="aspectFill"
/>
</View>
)
)}
</View>
<View className="listCard">
<View className="listItem" onClick={handleViewDetail}>
{/* 左侧内容区域 */}
<View className="content">
{/* 标题 */}
<View className="titleWrapper">
<Text className="title">{title}</Text>
<Image
src={img.ICON_LIST_RIGHT_ARROW}
className="title-right-arrow"
mode="aspectFit"
/>
</View>
<View className="tags">
<View className="tag">
<Text className="tag-text">
报名人数 {registeredCount}/
<Text className="tag-text-max">{maxCount}</Text>
</Text>
{/* 时间信息 */}
<View className="date-time">
<Text>{dateTime}</Text>
</View>
{/* 地点,室内外,距离 */}
<View className="location">
<Text className="location-text location-position">{location}</Text>
<Text className="location-text location-time-distance">
{shinei && `・${shinei}`}
{distance && `・${distance}`}
</Text>
</View>
{/* 底部信息行：头像组、报名人数、技能等级、比赛类型 */}
<View className="bottom-info">
<View className="left-section">
<View className="avatar-group">
{Array.from({ length: Math.min(registeredCount, 3) }).map(
(_, index) => (
<View key={index} className="avatar">
<Image
className="avatar-image"
src="https://images.unsplash.com/photo-1554068865-24cecd4e34b8?w=200&h=200&fit=crop&crop=center"
mode="aspectFill"
/>
</View>
)
)}
</View>
</View>
<View className="tag">
<Text className="tag-text">{skillLevel}</Text>
</View>
<View className="tag">
<Text className="tag-text">{matchType}</Text>
<View className="tags">
<View className="tag">
<Text className="tag-text">
报名人数 {registeredCount}/
<Text className="tag-text-max">{maxCount}</Text>
</Text>
</View>
<View className="tag">
<Text className="tag-text">{skillLevel}</Text>
</View>
<View className="tag">
<Text className="tag-text">{matchType}</Text>
</View>
</View>
</View>
</View>
{/* 右侧图片区域 */}
<View className="image-section">{renderImages()}</View>
</View>
{/* 畅打球局 */}
<View className="smoothPlayingGame">
<View className="smoothWrapper">
<Image src={img.ICON_LIST_PLAYING_GAME} className="iconListPlayingGame" />
<Text className="smoothTitle">畅打球局</Text>
</View>
<View className="line" />
<View>场馆方:</View>
<View className="localAreaWrapper">
<Image className="localArea" src="https://images.unsplash.com/photo-1554068865-24cecd4e34b8?w=200&h=200&fit=crop&crop=center" />
<Text className="localAreaText">仁恒河滨花园网球场</Text>
</View>
</View>
{/* 右侧图片区域 */}
<View className="image-section">{renderImages()}</View>
</View>
);
};