ezhizao_dms_h5/pages/factoryInspection/form.vue

<template>
	<view class="page-container uni-column">
		<view class="carrier-info uni-column">
			<view class="carrier-code uni-row">
				<text>箱号</text>
				<text style="margin-left: 24rpx;">{{processInspecion.lot.allCarrierName}}</text>
			</view>
			<view class="info-row uni-row">
				<view class="label">图号</view>
				<view class="value">{{ processInspecion.lot.drawingNumber }}</view>
			</view>
			<view class="info-row uni-row">
				<view class="label">批次号</view>
				<view class="value">{{ processInspecion.lot.lotCode }}</view>
			</view>
			<view class="info-row uni-row">
				<view class="label">工艺版本</view>
				<view class="value">{{ processInspecion.lot.technologyVersion }}</view>
			</view>
			<view class="info-row uni-row">
				<view class="label">产品描述</view>
				<view class="value">{{processInspecion.lot. productDescription }}</view>
			</view>
			<view class="info-row uni-row">
				<view class="label">当前工序</view>
				<view class="value">{{ processInspecion.lot.processAlias }}</view>
			</view>
			<view class="info-row uni-row">
				<view class="label">检查载具</view>
				<view class="value">{{ processInspecion.lot.inspectionCarrierCode }}
					{{ processInspecion.isInspectionCarrierChanged == 1 ? '(已解绑)' : ''}}
				</view>
			</view>
			<view class="info-row uni-row">
				<view class="drawing-btn" @click="handleDrawingMenu">图纸信息</view>
			</view>
		</view>

		<!-- 废品信息 -->
		<view class="title unfit-title uni-row">
			<text>检查信息</text>
			<view v-if="editable()" class="add-btn" @click="handleAddWaste">添加</view>
		</view>
		<view class="unfit-container">
			<view class="unfit-item-container uni-column" v-for="(item, index) in unfitInfos" :key="index">
				<view class="resu uni-row">
					<view class="label">检查标准</view>
					<view class="value" style="margin-left:16rpx;width: 400rpx;">{{ item.checkStandard }}</view>
					<uni-icons v-if="editable()" type="trash" size="24" style="margin-left: 55rpx;" color="#fc6565"
						@click="handleDelWaste(index)" />
				</view>

				<!-- <view class="result uni-row">
				<view class="label">检查结果</view>
				<input v-model="item.checkResult" placeholder="请输入检查结果" />
				<view class="label" style="text-align: right; padding-right: 16rpx;">数量
				</view>
				<input class="number" type="number" @blur="rejectNumberChange" v-model="item.rejectNum"
					placeholder="" />
			</view> -->
				<view class="resu uni-row">
					<view class="label">检查结果</view>
					<input v-if="editable()" v-model="item.checkResult" placeholder="请输入检查结果" maxlength="50" />
					<view v-else class="value" style="margin-left:16rpx;">{{ item.checkResult }}</view>
				</view>
				<view class="resu uni-row">
					<view class="label">超差范围</view>
					<input v-if="editable()" v-model="item.exceedLimits" placeholder="请输入超差范围" maxlength="50" />
					<view v-else class="value" style="margin-left:16rpx;">{{ item.exceedLimits }}</view>
				</view>
				<view class="resu uni-row">
					<view :class="!editable() ? 'label' : ''">检查量</view>
					<input v-if="editable()" class="number" type="number" @blur="rejectNumberChange"
						v-model="item.examiningNum" placeholder="" />
					<view v-else class="number value" style="margin-left:16rpx;">{{ item.examiningNum }}</view>
					<view :class="!editable() ? 'label' : ''" style="margin-left: 16rpx;">不良品量</view>
					<input v-if="editable()" class="number" type="number" @blur="rejectNumberChange"
						v-model="item.disqualificationNum" placeholder="" />
					<view v-else class="value" style="margin-left:16rpx;">{{ item.disqualificationNum }}</view>
				</view>
			</view>
		</view>
		<!-- 拍照上传部分 -->
		<view class="title unfit-title uni-row">
			<text>拍照上传</text>
		</view>
		<view class=" uni-row" style="padding: 24rpx;
		margin: 0 16rpx;
		background-color: #ffffff;
		border-radius: 12rpx;">
			<uni-file-picker v-model="photoList" :readonly="!editable()" return-type="array" :image-styles="imageStyles"
				@select="select" file-mediatype="image" class="my-files" @delete="handleDeletedPhoto"></uni-file-picker>
		</view>
		<!-- 咨询部分 -->
		<view class="title unfit-title uni-row">
			<text>咨询</text>
		</view>
		<view class="consultation-container uni-column">
			<view class="consultation-item-container" v-for="(item, index) in consultations" :key="index">
				<view class="question uni-column">
					<view class="label uni-row">
						<text>问题描述</text>
						<text :style="selectType(item)">{{item.consultDepartment == 0?'技术':'品管'}}
							{{ selectText(item) }}</text>
					</view>
					<view class="content">{{ item.content }}</view>
				</view>
			</view>
		</view>

		<!-- 报工部分 -->
		<view class="daywork-container">
			<view class="result uni-row">
				<view class="label" style="margin-top: 20rpx;width: 170rpx;">出厂检状态</view>
				<uni-data-checkbox :disabled="!editable()" style="margin-top: 20rpx;"
					v-model="processInspecion.inspectionStatus" :localdata="range"
					@change="handleChangeInspecionStatus"></uni-data-checkbox>
			</view>
			<view class="result uni-row">
				<view class="label" style="margin-top: 20rpx; margin-right: 10rpx;">放行状态</view>
				<uni-data-checkbox :disabled="true" style="margin-top: 20rpx;" v-model="processInspecion.status"
					:localdata="range"></uni-data-checkbox>
			</view>
			<view v-if="editable()">
				<view class="list-title uni-row" style="margin-top: 16rpx;">
					<text class="label">检测完成</text><text>&nbsp;否</text>
					<!-- <switch :checked="isAllChecked" class="switch" :disabled="!showTransfer || processInspecion.flag"
						@change="switchAllCheckChange" style="transform:scale(0.7);margin-top: -16rpx;"
						color="rgba(255,85,85,1)" /> -->
					<zero-switch v-model="isAllChecked" @change="switchAllCheckChange"
						active-color="rgba(103, 195, 55, 1.0)" :size="18"
						style="transform:scale(0.9);margin-top: -9rpx;"></zero-switch>
					<text>是</text>
				</view>
			</view>
			<view class="remark uni-row">
				<view class="label">备注</view>
				<textarea v-if="editable()" v-model="processInspecion.remark" maxlength="999" />
				<view v-else class="value">{{ processInspecion.remark }}</view>
			</view>

			<view v-if="editable()" class="btns-container uni-row">
				<view class="finished-btn" @click="endWork">提交</view>
				<view class="question-btn uni-column" @click.stop="handleAddConsultation">
					<uni-icons type="headphones" size="24" />
					<text>咨询</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance

	} from 'vue'
	import {
		onLoad,
		onReady,
		onUnload,
		onShow
	} from '@dcloudio/uni-app'
	import {
		store
	} from '@/store/index.js'
	import {
		saveFactoryInspecion,
		selectInspecion
	} from '@/api/business/processInspection.js'
	import {
		getInspectionStandardsList
	} from '@/api/business/inspectionStandards.js'
	import {
		getURL
	} from '@/api/sys/user.js'
	const lot = ref({})
	const isEventTriggered = ref(false); // 创建一个标志位
	const isAllChecked = ref(false)
	const unfitInfos = ref([]) //废品信息
	const consultations = ref([]) //咨询信息
	const flag = ref(false)
	// 创建一个引用来存储最后一次请求的时间戳
	const lastRequestTimestamp = ref(0);
	const processInspecion = ref({
		remark: "",
		rejectNum: 0,
		examiningNum: 0,
		status: 0,
		inspectionStatus: 0
	})
	const urlList = JSON.parse(uni.getStorageSync('baseUrl'))
	const webHost = ref(urlList.baseUrl)
	const photoList = ref([])
	const selected = ref([]);
	const selectedPhotos = ref([])
	const imageStyles = {
		width: 60,
		height: 60
	}
	const initStatus = ref(0)
	const editable = () => {
		if (store.userInfo.roles.some(item => item.roleKey == 'factoryInspection')) {
			return true
		} else {
			return false
		}
	}

	function switchAllCheckChange(event) {
		console.log(event)
		// if (event.detail.value) {
		if (event) {
			processInspecion.value.isAllChecked = 1
		} else {
			processInspecion.value.isAllChecked = 0
		}
	}

	const consul = [{
		value: 0,
		text: "待确认",
		type: "color: #fcab53"
	}, {
		value: 2,
		text: "合格",
		type: "color: #55ff7f"
	}, {
		value: 1,
		text: "不合格",
		type: "color: #ff0c2c"
	}]

	const range = [{
		value: 0,
		text: "待确认",
		type: "color: #fcab53"
	}, {
		value: 1,
		text: "合格",
		type: "color: #55ff7f"
	}, {
		value: 2,
		text: "不合格",
		type: "color: #ff0c2c"
	}]

	/***************************** 页面生命周期函数 *****************************/
	function init() {
		const instance = getCurrentInstance().proxy
		const eventChannel = instance.getOpenerEventChannel();

		eventChannel.on('factoryInspectionFrom', function(data) {

			console.log('acceptDataFromOpenerPage', data)
			if (data && data.data) {
				processInspecion.value.lot = data.data;
				//getOringicalList()
			}
		})

	}
	onShow(() => {
		uni.$off('addWasteInfoEvent');
	})
	onLoad(() => {
		uni.$off('addWasteInfoEvent');
		console.log(store.processInspection)
		console.log(flag.value)
		if (!flag.value) {
			console.log("888")
			if (store.processInspection != null) {
				uni.showLoading({
					title: '加载中'
				});
				processInspecion.value = store.processInspection
				isAllChecked.value = (processInspecion.value.isAllChecked == 1)
				selectInspecion(processInspecion.value).then(res => {
					if (res.code == 200) {
						processInspecion.value = res.data;
						processInspecion.value.flag = false
						unfitInfos.value = res.data.processInspectionDetails;
						initStatus.value = res.data.inspectionStatus
						consultations.value = res.data.dayworkItemConsults;
						selectedPhotos.value = res.data.processInspectionPictureList
						photoList.value = res.data.processInspectionPictureList.map(item => {
							return {
								...item,
								url: webHost.value + item.url
							};
						});
						console.log("res", res);
						console.log(processInspecion.value)
						uni.hideLoading();
						// getInspecion();
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg,
							duration: 2000
						})
					}
				});
			} else {
				init()
			}
		}
	})

	/***************************** 定义了一些方法 *****************************/
	//咨询文本
	function selectText(item) {
		// for (var i = 0; i < consul.length; i++) {
		// 	if (item.status == consul[i].value) {
		// 		return consul[i].text
		// 	}
		// }
		if (item.consultResultId == 0) {
			return '待确认'
		} else {
			return item.result
		}
	}

	function upLoadImageHandler(arg) {
		return getURL(arg).then(res => {
			let data = JSON.parse(res)
			selectedPhotos.value.push({
				url: data.fileName,
				pictureName: data.originalFilename,
				tenantId: store.tenantId
			})
			photoList.value.push({
				url: data.fileName,
				pictureName: data.originalFilename
			})
			console.log(selectedPhotos.value)
			// uni.showToast({
			// 	icon: 'none',
			// 	title: selectedPhotos.value.length,
			// 	duration: 2000
			// })
		})
	}

	function select(e) {
		console.log(e)
		const {
			tempFilePaths,
			tempFiles
		} = e
		uni.showLoading({
			title: '图片上传中',
			mask: true
		});
		// tempFiles.forEach((item, index) => {
		// 	upLoadImageHandler({
		// 		filePath: tempFilePaths[index],
		// 		name: item.name
		// 	})
		// })
		// 创建一个空的Promise数组
		let uploadPromises = tempFiles.map((item, index) => {
			return upLoadImageHandler({
				filePath: tempFilePaths[index],
				name: item.name
			});
		});

		// 使用Promise.all等待所有图片上传完成
		Promise.all(uploadPromises).then(() => {

			// 上传完成后关闭加载提示
			uni.hideLoading();
		}).catch(() => {
			// 如果有错误发生，也关闭加载提示
			uni.hideLoading();
		});
	}

	function handleChangeInspecionStatus(e) {
		console.log(e.detail.value)
		//没有咨询
		if (consultations.value && consultations.value.length == 0) {
			processInspecion.value.status = e.detail.value
		}
	}

	function handleDeletedPhoto(e) {
		let fileName = selectedPhotos.value.map(info => info.pictureName)
		const firstSlashIndex = e.tempFile.url.lastIndexOf('/');
		const lastSlashIndex = e.tempFile.url.lastIndexOf('_');
		const type = e.tempFile.url.substring(firstSlashIndex + 1, lastSlashIndex)
		const pictureName = e.tempFile.url.substring(firstSlashIndex + 1, lastSlashIndex) + e.tempFile.url.substring(e
			.tempFile.url.lastIndexOf('.') - 1 + 1);;
		let index = -1; // 初始化 index 为 -1，表示未找到

		// 首先检查 e.tempFile.name 是否存在
		if (fileName.findIndex(name => name === e.tempFile.name) !== -1) {
			index = fileName.findIndex(name => name === e.tempFile.name);
		}
		// 如果 e.tempFile.name 不存在，检查 e.tempFile.pictureName 是否存在
		else if (fileName.findIndex(name => name === e.tempFile.pictureName) !== -1) {
			index = fileName.findIndex(name => name === e.tempFile.pictureName);
		}
		// 如果以上两个都不存在，检查 pictureName 是否存在
		else if (fileName.findIndex(name => name === pictureName) !== -1) {
			index = fileName.findIndex(name => name === pictureName);
		}
		selectedPhotos.value.splice(index, 1)
	}

	function handleDrawingMenu() {
		// 对 technologicalProcessDetailId 进行URL编码
		var encodedId = encodeURIComponent(processInspecion.value.lot.productId);
		var enTechnologicalProcessId = encodeURIComponent(processInspecion.value.lot.technologicalProcessId);
		var enprocessCode = encodeURIComponent(processInspecion.value.lot.processCode);
		var encodeCode = encodeURIComponent(processInspecion.value.lot.lotCode);
		var enProcessAlias = encodeURIComponent(processInspecion.value.lot.processAlias);
		var enIsWasteRecycling = encodeURIComponent(processInspecion.value.lot.isWasteRecycling);
		var enIsAmend = encodeURIComponent(processInspecion.value.lot.isAmend);
		// 构建查询参数字符串
		var queryParam =
			`param1=${encodedId}&param2=${encodeCode}&param3=${enprocessCode}&param4=${enTechnologicalProcessId}&param5=${enProcessAlias}&param6=${enIsWasteRecycling}&param7=${enIsAmend}`;

		// 使用模板字符串构建完整的URL
		var navigateUrl = `/pages/drawingMenu/index?${queryParam}`;

		// 导航到指定页面
		uni.navigateTo({
			url: navigateUrl
		});
	}

	function getOringicalList() {
		console.log(processInspecion.value)
		//查询该产品，当前工序，当前检查绑定的检查
		getInspectionStandardsList({
			productId: processInspecion.value.lot.productId,
			processId: processInspecion.value.lot.processId,
			inspectionCode: "factoryInspection"
		}).then(res => {
			unfitInfos.value = res.rows.map(item => {
				// 映射新的数组，包含 inspectionStandardsId 和 checkStandard 属性
				return {
					inspectionStandardsId: item.id, // 从 item 中获取 id
					checkStandard: item.standard // 从 item 中获取 standard
				};
			});
		})
	}

	const rejectNumberChange = () => {
		let sumDisqualificationNum = 0
		let sumExaminingNum = 0
		unfitInfos.value.forEach(v => {
			sumDisqualificationNum += (v.disqualificationNum != null ? Number(v.disqualificationNum) : 0)
			sumExaminingNum += (v.examiningNum != null ? Number(v.examiningNum) : 0)
		})
		processInspecion.value.disqualificationNum = sumDisqualificationNum
		processInspecion.value.examiningNum = sumExaminingNum
		console.log(processInspecion.value)
	}

	//查询咨询列表
	function getInspecion() {
		processInspecion.value = store.processInspection
		selectInspecion(processInspecion.value).then(res => {
			console.log("咨询", res);
			if (res.code == 200) {
				console.log("res", res);
			} else {
				uni.showToast({
					icon: 'none',
					title: res.msg,
					duration: 2000
				})
			}
		});
	}

	//结束报工按钮
	function endWork() {
		let unf = unfitInfos.value;
		for (var i = 0; i < unfitInfos.value.length; i++) {

			if (unf[i].examiningNum < 0 || unf[i].disqualificationNum < 0) {
				uni.showToast({
					icon: 'none',
					title: '检查量，不良品量不能小于0',
					duration: 2000
				})
				return
			}
			if (unf[i].examiningNum > processInspecion.value.lot.pudName) {
				uni.showToast({
					icon: 'none',
					title: '检查量不能大于投产量'
				})
				return
			}
		}


		if (processInspecion.value.disqualificationNum > processInspecion.value.lot.pudName) {
			uni.showToast({
				icon: 'none',
				title: '不良品量不能大于投产量'
			})
			return
		}

		save();


	}


	function save() {
		const currentTime = Date.now();

		// 检查是否已经过去了 2 秒
		if (currentTime - lastRequestTimestamp.value < 2000) {
			// 如果在 2 秒 内已经点击，那么不执行
			uni.showToast({
				icon: 'none',
				title: `请勿重复点击`,
				duration: 2000
			})
			return;
		}
		lastRequestTimestamp.value = currentTime;
		let pages = getCurrentPages();
		processInspecion.value.dayworkItemConsults = consultations.value;
		processInspecion.value.processInspectionDetails = unfitInfos.value;
		processInspecion.value.user = store.userInfo;
		processInspecion.value.tenantId = store.tenantId
		processInspecion.value.reviewerId = store.userInfo.userId
		processInspecion.value.inspectionCarrierId = processInspecion.value.lot.inspectionCarrierId
		processInspecion.value.inspectionCarrierCode = processInspecion.value.lot.inspectionCarrierCode
		processInspecion.value.processInspectionPictureList = selectedPhotos.value
		console.log(processInspecion.value)
		saveFactoryInspecion(processInspecion.value).then(res => {
			if (res.code == 200) {
				let index = 0;

				for (let i = 0; i < pages.length; i++) {

					if (pages[i].$page.fullPath == "/pages/factoryInspection/index") {

						index = pages.length - i - 1;
					}
				}
				console.log("index", index);
				uni.navigateBack({
					delta: index
				});
			} else {
				uni.showToast({
					icon: 'none',
					title: res.msg,
					duration: 2000
				})
			}
		});
	}




	//咨询样式
	function selectType(item) {
		for (var i = 0; i < consul.length; i++) {
			if (item.status == consul[i].value) {
				return consul[i].type
			}
		}
	}

	const addWasteInfo = (data) => {
		console.log(data, "55555555")
		flag.value = true
		var info = {
			inspectionStandardsId: data.id,
			checkStandard: data.standard
		}
		unfitInfos.value.push(info)
		console.log(data)
	}
	const addConsultation = (data) => {
		let info = data
		info.forEach(item => {
			item.status = 0
		})
		consultations.value = consultations.value.concat(info)
		isEventTriggered.value = true; // 更新标志位状态
		processInspecion.value.status = 0
	}

	/***************************** 定义了一些事件 *****************************/
	// 添加不合格信息
	const handleAddWaste = () => {
		flag.value = true
		// 监听事件，暂时不用，后续会使用
		uni.$on('addWasteInfoEvent', (data) => {
			addWasteInfo(data)
		})
		var encodedId = encodeURIComponent(processInspecion.value.lot.productId);
		var enprocessId = encodeURIComponent(processInspecion.value.lot.processId);
		// 构建查询参数字符串
		var queryParam = `param1=${encodedId}&param2=${enprocessId}`;

		// 使用模板字符串构建完整的URL
		var navigateUrl = `/pages/factoryInspection/options?${queryParam}`;

		// 导航到指定页面
		uni.navigateTo({
			url: navigateUrl
		});

	}
	// 删除不合格信息
	const handleDelWaste = (index) => {
		uni.showModal({
			title: '提示',
			content: '确定删除该项？',
			success: function(res) {
				if (res.confirm) {
					unfitInfos.value.splice(index, 1)
				} else if (res.cancel) {
					return
				}
			}
		})
	}

	// 咨询
	const handleAddConsultation = () => {
		console.log("9999")
		isEventTriggered.value = false;
		// 监听事件
		uni.$once('addWasteConsultationEvent', (data) => {
			if (!isEventTriggered.value) {
				// 如果事件尚未触发，则执行事件触发逻辑
				addConsultation(data)

			}
		})

		uni.navigateTo({
			url: "/pages/factoryInspection/consultation",
			success: (res) => {
				// 通过eventChannel向被打开页面传送数据
				res.eventChannel.emit("factoryInpsectionConsultation", {
					data: processInspecion.value.lot
				})
			}
		})

	}
</script>

<style lang="scss">
	.page-container {
		// height: 100%;
		background-color: #ececec;
		font-size: 28rpx;

		>.title {
			font-weight: 700;
			margin: 24rpx 16rpx;
		}
	}

	.carrier-info {
		margin: 32rpx 16rpx 0 16rpx;
		padding: 24rpx;
		background-color: #ffffff;
		border-radius: 8rpx;

		.carrier-code {
			font-size: 32rpx;
			font-weight: 700;
		}

		.info-row {
			margin-top: 16rpx;
			color: #767676;

			.label {
				width: 160rpx;
			}

			.drawing-btn {
				padding: 12rpx 32rpx;
				background-color: #0055ff;
				color: #ffffff;
				border-radius: 12rpx;
				margin-left: auto;
				font-size: 28rpx;
			}

			.value {
				flex: 1;

				textarea {
					flex: 1;
					border: 1px solid #888888;
					box-sizing: border-box;
					padding: 16rpx;
				}
			}
		}
	}

	.unfit-title {
		margin-bottom: 24rpx;
		justify-content: space-between;
		align-items: center;

		text {
			font-size: 28rpx;
			font-weight: 700;
		}

		.add-btn {
			padding: 12rpx 32rpx;
			background-color: #a4adb3;
			color: #ffffff;
			border-radius: 12rpx;
			font-size: 24rpx;
		}
	}

	.unfit-container {
		padding: 24rpx;
		margin: 0 16rpx;
		background-color: #ffffff;
		border-radius: 12rpx;

		.unfit-item-container {
			position: relative;

			>* {
				margin-bottom: 24rpx;
			}

			.title {
				font-weight: 700;
				justify-content: space-between;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.standard {}

			.resu {
				width: 100%;
				align-items: center;

				input {
					margin-left: 20rpx;
					width: 200rpx;
					height: 56rpx;
					flex: 1;
					border: 1px solid #9f9f9f;
					font-size: 28rpx;
				}
			}

			.result {
				align-items: center;
				border-bottom: 1px solid #9f9f9f;
				padding-bottom: 32rpx;

				.label {
					flex: 1;
				}

				input {
					width: 280rpx;
					height: 56rpx;
					border: 1px solid #9f9f9f;
					font-size: 28rpx;

					&.number {
						width: 104rpx;
						text-align: center;
					}
				}
			}
		}

		.unfit-item-container:last-child {
			.result {
				border-bottom: none;
				padding-bottom: 0;
			}
		}
	}

	.consultation-container {
		margin: 0 16rpx;
		padding: 24rpx;
		background-color: #ffffff;
		border-radius: 8rpx;

		.consultation-item-container {
			margin-bottom: 24rpx;
			border-bottom: 2px solid #888888;
			padding-bottom: 24rpx;
		}

		.consultation-item-container:last-child {
			margin-bottom: 0;
			border-bottom: 0;
			padding-bottom: 0;
		}

		.question,
		.answer {
			.label {
				justify-content: space-between;
				margin-bottom: 16rpx;
				font-weight: 700;
			}

			.content {
				line-height: 40rpx;
			}
		}

		.answer {
			margin-top: 24rpx;
		}
	}

	.daywork-container {
		margin-top: 24rpx;
		padding: 24rpx;
		background-color: #ffffff;
		border: 1px solid #bcbcbc;

		.result {
			align-items: center;

			.label {
				width: 112rpx;
			}

			input {
				flex: 1;
				height: 56rpx;
				border: 1px solid #9f9f9f;
				font-size: 28rpx;
				text-align: center;
			}
		}

		.switch {
			margin-top: -8rpx;
			align-items: center;
		}

		.remark {
			margin-top: 24rpx;

			.label {
				width: 112rpx;
			}

			textarea {
				flex: 1;
				border: 1px solid #9f9f9f;
				height: 168rpx;
			}
		}

		.btns-container {
			margin-top: 24rpx;

			.finished-btn {
				display: flex;
				flex: 1;
				height: 80rpx;
				background-color: #fc6565;
				color: #ffffff;
				text-align: center;
				justify-content: center;
				align-items: center;
				border-radius: 8rpx;
			}

			.question-btn {
				width: 80rpx;
				align-items: flex-end;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				text {
					font-size: 24rpx;
				}
			}
		}
	}

	.my-files {
		display: flex;
		justify-content: center;

		:deep(.uni-file-picker__container) {
			flex-direction: row;

		}
	}
</style>