883 lines
23 KiB
Vue
883 lines
23 KiB
Vue
<template>
|
||
<view class="achievement-form-page">
|
||
<!-- 表单内容 -->
|
||
<scroll-view scroll-y class="form-scroll-view">
|
||
<view class="form-container">
|
||
|
||
<!-- 成果名称 -->
|
||
<view class="form-section">
|
||
<view class="section-label">
|
||
<text class="label-text">成果名称</text>
|
||
<text class="required-star">*</text>
|
||
</view>
|
||
<view class="simple-text-wrapper">
|
||
<textarea
|
||
v-model="formData.jycgmc"
|
||
placeholder="请输入成果名称..."
|
||
class="simple-textarea"
|
||
:maxlength="200"
|
||
auto-height
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 解决的主要问题 -->
|
||
<view class="form-section">
|
||
<view class="section-label">
|
||
<text class="label-text">解决的主要问题</text>
|
||
<text class="required-star">*</text>
|
||
</view>
|
||
<view class="simple-text-wrapper">
|
||
<textarea
|
||
v-model="formData.jjdywt"
|
||
placeholder="请输入解决的主要问题..."
|
||
class="simple-textarea"
|
||
:maxlength="2000"
|
||
auto-height
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 最终成果 -->
|
||
<view class="form-section">
|
||
<view class="section-label">
|
||
<text class="label-text">最终成果</text>
|
||
<text class="required-star">*</text>
|
||
</view>
|
||
<view class="simple-text-wrapper">
|
||
<textarea
|
||
v-model="formData.zzcg"
|
||
placeholder="请输入最终成果内容..."
|
||
class="simple-textarea"
|
||
:maxlength="5000"
|
||
auto-height
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 添加附件 -->
|
||
<view class="form-section">
|
||
<view class="section-label">
|
||
<text class="label-text">添加附件</text>
|
||
</view>
|
||
<view class="file-upload-wrapper">
|
||
<ImageVideoUpload
|
||
v-model:file-list="fileList"
|
||
:max-file-count="30"
|
||
:enable-image="false"
|
||
:enable-video="false"
|
||
:enable-file="true"
|
||
:allowed-file-types="allowedFileTypes"
|
||
:upload-api="customUploadApi"
|
||
@file-upload-success="onFileUploadSuccess"
|
||
@upload-progress="onUploadProgress"
|
||
@file-upload-error="onFileUploadError"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提交人 -->
|
||
<view class="form-section">
|
||
<view class="section-label">
|
||
<text class="label-text">提交人</text>
|
||
</view>
|
||
<view class="readonly-input-wrapper">
|
||
<text class="readonly-text">{{ formData.jsxm }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提交时间 -->
|
||
<view class="form-section">
|
||
<view class="section-label">
|
||
<text class="label-text">提交时间</text>
|
||
</view>
|
||
<view class="readonly-input-wrapper">
|
||
<text class="readonly-text">{{ formData.createdTime }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 底部固定操作按钮 -->
|
||
<view class="bottom-actions">
|
||
<view class="action-btn cancel-btn" @click="cancelForm">
|
||
<text class="btn-text">取消</text>
|
||
</view>
|
||
<view
|
||
class="action-btn submit-btn"
|
||
:class="{ 'disabled': isUploading }"
|
||
@click="submitAchievement"
|
||
>
|
||
<text class="btn-text">{{ isEdit ? '保存' : '提交' }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 文件上传遮罩层 -->
|
||
<view v-if="isUploading" class="upload-mask">
|
||
<view class="upload-content">
|
||
<view class="upload-icon">
|
||
<text class="icon-text">📤</text>
|
||
</view>
|
||
<view class="upload-title">文件上传中...</view>
|
||
<view class="upload-status">{{ uploadStatus }}</view>
|
||
<view class="upload-progress">
|
||
<view class="progress-bar">
|
||
<view
|
||
class="progress-fill"
|
||
:style="{ width: uploadProgress + '%' }"
|
||
></view>
|
||
</view>
|
||
<text class="progress-text">{{ uploadProgress }}%</text>
|
||
</view>
|
||
<view class="upload-tip">请等待文件上传完成后再提交</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, reactive, onMounted } from "vue";
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
import { jycgSaveApi, jycgFindByIdApi, jycgUploadFileApi } from "@/api/base/jycgApi";
|
||
import { useUserStore } from "@/store/modules/user";
|
||
import { ImageVideoUpload, type FileItem } from "@/components/ImageVideoUpload";
|
||
import { attachmentUpload } from "@/api/system/upload";
|
||
|
||
const userStore = useUserStore();
|
||
const { getJs, getUser } = userStore;
|
||
|
||
// 是否为编辑模式
|
||
const isEdit = ref(false);
|
||
const isLoading = ref(false);
|
||
|
||
// 文件上传状态管理
|
||
const isUploading = ref(false);
|
||
const uploadProgress = ref(0);
|
||
const uploadStatus = ref('');
|
||
|
||
// 表单数据
|
||
const formData = reactive({
|
||
id: '', // 成果ID（编辑时使用）
|
||
jycgmc: '', // 成果名称
|
||
jjdywt: '', // 解决的主要问题
|
||
jjgc: '', // 解决过程
|
||
zzcg: '', // 最终成果
|
||
jsId: '', // 教师ID
|
||
jsxm: '', // 教师姓名（提交人）
|
||
jyjbId: '', // 教研组ID
|
||
createdTime: '', // 创建时间（提交时间）
|
||
fileName: '', // 文件名
|
||
fileUrl: '', // 文件路径
|
||
fileFormat: '', // 文件格式
|
||
remark: '' // 备注
|
||
});
|
||
|
||
// 文件上传数据
|
||
const fileList = ref<FileItem[]>([]);
|
||
|
||
// 允许的文件类型（支持所有格式）
|
||
const allowedFileTypes = [
|
||
// 图片格式
|
||
'png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp', 'svg', 'tiff', 'ico',
|
||
// 视频格式
|
||
'mp4', 'mov', 'avi', 'wmv', 'flv', 'mkv', 'webm', '3gp', 'm4v',
|
||
// 音频格式
|
||
'mp3', 'wav', 'aac', 'ogg', 'flac', 'm4a', 'wma',
|
||
// 文档格式
|
||
'pdf', 'doc', 'docx', 'txt', 'rtf', 'wps',
|
||
// 表格格式
|
||
'xls', 'xlsx', 'csv', 'et',
|
||
// 演示格式
|
||
'ppt', 'pptx', 'dps',
|
||
// 压缩格式
|
||
'zip', 'rar', '7z', 'tar', 'gz',
|
||
// 代码格式
|
||
'html', 'htm', 'css', 'js', 'json', 'xml'
|
||
];
|
||
|
||
|
||
|
||
// 自定义上传API，保持原始文件名
|
||
const customUploadApi = async (filePath: string) => {
|
||
try {
|
||
const result: any = await attachmentUpload(filePath as any);
|
||
|
||
console.log('上传接口返回结果:', result);
|
||
|
||
// 判断上传是否成功：resultCode === 1 且 success === true
|
||
if (result && result.resultCode === 1 && result.success === true && result.result && result.result.length > 0) {
|
||
const uploadedFile = result.result[0];
|
||
|
||
// 从文件路径中提取原始文件名（去掉UUID前缀）
|
||
const originalFileName = filePath.split('/').pop() || 'unknown';
|
||
|
||
console.log('文件上传成功，准备返回结果');
|
||
|
||
// 返回包含原始文件名的结果
|
||
return {
|
||
...result,
|
||
result: [{
|
||
...uploadedFile,
|
||
originalFileName: originalFileName,
|
||
fileName: originalFileName
|
||
}]
|
||
};
|
||
}
|
||
|
||
// 上传失败
|
||
console.error('上传失败，接口返回:', result);
|
||
throw new Error(result?.message || '文件上传失败');
|
||
} catch (error) {
|
||
console.error('上传失败:', error);
|
||
throw error;
|
||
}
|
||
};
|
||
|
||
// 文件上传成功回调
|
||
const onFileUploadSuccess = (file: FileItem, index: number) => {
|
||
console.log('=== 文件上传成功回调 ===');
|
||
console.log('接收到的文件对象:', file);
|
||
console.log('文件索引:', index);
|
||
console.log('当前fileList长度:', fileList.value.length);
|
||
console.log('当前fileList内容:', fileList.value);
|
||
|
||
// 从服务器返回的URL中提取真实文件名
|
||
if (file.url) {
|
||
const urlParts = file.url.split('/');
|
||
const serverFileName = urlParts[urlParts.length - 1];
|
||
|
||
console.log('解析的文件信息:', {
|
||
url: file.url,
|
||
serverFileName,
|
||
originalName: file.originalName
|
||
});
|
||
|
||
// 更新文件信息
|
||
if (fileList.value[index]) {
|
||
console.log('更新前的文件项:', fileList.value[index]);
|
||
|
||
fileList.value[index].url = file.url; // 确保URL被正确设置
|
||
fileList.value[index].name = serverFileName;
|
||
// 保持原始文件名用于显示和保存
|
||
fileList.value[index].originalName = file.originalName || serverFileName;
|
||
|
||
console.log('更新后的文件项:', fileList.value[index]);
|
||
} else {
|
||
console.error('文件索引超出范围或文件不存在:', index, fileList.value);
|
||
}
|
||
|
||
// 立即测试文件信息收集
|
||
console.log('=== 文件信息收集测试 ===');
|
||
console.log('当前文件列表:', fileList.value);
|
||
console.log('收集的文件URLs:', getFileUrls());
|
||
console.log('收集的文件名:', getFileNames());
|
||
console.log('收集的文件格式:', getFileFormats());
|
||
|
||
// 检查是否所有文件都已上传完成（真正的上传成功）
|
||
const allFilesUploaded = fileList.value.every(f => f.url);
|
||
console.log('所有文件是否已上传:', allFilesUploaded);
|
||
|
||
if (allFilesUploaded) {
|
||
// 延迟关闭遮罩层，让用户看到上传完成的提示
|
||
setTimeout(() => {
|
||
isUploading.value = false;
|
||
uploadProgress.value = 0;
|
||
uploadStatus.value = '';
|
||
console.log('所有文件上传成功，关闭遮罩层');
|
||
}, 500);
|
||
}
|
||
} else {
|
||
console.error('文件URL为空:', file);
|
||
}
|
||
};
|
||
|
||
// 文件上传进度回调
|
||
const onUploadProgress = (type: string, current: number, total: number) => {
|
||
console.log('上传进度:', { type, current, total });
|
||
isUploading.value = true;
|
||
uploadProgress.value = Math.round((current / total) * 100);
|
||
uploadStatus.value = `正在上传文件 ${current}/${total}`;
|
||
|
||
// 注意：不在这里关闭遮罩层，因为进度100%不代表接口返回成功
|
||
// 遮罩层的关闭在 onFileUploadSuccess 回调中处理
|
||
};
|
||
|
||
// 文件上传错误回调
|
||
const onFileUploadError = (error: any, index: number) => {
|
||
console.error('文件上传失败:', error, index);
|
||
uploadStatus.value = '文件上传失败，请重试';
|
||
|
||
// 延迟隐藏遮罩层
|
||
setTimeout(() => {
|
||
isUploading.value = false;
|
||
uploadProgress.value = 0;
|
||
uploadStatus.value = '';
|
||
}, 2000);
|
||
};
|
||
|
||
// 获取文件URL列表
|
||
const getFileUrls = () => {
|
||
const urls = fileList.value
|
||
.filter(file => file.url)
|
||
.map(file => file.url)
|
||
.filter((url): url is string => !!url);
|
||
return urls.length > 0 ? urls.join(',') : '';
|
||
};
|
||
|
||
// 获取文件名列表（不包含扩展名）
|
||
const getFileNames = () => {
|
||
const names = fileList.value
|
||
.filter(file => file.originalName || file.name)
|
||
.map(file => {
|
||
const fullName = file.originalName || file.name || '';
|
||
// 去除扩展名，只保留文件名
|
||
return fullName.replace(/\.[^/.]+$/, '');
|
||
})
|
||
.filter((name): name is string => !!name);
|
||
return names.length > 0 ? names.join(',') : '';
|
||
};
|
||
|
||
// 获取文件格式列表
|
||
const getFileFormats = () => {
|
||
const formats = fileList.value
|
||
.filter(file => file.originalName || file.name)
|
||
.map(file => (file.originalName || file.name)?.split('.').pop()?.toLowerCase() || '')
|
||
.filter(format => !!format);
|
||
return formats.length > 0 ? formats.join(',') : '';
|
||
};
|
||
|
||
|
||
// 取消表单
|
||
const cancelForm = () => {
|
||
uni.showModal({
|
||
title: '确认取消',
|
||
content: '确定要取消并返回吗？未保存的内容将丢失',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.navigateBack();
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
// 提交成果
|
||
const submitAchievement = async () => {
|
||
// 检查文件上传状态
|
||
if (isUploading.value) {
|
||
uni.showToast({
|
||
title: '文件正在上传中，请稍候...',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 验证必填项
|
||
if (!formData.jycgmc) {
|
||
uni.showToast({
|
||
title: '请输入成果名称',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (!formData.jjdywt) {
|
||
uni.showToast({
|
||
title: '请输入解决的主要问题',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (!formData.zzcg) {
|
||
uni.showToast({
|
||
title: '请输入最终成果',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
try {
|
||
uni.showLoading({ title: isEdit.value ? '保存中...' : '提交中...' });
|
||
|
||
// 收集所有文件URL和文件名
|
||
const fileUrls = getFileUrls();
|
||
const fileNames = getFileNames();
|
||
const fileFormats = getFileFormats();
|
||
|
||
console.log('=== 提交前文件信息收集 ===');
|
||
console.log('当前文件列表:', fileList.value);
|
||
console.log('文件列表长度:', fileList.value.length);
|
||
console.log('文件列表详情:', fileList.value.map((file, index) => ({
|
||
index,
|
||
url: file.url,
|
||
name: file.name,
|
||
originalName: file.originalName,
|
||
hasUrl: !!file.url,
|
||
hasOriginalName: !!file.originalName
|
||
})));
|
||
|
||
console.log('收集的文件信息:', {
|
||
fileUrls,
|
||
fileNames,
|
||
fileFormats
|
||
});
|
||
console.log('fileName字段（不含扩展名）:', fileNames);
|
||
console.log('fileFormat字段（仅扩展名）:', fileFormats);
|
||
console.log('fileUrl字段（文件路径）:', fileUrls);
|
||
|
||
// 检查每个文件的信息收集过程
|
||
fileList.value.forEach((file, index) => {
|
||
console.log(`文件${index + 1}信息收集:`, {
|
||
url: file.url,
|
||
name: file.name,
|
||
originalName: file.originalName,
|
||
getFileUrls: file.url ? file.url : '无URL',
|
||
getFileNames: (file.originalName || file.name) ? (file.originalName || file.name || '').replace(/\.[^/.]+$/, '') : '无名称',
|
||
getFileFormats: (file.originalName || file.name) ? (file.originalName || file.name || '').split('.').pop()?.toLowerCase() : '无格式'
|
||
});
|
||
});
|
||
|
||
const params = {
|
||
...formData,
|
||
fileUrl: fileUrls,
|
||
fileName: fileNames,
|
||
fileFormat: fileFormats, // 添加文件格式
|
||
status: 'A' // 已发布状态
|
||
};
|
||
|
||
console.log(`${isEdit.value ? '更新' : '新增'}成果参数:`, params);
|
||
|
||
await jycgSaveApi(params);
|
||
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: isEdit.value ? '保存成功' : '提交成功',
|
||
icon: 'success'
|
||
});
|
||
|
||
// 返回列表页
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 1500);
|
||
} catch (error) {
|
||
uni.hideLoading();
|
||
console.error(`${isEdit.value ? '保存' : '提交'}失败:`, error);
|
||
uni.showToast({
|
||
title: isEdit.value ? '保存失败' : '提交失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
};
|
||
|
||
// 页面加载时接收路由参数
|
||
onLoad(async (options: any) => {
|
||
console.log('页面加载参数:', options);
|
||
|
||
// 接收教研组ID
|
||
if (options && options.jyjbId) {
|
||
formData.jyjbId = options.jyjbId;
|
||
console.log('接收到的教研组ID:', formData.jyjbId);
|
||
}
|
||
|
||
// 接收成果ID（编辑模式）
|
||
if (options && options.id) {
|
||
isEdit.value = true;
|
||
formData.id = options.id;
|
||
console.log('编辑模式，成果ID:', formData.id);
|
||
|
||
// 加载成果详情
|
||
await loadAchievementDetail(options.id);
|
||
}
|
||
});
|
||
|
||
// 加载成果详情
|
||
const loadAchievementDetail = async (id: string) => {
|
||
isLoading.value = true;
|
||
try {
|
||
uni.showLoading({ title: '加载中...' });
|
||
|
||
const response: any = await jycgFindByIdApi({ id });
|
||
|
||
if (response && response.result) {
|
||
const detail = response.result;
|
||
|
||
console.log('从后端获取的详情数据:', detail);
|
||
console.log('文件相关字段:', {
|
||
fileUrl: detail.fileUrl,
|
||
fileName: detail.fileName,
|
||
fileFormat: detail.fileFormat
|
||
});
|
||
|
||
// 回显基本信息
|
||
formData.id = detail.id || '';
|
||
formData.jycgmc = detail.jycgmc || '';
|
||
formData.jjdywt = detail.jjdywt || '';
|
||
formData.jjgc = detail.jjgc || '';
|
||
formData.zzcg = detail.zzcg || '';
|
||
formData.jsId = detail.jsId || '';
|
||
formData.jsxm = detail.jsxm || '';
|
||
formData.jyjbId = detail.jyjbId || '';
|
||
|
||
// 处理时间格式（保持完整时间戳）
|
||
if (detail.createdTime) {
|
||
formData.createdTime = detail.createdTime; // 保持完整时间戳
|
||
} else {
|
||
formData.createdTime = '';
|
||
}
|
||
|
||
formData.remark = detail.remark || '';
|
||
|
||
// 回显附件
|
||
console.log('开始回显附件，fileUrl:', detail.fileUrl);
|
||
if (detail.fileUrl) {
|
||
const urls = detail.fileUrl.split(',').filter(Boolean);
|
||
const names = detail.fileName ? detail.fileName.split(',').filter(Boolean) : [];
|
||
const formats = detail.fileFormat ? detail.fileFormat.split(',').filter(Boolean) : [];
|
||
|
||
console.log('解析的文件数据:', {
|
||
urls,
|
||
names,
|
||
formats
|
||
});
|
||
|
||
// 清空现有文件列表
|
||
fileList.value = [];
|
||
|
||
// 回显所有文件
|
||
urls.forEach((url: string, index: number) => {
|
||
const fileName = names[index] || url.split('/').pop() || '';
|
||
const fileFormat = formats[index] || fileName.split('.').pop()?.toLowerCase() || '';
|
||
// 组合完整的文件名用于显示
|
||
const fullFileName = fileFormat ? `${fileName}.${fileFormat}` : fileName;
|
||
|
||
console.log(`文件${index + 1}:`, {
|
||
url: url.trim(),
|
||
fileName,
|
||
fileFormat,
|
||
fullFileName
|
||
});
|
||
|
||
fileList.value.push({
|
||
url: url.trim(),
|
||
name: fullFileName,
|
||
originalName: fullFileName, // 回显时使用完整文件名
|
||
type: 'document', // 默认为文档类型
|
||
extension: fileFormat
|
||
});
|
||
});
|
||
|
||
console.log('回显后的文件列表:', fileList.value);
|
||
} else {
|
||
console.log('没有文件需要回显');
|
||
fileList.value = [];
|
||
}
|
||
|
||
console.log('成果详情加载成功:', formData);
|
||
console.log('附件回显:', { fileList: fileList.value });
|
||
}
|
||
|
||
uni.hideLoading();
|
||
} catch (error) {
|
||
uni.hideLoading();
|
||
console.error('加载成果详情失败:', error);
|
||
uni.showToast({
|
||
title: '加载失败',
|
||
icon: 'none'
|
||
});
|
||
|
||
// 加载失败返回列表页
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 1500);
|
||
} finally {
|
||
isLoading.value = false;
|
||
}
|
||
};
|
||
|
||
// 页面加载时初始化
|
||
onMounted(() => {
|
||
// 编辑模式下不需要设置默认值（会从详情中获取）
|
||
if (isEdit.value) {
|
||
return;
|
||
}
|
||
|
||
// 新增模式：设置默认日期为今天
|
||
const today = new Date();
|
||
const year = today.getFullYear();
|
||
const month = String(today.getMonth() + 1).padStart(2, '0');
|
||
const day = String(today.getDate()).padStart(2, '0');
|
||
formData.createdTime = `${year}-${month}-${day}`;
|
||
|
||
// 新增模式：设置提交人信息
|
||
console.log('教师信息 getJs:', getJs);
|
||
formData.jsId = getJs.id || '';
|
||
formData.jsxm = getJs.jsxm || '';
|
||
});
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.achievement-form-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
background-color: #f5f7fa;
|
||
}
|
||
|
||
// 表单滚动区域
|
||
.form-scroll-view {
|
||
flex: 1;
|
||
height: 0;
|
||
}
|
||
|
||
.form-container {
|
||
padding: 20px 16px 100px 16px; // 底部留出空间给固定按钮
|
||
}
|
||
|
||
// 表单区域
|
||
.form-section {
|
||
margin-bottom: 24px;
|
||
|
||
.section-label {
|
||
margin-bottom: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
|
||
.label-text {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #2d3748;
|
||
}
|
||
|
||
.required-star {
|
||
font-size: 16px;
|
||
color: #ef4444;
|
||
font-weight: bold;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 日期输入
|
||
.date-input-wrapper {
|
||
background-color: #ffffff;
|
||
border-radius: 8px;
|
||
border: 1px solid #e2e8f0;
|
||
padding: 12px 16px;
|
||
|
||
.date-picker {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
// 只读输入框
|
||
.readonly-input-wrapper {
|
||
background-color: #f5f5f5;
|
||
border-radius: 8px;
|
||
border: 1px solid #e2e8f0;
|
||
padding: 12px 16px;
|
||
|
||
.readonly-text {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
// 简单文本区域
|
||
.simple-text-wrapper {
|
||
background-color: #ffffff;
|
||
border-radius: 8px;
|
||
border: 1px solid #e2e8f0;
|
||
overflow: hidden;
|
||
|
||
.simple-textarea {
|
||
width: 100%;
|
||
min-height: 120px;
|
||
padding: 16px;
|
||
border: none;
|
||
outline: none;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
color: #2d3748;
|
||
background-color: #ffffff;
|
||
resize: none;
|
||
}
|
||
}
|
||
|
||
// 文件上传
|
||
.file-upload-wrapper {
|
||
background-color: #ffffff;
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
}
|
||
|
||
// 底部固定操作按钮
|
||
.bottom-actions {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background-color: #fff;
|
||
border-top: 1px solid #e8ecf1;
|
||
padding: 12px 16px;
|
||
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
|
||
z-index: 1000;
|
||
display: flex;
|
||
gap: 8px;
|
||
|
||
.action-btn {
|
||
flex: 1;
|
||
height: 44px;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.2s ease;
|
||
|
||
.btn-text {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
}
|
||
|
||
&:active {
|
||
transform: translateY(1px);
|
||
}
|
||
}
|
||
|
||
.cancel-btn {
|
||
background-color: #6b7280;
|
||
|
||
&:active {
|
||
background-color: #4b5563;
|
||
}
|
||
}
|
||
|
||
.submit-btn {
|
||
background-color: #10b981;
|
||
|
||
&:active {
|
||
background-color: #059669;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 深度选择器样式
|
||
:deep(.uni-datetime-picker) {
|
||
width: 100%;
|
||
|
||
.uni-date {
|
||
background-color: transparent;
|
||
border: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.uni-date__x-input {
|
||
font-size: 14px;
|
||
color: #2d3748;
|
||
}
|
||
}
|
||
|
||
// 文件上传遮罩层样式
|
||
.upload-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.6);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 9999;
|
||
|
||
.upload-content {
|
||
background-color: #ffffff;
|
||
border-radius: 16px;
|
||
padding: 40px 32px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
min-width: 280px;
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||
|
||
.upload-icon {
|
||
margin-bottom: 16px;
|
||
|
||
.icon-text {
|
||
font-size: 48px;
|
||
animation: bounce 1.5s ease-in-out infinite;
|
||
}
|
||
}
|
||
|
||
.upload-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #2d3748;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.upload-status {
|
||
font-size: 14px;
|
||
color: #718096;
|
||
margin-bottom: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.upload-progress {
|
||
width: 100%;
|
||
margin-bottom: 16px;
|
||
|
||
.progress-bar {
|
||
width: 100%;
|
||
height: 8px;
|
||
background-color: #e2e8f0;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
margin-bottom: 8px;
|
||
|
||
.progress-fill {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, #0ea5e9 0%, #0284c7 100%);
|
||
border-radius: 4px;
|
||
transition: width 0.3s ease;
|
||
}
|
||
}
|
||
|
||
.progress-text {
|
||
font-size: 12px;
|
||
color: #0ea5e9;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.upload-tip {
|
||
font-size: 12px;
|
||
color: #a0aec0;
|
||
text-align: center;
|
||
line-height: 1.4;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 提交按钮禁用状态
|
||
.action-btn.disabled {
|
||
opacity: 0.5;
|
||
pointer-events: none;
|
||
}
|
||
|
||
// 弹跳动画
|
||
@keyframes bounce {
|
||
0%, 100% {
|
||
transform: translateY(0);
|
||
}
|
||
50% {
|
||
transform: translateY(-8px);
|
||
}
|
||
}
|
||
</style>
|