420 lines
11 KiB
Vue
420 lines
11 KiB
Vue
<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> |