From cdcc529ce5fb9aa0dd1dea5bb2a620fc09b7d25c Mon Sep 17 00:00:00 2001
From: wlzboy <66905212@qq.com>
Date: 星期六, 08 十一月 2025 20:03:56 +0800
Subject: [PATCH] feat: 上传附件
---
app/pages/task/detail.vue | 277 ++++---------------------------------------------------
1 files changed, 21 insertions(+), 256 deletions(-)
diff --git a/app/pages/task/detail.vue b/app/pages/task/detail.vue
index 3932e66..8803e0a 100644
--- a/app/pages/task/detail.vue
+++ b/app/pages/task/detail.vue
@@ -195,33 +195,12 @@
</view>
<!-- 闄勪欢淇℃伅 -->
- <view class="detail-section">
- <view class="section-title">
- 浠诲姟闄勪欢
- <button class="upload-btn" @click="showUploadDialog">涓婁紶闄勪欢</button>
- </view>
- <view v-if="attachmentList && attachmentList.length > 0">
- <view class="attachment-item" v-for="(item, index) in attachmentList" :key="item.attachmentId">
- <view class="attachment-info">
- <view class="attachment-category">
- <text class="category-tag">{{ getCategoryName(item.attachmentCategory) }}</text>
- </view>
- <view class="attachment-name">{{ item.fileName }}</view>
- <view class="attachment-meta">
- <text class="upload-time">{{ formatTime(item.uploadTime) }}</text>
- <text class="file-size">{{ formatFileSize(item.fileSize) }}</text>
- </view>
- </view>
- <view class="attachment-actions">
- <button class="action-btn view-btn" @click="viewAttachment(item)">鏌ョ湅</button>
- <button class="action-btn delete-btn" @click="deleteAttachment(item.attachmentId, index)">鍒犻櫎</button>
- </view>
- </view>
- </view>
- <view v-else class="no-attachment">
- <text>鏆傛棤闄勪欢</text>
- </view>
- </view>
+ <AttachmentUpload
+ :taskId="taskId"
+ title="浠诲姟闄勪欢"
+ @uploaded="onAttachmentUploaded"
+ @deleted="onAttachmentDeleted"
+ />
<!-- 绂忕杞︿换鍔＄壒鏈変俊鎭� -->
<view class="detail-section" v-if="taskDetail.taskType === 'WELFARE' && taskDetail.welfareInfo">
@@ -343,66 +322,22 @@
<!-- 宸插畬鎴�/宸插彇娑�: 涓嶆樉绀烘寜閽� -->
</view>
-
- <!-- 闄勪欢涓婁紶瀵硅瘽妗� -->
- <uni-popup ref="uploadPopup" type="bottom">
- <view class="upload-dialog">
- <view class="dialog-header">
- <text class="dialog-title">涓婁紶闄勪欢</text>
- <uni-icons type="closeempty" size="24" @click="closeUploadDialog"></uni-icons>
- </view>
- <view class="dialog-content">
- <view class="form-item">
- <view class="form-label">闄勪欢鍒嗙被</view>
- <picker @change="onCategoryChange" :value="selectedCategoryIndex" :range="categoryList" range-key="label">
- <view class="picker-value">
- {{ categoryList[selectedCategoryIndex].label }}
- <uni-icons type="arrowdown" size="16"></uni-icons>
- </view>
- </picker>
- </view>
- <view class="form-item">
- <view class="form-label">閫夋嫨鍥剧墖</view>
- <button class="choose-image-btn" @click="chooseImage">
- <uni-icons type="image" size="20"></uni-icons>
- <text>鐐瑰嚮閫夋嫨</text>
- </button>
- </view>
- <view class="preview-area" v-if="tempImagePath">
- <image :src="tempImagePath" mode="aspectFit" class="preview-image"></image>
- </view>
- </view>
- <view class="dialog-footer">
- <button class="cancel-btn" @click="closeUploadDialog">鍙栨秷</button>
- <button class="confirm-btn" @click="confirmUpload" :disabled="!tempImagePath">纭畾涓婁紶</button>
- </view>
- </view>
- </uni-popup>
</view>
</template>
<script>
import { getTask, changeTaskStatus } from '@/api/task'
- import { getAttachmentList, uploadAttachmentFromWechat, deleteAttachment, getWechatAccessToken } from '@/api/task'
import { formatDateTime } from '@/utils/common'
+ import AttachmentUpload from '@/components/AttachmentUpload.vue'
export default {
+ components: {
+ AttachmentUpload
+ },
data() {
return {
taskDetail: null,
- taskId: null,
- attachmentList: [],
- categoryList: [
- { label: '鐭ユ儏鍚屾剰涔�', value: '1' },
- { label: '鐥呬汉璧勬枡', value: '2' },
- { label: '鎿嶄綔璁板綍', value: '3' },
- { label: '鍑鸿溅鍓�', value: '4' },
- { label: '鍑鸿溅鍚�', value: '5' },
- { label: '绯诲畨鍏ㄥ甫', value: '6' }
- ],
- selectedCategoryIndex: 0,
- tempImagePath: null,
- isWechatMiniProgram: false // 鏄惁鏄井淇″皬绋嬪簭鐜
+ taskId: null
}
},
computed: {
@@ -464,12 +399,6 @@
onLoad(options) {
this.taskId = options.id
this.loadTaskDetail()
- this.loadAttachmentList()
-
- // 妫�娴嬫槸鍚︽槸寰俊灏忕▼搴忕幆澧�
- // #ifdef MP-WEIXIN
- this.isWechatMiniProgram = true
- // #endif
},
methods: {
// 鍔犺浇浠诲姟璇︽儏
@@ -923,6 +852,16 @@
if (size < 1024) return size + 'B'
if (size < 1024 * 1024) return (size / 1024).toFixed(2) + 'KB'
return (size / 1024 / 1024).toFixed(2) + 'MB'
+ },
+
+ // 闄勪欢涓婁紶鎴愬姛鍥炶皟
+ onAttachmentUploaded(response) {
+ console.log('闄勪欢涓婁紶鎴愬姛:', response)
+ },
+
+ // 闄勪欢鍒犻櫎鎴愬姛鍥炶皟
+ onAttachmentDeleted(attachmentId) {
+ console.log('闄勪欢鍒犻櫎鎴愬姛:', attachmentId)
}
}
}
@@ -1038,84 +977,6 @@
padding: 20rpx;
border-radius: 10rpx;
}
-
- .no-attachment {
- text-align: center;
- padding: 40rpx 0;
- color: #999;
- font-size: 28rpx;
- }
-
- .attachment-item {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 20rpx;
- margin-bottom: 15rpx;
- background-color: #f9f9f9;
- border-radius: 10rpx;
-
- &:last-child {
- margin-bottom: 0;
- }
-
- .attachment-info {
- flex: 1;
- margin-right: 20rpx;
-
- .attachment-category {
- margin-bottom: 8rpx;
-
- .category-tag {
- display: inline-block;
- padding: 4rpx 12rpx;
- background-color: #007AFF;
- color: white;
- font-size: 22rpx;
- border-radius: 4rpx;
- }
- }
-
- .attachment-name {
- font-size: 28rpx;
- color: #333;
- margin-bottom: 8rpx;
- word-break: break-all;
- }
-
- .attachment-meta {
- font-size: 24rpx;
- color: #999;
-
- .upload-time {
- margin-right: 20rpx;
- }
- }
- }
-
- .attachment-actions {
- display: flex;
- flex-direction: column;
- gap: 10rpx;
-
- .action-btn {
- padding: 8rpx 20rpx;
- font-size: 24rpx;
- border-radius: 6rpx;
- border: none;
-
- &.view-btn {
- background-color: #007AFF;
- color: white;
- }
-
- &.delete-btn {
- background-color: #ff3b30;
- color: white;
- }
- }
- }
- }
}
.loading {
@@ -1167,102 +1028,6 @@
&:last-child {
margin-right: 0;
- }
- }
- }
-
- .upload-dialog {
- background-color: white;
- border-radius: 20rpx 20rpx 0 0;
- padding: 30rpx;
-
- .dialog-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 30rpx;
-
- .dialog-title {
- font-size: 32rpx;
- font-weight: bold;
- color: #333;
- }
- }
-
- .dialog-content {
- .form-item {
- margin-bottom: 30rpx;
-
- .form-label {
- font-size: 28rpx;
- color: #333;
- margin-bottom: 15rpx;
- }
-
- .picker-value {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 20rpx;
- background-color: #f5f5f5;
- border-radius: 10rpx;
- font-size: 28rpx;
- color: #333;
- }
-
- .choose-image-btn {
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 30rpx;
- background-color: #f5f5f5;
- border-radius: 10rpx;
- border: 2rpx dashed #ccc;
- color: #666;
- font-size: 28rpx;
-
- text {
- margin-left: 10rpx;
- }
- }
- }
-
- .preview-area {
- margin-top: 20rpx;
-
- .preview-image {
- width: 100%;
- height: 400rpx;
- border-radius: 10rpx;
- }
- }
- }
-
- .dialog-footer {
- display: flex;
- gap: 20rpx;
- margin-top: 30rpx;
-
- button {
- flex: 1;
- height: 80rpx;
- border-radius: 10rpx;
- font-size: 30rpx;
- border: none;
- }
-
- .cancel-btn {
- background-color: #f5f5f5;
- color: #666;
- }
-
- .confirm-btn {
- background-color: #007AFF;
- color: white;
-
- &:disabled {
- background-color: #ccc;
- }
}
}
}
--
Gitblit v1.9.1