bwadmin/FileCollect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home1022

Browse Source
This commit is contained in:
bwstudio
2025-10-22 08:19:00 +08:00
parent 467b04e5b0
commit 97fbfe08d7
6040 changed files with 529099 additions and 9685 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/user-home/user-home.vue
+420
View File
@@ -0,0 +1,420 @@
<template>
<view class="user-home-container">
<!-- 顶部导航栏 -->
<view class="top-navbar">
<text class="title">图片收集系统</text>
<image class="avatar" src="@/static/common/user.svg" mode="aspectFit" @click="navigateTo('/pages/user-profile/user-profile')"></image>
</view>
<!-- 内容区域 -->
<scroll-view class="content" scroll-y enable-back-to-top>
<!-- 待完成任务区域 -->
<view class="section">
<view class="section-header">
<text class="section-title">待完成任务</text>
<text class="more" @click="navigateTo('/pages/task-management/task-management')">查看全部</text>
</view>
<view class="task-list">
<view v-for="task in taskList" :key="task.id" class="task-card" @click="viewTaskDetail(task.id)">
<view class="task-header">
<text class="task-title">{{ task.title }}</text>
<view class="task-status" :class="task.statusClass">
{{ task.status }}
</view>
</view>
<text class="task-desc">{{ task.description }}</text>
<view class="task-footer">
<text class="task-deadline">截止：{{ task.deadline }}</text>
<text class="task-progress">{{ task.progress }}%</text>
</view>
<view class="progress-bar">
<view class="progress-fill" :style="{ width: task.progress + '%' }"></view>
</view>
</view>
</view>
</view>
<!-- 已上传图片区域 -->
<view class="section">
<view class="section-header">
<text class="section-title">我的上传</text>
<text class="more" @click="navigateTo('/pages/my-images/my-images')">查看全部</text>
</view>
<view class="image-grid">
<view v-for="image in imageList" :key="image.id" class="image-item" @click="viewImageDetail(image.id)">
<image class="image" :src="image.url" mode="aspectFill"></image>
<text class="image-title">{{ image.title }}</text>
<view class="image-status" :class="image.statusClass">
{{ image.status }}
</view>
</view>
</view>
</view>
</scroll-view>
<!-- 上传按钮 -->
<view class="upload-btn" @click="navigateTo('/pages/image-upload/image-upload')">
<u-icon name="plus" size="60"></u-icon>
</view>
<!-- 底部导航栏 -->
<view class="tab-bar">
<view class="tab-item active">
<u-icon name="home" size="44"></u-icon>
<text>首页</text>
</view>
<view class="tab-item" @click="navigateTo('/pages/image-upload/image-upload')">
<u-icon name="camera" size="44"></u-icon>
<text>上传</text>
</view>
<view class="tab-item" @click="navigateTo('/pages/user-profile/user-profile')">
<u-icon name="user" size="44"></u-icon>
<text>我的</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
taskList: [
{
id: '1',
title: '项目进度拍摄',
description: '拍摄项目各环节的进度照片，要求清晰展示工作状态',
deadline: '2023-12-31',
progress: 60,
status: '进行中',
statusClass: 'status-ing'
},
{
id: '2',
title: '设备巡检',
description: '对设备进行定期巡检并拍摄设备状态照片',
deadline: '2023-12-15',
progress: 30,
status: '进行中',
statusClass: 'status-ing'
},
{
id: '3',
title: '活动照片收集',
description: '收集公司年会活动的精彩瞬间照片',
deadline: '2024-01-10',
progress: 10,
status: '待开始',
statusClass: 'status-waiting'
}
],
imageList: [
{
id: '1',
title: '项目启动会',
url: 'https://cdn.uviewui.com/uview/example/grid1.jpg',
status: '已通过',
statusClass: 'status-approved'
},
{
id: '2',
title: '设备安装现场',
url: 'https://cdn.uviewui.com/uview/example/grid2.jpg',
status: '审核中',
statusClass: 'status-reviewing'
},
{
id: '3',
title: '团队协作',
url: 'https://cdn.uviewui.com/uview/example/grid3.jpg',
status: '已通过',
statusClass: 'status-approved'
},
{
id: '4',
title: '会议记录',
url: 'https://cdn.uviewui.com/uview/example/grid4.jpg',
status: '已通过',
statusClass: 'status-approved'
},
{
id: '5',
title: '现场勘查',
url: 'https://cdn.uviewui.com/uview/example/grid5.jpg',
status: '审核中',
statusClass: 'status-reviewing'
},
{
id: '6',
title: '产品展示',
url: 'https://cdn.uviewui.com/uview/example/grid6.jpg',
status: '已拒绝',
statusClass: 'status-rejected'
}
]
}
},
methods: {
navigateTo(url) {
uni.navigateTo({ url })
},
viewTaskDetail(taskId) {
this.navigateTo(`/pages/task-detail/task-detail?id=${taskId}`)
},
viewImageDetail(imageId) {
this.navigateTo(`/pages/image-detail/image-detail?id=${imageId}`)
}
}
}
</script>
<style lang="scss" scoped>
.user-home-container {
padding-top: 44px; // 适配顶部安全区域
padding-bottom: 120rpx; // 适配底部导航栏
height: 100vh;
box-sizing: border-box;
background-color: #f5f7fa;
.top-navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 44px;
background-color: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
z-index: 999;
.title {
font-size: 36rpx;
font-weight: bold;
color: #333;
}
.avatar {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
}
}
.content {
height: calc(100% - 44px);
padding: 20rpx;
}
.section {
background-color: #ffffff;
border-radius: 16rpx;
padding: 30rpx;
margin-bottom: 20rpx;
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
.section-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.more {
font-size: 28rpx;
color: #1989fa;
}
}
.task-list {
.task-card {
padding: 20rpx 0;
border-bottom: 2rpx solid #f5f7fa;
&:last-child {
border-bottom: none;
}
.task-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10rpx;
.task-title {
font-size: 28rpx;
font-weight: bold;
color: #333;
flex: 1;
margin-right: 20rpx;
}
.task-status {
padding: 4rpx 16rpx;
border-radius: 20rpx;
font-size: 20rpx;
&.status-ing {
background-color: #e6f7ff;
color: #1890ff;
}
&.status-waiting {
background-color: #fff7e6;
color: #fa8c16;
}
}
}
.task-desc {
font-size: 24rpx;
color: #606266;
margin-bottom: 10rpx;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.task-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10rpx;
.task-deadline {
font-size: 22rpx;
color: #909399;
}
.task-progress {
font-size: 24rpx;
color: #1989fa;
}
}
.progress-bar {
height: 8rpx;
background-color: #f5f7fa;
border-radius: 4rpx;
overflow: hidden;
.progress-fill {
height: 100%;
background-color: #1989fa;
border-radius: 4rpx;
}
}
}
}
.image-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16rpx;
.image-item {
position: relative;
.image {
width: 100%;
aspect-ratio: 1;
border-radius: 8rpx;
}
.image-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10rpx;
font-size: 22rpx;
color: #ffffff;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
border-radius: 0 0 8rpx 8rpx;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.image-status {
position: absolute;
top: 10rpx;
right: 10rpx;
padding: 4rpx 16rpx;
border-radius: 20rpx;
font-size: 20rpx;
&.status-approved {
background-color: rgba(82, 196, 26, 0.8);
color: #ffffff;
}
&.status-reviewing {
background-color: rgba(24, 144, 255, 0.8);
color: #ffffff;
}
&.status-rejected {
background-color: rgba(255, 73, 73, 0.8);
color: #ffffff;
}
}
}
}
}
.upload-btn {
position: fixed;
right: 40rpx;
bottom: 150rpx;
width: 120rpx;
height: 120rpx;
background-color: #1989fa;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
box-shadow: 0 4rpx 20rpx rgba(25, 137, 250, 0.4);
}
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 120rpx;
background-color: #ffffff;
display: flex;
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
.tab-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: #909399;
&.active {
color: #1989fa;
}
text {
margin-top: 8rpx;
}
}
}
}
</style>