workApp/pages/materialCollection/submitMaterial/submitDetail.vue

<template>
	<view class="page_body">
		<!-- 头部 -->
		<nav-bar height="96" title="提交材料" :onlyTitle="true" :showHeaderborder="true" @GoBack="GoBack"></nav-bar>
		<view class="page_content_height">
			<view class="page_content padding_btm">
				<view class="task_title">{{state?.details?.taskName}}</view>
				<view class="task_class_collect">
					<text class="class_item">{{state?.details?.departmentName}}</text>
					<text class="class_item">{{state?.details?.materialCategoryName}}</text>
					<text class="class_item">{{state?.details?.createdBy}}</text>
				</view>
				<view class="task_time">
					<view class="time_day">
						<text class="time_item">{{state?.details?.startTime}}</text>
						<text class="time_item">至</text>
						<text class="time_item">{{state?.details?.endTime}}</text>
						<text class="time_item" v-if="state?.details?.taskStatus === 1 && remainingDays(state?.details?.endTime) > 0">剩余{{remainingDays(state?.details?.endTime)}}天</text>
					</view>
					<view :class="['task_status', statusClassMap[state?.details?.taskStatus]]">
						{{taskStatusMap[state?.details?.taskStatus]}}
					</view>
				</view>
				<view :class="['task_desc',{'over':!state.isExpand}]">
					采集要求：{{state?.details?.collectionRequire}}
				</view>
				<view class="task_desc_all">
					采集要求：{{state?.details?.collectionRequire}}
				</view>
				<view class="expand_btn" v-if="state.showExpandBtn" @click="toggleExpand"><text
						class="expand_text">{{!state.isExpand?'展开':'收起'}}</text><uni-icons class="expand_icon"
						:type="!state.isExpand?'down':'up'"></uni-icons></view>
			</view>
			<!-- 间隔 -->
			<view class="row_gap"></view>
			<view class="page_content">
				<view class="target_status">
					<view class="target_tag">
						<template v-for="text in ['departmentName','departmentGroupName','subjectName','gradeName','classTypeName','className']">
							<text class="info_text" v-if="state?.targetFileList?.[text]" :key="text">{{state?.targetFileList?.[text]}}</text>
						</template>
					</view>
					<template v-if="state?.details?.auditMechanism === 1">
						<view v-if="state?.targetFileList?.targetStatus=== 1" class="status_tag notSubmitList">
							<text>待提交</text>
						</view>
						<view v-if="state?.targetFileList?.targetStatus=== 3" class="status_tag reviewReasonList">
							<text>已驳回</text>
						</view>
						<view v-if="state?.targetFileList?.targetStatus=== 2" class="status_tag notReviewList">
							<text>审核中</text>
						</view>
						<view v-if="state?.targetFileList?.targetStatus=== 4" class="status_tag reviewList">
							<text>已提交</text>
						</view>
					</template>
					<template v-if="state?.details?.auditMechanism === 0">
						<view v-if="state?.targetFileList?.targetStatus=== 1" class="status_tag notSubmitList">
							<text>待提交</text>
						</view>
						<view v-else class="status_tag reviewList">
							<text>已提交</text>
						</view>
					</template>
					
				</view>
				<!-- 上传按钮 提交状态 1待提交 2审核中 3已驳回 4已提交 -->
				<!-- maxSize：单文件上限 MB；0 表示不限制 maxCount：列表最多文件数 -->
				<kex-file-uploader 
				ref="fileUploader" 
				v-model="files" 
				mode="headless" 
				:multiple="true"
				:auto-upload="true"
				:upload-url="`${apiBaseUrl}/api/v1/teach/oss/file/oss/upload_file_list`"
				:upload-options="{
					name: 'files',
					header: {
						Authorization: token
					},
					formData: {
						taskId:state.taskId,
						targetId:state.targetId
					},
				}"
				:max-count="20" 
				:maxSize="100" 
				formats="doc,docx,xls,xlsx,ppt,pptx,png,jpg,jpeg,gif,bmp"
				@uploadSuccess="onUploadSuccess">
				</kex-file-uploader>
				<view class="upload_box" @click="FileChooseUploader" v-if="state?.targetFileList?.targetStatus === 1 && state?.details?.taskStatus !== 2">
					<image class="upload_icon" src="@/static/image/icon/upload_icon.png"></image>
					<view class="upload_text">
						<view class="upload_title">点击上传文件</view>
						<view class="upload_desc">支持Word、Excel、PPT、图片（最大100MB）</view>
					</view>
				</view>
				<view class="upload_box" v-if="(state?.targetFileList?.targetStatus === 2 || state?.targetFileList?.targetStatus === 4) && state?.details?.taskStatus !== 2">
					<image class="upload_icon" src="@/static/image/icon/upload_locked.png"></image>
					<view class="upload_text">
						<view class="upload_title">点击重新编辑可再提交</view>
						<view class="upload_desc">支持Word、Excel、PPT、图片（最大100MB）</view>
					</view>
				</view>
				<view class="upload_box" v-if="state?.targetFileList?.targetStatus === 3 && state?.details?.taskStatus !== 2">
					<image class="upload_icon" src="@/static/image/icon/upload_locked.png"></image>
					<view class="upload_text">
						<view class="upload_title">请先删除全部文件，再提交调整后的合规材料</view>
						<view class="upload_desc">支持Word、Excel、PPT、图片（最大100MB）</view>
					</view>
				</view>
				<view class="upload_box" v-if="state?.details?.taskStatus == 2">
					<image class="upload_icon" src="@/static/image/icon/upload_locked.png"></image>
					<view class="upload_text">
						<view class="upload_title">已结束不可再提交</view>
						<view class="upload_desc">支持Word、Excel、PPT、图片（最大100MB）</view>
					</view>
				</view>
				<view class="list_item" @click="OpenPreviewFile(item)" v-for="item in (state?.targetFileList?.taskTargetFileVos || [])" :Key="item.id">
					<image class="file_icon" src="@/static/image/icon/file.png"></image>
					<view class="file_info">
						<view class="file_name">{{item.fileName}}</view>
						<view class="file_size">
							<text>{{getFileSize(item.fileSize)}}</text>
							<text>{{ item.createTime }}</text>
						</view>
					</view>
					<view class="file_btn">
						<text @click.stop="HandleDeleteFileList(item)" :class="['del',{'disabled':state?.targetFileList?.targetStatus === 2 || state?.targetFileList?.targetStatus === 4}]">删除</text>
						<text class="download" @click.stop="ToDownloadFile(item)">下载</text>
					</view>
				</view>
			</view>
		</view>
		<view class="page_foot" v-if="state?.details?.taskStatus!=2">
			<!-- 提交状态 1待提交 2审核中 3已驳回 4已提交 -->
			<template v-if="(state?.targetFileList?.targetStatus === 1 || state?.targetFileList?.targetStatus === 3)">
				<view @click="DeleteAllFiles" :class="['del',{'disabled':!state?.targetFileList?.taskTargetFileVos?.length}]">删除全部</view>
				<view :class="['submit',{'disabled':state?.targetFileList?.targetStatus === 3}]" @click="UpdateTaskTarget">提交</view>
			</template>
			<template v-else>
				<view class="del disabled">删除全部</view>
				<view class="submit" @click="UpdateTaskTargetReset">重新编辑</view>
			</template>
		</view>
		<!-- 删除确认框 -->
		<popupDialog ref="popupConfirmDialogRef" :showFootBorder="true" :content="state.confirmDialog.content" @DialogConfirm="DialogConfirm" />
		<!-- 文件预览 -->
		<popupPreviewFile ref="popupDialogPreview" :fileType="state.previewPopup.fileType" :fileName="state.previewPopup.fileName" :filePath="state.previewPopup.filePath" @ToDownloadFile="ToDownloadFile"></popupPreviewFile>
		<!-- 文件、图片下载 -->
		<ss-download ref="ssdownload"></ss-download>
	</view>
</template>

<script setup>
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
	import ssDownload from '@/uni_modules/ss-download/components/ss-download/ss-download.vue';
	import popupDialog from '@/components/popupDialog.vue';
	import popupPreviewFile from '@/components/popupPreviewFile.vue';
	import navBar from '@/components/navBar.vue';
	import { remainingDays,getFileSize,getFileTypeBySuffix } from '@/common/common.js';
	import {getTaskTargetFileList,DeleteFileList,DelTaskTargetFileList,updateTaskTarget,uploadTaskTargetFileList} from '@/reqApi/notification.js';
	import {onLoad} from '@dcloudio/uni-app';
	import config from '@/config.js'; // 引入配置文件
	import {
		reactive,
		ref,
		nextTick,
		getCurrentInstance,
		computed,
		onMounted
	} from 'vue';
	const state = reactive({
		taskId: '', //任务id
		targetId:'',//
		auditStatus:'',//审核状态
		showExpandBtn: false, //是否显示展开按钮
		isExpand: false, //是否展开
		details: {}, //详情信息
		targetFileList:{},
		confirmDialog:{
			type:'',
			content:'',
			fileUrls:[],
			targetFileIds:[]
		},
		previewPopup:{
			fileType:'',
			filePath:'',
			fileName:''
		}
	});
	const popupConfirmDialogRef = ref(null);
	const popupDialogPreview = ref(null);
	const fileUploader = ref(null);
	const ssdownload = ref(null);
	const files = ref([]);
	const token = ref(uni.getStorageSync('token'));
	const apiBaseUrl = ref('');
	const statusClassMap = {
		1: 'status_published',
		2: 'status_closed'
	};
	const taskStatusMap = {
		1: '进行中',
		2: '已结束'
	};
	onLoad((option) => {
		state.taskId = option.taskId;
		state.targetId = option.targetId;
		state.auditStatus = Number(option.auditStatus);
	})
	onMounted(() => {
		state.details = uni.getStorageSync('submitMaterialDetailInfo') || {};
		uni.removeStorageSync('isLoadSubmitMaterialTaskDetail');//返回是否重新更新任务详情数据
		uni.removeStorageSync('isLoadSubmitMaterialIndex');//返回是否重新更新提交材料首页
		getApiBaseUrl();//上传接口地址
		GetTaskTargetFileList(true);
	});
	//上传接口地址
	const getApiBaseUrl = () => {
		if (process.env.NODE_ENV === 'development') {//本地开发环境
		  const SYSTEM_INFO = uni.getSystemInfoSync();//获取系统信息的同步接口
		  apiBaseUrl.value = SYSTEM_INFO.uniPlatform === 'web' ? config.proxyBaseUrl:config.apiBaseUrl;//读取配置文件的apiBaseUrl变量
		} else {//生产/测试环境
		  apiBaseUrl.value = config.apiBaseUrl
		}
	}
	//选择文件上传
	const FileChooseUploader = () => {
		fileUploader.value && fileUploader.value.choose();
	}
	const onUploadSuccess = ({
		index,
		file,        // 当前文件
		url,         // 优先为解析出的远程地址
		statusCode,
		data,        // 解析后的服务端 JSON（失败则为原始字符串）
		res,         // 原始回调
		fileList     // 当前全部
	}) => {
		console.log(res)
		const result = JSON.parse(res.data || res.result);
		const list = result?.data || [];
		const fileInfoList = list.map(item => ({
			...item,
			filePath: item.fileUrl
		}))
		UploadTargetFileList(fileInfoList);
	}
	//具体采集任务保存上传的文件地址
	const UploadTargetFileList = (fileInfoList) => {
		uploadTaskTargetFileList({
			fileInfoList,
			taskId:state.taskId,
			targetId:state.targetId
		}).then(res=>{
			if (res.code === 200) {
				uni.showToast({
					title: '上传成功!',
					icon: 'none'
				});
				GetTaskTargetFileList(false,'upload');
			}
		})
	}
	//预览
	const OpenPreviewFile = (item) => {
		state.previewPopup.fileType = item.fileType;
		state.previewPopup.filePath = item.filePath;
		state.previewPopup.fileName = item.fileName;
		popupDialogPreview.value.OpenDialog();
		// const fileType = item.fileType;
		// if(IsImageExts(fileType)){//图片预览
		// 	state.previewPopup.filePath = item.filePath;
		// 	popupDialogPreview.value.OpenDialog();
		// }else{//文件预览
		// 	// 1. 先下载文件到本地临时目录
		// 	uni.downloadFile({
		// 		url: item.filePath,
		// 		success: (downloadRes) => {
		// 			if (downloadRes.statusCode === 200) {
		// 				// 2. 下载成功后，得到临时文件路径 tempFilePath
		// 				const localPath = downloadRes.tempFilePath;
		// 				// 3. 构造 file 对象（必须有 path）
		// 				const fileObj = {
		// 					name: item.fileName,
		// 					path: localPath,  // 关键字段
		// 					size: item.fileSize // 可选
		// 				};
		// 				// 4. 调用 kex-file-uploader 的 openDocument 方法预览
		// 				fileUploader.value?.openDocument({
		// 					file: fileObj,
		// 					success: () => console.log('预览成功'),
		// 					fail: (err) => console.error('预览失败', err)
		// 				});
		// 			}
		// 		},
		// 		fail: (err) => {
		// 			uni.showToast({ title: '文件下载失败', icon: 'none' });
		// 		}
		// 	});
		// }
	}
	//下载
	const ToDownloadFile = (item) => {
		const fileType = getFileTypeBySuffix(item.fileType);//文件类型
		let type = '';
		if(fileType == 'image'){
			type = '1';//1:图片 2 文档
		}else if(fileType == 'document'){
			type = '2';
		}else{
			type = '';
		}
		ssdownload?.value?.toDownload({
			type:type,
			src:item.filePath,
			fileName:item.fileName
		});
	}
	// 展开收起切换
	const toggleExpand = () => {
		state.isExpand = !state.isExpand;
	}
	//获取当前教师提交的文件列表
	const GetTaskTargetFileList = (init,type) => {
		getTaskTargetFileList(state.targetId).then(res=>{
			if(res.code == 200){
				state.targetFileList = res.data || {};
				//对比审核状态是否发生变化同时更新缓存数据
				if(!init){
					uni.setStorageSync('isLoadSubmitMaterialIndex',true);//返回是否重新更新提交材料首页
					updateCacheData(type);
				}
			}
		})
	}
	//单个删除
	const HandleDeleteFileList = (item) => {
		if(state?.targetFileList?.targetStatus === 2 || state?.targetFileList?.targetStatus === 4){
			return false
		}
		const { filePath, id } = item;
		state.confirmDialog = {
			type:'del',
			content:'是否删除当前文件?',
			fileUrls:[filePath],
			targetFileIds:[id]
		};
		popupConfirmDialogRef.value.OpenDialog();
	}
	//删除全部
	const DeleteAllFiles = () => {
		let fileUrls = [],targetFileIds = [];
		const taskTargetFileVos = state?.targetFileList?.taskTargetFileVos || [];
		if(taskTargetFileVos.length > 0){
			taskTargetFileVos.forEach(item => {
				fileUrls.push(item.filePath);
				targetFileIds.push(item.id)
			})
			state.confirmDialog = {
				type:'del',
				content:'是否删除全部当前文件?',
				fileUrls:fileUrls,
				targetFileIds:targetFileIds
			};
			popupConfirmDialogRef.value.OpenDialog();
		}
	}
	//提交
	const UpdateTaskTarget = () => {
		const taskTargetFileVos = state?.targetFileList?.taskTargetFileVos || [];
		if(taskTargetFileVos.length == 0){
			uni.showToast({
				title: '请上传提交文件!',
				icon: 'none'
			});
			return false
		}
		state.confirmDialog = {
			type:'submit',
			content:'是否提交当前任务?',
			fileUrls:[],
			targetFileIds:[]
		};
		popupConfirmDialogRef.value.OpenDialog();
	}
	//重新提交
	const UpdateTaskTargetReset = () => {
		state.confirmDialog = {
			type:'submit',
			content:'是否重新编辑当前任务?',
			fileUrls:[],
			targetFileIds:[]
		};
		popupConfirmDialogRef.value.OpenDialog();
	}
	//确定删除 确定提交
	const DialogConfirm = () => {
		if(state.confirmDialog.type == 'del'){//单个删除 批量删除
			DelFileList();
		}else if(state.confirmDialog.type == 'submit') {//提交
			submitTaskTarget();
		}
	}
	const DelFileList = async() => {
		const res = await DeleteFileList({ fileUrls: state.confirmDialog.fileUrls })
		if (res.code !== 200) {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			});
			return false
		}
		const resData = await DelTaskTargetFileList({
			targetId: state.targetId,
			targetFileIds: state.confirmDialog.targetFileIds
		})
		if (resData.code === 200) {
			uni.showToast({
				title: '删除成功!',
				icon: 'none'
			});
			GetTaskTargetFileList(false,'del');
		}
	}
	//提交
	const submitTaskTarget = () => {
		updateTaskTarget(state.targetId).then(res => {
			if (res.code === 200) {
				uni.showToast({
					title: '提交成功!',
					icon: 'none'
				});
				GetTaskTargetFileList(false,'submit');
			}
		})
	}
	//对比审核状态是否发生变化同时更新缓存数据
	const updateCacheData = (type) => {
		const targetStatus = state?.targetFileList?.targetStatus;
		let taskTargetList = state?.details?.taskTargetVos || [];
		if (state.auditStatus !== targetStatus) {
			// 状态变化，删除目标项
			taskTargetList.forEach(item=>{
				if(item.id == state.targetId){
					item.isShow = 1;//删除状态
				}
			})
		} else {
			// 状态未变且非提交(上传或删除)操作，更新文件列表
			if (type !== 'submit'){
				const targetItem = taskTargetList.find(item => item.id === state.targetId);
				if (targetItem) {
				    targetItem.taskTargetFileVos = state?.targetFileList?.taskTargetFileVos || [];
					targetItem.fileNum = targetItem.taskTargetFileVos.length;
				}
			}else{
				taskTargetList.forEach(item=>{
					if(item.id == state.targetId){
						item.isShow = 0;//显示
					}
				})
			}
			
		}
		// 关键：将结果写回 state
		if (state?.details) {
			state.details.taskTargetVos = taskTargetList;
			uni.setStorageSync('submitMaterialDetailInfo',state.details);
			uni.setStorageSync('isLoadSubmitMaterialTaskDetail',true);//返回是否重新更新任务详情数据
		}
	}
	//返回
	const GoBack = () => {
		uni.navigateBack({
			delta: 1
		});
	}
</script>

<style scoped lang="scss">
	.page_body{
		height: 100%;
	}
	.page_content_height{
		display: flex;
		flex-direction: column;
		width: 100%;
		height: calc(100% - 240rpx);
		overflow: auto;
	}
	.page_content {
		&.padding_btm {
			padding-bottom: 24rpx;

			.task_title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				margin-top: 24rpx;
			}

			.task_class_collect {
				display: inline-flex;
				align-items: center;
				flex-wrap: wrap;
				width: 100%;
				margin-top: 16rpx;
				gap: 16rpx;
				.class_item {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}

			.task_time {
				display: flex;
				align-items: flex-start;
				width: 100%;
				margin-top: 16rpx;

				.time_day {
					display: inline-flex;
					align-items: center;
					flex-wrap: wrap;
					flex: 1;

					.time_item {
						font-weight: 400;
						font-size: 24rpx;
						line-height: 48rpx;
						color: #999999;

						&:nth-child(2) {
							margin: 0 8rpx;
						}

						&:nth-child(4) {
							color: #2E64FA;
							margin-left: 16rpx;
						}
					}
				}

				.task_status {
					display: inline-flex;
					align-items: center;
					height: 48rpx;
					padding: 0 12rpx;
					border-radius: 8rpx;
					font-weight: 400;
					font-size: 24rpx;

					&.status_pending {
						background: rgba(46, 100, 250, 0.1);
						color: #2E64FA;
					}
					
					&.status_published {
						background: rgba(82, 196, 26, 0.1);
						color: #2BC644;
					}
					
					&.status_closed {
						background: #6666661a;
						color: #666666;
					}
				}
			}

			.task_desc {
				margin-top: 24rpx;
				display: flex;
				width: 100%;
				padding-top: 24rpx;
				border-top: 2rpx solid #F3F3F3;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				line-height: 44rpx;
				box-sizing: border-box;
				position: relative;

				&.over {
					max-height: 168rpx;
					overflow: hidden;
					transition: all 0.25s;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
				}
			}

			.task_desc_all {
				display: flex;
				width: 100%;
				padding-top: 24rpx;
				border-top: 2rpx solid #F3F3F3;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				line-height: 44rpx;
				box-sizing: border-box;
				position: absolute;
				left: -9999px;
				top: 0;
				visibility: hidden; // 不可见但占据空间（不影响布局，因为absolute）
				pointer-events: none;
			}

			.expand_btn {
				width: 100%;
				height: 40rpx;
				background-color: #FFFFFF;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.expand_text {
					font-weight: 400;
					font-size: 28rpx;
					color: #2E64FA;
					margin-right: 8rpx;
				}

				.expand_icon {
					font-size: 32rpx !important;
					color: #2E64FA !important;
				}
			}
		}
	}

	.row_gap {
		background-color: #F8F9FD;
		width: 100%;
		height: 24rpx;
	}

	.target_status {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 24rpx 0;
		border-bottom: 2rpx solid #F3F3F3;
		.target_tag{
			flex: 1;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			.info_text{
				flex-shrink: 0;
				margin-right: 12rpx;
			}
		}
		.status_tag{
			font-size: 24rpx;
			text-align: center;
			padding: 8rpx 12rpx;
			font-weight: 400;
			border-radius: 8rpx;
			flex-shrink: 0;
			&.notSubmitList {
				background: rgba(46,100,250,0.1);
				color: #2E64FA;
			}
			&.notReviewList {
				background: rgba(251,159,52,0.1);
				color: #FB9F34;
			}
			&.reviewReasonList {
				background: rgba(245,108,108,0.1);
				color: #F56C6C;
			}
			&.reviewList {
				background: rgba(43,198,68,0.1);
				color: #2BC644;
			}
		}
	}
	.upload_box{
		margin-top: 24rpx;
		width: 100%;
		background-color: #FAFBFF;
		border-radius: 20rpx;
		border: 2rpx dashed #CCCED4;
		display: flex;
		box-sizing: border-box;
		align-items: center;
		padding: 22rpx 0 22rpx 40rpx;
		.upload_icon{
			width: 64rpx;
			height: 64rpx;
			margin-right: 24rpx;
			flex-shrink: 0;
		}
		.upload_text{
			flex:1;
			display: flex;
			flex-direction: column;
			.upload_title{
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
			}
			.upload_desc{
				margin-top: 8rpx;
				font-weight: 400;
				font-size: 20rpx;
				color: #CCCED4;
			}
		}
	}
	.list_item {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 20rpx 24rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		border: 2rpx solid #EBEEF5;
		box-sizing: border-box;
		margin-top: 24rpx;
		gap:20rpx;
		.file_icon{
			flex-shrink: 0;
			width: 80rpx;
			height: 80rpx;
		}
		.file_info{
			flex:1;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			.file_name{
				width: 100%;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.file_size{
				display: flex;
				width: 100%;
				gap: 20rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				margin-top: 8rpx;
			}
		}
		.file_btn{
			flex-shrink: 0;
			display: flex;
			gap:24rpx;
			font-weight: 400;
			font-size: 28rpx;
			.del{
				color: #F56C6C;
				&.disabled{
					color: #C0C4CC;
				}
			}
			.download{
				color: #2E64FA;
			}
		}
	}
	.page_foot{
		position: fixed;
		display: flex;
		align-items: center;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0 24rpx;
		height: 130rpx;
		background-color: #FFFFFF;
		gap: 32rpx;
		.del{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 240rpx;
			height: 90rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
			border: 2rpx solid #F56C6C;
			font-weight: 400;
			font-size: 28rpx;
			color: #F56C6C;
			&.disabled{
				color: #C0C4CC;
				border: 2rpx solid #C0C4CC;
			}
		}
		.submit {
			flex:1;
			height: 90rpx;
			background-color: #2E64FA;
			border-radius: 8rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			&.disabled{
				background-color: #C0C4CC;
			}
		}
	}
</style>