tcm-cloud-uin-app/pages/ypczk/zkTask/djhjTask.vue

<template>
	<view class="djhjTask">
		<!-- 任务进度 -->
		<view class="djhjTask_progress">
			<text class="djhjTask_progress_title">任务进度：<text class="djhjTask_progress_text">4/10</text></text>
			<text class="djhjTask_progress_title">不合格数<text class="djhjTask_progress_text">1</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="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>
			<view class="button_group">
				<view class="bhg_button" @click="bhgCheck()">不合格</view>
				<view class="hg_button" @click="hgCheck()">合格</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 class="operator_button">
			<button class="pass_button" @click="pass">一键通过</button>
			<!-- 如果还有数据按钮显示为“下一个”，数据全部加载完毕显示为“完成” -->
			<view class="finish_button_grop">
				<button class="next_or_finish_button" v-if="pageData.djhjList!=0" @click="next">下一个</button>
				<button class="next_or_finish_button" @click="finish" v-else>完成</button>
			</view>	
		</view>
		<!-- 不合格弹出框 -->
		<uni-popup ref="bhgDialog" type="dialog">
			<uni-popup-dialog type="info" mode="input" confirmText="提交" cancelText="取消" title="不合格原因" value="" placeholder="请填写不合格原因" @confirm="bhgDialogConfirm"
				@close="bhgDialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref,reactive } from "vue";

const pageData=reactive({
	djhjList:[
		{
			item:'煎汤场所和设备设施',
			mean:'实地检查',
			content:'设有浸泡、煎药、清洗等功能区域，有分区标识，实行定置管理，能避免作业差错和交叉污染；',
			result:'待检'
		},
		{
			item:'煎药操作规范状况',
			mean:'实地检查',
			content:'有必要安全消防等防护措施，有进排水、通风防尘、防动物昆虫侵入等设施；',
			result:'不合格',
			reason:'无防尘措施'
		}
	],
	imageList:[]
})

// 定义不合格弹出输入框
const bhgDialog=ref()

// 提交不合格原因
const bhgDialogConfirm=(val)=>{
	// 获取输入的不合格原因
	console.log(val)
}

// 取消不合格弹出输入框
const bhgDialogClose=()=>{
	// 关闭不合格弹出框
	bhgDialog._value.close()
}

// 选中图片，将选中的图片添加列表
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)
}

// 不合格
const bhgCheck=()=>{
	// 打开不合格弹出输入框
	bhgDialog._value.open()
}

// 合格
const hgCheck=()=>{
	console.log("合格")
}

// 一键通过
const pass=()=>{
	console.log("一键通过")
}

// 下一个
const next=()=>{
	console.log("下一个")
}

// 完成
const finish=()=>{
	console.log("完成")
}
</script>

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