任务、消息
This commit is contained in:
@@ -0,0 +1,27 @@
|
|||||||
|
.activity-card {
|
||||||
|
.type-badge.activity {
|
||||||
|
background: #e8fff0;
|
||||||
|
color: #07c160;
|
||||||
|
font-size: 22px;
|
||||||
|
padding: 4px 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.participants-count {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #646566;
|
||||||
|
}
|
||||||
|
.progress-bar-wrap {
|
||||||
|
margin: 16px 0 8px;
|
||||||
|
height: 8px;
|
||||||
|
background: #f2f3f5;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
.progress-bar {
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, #07c160, #1989fa);
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: width 0.3s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
import type { Task } from '@/types/task'
|
||||||
|
import { View, Text, Image } from '@tarojs/components'
|
||||||
|
import './index.less'
|
||||||
|
|
||||||
|
interface Props { task: Task }
|
||||||
|
|
||||||
|
export default function ActivityCard({ task }: Props) {
|
||||||
|
const progress = task.maxParticipants
|
||||||
|
? Math.round(((task.participants || 0) / task.maxParticipants) * 100)
|
||||||
|
: 0
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View className='task-card activity-card'>
|
||||||
|
<View className='card-top'>
|
||||||
|
<View className='task-info'>
|
||||||
|
<View className='task-type-row'>
|
||||||
|
<Text className='type-badge activity'>校园活动</Text>
|
||||||
|
<Text className='participants-count'>👥 {task.participants}/{task.maxParticipants}人</Text>
|
||||||
|
</View>
|
||||||
|
<Text className='task-title'>{task.title}</Text>
|
||||||
|
<Text className='task-desc'>{task.desc}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
{/* 参与进度条 */}
|
||||||
|
{task.maxParticipants && (
|
||||||
|
<View className='progress-bar-wrap'>
|
||||||
|
<View className='progress-bar' style={{ width: `${progress}%` }} />
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
<View className='card-bottom'>
|
||||||
|
<View className='publisher'>
|
||||||
|
<Image className='pub-avatar' src={task.publisher.avatar} mode='aspectFill' />
|
||||||
|
<Text className='pub-name'>{task.publisher.name}</Text>
|
||||||
|
</View>
|
||||||
|
<View className='task-meta'>
|
||||||
|
<Text className='meta-item'>📍 {task.location}</Text>
|
||||||
|
<Text className='meta-item'>🕐 {task.time}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
.carpool-card {
|
||||||
|
.type-badge.carpool {
|
||||||
|
background: #f0e8ff;
|
||||||
|
color: #7b4ac7;
|
||||||
|
font-size: 22px;
|
||||||
|
padding: 4px 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.carpool-right {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
.seat-info {
|
||||||
|
font-size: 22px;
|
||||||
|
color: #07c160;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
import type { Task } from '@/types/task'
|
||||||
|
import { View, Text, Image } from '@tarojs/components'
|
||||||
|
import './index.less'
|
||||||
|
|
||||||
|
interface Props { task: Task }
|
||||||
|
|
||||||
|
export default function CarpoolCard({ task }: Props) {
|
||||||
|
return (
|
||||||
|
<View className='task-card carpool-card'>
|
||||||
|
<View className='card-top'>
|
||||||
|
<View className='task-info'>
|
||||||
|
<View className='task-type-row'>
|
||||||
|
<Text className='type-badge carpool'>拼车出行</Text>
|
||||||
|
</View>
|
||||||
|
<Text className='task-title'>{task.title}</Text>
|
||||||
|
<Text className='task-desc'>{task.desc}</Text>
|
||||||
|
</View>
|
||||||
|
<View className='carpool-right'>
|
||||||
|
<Text className='task-reward'>{task.reward}</Text>
|
||||||
|
{task.participants != null && task.maxParticipants != null && (
|
||||||
|
<Text className='seat-info'>余{task.maxParticipants - task.participants}座</Text>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View className='card-bottom'>
|
||||||
|
<View className='publisher'>
|
||||||
|
<Image className='pub-avatar' src={task.publisher.avatar} mode='aspectFill' />
|
||||||
|
<Text className='pub-name'>{task.publisher.name}</Text>
|
||||||
|
</View>
|
||||||
|
<View className='task-meta'>
|
||||||
|
<Text className='meta-item'>📍 {task.location}</Text>
|
||||||
|
<Text className='meta-item'>⏰ {task.deadline || task.time}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
.express-card {
|
||||||
|
.type-badge.express {
|
||||||
|
background: #e8f4ff;
|
||||||
|
color: #1989fa;
|
||||||
|
font-size: 22px;
|
||||||
|
padding: 4px 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
import type { Task } from '@/types/task'
|
||||||
|
import { View, Text, Image } from '@tarojs/components'
|
||||||
|
import { Tag } from '@antmjs/vantui'
|
||||||
|
import './index.less'
|
||||||
|
|
||||||
|
interface Props { task: Task }
|
||||||
|
|
||||||
|
const STATUS_MAP: Record<string, string> = {
|
||||||
|
open: '待接单',
|
||||||
|
progress: '进行中',
|
||||||
|
done: '已完成',
|
||||||
|
cancelled: '已取消',
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ExpressCard({ task }: Props) {
|
||||||
|
return (
|
||||||
|
<View className='task-card express-card'>
|
||||||
|
<View className='card-top'>
|
||||||
|
<View className='task-info'>
|
||||||
|
<View className='task-type-row'>
|
||||||
|
<Text className='type-badge express'>快递代取</Text>
|
||||||
|
<Text className='task-status'>{STATUS_MAP[task.status]}</Text>
|
||||||
|
</View>
|
||||||
|
<Text className='task-title'>{task.title}</Text>
|
||||||
|
<Text className='task-desc'>{task.desc}</Text>
|
||||||
|
</View>
|
||||||
|
<Text className='task-reward'>{task.reward}</Text>
|
||||||
|
</View>
|
||||||
|
<View className='card-bottom'>
|
||||||
|
<View className='publisher'>
|
||||||
|
<Image className='pub-avatar' src={task.publisher.avatar} mode='aspectFill' />
|
||||||
|
<Text className='pub-name'>{task.publisher.name}</Text>
|
||||||
|
</View>
|
||||||
|
<View className='task-meta'>
|
||||||
|
<Text className='meta-item'>📍 {task.location}</Text>
|
||||||
|
<Text className='meta-item'>⏰ {task.deadline || task.time}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
.help-card {
|
||||||
|
.type-badge.help {
|
||||||
|
background: #fff0f0;
|
||||||
|
color: #ee0a24;
|
||||||
|
font-size: 22px;
|
||||||
|
padding: 4px 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
import type { Task } from '@/types/task'
|
||||||
|
import { View, Text, Image } from '@tarojs/components'
|
||||||
|
import { Tag } from '@antmjs/vantui'
|
||||||
|
import './index.less'
|
||||||
|
|
||||||
|
interface Props { task: Task }
|
||||||
|
|
||||||
|
export default function HelpCard({ task }: Props) {
|
||||||
|
return (
|
||||||
|
<View className='task-card help-card'>
|
||||||
|
<View className='card-top'>
|
||||||
|
<View className='task-info'>
|
||||||
|
<View className='task-type-row'>
|
||||||
|
<Text className='type-badge help'>求助</Text>
|
||||||
|
{task.tags?.map((t) => (
|
||||||
|
<Tag key={t} type='warning' size='medium'>{t}</Tag>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
<Text className='task-title'>{task.title}</Text>
|
||||||
|
<Text className='task-desc'>{task.desc}</Text>
|
||||||
|
</View>
|
||||||
|
<Text className='task-reward'>{task.reward}</Text>
|
||||||
|
</View>
|
||||||
|
<View className='card-bottom'>
|
||||||
|
<View className='publisher'>
|
||||||
|
<Image className='pub-avatar' src={task.publisher.avatar} mode='aspectFill' />
|
||||||
|
<Text className='pub-name'>{task.publisher.name}</Text>
|
||||||
|
</View>
|
||||||
|
<View className='task-meta'>
|
||||||
|
<Text className='meta-item'>📍 {task.location}</Text>
|
||||||
|
<Text className='meta-item'>🕐 {task.time}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
.secondhand-card {
|
||||||
|
.type-badge.secondhand {
|
||||||
|
background: #fff3e8;
|
||||||
|
color: #ff976a;
|
||||||
|
font-size: 22px;
|
||||||
|
padding: 4px 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.tag-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,57 @@
|
|||||||
|
import type { Task } from '@/types/task'
|
||||||
|
import { View, Text } from '@tarojs/components'
|
||||||
|
import { Image as VantImage, Tag } from '@antmjs/vantui'
|
||||||
|
import './index.less'
|
||||||
|
|
||||||
|
interface Props { task: Task }
|
||||||
|
|
||||||
|
export default function SecondhandCard({ task }: Props) {
|
||||||
|
return (
|
||||||
|
<View className='task-card secondhand-card'>
|
||||||
|
<View className='card-top'>
|
||||||
|
{task.images && task.images.length > 0 && (
|
||||||
|
<VantImage
|
||||||
|
className='goods-thumb'
|
||||||
|
src={task.images[0]}
|
||||||
|
fit='cover'
|
||||||
|
width={160}
|
||||||
|
height={160}
|
||||||
|
radius={8}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<View className='task-info'>
|
||||||
|
<View className='task-type-row'>
|
||||||
|
<Text className='type-badge secondhand'>二手交易</Text>
|
||||||
|
</View>
|
||||||
|
<Text className='task-title'>{task.title}</Text>
|
||||||
|
<Text className='task-desc'>{task.desc}</Text>
|
||||||
|
{task.tags && (
|
||||||
|
<View className='tag-row'>
|
||||||
|
{task.tags.map((t) => (
|
||||||
|
<Tag key={t} type='primary' plain>{t}</Tag>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
<Text className='task-price'>{task.reward}</Text>
|
||||||
|
</View>
|
||||||
|
<View className='card-bottom'>
|
||||||
|
<View className='publisher'>
|
||||||
|
<VantImage
|
||||||
|
className='pub-avatar'
|
||||||
|
src={task.publisher.avatar}
|
||||||
|
fit='cover'
|
||||||
|
width={36}
|
||||||
|
height={36}
|
||||||
|
round
|
||||||
|
/>
|
||||||
|
<Text className='pub-name'>{task.publisher.name}</Text>
|
||||||
|
</View>
|
||||||
|
<View className='task-meta'>
|
||||||
|
<Text className='meta-item'>📍 {task.location}</Text>
|
||||||
|
<Text className='meta-item'>🕐 {task.time}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,100 @@
|
|||||||
|
/* ========================================
|
||||||
|
任务卡片通用样式（各类型卡片共享）
|
||||||
|
======================================== */
|
||||||
|
|
||||||
|
.task-card {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 24px;
|
||||||
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
||||||
|
|
||||||
|
.card-top {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
.task-info {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-type-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-title {
|
||||||
|
display: block;
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #1a1a1a;
|
||||||
|
line-height: 1.4;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-desc {
|
||||||
|
display: block;
|
||||||
|
font-size: 26px;
|
||||||
|
color: #969799;
|
||||||
|
line-height: 1.5;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-reward,
|
||||||
|
.task-price {
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #ee0a24;
|
||||||
|
white-space: nowrap;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-status {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #07c160;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-bottom {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
padding-top: 16px;
|
||||||
|
border-top: 1px solid #f2f3f5;
|
||||||
|
|
||||||
|
.publisher {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.pub-avatar {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pub-name {
|
||||||
|
font-size: 26px;
|
||||||
|
color: #323233;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
|
.meta-item {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #969799;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
import type { Task } from '@/types/task'
|
||||||
|
import ExpressCard from './ExpressCard'
|
||||||
|
import SecondhandCard from './SecondhandCard'
|
||||||
|
import HelpCard from './HelpCard'
|
||||||
|
import ActivityCard from './ActivityCard'
|
||||||
|
import CarpoolCard from './CarpoolCard'
|
||||||
|
import './index.less'
|
||||||
|
|
||||||
|
interface TaskCardProps {
|
||||||
|
task: Task
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 根据 task.type 自动选择对应的卡片组件 */
|
||||||
|
export default function TaskCard({ task }: TaskCardProps) {
|
||||||
|
switch (task.type) {
|
||||||
|
case 'secondhand':
|
||||||
|
return <SecondhandCard task={task} />
|
||||||
|
case 'help':
|
||||||
|
return <HelpCard task={task} />
|
||||||
|
case 'activity':
|
||||||
|
return <ActivityCard task={task} />
|
||||||
|
case 'carpool':
|
||||||
|
return <CarpoolCard task={task} />
|
||||||
|
case 'express':
|
||||||
|
default:
|
||||||
|
return <ExpressCard task={task} />
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export { ExpressCard, SecondhandCard, HelpCard, ActivityCard, CarpoolCard }
|
||||||
@@ -0,0 +1,103 @@
|
|||||||
|
import type { ChatItem } from '@/types/message'
|
||||||
|
|
||||||
|
/** 消息列表：置顶系统消息 + 聊天消息 */
|
||||||
|
export const chatList: ChatItem[] = [
|
||||||
|
// === 置顶系统消息 ===
|
||||||
|
{
|
||||||
|
id: 'sys1',
|
||||||
|
type: 'system',
|
||||||
|
title: '📢 系统通知',
|
||||||
|
content: '新学期选课系统将于8月25日开放，请同学们提前做好准备...',
|
||||||
|
time: '昨天',
|
||||||
|
pinned: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'sys2',
|
||||||
|
type: 'system',
|
||||||
|
title: '🔔 校园公告',
|
||||||
|
content: '图书馆暑期开放时间调整通知：7月15日-8月20日期间开放时间调整为...',
|
||||||
|
time: '2天前',
|
||||||
|
pinned: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
// === 用户对话（私信/同学） ===
|
||||||
|
{
|
||||||
|
id: 'chat1',
|
||||||
|
type: 'chat',
|
||||||
|
avatar: 'https://picsum.photos/seed/avat1/100/100',
|
||||||
|
name: '张同学',
|
||||||
|
role: 'user',
|
||||||
|
lastMessage: '好的，那明天下午3点图书馆见，我带教材过去',
|
||||||
|
time: '10:32',
|
||||||
|
unread: 3,
|
||||||
|
online: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'chat2',
|
||||||
|
type: 'chat',
|
||||||
|
avatar: 'https://picsum.photos/seed/avat2/100/100',
|
||||||
|
name: '李同学',
|
||||||
|
role: 'user',
|
||||||
|
lastMessage: '那个快递我已经帮你取了，放你宿舍一楼前台了',
|
||||||
|
time: '09:15',
|
||||||
|
unread: 1,
|
||||||
|
online: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'chat3',
|
||||||
|
type: 'chat',
|
||||||
|
avatar: 'https://picsum.photos/seed/avat3/100/100',
|
||||||
|
name: '王同学',
|
||||||
|
role: 'user',
|
||||||
|
lastMessage: '[图片]',
|
||||||
|
time: '昨天',
|
||||||
|
unread: 0,
|
||||||
|
},
|
||||||
|
|
||||||
|
// === 骑手对话 ===
|
||||||
|
{
|
||||||
|
id: 'chat4',
|
||||||
|
type: 'chat',
|
||||||
|
avatar: 'https://picsum.photos/seed/rider1/100/100',
|
||||||
|
name: '骑手-刘师傅',
|
||||||
|
role: 'rider',
|
||||||
|
lastMessage: '好的，快递已取到，预计15分钟送到北门，请准时来取',
|
||||||
|
time: '11:20',
|
||||||
|
unread: 2,
|
||||||
|
online: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'chat5',
|
||||||
|
type: 'chat',
|
||||||
|
avatar: 'https://picsum.photos/seed/rider2/100/100',
|
||||||
|
name: '骑手-陈师傅',
|
||||||
|
role: 'rider',
|
||||||
|
lastMessage: '同学你好，我已经到楼下了，你下来拿一下吧',
|
||||||
|
time: '昨天',
|
||||||
|
unread: 0,
|
||||||
|
online: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
// === 商家对话 ===
|
||||||
|
{
|
||||||
|
id: 'chat6',
|
||||||
|
type: 'chat',
|
||||||
|
avatar: 'https://picsum.photos/seed/merchant1/100/100',
|
||||||
|
name: '校园咖啡馆',
|
||||||
|
role: 'merchant',
|
||||||
|
lastMessage: '您的拿铁已经做好了，请来取餐，谢谢！',
|
||||||
|
time: '08:45',
|
||||||
|
unread: 0,
|
||||||
|
online: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'chat7',
|
||||||
|
type: 'chat',
|
||||||
|
avatar: 'https://picsum.photos/seed/merchant2/100/100',
|
||||||
|
name: '二手书店',
|
||||||
|
role: 'merchant',
|
||||||
|
lastMessage: '那本数据结构还有货，可以来店里看看，西门旁边',
|
||||||
|
time: '周一',
|
||||||
|
unread: 1,
|
||||||
|
},
|
||||||
|
]
|
||||||
@@ -0,0 +1,133 @@
|
|||||||
|
import type { Task } from '@/types/task'
|
||||||
|
|
||||||
|
export const tasks: Task[] = [
|
||||||
|
// === 快递代取 ===
|
||||||
|
{
|
||||||
|
id: 't1',
|
||||||
|
type: 'express',
|
||||||
|
title: '帮我取个快递，菜鸟驿站3号柜',
|
||||||
|
desc: '中通快递，小件包裹，就在南区菜鸟驿站3号柜，取件码已发你',
|
||||||
|
reward: '¥5.00',
|
||||||
|
location: '南区菜鸟驿站',
|
||||||
|
time: '10分钟前',
|
||||||
|
status: 'open',
|
||||||
|
publisher: { name: '李同学', avatar: 'https://picsum.photos/seed/u1/100/100' },
|
||||||
|
deadline: '今天 18:00 前',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 't2',
|
||||||
|
type: 'express',
|
||||||
|
title: '顺丰快递代取，北门快递点',
|
||||||
|
desc: '顺丰快递一个，较大件（鞋盒大小），北门快递柜，需今天内取',
|
||||||
|
reward: '¥8.00',
|
||||||
|
location: '北门快递柜',
|
||||||
|
time: '25分钟前',
|
||||||
|
status: 'open',
|
||||||
|
publisher: { name: '王同学', avatar: 'https://picsum.photos/seed/u2/100/100' },
|
||||||
|
deadline: '今天 20:00 前',
|
||||||
|
},
|
||||||
|
|
||||||
|
// === 二手交易 ===
|
||||||
|
{
|
||||||
|
id: 't3',
|
||||||
|
type: 'secondhand',
|
||||||
|
title: '出手99新 iPad Air 5，带Apple Pencil',
|
||||||
|
desc: '去年购入，使用不到半年，无拆无修，电池健康度95%，256G深空灰',
|
||||||
|
reward: '¥3200',
|
||||||
|
location: '东区宿舍',
|
||||||
|
time: '1小时前',
|
||||||
|
status: 'open',
|
||||||
|
publisher: { name: '赵同学', avatar: 'https://picsum.photos/seed/u3/100/100' },
|
||||||
|
images: [
|
||||||
|
'https://picsum.photos/seed/ipad1/200/200',
|
||||||
|
'https://picsum.photos/seed/ipad2/200/200',
|
||||||
|
],
|
||||||
|
tags: ['数码', '99新', '在保'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 't4',
|
||||||
|
type: 'secondhand',
|
||||||
|
title: '二手教材出售：高等数学+线性代数',
|
||||||
|
desc: '大一教材，几乎全新，笔记很少，两本一起出',
|
||||||
|
reward: '¥30',
|
||||||
|
location: '西区图书馆',
|
||||||
|
time: '3小时前',
|
||||||
|
status: 'open',
|
||||||
|
publisher: { name: '陈同学', avatar: 'https://picsum.photos/seed/u4/100/100' },
|
||||||
|
images: ['https://picsum.photos/seed/book/200/200'],
|
||||||
|
tags: ['教材', '大一'],
|
||||||
|
},
|
||||||
|
|
||||||
|
// === 求助信息 ===
|
||||||
|
{
|
||||||
|
id: 't5',
|
||||||
|
type: 'help',
|
||||||
|
title: '找一位计算机学院的同学帮忙辅导数据结构',
|
||||||
|
desc: '期末考试在即，希望找一位数据结构学得好的同学辅导，2小时左右，奶茶酬谢',
|
||||||
|
reward: '¥50/次',
|
||||||
|
location: '图书馆自习室',
|
||||||
|
time: '2小时前',
|
||||||
|
status: 'open',
|
||||||
|
publisher: { name: '刘同学', avatar: 'https://picsum.photos/seed/u5/100/100' },
|
||||||
|
tags: ['学习辅导', '数据结构'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 't6',
|
||||||
|
type: 'help',
|
||||||
|
title: '帮忙搬宿舍，男生，从南区搬到北区',
|
||||||
|
desc: '暑假宿舍调整，需要搬运行李，东西不多，大概1小时能搞定',
|
||||||
|
reward: '¥30',
|
||||||
|
location: '南→北宿舍区',
|
||||||
|
time: '1小时前',
|
||||||
|
status: 'progress',
|
||||||
|
publisher: { name: '周同学', avatar: 'https://picsum.photos/seed/u6/100/100' },
|
||||||
|
tags: ['搬运', '急'],
|
||||||
|
},
|
||||||
|
|
||||||
|
// === 校园活动 ===
|
||||||
|
{
|
||||||
|
id: 't7',
|
||||||
|
type: 'activity',
|
||||||
|
title: '周末桌游局，缺2人，狼人杀/阿瓦隆',
|
||||||
|
desc: '周六下午2点，学校咖啡厅，已有8人，再找2个小伙伴一起玩',
|
||||||
|
reward: '免费',
|
||||||
|
location: '校内咖啡厅',
|
||||||
|
time: '3小时前',
|
||||||
|
status: 'open',
|
||||||
|
publisher: { name: '吴同学', avatar: 'https://picsum.photos/seed/u7/100/100' },
|
||||||
|
participants: 8,
|
||||||
|
maxParticipants: 10,
|
||||||
|
tags: ['桌游', '周末', '社交'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 't8',
|
||||||
|
type: 'activity',
|
||||||
|
title: '校园夜跑团招新，每周二四六晚8点',
|
||||||
|
desc: '欢迎喜欢跑步的同学加入，各种配速都有，一起锻炼身体',
|
||||||
|
reward: '免费',
|
||||||
|
location: '田径场',
|
||||||
|
time: '5小时前',
|
||||||
|
status: 'open',
|
||||||
|
publisher: { name: '跑步社团', avatar: 'https://picsum.photos/seed/u8/100/100' },
|
||||||
|
participants: 35,
|
||||||
|
maxParticipants: 100,
|
||||||
|
tags: ['运动', '跑步', '社团'],
|
||||||
|
},
|
||||||
|
|
||||||
|
// === 拼车出行 ===
|
||||||
|
{
|
||||||
|
id: 't9',
|
||||||
|
type: 'carpool',
|
||||||
|
title: '周五下午去市中心，有车，还有3个空位',
|
||||||
|
desc: '周五下午4点出发，可以到市中心任意地点，有车的同学顺路带人',
|
||||||
|
reward: '¥15/人',
|
||||||
|
location: '学校南门出发',
|
||||||
|
time: '30分钟前',
|
||||||
|
status: 'open',
|
||||||
|
publisher: { name: '郑同学', avatar: 'https://picsum.photos/seed/u9/100/100' },
|
||||||
|
deadline: '周五 16:00',
|
||||||
|
participants: 1,
|
||||||
|
maxParticipants: 4,
|
||||||
|
tags: ['拼车', '周五', '市中心'],
|
||||||
|
},
|
||||||
|
]
|
||||||
+152
-16
@@ -1,29 +1,165 @@
|
|||||||
|
/* ========================================
|
||||||
|
消息页面
|
||||||
|
======================================== */
|
||||||
|
|
||||||
.messages-page {
|
.messages-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
background: #f7f8fa;
|
background: #f7f8fa;
|
||||||
|
}
|
||||||
|
|
||||||
.page-placeholder {
|
.messages-scroll {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 分区 ========== */
|
||||||
|
.section-block {
|
||||||
|
margin: 20px 24px 0;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #323233;
|
||||||
|
padding: 24px 24px 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 消息列表项 ========== */
|
||||||
|
.message-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 24px;
|
||||||
|
transition: background 0.15s;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: #f7f8fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
& + .message-item {
|
||||||
|
border-top: 1px solid #f2f3f5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 系统消息 ========== */
|
||||||
|
.system-msg {
|
||||||
|
.sys-icon {
|
||||||
|
width: 88px;
|
||||||
|
height: 88px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(135deg, #1989fa 0%, #07c160 100%);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 36px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding-top: 300px;
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.placeholder-icon {
|
.pinned-tag {
|
||||||
font-size: 96px;
|
font-size: 20px;
|
||||||
margin-bottom: 24px;
|
color: #1989fa;
|
||||||
|
background: #e8f4ff;
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
align-self: flex-start;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 聊天消息 ========== */
|
||||||
|
.chat-msg {
|
||||||
|
.avatar-wrap {
|
||||||
|
position: relative;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
.msg-avatar {
|
||||||
|
width: 96px;
|
||||||
|
height: 96px;
|
||||||
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.placeholder-text {
|
.online-dot {
|
||||||
font-size: 36px;
|
position: absolute;
|
||||||
font-weight: 500;
|
bottom: 2px;
|
||||||
color: #323233;
|
right: 2px;
|
||||||
margin-bottom: 12px;
|
width: 18px;
|
||||||
}
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
.placeholder-desc {
|
background: #07c160;
|
||||||
font-size: 28px;
|
border: 3px solid #fff;
|
||||||
color: #969799;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ========== 消息内容区 ========== */
|
||||||
|
.msg-body {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.msg-top {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
|
||||||
|
.msg-name-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.msg-name {
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #1a1a1a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.msg-time {
|
||||||
|
font-size: 22px;
|
||||||
|
color: #c8c9cc;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.msg-preview {
|
||||||
|
font-size: 26px;
|
||||||
|
color: #969799;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 角色标签 ========== */
|
||||||
|
.role-tag {
|
||||||
|
font-size: 20px;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-left: 10px;
|
||||||
|
|
||||||
|
&.role-rider {
|
||||||
|
background: #fff3e8;
|
||||||
|
color: #ff976a;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.role-merchant {
|
||||||
|
background: #e8f4ff;
|
||||||
|
color: #1989fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.role-user {
|
||||||
|
background: #f2f3f5;
|
||||||
|
color: #646566;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-safe {
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,15 +1,100 @@
|
|||||||
import { View, Text } from '@tarojs/components'
|
import Taro from '@tarojs/taro'
|
||||||
import CustomTabBar from "@/custom-tab-bar"
|
import { View, Text, Image, ScrollView } from '@tarojs/components'
|
||||||
|
import { Badge } from '@antmjs/vantui'
|
||||||
|
import CustomTabBar from '@/custom-tab-bar'
|
||||||
|
import { chatList } from '@/mock/messages'
|
||||||
|
import type { ChatItem } from '@/types/message'
|
||||||
import './index.less'
|
import './index.less'
|
||||||
|
|
||||||
|
/** 角色标签 */
|
||||||
|
const ROLE_LABEL: Record<string, { text: string; className: string }> = {
|
||||||
|
rider: { text: '骑手', className: 'role-rider' },
|
||||||
|
merchant: { text: '商家', className: 'role-merchant' },
|
||||||
|
user: { text: '同学', className: 'role-user' },
|
||||||
|
}
|
||||||
|
|
||||||
export default function Messages() {
|
export default function Messages() {
|
||||||
|
const handleChatClick = (item: ChatItem) => {
|
||||||
|
Taro.showToast({ title: `${item.name || item.title} 聊天即将上线`, icon: 'none' })
|
||||||
|
}
|
||||||
|
|
||||||
|
// 分组：置顶系统消息 + 普通聊天
|
||||||
|
const systemMsgs = chatList.filter((m) => m.type === 'system')
|
||||||
|
const chatMsgs = chatList.filter((m) => m.type === 'chat')
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View className='messages-page'>
|
<View className='messages-page'>
|
||||||
<View className='page-placeholder'>
|
<ScrollView className='messages-scroll' scrollY enhanced showScrollbar={false}>
|
||||||
<Text className='placeholder-icon'>💬</Text>
|
{/* ========== 置顶系统消息 ========== */}
|
||||||
<Text className='placeholder-text'>消息</Text>
|
{systemMsgs.length > 0 && (
|
||||||
<Text className='placeholder-desc'>即将上线，敬请期待</Text>
|
<View className='section-block'>
|
||||||
</View>
|
<View className='section-title'>系统消息</View>
|
||||||
|
{systemMsgs.map((msg) => (
|
||||||
|
<View
|
||||||
|
key={msg.id}
|
||||||
|
className='message-item system-msg'
|
||||||
|
onClick={() => handleChatClick(msg)}
|
||||||
|
>
|
||||||
|
<View className='sys-icon'>{msg.title.slice(0, 2)}</View>
|
||||||
|
<View className='msg-body'>
|
||||||
|
<View className='msg-top'>
|
||||||
|
<Text className='msg-name'>{msg.title}</Text>
|
||||||
|
<Text className='msg-time'>{msg.time}</Text>
|
||||||
|
</View>
|
||||||
|
<Text className='msg-preview'>{msg.content}</Text>
|
||||||
|
</View>
|
||||||
|
{msg.pinned && <Text className='pinned-tag'>置顶</Text>}
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* ========== 聊天消息 ========== */}
|
||||||
|
<View className='section-block'>
|
||||||
|
<View className='section-title'>聊天消息</View>
|
||||||
|
{chatMsgs.map((msg) => (
|
||||||
|
<View
|
||||||
|
key={msg.id}
|
||||||
|
className='message-item chat-msg'
|
||||||
|
onClick={() => handleChatClick(msg)}
|
||||||
|
>
|
||||||
|
{/* 头像 */}
|
||||||
|
<View className='avatar-wrap'>
|
||||||
|
<Image
|
||||||
|
className='msg-avatar'
|
||||||
|
src={msg.avatar || ''}
|
||||||
|
mode='aspectFill'
|
||||||
|
/>
|
||||||
|
{msg.online && <View className='online-dot' />}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* 消息内容 */}
|
||||||
|
<View className='msg-body'>
|
||||||
|
<View className='msg-top'>
|
||||||
|
<View className='msg-name-row'>
|
||||||
|
<Text className='msg-name'>{msg.name}</Text>
|
||||||
|
{msg.role && (
|
||||||
|
<Text className={`role-tag ${ROLE_LABEL[msg.role]?.className || ''}`}>
|
||||||
|
{ROLE_LABEL[msg.role]?.text || ''}
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
<Text className='msg-time'>{msg.time}</Text>
|
||||||
|
</View>
|
||||||
|
<Text className='msg-preview'>{msg.lastMessage}</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* 未读数 */}
|
||||||
|
{msg.unread ? (
|
||||||
|
<Badge content={msg.unread} max={99} />
|
||||||
|
) : null}
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View className='bottom-safe' />
|
||||||
|
</ScrollView>
|
||||||
|
|
||||||
<CustomTabBar activeKey='messages' />
|
<CustomTabBar activeKey='messages' />
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
|
|||||||
+215
-15
@@ -1,29 +1,229 @@
|
|||||||
|
/* ========================================
|
||||||
|
个人中心页面
|
||||||
|
======================================== */
|
||||||
|
|
||||||
.profile-page {
|
.profile-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background: #f7f8fa;
|
background: #f7f8fa;
|
||||||
|
}
|
||||||
|
|
||||||
.page-placeholder {
|
/* ========== 顶部背景区域 ========== */
|
||||||
|
.profile-header {
|
||||||
|
position: relative;
|
||||||
|
background: linear-gradient(160deg, #1989fa 0%, #07c160 100%);
|
||||||
|
padding-bottom: 32px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
/* 背景装饰圆 */
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -80px;
|
||||||
|
right: -60px;
|
||||||
|
width: 280px;
|
||||||
|
height: 280px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -40px;
|
||||||
|
left: -40px;
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 设置按钮 */
|
||||||
|
.header-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding: 12px 24px 0;
|
||||||
|
|
||||||
|
.settings-btn {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(255, 255, 255, 0.15);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 用户卡片 */
|
||||||
|
.user-card {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 24px 32px 20px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 4px solid rgba(255, 255, 255, 0.4);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-info {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 24px;
|
||||||
|
|
||||||
|
.name-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 40px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #fff;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gender-tag {
|
||||||
|
font-size: 22px;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(255, 255, 255, 0.25);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.class-name {
|
||||||
|
font-size: 26px;
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.van-icon {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 点赞/评论/收藏 */
|
||||||
|
.stats-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
padding: 0 32px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
|
||||||
padding-top: 300px;
|
|
||||||
|
|
||||||
.placeholder-icon {
|
.stat-num {
|
||||||
font-size: 96px;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.placeholder-text {
|
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
font-weight: 500;
|
font-weight: 600;
|
||||||
color: #323233;
|
color: #fff;
|
||||||
margin-bottom: 12px;
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.placeholder-desc {
|
.stat-label {
|
||||||
font-size: 28px;
|
font-size: 24px;
|
||||||
color: #969799;
|
color: rgba(255, 255, 255, 0.75);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ========== 滚动内容 ========== */
|
||||||
|
.profile-scroll {
|
||||||
|
height: calc(100vh - 100px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 通用卡片 ========== */
|
||||||
|
.section-card {
|
||||||
|
margin: 20px 24px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 28px 24px 20px;
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #323233;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-more {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.more-text {
|
||||||
|
font-size: 26px;
|
||||||
|
color: #969799;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 订单区域 ========== */
|
||||||
|
.order-tabs {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
padding: 0 8px 28px;
|
||||||
|
|
||||||
|
.order-tab {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px 8px;
|
||||||
|
|
||||||
|
.tab-label {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #646566;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 功能列表 ========== */
|
||||||
|
.feature-list {
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
|
.van-cell-group--inset {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.van-cell {
|
||||||
|
padding: 28px 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 底部信息 ========== */
|
||||||
|
.footer-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 40px 0 20px;
|
||||||
|
|
||||||
|
.footer-icp {
|
||||||
|
font-size: 22px;
|
||||||
|
color: #c8c9cc;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-version {
|
||||||
|
font-size: 22px;
|
||||||
|
color: #c8c9cc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
+153
-6
@@ -1,15 +1,162 @@
|
|||||||
import { View, Text } from '@tarojs/components'
|
import { useMemo } from 'react'
|
||||||
import CustomTabBar from "@/custom-tab-bar"
|
import Taro from '@tarojs/taro'
|
||||||
|
import { View, Text, Image, ScrollView } from '@tarojs/components'
|
||||||
|
import { Cell, CellGroup, Icon } from '@antmjs/vantui'
|
||||||
|
import CustomTabBar from '@/custom-tab-bar'
|
||||||
import './index.less'
|
import './index.less'
|
||||||
|
|
||||||
|
/** 状态栏高度 */
|
||||||
|
function getStatusBarHeight(): number {
|
||||||
|
try {
|
||||||
|
return Taro.getSystemInfoSync().statusBarHeight || 20
|
||||||
|
} catch {
|
||||||
|
return 20
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 用户信息（后续接入 API） */
|
||||||
|
const USER_INFO = {
|
||||||
|
avatar: 'https://picsum.photos/seed/avatar/200/200',
|
||||||
|
name: '张三',
|
||||||
|
className: '计算机科学与技术 2022级',
|
||||||
|
gender: '男' as const,
|
||||||
|
stats: { likes: 128, comments: 46, favorites: 89 },
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 订单入口 */
|
||||||
|
const ORDER_TABS = [
|
||||||
|
{ key: 'all', label: '全部', icon: 'orders-o' },
|
||||||
|
{ key: 'pending', label: '待付款', icon: 'balance-pay' },
|
||||||
|
{ key: 'progress', label: '进行中', icon: 'logistics' },
|
||||||
|
{ key: 'confirm', label: '待确认', icon: 'checked' },
|
||||||
|
{ key: 'review', label: '待评价', icon: 'star-o' },
|
||||||
|
]
|
||||||
|
|
||||||
|
/** 功能列表 */
|
||||||
|
const FEATURE_LIST = [
|
||||||
|
{ key: 'goods', label: '商品订单', icon: 'orders-o' },
|
||||||
|
{ key: 'address', label: '地址管理', icon: 'location-o' },
|
||||||
|
{ key: 'about', label: '关于我们', icon: 'info-o' },
|
||||||
|
{ key: 'feedback', label: '意见反馈', icon: 'chat-o' },
|
||||||
|
{ key: 'settings', label: '系统设置', icon: 'setting-o' },
|
||||||
|
] as const
|
||||||
|
|
||||||
export default function Profile() {
|
export default function Profile() {
|
||||||
|
const statusBarH = useMemo(getStatusBarHeight, [])
|
||||||
|
|
||||||
|
const handleSettings = () => {
|
||||||
|
Taro.showToast({ title: '设置页面即将上线', icon: 'none' })
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleEditProfile = () => {
|
||||||
|
Taro.showToast({ title: '编辑资料即将上线', icon: 'none' })
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleOrderTab = (key: string) => {
|
||||||
|
Taro.showToast({ title: `${ORDER_TABS.find(t => t.key === key)?.label || ''}订单即将上线`, icon: 'none' })
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleFeature = (item: typeof FEATURE_LIST[number]) => {
|
||||||
|
Taro.showToast({ title: `${item.label}即将上线`, icon: 'none' })
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleAllOrders = () => {
|
||||||
|
Taro.showToast({ title: '全部订单即将上线', icon: 'none' })
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View className='profile-page'>
|
<View className='profile-page'>
|
||||||
<View className='page-placeholder'>
|
{/* ========== 背景图区域 ========== */}
|
||||||
<Text className='placeholder-icon'>👤</Text>
|
<View
|
||||||
<Text className='placeholder-text'>我的</Text>
|
className='profile-header'
|
||||||
<Text className='placeholder-desc'>即将上线，敬请期待</Text>
|
style={{ paddingTop: `${statusBarH}px` }}
|
||||||
|
>
|
||||||
|
{/* 设置按钮 */}
|
||||||
|
<View className='header-actions'>
|
||||||
|
<View className='settings-btn' onClick={handleSettings}>
|
||||||
|
<Icon name='setting-o' size={22} color='#fff' />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* 头像 + 用户信息 */}
|
||||||
|
<View className='user-card' onClick={handleEditProfile}>
|
||||||
|
<Image className='avatar' src={USER_INFO.avatar} mode='aspectFill' />
|
||||||
|
<View className='user-info'>
|
||||||
|
<View className='name-row'>
|
||||||
|
<Text className='name'>{USER_INFO.name}</Text>
|
||||||
|
<Text className='gender-tag'>{USER_INFO.gender === '男' ? '♂' : '♀'}</Text>
|
||||||
|
</View>
|
||||||
|
<Text className='class-name'>{USER_INFO.className}</Text>
|
||||||
|
</View>
|
||||||
|
<Icon name='arrow' size={18} color='rgba(255,255,255,0.7)' />
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* 点赞/评论/收藏 */}
|
||||||
|
<View className='stats-row'>
|
||||||
|
<View className='stat-item'>
|
||||||
|
<Text className='stat-num'>{USER_INFO.stats.likes}</Text>
|
||||||
|
<Text className='stat-label'>点赞</Text>
|
||||||
|
</View>
|
||||||
|
<View className='stat-item'>
|
||||||
|
<Text className='stat-num'>{USER_INFO.stats.comments}</Text>
|
||||||
|
<Text className='stat-label'>评论</Text>
|
||||||
|
</View>
|
||||||
|
<View className='stat-item'>
|
||||||
|
<Text className='stat-num'>{USER_INFO.stats.favorites}</Text>
|
||||||
|
<Text className='stat-label'>收藏</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
|
{/* ========== 可滚动内容 ========== */}
|
||||||
|
<ScrollView className='profile-scroll' scrollY enhanced showScrollbar={false}>
|
||||||
|
{/* ========== 订单卡片 ========== */}
|
||||||
|
<View className='section-card order-card'>
|
||||||
|
<View className='card-header' onClick={handleAllOrders}>
|
||||||
|
<Text className='card-title'>我的订单</Text>
|
||||||
|
<View className='card-more'>
|
||||||
|
<Text className='more-text'>全部</Text>
|
||||||
|
<Icon name='arrow' size={14} color='#969799' />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View className='order-tabs'>
|
||||||
|
{ORDER_TABS.map((tab) => (
|
||||||
|
<View
|
||||||
|
key={tab.key}
|
||||||
|
className='order-tab'
|
||||||
|
onClick={() => handleOrderTab(tab.key)}
|
||||||
|
>
|
||||||
|
<Icon name={tab.icon} size={24} color='#323233' />
|
||||||
|
<Text className='tab-label'>{tab.label}</Text>
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* ========== 功能列表 ========== */}
|
||||||
|
<View className='section-card feature-list'>
|
||||||
|
<CellGroup inset>
|
||||||
|
{FEATURE_LIST.map((item, index) => (
|
||||||
|
<Cell
|
||||||
|
key={item.key}
|
||||||
|
title={item.label}
|
||||||
|
icon={item.icon}
|
||||||
|
isLink
|
||||||
|
border={index < FEATURE_LIST.length - 1}
|
||||||
|
onClick={() => handleFeature(item)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</CellGroup>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* ========== 底部信息 ========== */}
|
||||||
|
<View className='footer-info'>
|
||||||
|
<Text className='footer-icp'>湘ICP备2024000000号-1</Text>
|
||||||
|
<Text className='footer-version'>校园通 v1.0.0</Text>
|
||||||
|
</View>
|
||||||
|
</ScrollView>
|
||||||
|
|
||||||
|
{/* ========== TabBar ========== */}
|
||||||
<CustomTabBar activeKey='profile' />
|
<CustomTabBar activeKey='profile' />
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
|
|||||||
+81
-13
@@ -1,29 +1,97 @@
|
|||||||
|
/* ========================================
|
||||||
|
校园任务页面
|
||||||
|
======================================== */
|
||||||
|
|
||||||
.tasks-page {
|
.tasks-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
background: #f7f8fa;
|
background: #f7f8fa;
|
||||||
|
}
|
||||||
|
|
||||||
.page-placeholder {
|
/* 搜索栏 */
|
||||||
|
.tasks-search-bar {
|
||||||
|
padding: 20px 24px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 分类筛选 */
|
||||||
|
.tasks-filter {
|
||||||
|
background: #fff;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
|
||||||
|
.filter-scroll {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-tabs {
|
||||||
|
display: flex;
|
||||||
|
padding: 0 24px;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-tab {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
padding: 16px 20px;
|
||||||
padding-top: 300px;
|
border-radius: 16px;
|
||||||
|
background: #f7f8fa;
|
||||||
|
flex-shrink: 0;
|
||||||
|
min-width: 120px;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
.placeholder-icon {
|
&.active {
|
||||||
font-size: 96px;
|
background: #1989fa;
|
||||||
margin-bottom: 24px;
|
box-shadow: 0 4px 16px rgba(25, 137, 250, 0.3);
|
||||||
|
|
||||||
|
.filter-emoji {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-label {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.placeholder-text {
|
.filter-emoji {
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
font-weight: 500;
|
margin-bottom: 6px;
|
||||||
color: #323233;
|
transition: transform 0.2s;
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.placeholder-desc {
|
.filter-label {
|
||||||
font-size: 28px;
|
font-size: 24px;
|
||||||
color: #969799;
|
color: #646566;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 任务列表 */
|
||||||
|
.tasks-scroll {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tasks-list {
|
||||||
|
padding: 16px 24px;
|
||||||
|
|
||||||
|
.task-card-wrap {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-tip {
|
||||||
|
text-align: center;
|
||||||
|
padding: 120px 0;
|
||||||
|
font-size: 28px;
|
||||||
|
color: #969799;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-safe {
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,15 +1,106 @@
|
|||||||
import { View, Text } from '@tarojs/components'
|
import { useState, useMemo } from 'react'
|
||||||
import CustomTabBar from "@/custom-tab-bar"
|
import Taro from '@tarojs/taro'
|
||||||
|
import { View, ScrollView } from '@tarojs/components'
|
||||||
|
import { Search, Tabs, Tab } from '@antmjs/vantui'
|
||||||
|
import TaskCard from '@/components/TaskCard'
|
||||||
|
import CustomTabBar from '@/custom-tab-bar'
|
||||||
|
import { tasks } from '@/mock/tasks'
|
||||||
|
import type { TaskType } from '@/types/task'
|
||||||
import './index.less'
|
import './index.less'
|
||||||
|
|
||||||
|
/** 筛选标签 */
|
||||||
|
const FILTER_TABS = [
|
||||||
|
{ title: '全部', value: 'all' as const },
|
||||||
|
{ title: '快递代取', value: 'express' as const },
|
||||||
|
{ title: '二手交易', value: 'secondhand' as const },
|
||||||
|
{ title: '求助', value: 'help' as const },
|
||||||
|
{ title: '活动', value: 'activity' as const },
|
||||||
|
{ title: '拼车', value: 'carpool' as const },
|
||||||
|
]
|
||||||
|
|
||||||
|
/** 任务类型 → emoji */
|
||||||
|
const TYPE_EMOJI: Record<string, string> = {
|
||||||
|
all: '📋',
|
||||||
|
express: '📦',
|
||||||
|
secondhand: '🛍️',
|
||||||
|
help: '🆘',
|
||||||
|
activity: '🎉',
|
||||||
|
carpool: '🚗',
|
||||||
|
}
|
||||||
|
|
||||||
export default function Tasks() {
|
export default function Tasks() {
|
||||||
|
const [activeFilter, setActiveFilter] = useState(0)
|
||||||
|
const [searchValue, setSearchValue] = useState('')
|
||||||
|
|
||||||
|
const filteredTasks = useMemo(() => {
|
||||||
|
const filterValue = FILTER_TABS[activeFilter]?.value || 'all'
|
||||||
|
let list = filterValue === 'all' ? tasks : tasks.filter((t) => t.type === filterValue)
|
||||||
|
if (searchValue.trim()) {
|
||||||
|
const kw = searchValue.trim().toLowerCase()
|
||||||
|
list = list.filter(
|
||||||
|
(t) =>
|
||||||
|
t.title.toLowerCase().includes(kw) ||
|
||||||
|
t.desc.toLowerCase().includes(kw) ||
|
||||||
|
t.location.toLowerCase().includes(kw),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return list
|
||||||
|
}, [activeFilter, searchValue])
|
||||||
|
|
||||||
|
const handleTaskClick = (id: string) => {
|
||||||
|
Taro.showToast({ title: '任务详情即将上线', icon: 'none' })
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View className='tasks-page'>
|
<View className='tasks-page'>
|
||||||
<View className='page-placeholder'>
|
{/* 搜索栏 */}
|
||||||
<Text className='placeholder-icon'>📋</Text>
|
<View className='tasks-search-bar'>
|
||||||
<Text className='placeholder-text'>校园任务</Text>
|
<Search
|
||||||
<Text className='placeholder-desc'>即将上线，敬请期待</Text>
|
value={searchValue}
|
||||||
|
placeholder='搜索校园任务...'
|
||||||
|
shape='round'
|
||||||
|
onChange={(e) => setSearchValue(e.detail)}
|
||||||
|
onClear={() => setSearchValue('')}
|
||||||
|
/>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
|
{/* 分类标签 */}
|
||||||
|
<View className='tasks-filter'>
|
||||||
|
<ScrollView scrollX enhanced showScrollbar={false} className='filter-scroll'>
|
||||||
|
<View className='filter-tabs'>
|
||||||
|
{FILTER_TABS.map((tab, idx) => (
|
||||||
|
<View
|
||||||
|
key={tab.value}
|
||||||
|
className={`filter-tab ${activeFilter === idx ? 'active' : ''}`}
|
||||||
|
onClick={() => setActiveFilter(idx)}
|
||||||
|
>
|
||||||
|
<View className='filter-emoji'>{TYPE_EMOJI[tab.value]}</View>
|
||||||
|
<View className='filter-label'>{tab.title}</View>
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
</ScrollView>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* 任务列表 */}
|
||||||
|
<ScrollView className='tasks-scroll' scrollY enhanced showScrollbar={false}>
|
||||||
|
<View className='tasks-list'>
|
||||||
|
{filteredTasks.map((task) => (
|
||||||
|
<View
|
||||||
|
key={task.id}
|
||||||
|
className='task-card-wrap'
|
||||||
|
onClick={() => handleTaskClick(task.id)}
|
||||||
|
>
|
||||||
|
<TaskCard task={task} />
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
{filteredTasks.length === 0 && (
|
||||||
|
<View className='empty-tip'>暂无相关任务</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
<View className='bottom-safe' />
|
||||||
|
</ScrollView>
|
||||||
|
|
||||||
<CustomTabBar activeKey='tasks' />
|
<CustomTabBar activeKey='tasks' />
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -0,0 +1,25 @@
|
|||||||
|
/** 消息相关类型 */
|
||||||
|
|
||||||
|
/** 消息类型 */
|
||||||
|
export type MessageType = 'system' | 'chat'
|
||||||
|
|
||||||
|
/** 聊天对象类型 */
|
||||||
|
export type ChatRole = 'user' | 'rider' | 'merchant'
|
||||||
|
|
||||||
|
/** 聊天消息项 */
|
||||||
|
export interface ChatItem {
|
||||||
|
id: string
|
||||||
|
type: MessageType
|
||||||
|
/** 系统消息 */
|
||||||
|
title: string
|
||||||
|
content: string
|
||||||
|
time: string
|
||||||
|
/** 聊天消息 */
|
||||||
|
avatar?: string
|
||||||
|
name?: string
|
||||||
|
role?: ChatRole
|
||||||
|
lastMessage?: string
|
||||||
|
unread?: number
|
||||||
|
pinned?: boolean // 置顶
|
||||||
|
online?: boolean // 在线状态
|
||||||
|
}
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
/** 校园任务相关类型 */
|
||||||
|
|
||||||
|
/** 任务类型 */
|
||||||
|
export type TaskType = 'express' | 'secondhand' | 'help' | 'activity' | 'carpool'
|
||||||
|
|
||||||
|
/** 任务状态 */
|
||||||
|
export type TaskStatus = 'open' | 'progress' | 'done' | 'cancelled'
|
||||||
|
|
||||||
|
/** 任务数据 */
|
||||||
|
export interface Task {
|
||||||
|
id: string
|
||||||
|
type: TaskType
|
||||||
|
title: string
|
||||||
|
desc: string
|
||||||
|
reward: string // 报酬/价格，如 "¥5.00"、"免费"
|
||||||
|
location: string // 地点
|
||||||
|
time: string // 发布时间
|
||||||
|
status: TaskStatus
|
||||||
|
publisher: {
|
||||||
|
name: string
|
||||||
|
avatar: string
|
||||||
|
}
|
||||||
|
tags?: string[] // 标签
|
||||||
|
images?: string[] // 图片（二手/活动类）
|
||||||
|
deadline?: string // 截止时间
|
||||||
|
participants?: number // 参与人数（活动类）
|
||||||
|
maxParticipants?: number
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user