tcm-cloud-uin-app/pages/ypczk/zkTask/zkTaskDetail/djhjTaskDetail.vue

<template>
	<view class="djhjTaskDetail">
		<!-- 任务进度 -->
		<view class="djhjTaskDetail_progress">
			<text class="djhjTaskDetail_progress_title">任务进度：<text class="djhjTaskDetail_progress_text">4/10</text></text>
			<text class="djhjTaskDetail_progress_title">不合格数<text class="djhjTaskDetail_progress_text">1</text></text>
		</view>
		<!-- 创建人 -->
		<view class="creator">
			<text class="creator_title">创建人<text class="creator_text">张星</text></text>
		</view>
		<!-- 检查结果 -->
		<uni-card padding="0" spacing="0" v-for="(item,index) in pageData.djhjList" class="djhjList">
			<view class="djhjList_title">
				<view class="djhjList_text">检查项目</view>
				<view class="djhjList_righttext">{{item.item}}</view>
			</view>
			<view class="djhjList_title">
				<view class="djhjList_text">检查方式</view>
				<view class="djhjList_righttext">{{item.mean}}</view>
			</view>
			<view class="djhjList_title">
				<view class="djhjList_text">检查内容</view>
				<view class="djhjList_righttext">{{item.content}}</view>
			</view>
			<view class="djhjList_title">
				<view class="djhjList_text">检查结果</view>
				<view class="djhjList_righttext" :class="item.result=='不合格'? 'djhjList_redtext' : 'djhjList_righttext'">{{item.result}}</view>
			</view>
			<view class="djhjList_title" v-if="item.result=='不合格'">
				<view class="djhjList_text">原因</view>
				<view class="djhjList_righttext">{{item.reason}}</view>
			</view>
		</uni-card>
		<!-- 图片上传 -->
		<view class="image_upload">
			<uni-card>
				<uni-section title="图片上传" type="line"></uni-section>
				<view class="img_upload">
					<uni-file-picker limit="4" :v-model="pageData.imageList" @select="selectImg" @delete="deleteImg"></uni-file-picker>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script setup>
import { reactive } from "vue";
const pageData=reactive({
	djhjList:[
		{
			item:'项目111',
			mean:'方式1111',
			content:'内容1111',
			result:'结果1111',
			reason:'原因1111'
		},
		{
			item:'项目222',
			mean:'方式2222',
			content:'内容2222',
			result:'结果2222',
			reason:'原因2222'
		}
	],
	imageList:[]
})

// 选中图片，将选中的图片添加列表
const selectImg=(e)=>{
	console.log(e)
	e.tempFiles.forEach(item=>{
		pageData.imageList.push(item)
	})
}

// 删除图片，并将其从列表中删除
const deleteImg=(e)=>{
	console.log(e)
	let index=0
	index = pageData.imageList.indexOf(e.tempFilePaths)
	pageData.imageList.splice(index, 1)
}
</script>

<style lang="scss" scoped>
@import './index.scss'
</style>