inspectionProcessing.vue

<template>
	<view class="inspection-form">
		<view class="form-container">
			<view class="form-screenshot">
				<!-- <img
					ref="screenshotRef"
					:src="screenshotUrl"
					crossOrigin
					width="100%"
				></img> -->
				<InspectionPainter
					v-if="screenshotUrl"
					ref="screenshotRef"
					:image-url="screenshotUrl"
				/>
			</view>
			<view class="processing-remark-title">{{ t('maintenance.common.remark') }}</view>
			<uv-textarea
				v-model="remarkValue"
				:placeholder="t('maintenance.common.input')"
				:height="110"
				border="none"
				placeholderStyle="font-size: 13px;"
				customStyle="background-color: #F2F3F6;margin-top: 10px;"
			></uv-textarea>
		</view>
		<view class="processing-btn-box" v-if="monitorInfoData.status==1">
      <view class="submitBtn" @click="goBackPage">{{ t('app.common.back') }}</view>
      <view class="submitBtn submitBtnSubmit" @click="handleSubmit(1)">{{ t('button.submit') }}</view>
			
     <!-- <uv-button class="submitBtn" text="返回" :customStyle="backCustomStyle" @click="goBackPage"></uv-button>
			<uv-button class="submitBtn submitBtnSubmit" type="primary" text="提交" :customStyle="submitCustomStyle" @click="handleSubmit(1)"></uv-button -->

    </view>
		<view class="processing-btn-box" v-if="monitorInfoData.status==2">
      <view class="submitBtn failBtnSubmit" @click="handleSubmit(2)">{{ t('button.fail') }}</view>
      <view class="submitBtn submitBtnSubmit" @click="handleSubmit(3)">{{ t('button.passAndComplete') }}</view>
			
     <!-- <uv-button class="submitBtn failBtnSubmit" type="error" text="不通过" :customStyle="failCustomStyle" @click="handleSubmit(2)"></uv-button>
			<uv-button class="submitBtn submitBtnSubmit" type="primary" text="通过并完成" :customStyle="submitCustomStyle" @click="handleSubmit(3)"></uv-button>
		 -->
    </view>
	</view>
</template>

<script setup>
	import { ref, } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { doPatrolRecordFormSaveApi } from '@/api';
	import { getStageObj } from '@/utils'
	import { getImageBase64, getFormParams } from './utils'
	import InspectionPainter from './components/inspection-painter.vue';
  import {
    t
  } from '@/plugins/index.js'
	
	const backCustomStyle = ref({
		'height':'48px',
		'background':' #F2F3F6',
		'border-radius': '8px',
		'border-color':'rgba(109,119,143,0.34)',
	})
	const submitCustomStyle = ref({
		'height':'48px',
		'background': 'linear-gradient( 270deg, #387CF5 0%, #5B9FF7 100%)',
		'border-radius': '8px',
	})
	const failCustomStyle = ref({
		'height':'48px',
		'color': '#FFFFFF',
		'background': 'linear-gradient( 270deg, #FF6772 0%, #FF7F88 100%)',
		'border-radius': '8px',
	})
	const remarkValue = ref('')
	const monitorInfoData = ref({})
	const rules = {
	}
	const screenshotRef = ref(null)
	const screenshotUrl = ref('')
	// 返回上一页
	function goBackPage() {
		uni.navigateBack({
			delta: 1,
		});
	}
	// 提交表单
	async function handleSubmit(val) {
		console.log('handleSubmit', remarkValue.value, screenshotRef)
		// const strBase64 = await getImageBase64(screenshotRef.value)
		// const strBase64 = await screenshotRef.value.getCanvasBase64H5()
		const strBase64 = await screenshotRef.value.getCanvasBase64()
		
		if (strBase64) {
			const storeInfo = getStageObj('store')
			const params = {
				result:val,
				recordId: monitorInfoData.value.id,
				remark: remarkValue.value,
				picBase64s:[strBase64],
			}
			console.log('params', params)
			doPatrolRecordFormSaveApi(params).then(res => {
				console.log('doPatrolRecordFormSaveApi', res)
				uni.showToast({icon: 'success', title: t('message.submitSuccess')})
        uni.navigateBack({
          delta:3
        })
				// uni.redirectTo({
				// 	url: `/pages/inspection/inspectionRecord?origin=processing`,
				// })
			})
		} else {
			console.warn('获取base64图片数据失败')
		}
	}
	onLoad((options) => {
		console.log('onLoad', options)
		screenshotUrl.value = `https://store.keliuyun.com/images/${options.pic}`
		// 从localStorage中，获取监控点相关信息
		const targetData = uni.getStorageSync('inspectionDetailData')
		monitorInfoData.value = JSON.parse(targetData) || {}
		console.log('monitorInfoData.value',monitorInfoData.value)
		// monitorInfoData.value.status = 2
	})
</script>

<style lang="scss" scoped>
	.inspection-form {
		background: #F2F3F6;
		height: calc(100vh - 44px);
		padding: 10px 10px 10px 10px;
		.processing-btn-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20px;
			.submitBtn{
				width: 46vw;
				height: 48px;
        line-height: 48px;
        text-align: center;
				background: #fff;
				border-radius: 8px;
				font-family: PingFangSC, PingFang SC;
				font-size: 16px;
			}
			.submitBtnSubmit{
				color: #FFFFFF;
				background: linear-gradient( 270deg, #387CF5 0%, #5B9FF7 100%);
			}
			.failBtnSubmit{
				color: #FFFFFF;
				background: linear-gradient( 270deg, #FF6772 0%, #FF7F88 100%);
			}
		}
	}
	
	.form-container {
		background: #FFFFFF;
		border-radius: 8px;
		padding: 12px 12px 12px 12px;
		
		.problemList-button {
			width: 60px;
			height: 24px;
			background-color: #F2F3F6;
			/* text-align: center; */
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 30px;
		}
		.problem-list-container {
			display: flex;
			flex-wrap: wrap;
			border-bottom: 1px solid #e8e8e9;
			.problem-tag {
				margin-bottom: 10px;
				margin-right: 10px;
			}
		}
		.problem-empoty {
			height: 40px;
			line-height: 40px;
			width: 100%;
			text-align: center;
		}
		
		.processing-remark-title{
			margin: 14px 0 12px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 14px;
			color: #202328;
			line-height: 20px;
		}
	}
</style>
<style lang="scss">
	.inspection-problem-select {
		background-color: #FFF;
		.uv-action-sheet__item-wrap {
			max-height: 60vh;
			overflow-y: auto;
		}
	}
	.submitBtn .uv-button .uv-button__text{
		font-size: 16px!important;
		color: #6D778F!important;
	}
	.submitBtnSubmit .uv-button .uv-button__text{
		color: #FFFFFF!important;
	}
</style>