修改卡片样式
This commit is contained in:
WindowBird
parent
13210249be
commit
2fe44259ae
|
|
@ -114,58 +114,86 @@
|
|||
:key="project.id"
|
||||
@click="goToProjectDetail(project)"
|
||||
>
|
||||
<!-- 状态标签和过期时间 -->
|
||||
<view class="project-header">
|
||||
<view class="status-badge">
|
||||
<uv-tags
|
||||
:text="getStatusText(project.status)"
|
||||
:type="getStatusType(project.status)"
|
||||
size="mini"
|
||||
:plain="false"
|
||||
></uv-tags>
|
||||
<!-- 卡片头部：状态标签、发布日期、操作菜单 -->
|
||||
<view class="card-header">
|
||||
<view class="header-left">
|
||||
<view class="status-tag">{{ getStatusText(project.status) }}</view>
|
||||
<view class="urgent-tag" v-if="getUrgentStatus(project)">
|
||||
{{ getUrgentStatus(project) }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="expire-time">
|
||||
<text class="expire-label">过期时间:</text>
|
||||
<text class="expire-value">{{ formatDate(project.expireTime) }}</text>
|
||||
<view class="header-right">
|
||||
<text class="release-date">发布: {{ formatDate(project.createTime || project.releaseTime) }}</text>
|
||||
<view class="action-menu" @click.stop="handleCardMenu(project)">
|
||||
<text class="menu-icon">⋯</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 项目信息 -->
|
||||
<view class="project-content">
|
||||
<text class="project-name">{{ project.projectName }}</text>
|
||||
<text class="project-description">{{ project.description }}</text>
|
||||
|
||||
<view class="project-meta">
|
||||
<text class="meta-item">创建人: {{ project.createName }}</text>
|
||||
<text class="meta-item">负责人: {{ getOwnerNames(project.memberList) }}</text>
|
||||
<view class="meta-row">
|
||||
<text class="meta-item">提交: {{ project.submitCount || 0 }}次</text>
|
||||
<text class="meta-item">接收: {{ project.receivedCount || 0 }}次</text>
|
||||
</view>
|
||||
<!-- 项目标题 -->
|
||||
<view class="card-title">{{ project.projectName }}</view>
|
||||
|
||||
<!-- 项目标签和描述 -->
|
||||
<view class="card-tags-row">
|
||||
<view class="tag-circle" :style="{ backgroundColor: getTagColor(project) }">
|
||||
<text class="tag-text">{{ getTagText(project) }}</text>
|
||||
</view>
|
||||
<text class="card-description" v-if="project.description">{{ project.description }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 操作标签 -->
|
||||
<view class="action-tags" v-if="project.tags && project.tags.length > 0">
|
||||
<view
|
||||
class="action-tag"
|
||||
v-for="(tag, index) in project.tags"
|
||||
:key="index"
|
||||
>
|
||||
{{ tag }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 日期和剩余时间 -->
|
||||
<view class="card-footer">
|
||||
<view class="date-info">
|
||||
<text class="date-text">{{ formatDate(project.expireTime) }}</text>
|
||||
<text class="time-icon">🕐</text>
|
||||
<text class="time-text" :class="{ overdue: isOverdue(project) }">
|
||||
{{ getTimeStatus(project) }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<!-- 逾期提示 -->
|
||||
<view class="overdue-tip" v-if="project.overdue">
|
||||
<text class="overdue-text">⚠️ 已逾期</text>
|
||||
<!-- 团队成员 -->
|
||||
<view class="member-info" v-if="project.memberList && project.memberList.length > 0">
|
||||
<view class="member-avatars">
|
||||
<view
|
||||
class="member-avatar"
|
||||
v-for="(member, index) in getDisplayMembers(project.memberList)"
|
||||
:key="index"
|
||||
:style="{ backgroundColor: getAvatarColor(member, index) }"
|
||||
>
|
||||
<text class="avatar-text">{{ getAvatarText(member) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="member-text">{{ formatMemberNames(project.memberList) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view class="empty-state" v-if="loading">
|
||||
<view class="empty-state" v-if="loading" style="grid-column: 1 / -1;">
|
||||
<text class="empty-text">加载中...</text>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state" v-else-if="isEmpty">
|
||||
<view class="empty-state" v-else-if="isEmpty" style="grid-column: 1 / -1;">
|
||||
<text class="empty-text">暂无项目数据</text>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多提示 -->
|
||||
<view class="load-more-tip" v-if="!isEmpty && !loading && !noMore">
|
||||
<view class="load-more-tip" v-if="!isEmpty && !loading && !noMore" style="grid-column: 1 / -1;">
|
||||
<text class="load-more-text">上拉加载更多</text>
|
||||
</view>
|
||||
<view class="load-more-tip" v-if="!isEmpty && noMore">
|
||||
<view class="load-more-tip" v-if="!isEmpty && noMore" style="grid-column: 1 / -1;">
|
||||
<text class="load-more-text">没有更多数据了</text>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -348,6 +376,122 @@ const getOwnerNames = (memberList) => {
|
|||
return memberList.map(member => member.userName || member.name || '').filter(name => name).join('、');
|
||||
};
|
||||
|
||||
// 获取紧急状态标签
|
||||
const getUrgentStatus = (project) => {
|
||||
if (!project.expireTime) return '';
|
||||
|
||||
const expireDate = new Date(project.expireTime);
|
||||
const now = new Date();
|
||||
const diffTime = expireDate - now;
|
||||
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (diffDays < 0) {
|
||||
// 已逾期
|
||||
return '';
|
||||
} else if (diffDays <= 3) {
|
||||
// 即将到期（3天内）
|
||||
return '即将到期';
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
// 判断是否逾期
|
||||
const isOverdue = (project) => {
|
||||
if (!project.expireTime) return false;
|
||||
const expireDate = new Date(project.expireTime);
|
||||
const now = new Date();
|
||||
return expireDate < now;
|
||||
};
|
||||
|
||||
// 获取时间状态文本（剩余天数或逾期天数）
|
||||
const getTimeStatus = (project) => {
|
||||
if (!project.expireTime) return '';
|
||||
|
||||
const expireDate = new Date(project.expireTime);
|
||||
const now = new Date();
|
||||
const diffTime = expireDate - now;
|
||||
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (diffDays < 0) {
|
||||
return `逾期${Math.abs(diffDays)}天`;
|
||||
} else if (diffDays === 0) {
|
||||
return '今天到期';
|
||||
} else {
|
||||
return `剩余${diffDays}天`;
|
||||
}
|
||||
};
|
||||
|
||||
// 获取标签颜色（根据项目创建人或负责人）
|
||||
const getTagColor = (project) => {
|
||||
const colors = ['#87CEEB', '#FFB6C1', '#FFA500', '#98D8C8', '#DDA0DD'];
|
||||
const name = project.createName || project.ownerName || '';
|
||||
if (!name) return colors[0];
|
||||
const index = name.charCodeAt(0) % colors.length;
|
||||
return colors[index];
|
||||
};
|
||||
|
||||
// 获取标签文本（取创建人名字的第一个字）
|
||||
const getTagText = (project) => {
|
||||
const name = project.createName || project.ownerName || '';
|
||||
if (!name) return '项';
|
||||
return name.charAt(0);
|
||||
};
|
||||
|
||||
// 获取显示成员（最多3个）
|
||||
const getDisplayMembers = (memberList) => {
|
||||
if (!Array.isArray(memberList)) return [];
|
||||
return memberList.slice(0, 3);
|
||||
};
|
||||
|
||||
// 格式化成员名称
|
||||
const formatMemberNames = (memberList) => {
|
||||
if (!Array.isArray(memberList) || memberList.length === 0) return '';
|
||||
|
||||
const names = memberList.map(member => member.userName || member.name || '').filter(name => name);
|
||||
|
||||
if (names.length <= 3) {
|
||||
return names.join('');
|
||||
} else {
|
||||
const firstThree = names.slice(0, 3).join('');
|
||||
return `${firstThree}等${names.length}人`;
|
||||
}
|
||||
};
|
||||
|
||||
// 获取头像颜色
|
||||
const getAvatarColor = (member, index) => {
|
||||
const colors = ['#FFB6C1', '#87CEEB', '#DDA0DD', '#98D8C8', '#FFA500'];
|
||||
return colors[index % colors.length];
|
||||
};
|
||||
|
||||
// 获取头像文本（取名字的第一个字）
|
||||
const getAvatarText = (member) => {
|
||||
const name = member.userName || member.name || '';
|
||||
if (!name) return '?';
|
||||
return name.charAt(0);
|
||||
};
|
||||
|
||||
// 处理卡片菜单
|
||||
const handleCardMenu = (project) => {
|
||||
uni.showActionSheet({
|
||||
itemList: ['修改', '删除', '+ 新增任务', '√ 开始开发'],
|
||||
success: (res) => {
|
||||
if (res.tapIndex === 0) {
|
||||
// 修改
|
||||
uni.showToast({ title: '修改功能开发中', icon: 'none' });
|
||||
} else if (res.tapIndex === 1) {
|
||||
// 删除
|
||||
uni.showToast({ title: '删除功能开发中', icon: 'none' });
|
||||
} else if (res.tapIndex === 2) {
|
||||
// 新增任务
|
||||
uni.showToast({ title: '新增任务功能开发中', icon: 'none' });
|
||||
} else if (res.tapIndex === 3) {
|
||||
// 开始开发
|
||||
uni.showToast({ title: '开始开发功能开发中', icon: 'none' });
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 处理状态标签点击
|
||||
const handleStatusTabClick = (value) => {
|
||||
activeStatusTab.value = value;
|
||||
|
|
@ -383,7 +527,7 @@ const handleReset = () => {
|
|||
overdue: ''
|
||||
};
|
||||
selectedMemberName.value = '';
|
||||
activeStatusTab.value = '2';
|
||||
activeStatusTab.value = 'IN_PROGRESS';
|
||||
handleSearch();
|
||||
};
|
||||
|
||||
|
|
@ -563,90 +707,242 @@ onLoad(() => {
|
|||
|
||||
.project-container {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* 移动端适配 */
|
||||
@media (max-width: 768px) {
|
||||
.project-container {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.project-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.project-card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.project-header {
|
||||
.project-card:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 卡片头部 */
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.expire-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.expire-label {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.expire-value {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.project-content {
|
||||
.header-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
background: #E5E5E5;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.urgent-tag {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
background: #FF4444;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.project-name {
|
||||
.release-date {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.action-menu {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.action-menu:active {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
line-height: 1;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/* 项目标题 */
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.project-description {
|
||||
/* 标签和描述行 */
|
||||
.card-tags-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.tag-circle {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tag-text {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.project-meta {
|
||||
/* 操作标签 */
|
||||
.action-tags {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.action-tag {
|
||||
padding: 4px 10px;
|
||||
background: #E3F2FD;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #1976D2;
|
||||
}
|
||||
|
||||
/* 卡片底部 */
|
||||
.card-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.meta-row {
|
||||
.date-info {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.overdue-tip {
|
||||
margin-top: 8px;
|
||||
.date-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.overdue-text {
|
||||
.time-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.time-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
|
||||
&.overdue {
|
||||
color: #FF4444;
|
||||
}
|
||||
}
|
||||
|
||||
.member-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.member-avatars {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.member-avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid #fff;
|
||||
margin-left: -8px;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-text {
|
||||
font-size: 10px;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.member-text {
|
||||
font-size: 12px;
|
||||
color: #ff4444;
|
||||
color: #666;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user