提交任务-样式微调
This commit is contained in:
WindowBird
parent
f479d0d5a0
commit
62d84fcc38
|
|
@ -58,8 +58,8 @@
|
|||
{
|
||||
"path": "pages/submit-task/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "提交详情",
|
||||
"navigationStyle": "custom"
|
||||
"navigationBarTitleText": "提交详情"
|
||||
|
||||
}
|
||||
}
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1,19 +1,17 @@
|
|||
<template>
|
||||
|
||||
<view class="submit-task-page">
|
||||
<!-- 自定义导航栏 -->
|
||||
<view class="custom-navbar">
|
||||
<view class="navbar-content">
|
||||
<text class="nav-btn" @click="handleCancel">✕</text>
|
||||
<text class="nav-title">提交详情</text>
|
||||
<view class="nav-placeholder"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<scroll-view class="content-scroll" scroll-y>
|
||||
<view style="padding: 16px">
|
||||
|
||||
|
||||
<!-- 输入提交说明 -->
|
||||
<view class="form-item">
|
||||
<view class="form-icon">📄⚙️</view>
|
||||
<view class="form-icon"></view>
|
||||
<textarea
|
||||
v-model="formData.description"
|
||||
class="description-input"
|
||||
|
|
@ -70,6 +68,7 @@
|
|||
<view class="remove-btn" @click="removeFile(index)">✕</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 进度选择弹窗 -->
|
||||
|
|
@ -78,7 +77,7 @@
|
|||
<view class="modal-title">选择任务进度</view>
|
||||
<view class="progress-content">
|
||||
<slider
|
||||
:value="formData.progress || 0"
|
||||
:value="tempProgress !== null ? tempProgress : 0"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:step="10"
|
||||
|
|
@ -91,7 +90,7 @@
|
|||
class="progress-option"
|
||||
v-for="progress in progressOptions"
|
||||
:key="progress"
|
||||
:class="{ active: formData.progress === progress }"
|
||||
:class="{ active: tempProgress === progress }"
|
||||
@click="selectProgress(progress)"
|
||||
>
|
||||
<text>{{ progress }}%</text>
|
||||
|
|
@ -177,9 +176,10 @@ const onProgressChange = (e) => {
|
|||
tempProgress.value = e.detail.value;
|
||||
};
|
||||
|
||||
// 选择进度
|
||||
// 选择进度（点击按钮直接确认）
|
||||
const selectProgress = (progress) => {
|
||||
tempProgress.value = progress;
|
||||
formData.value.progress = progress;
|
||||
showProgressPicker.value = false;
|
||||
};
|
||||
|
||||
// 确认进度
|
||||
|
|
@ -220,57 +220,128 @@ const removeImage = (index) => {
|
|||
formData.value.images.splice(index, 1);
|
||||
};
|
||||
|
||||
// 选择文件
|
||||
// 选择文件（安卓平台）
|
||||
const chooseFiles = () => {
|
||||
// #ifdef H5 || APP-PLUS
|
||||
uni.showActionSheet({
|
||||
itemList: ['从相册选择', '拍照'],
|
||||
success: (res) => {
|
||||
if (res.tapIndex === 0) {
|
||||
// 从相册选择
|
||||
uni.chooseImage({
|
||||
count: 9,
|
||||
success: (res) => {
|
||||
// 将图片转换为文件格式
|
||||
const files = res.tempFilePaths.map((path, index) => ({
|
||||
name: `image_${Date.now()}_${index}.jpg`,
|
||||
path: path,
|
||||
size: 0
|
||||
}));
|
||||
formData.value.files = [...formData.value.files, ...files];
|
||||
const remainingCount = 5 - formData.value.files.length;
|
||||
if (remainingCount <= 0) {
|
||||
uni.showToast({
|
||||
title: '最多只能添加5个文件',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 安卓平台使用 plus API 调用原生文件选择器
|
||||
if (typeof plus !== 'undefined') {
|
||||
try {
|
||||
const Intent = plus.android.importClass('android.content.Intent');
|
||||
const main = plus.android.runtimeMainActivity();
|
||||
|
||||
// 创建文件选择 Intent
|
||||
const intent = new Intent(Intent.ACTION_GET_CONTENT);
|
||||
intent.setType('*/*');
|
||||
intent.addCategory(Intent.CATEGORY_OPENABLE);
|
||||
intent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true); // 允许多选
|
||||
|
||||
// 启动文件选择器
|
||||
main.startActivityForResult(intent, 1001);
|
||||
|
||||
// 监听文件选择结果
|
||||
const originalOnActivityResult = main.onActivityResult;
|
||||
main.onActivityResult = (requestCode, resultCode, data) => {
|
||||
if (requestCode === 1001) {
|
||||
if (resultCode === -1 && data) { // RESULT_OK = -1
|
||||
try {
|
||||
const clipData = data.getClipData();
|
||||
const files = [];
|
||||
|
||||
// 获取文件名的方法
|
||||
const getFileName = (uri) => {
|
||||
try {
|
||||
const cursor = main.getContentResolver().query(uri, null, null, null, null);
|
||||
if (cursor && cursor.moveToFirst()) {
|
||||
const nameIndex = cursor.getColumnIndex('_display_name');
|
||||
if (nameIndex !== -1) {
|
||||
const fileName = cursor.getString(nameIndex);
|
||||
cursor.close();
|
||||
return fileName;
|
||||
}
|
||||
cursor.close();
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('获取文件名失败:', e);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
if (clipData) {
|
||||
// 多选文件
|
||||
const count = clipData.getItemCount();
|
||||
for (let i = 0; i < count && files.length < remainingCount; i++) {
|
||||
const item = clipData.getItemAt(i);
|
||||
const uri = item.getUri();
|
||||
const uriString = uri.toString();
|
||||
|
||||
// 获取文件名
|
||||
let fileName = getFileName(uri) || `file_${Date.now()}_${i}`;
|
||||
|
||||
files.push({
|
||||
name: fileName,
|
||||
path: uriString, // 保存 URI 字符串
|
||||
size: 0
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// 单选文件
|
||||
const uri = data.getData();
|
||||
if (uri) {
|
||||
const uriString = uri.toString();
|
||||
let fileName = getFileName(uri) || `file_${Date.now()}`;
|
||||
|
||||
files.push({
|
||||
name: fileName,
|
||||
path: uriString, // 保存 URI 字符串
|
||||
size: 0
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (files.length > 0) {
|
||||
formData.value.files = [...formData.value.files, ...files];
|
||||
}
|
||||
|
||||
// 恢复原始的 onActivityResult
|
||||
if (originalOnActivityResult) {
|
||||
main.onActivityResult = originalOnActivityResult;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('处理文件选择结果失败:', error);
|
||||
uni.showToast({
|
||||
title: '处理文件失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '暂不支持文件选择',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
|
||||
// #ifdef MP
|
||||
uni.chooseFile({
|
||||
count: 5 - formData.value.files.length,
|
||||
type: 'file',
|
||||
success: (res) => {
|
||||
const files = res.tempFiles.map(file => ({
|
||||
name: file.name || `file_${Date.now()}.${file.path.split('.').pop()}`,
|
||||
path: file.path,
|
||||
size: file.size
|
||||
}));
|
||||
formData.value.files = [...formData.value.files, ...files];
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('选择文件失败:', err);
|
||||
} else {
|
||||
// 调用原始的 onActivityResult
|
||||
if (originalOnActivityResult) {
|
||||
originalOnActivityResult(requestCode, resultCode, data);
|
||||
}
|
||||
}
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('打开文件选择器失败:', error);
|
||||
uni.showToast({
|
||||
title: '选择文件失败',
|
||||
title: '文件选择功能暂不可用',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '当前环境不支持文件选择',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 删除文件
|
||||
|
|
@ -278,6 +349,20 @@ const removeFile = (index) => {
|
|||
formData.value.files.splice(index, 1);
|
||||
};
|
||||
|
||||
// 格式化时间为中文格式：年月日星期几时分秒
|
||||
const formatTimeToChinese = (date) => {
|
||||
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const weekday = weekdays[date.getDay()];
|
||||
const hour = String(date.getHours()).padStart(2, '0');
|
||||
const minute = String(date.getMinutes()).padStart(2, '0');
|
||||
const second = String(date.getSeconds()).padStart(2, '0');
|
||||
|
||||
return `${year}年${month}月${day}日 ${weekday} ${hour}:${minute}:${second}`;
|
||||
};
|
||||
|
||||
// 提交任务
|
||||
const handleSubmit = () => {
|
||||
if (!canSubmit.value) {
|
||||
|
|
@ -326,14 +411,7 @@ const handleSubmit = () => {
|
|||
// 提交成功后，将数据传递回任务详情页
|
||||
const submitRecord = {
|
||||
userName: '当前用户', // TODO: 从用户信息获取
|
||||
time: new Date().toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
}).replace(/\//g, '-'),
|
||||
time: formatTimeToChinese(new Date()),
|
||||
content: submitData.description || '',
|
||||
progress: submitData.progress,
|
||||
attachments: [
|
||||
|
|
@ -406,7 +484,7 @@ const handleSubmit = () => {
|
|||
/* 内容滚动区域 */
|
||||
.content-scroll {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
|
||||
}
|
||||
|
||||
/* 表单项 */
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<view>
|
||||
|
||||
|
||||
<scroll-view class="content-scroll" scroll-y>
|
||||
<!-- 任务状态栏 -->
|
||||
|
|
@ -141,7 +141,7 @@
|
|||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -152,6 +152,24 @@ import { onLoad,onShow } from '@dcloudio/uni-app';
|
|||
const activeTab = ref('info');
|
||||
const showMenuIndex = ref(-1);
|
||||
|
||||
// 格式化时间为中文格式：年月日星期几时分秒
|
||||
const formatTimeToChinese = (date) => {
|
||||
if (typeof date === 'string') {
|
||||
// 如果是字符串，尝试解析
|
||||
date = new Date(date);
|
||||
}
|
||||
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const weekday = weekdays[date.getDay()];
|
||||
const hour = String(date.getHours()).padStart(2, '0');
|
||||
const minute = String(date.getMinutes()).padStart(2, '0');
|
||||
const second = String(date.getSeconds()).padStart(2, '0');
|
||||
|
||||
return `${year}年${month}月${day}日 ${weekday} ${hour}:${minute}:${second}`;
|
||||
};
|
||||
|
||||
// 任务数据
|
||||
const task = ref({
|
||||
id: null,
|
||||
|
|
@ -166,7 +184,7 @@ const task = ref({
|
|||
submitRecords: [
|
||||
{
|
||||
userName: "张珊珊",
|
||||
time: "2025-10-20 15:20:56",
|
||||
time: formatTimeToChinese(new Date('2025-10-20 15:20:56')),
|
||||
content: "任务内容任务。这里是详细的任务描述，可以包含多行文本。根据实际需求，这里可以展示任务的详细要求、步骤说明、注意事项等。任务内容应该清晰明了，便于负责人理解和执行。",
|
||||
attachments: [
|
||||
{ type: "image" },
|
||||
|
|
@ -178,7 +196,7 @@ const task = ref({
|
|||
},
|
||||
{
|
||||
userName: "李志",
|
||||
time: "2025-10-20 15:20:56",
|
||||
time: formatTimeToChinese(new Date('2025-10-20 15:20:56')),
|
||||
content: "任务内容任务。这里是详细的任务描述，可以包含多行文本。根据实际需求，这里可以展示任务的详细要求、步骤说明、注意事项等。任务内容应该清晰明了，便于负责人理解和执行。",
|
||||
attachments: [
|
||||
{ type: "file", name: "AA_573_1280.JPG" }
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user